May 26, 2015

Tip 61: The problems and solutions of first products

The problems of first products

We often don’t know what the problem or the need is and we just think it’s a good idea. Product teams don’t iterate enough and don’t focus on the people that are going to use the system.

Users are spoiled with fast interfaces and user therefore gets frustrated if the system doesn’t work. The interface needs to become invisible, after using it for a few moments; the interface becomes automatic and intuitive

Work with users, asses the work done and asses the feedback.

Why should you prototype?

  • It’s a highly valuable tool with the purpose of rapidly creating an approximation of the product.
  • It enables to get feedback and insight right away. Try, learn and then improve.
  • Understand concretely what you are proposing – learn how to deal with the unknown unknowns.
  • Don’t stay long on the wrong path. It’s not the final product; it’s not worth going to the extensive details

What strategy should we follow?

  • Focus on the goals of the design – you need concrete goals. Set the goal in early days.
  • Early on you should be thinking on broad ideas and then in details (fonts, colours).
  • Do serial iteration. Consider the cost of changes. Big changes in products represent a very high cost. In software is low in comparison with physical products but it is still substantial. People also tend to get used to software and changes can confuse them and upset them

What should you prototype?

  •         Feel:  how does it look
  •         Implementation: How does it work
  •         Roles: Experience of using the system, basic user vs. advanced users

———

logonewsletter

Subscribe to our monthly newsletter

Receive a summary of the daily tips, files you can work with and other products directly to your inbox!

Have any questions about this post? Contact us, we will be happy to help!

We won’t spam you, we promise.

May 22, 2015

Tip 60: How to make your homepage usable

The main elements to keep in mind are:

Header

  • Company name / logo visible at a short glance
  • Show where the users are, what your company does, and what users can do at your site
  • The upper-left corner is usually the best placement for languages that read from left to right

Content

  • Include a tag line that explicitly summarises what the site or company does. Clean, concrete text
  • Emphasise the highest priority tasks so that users have a clear starting point on the homepage and make sure they are visible and get the attention– upper middle of the page
  • Keep the number of core tasks small (1–4) and the area around them clear
  • Identify and prioritise users’ needs based on real data and observation

Copy

  • Don’t use the word “website” to refer to anything but the totality of the company’s web presence
  • Provide a clear way to find information about the company users still want to know who is behind the service
  • Include a homepage link to an “About Us” section that gives users an overview about the company and links to any relevant details about you, “About <name of company>” is the most recommended name
  • Include a “Contact Us” link on the homepage that goes to a page with all contact information for your company
  • If your site gathers any customer information, include a “Privacy Policy” link on the homepage
  • To label your ‘Home’ page, use: Home, Main or Main Page. Users are already very familiar with these terms.

Design

  • Design the homepage to be clearly different from all the other pages on the site. The users should recognise it for orientation purposes
  • If you provide a “feedback” mechanism, specify the purpose of the link and what happens to that feedback
  • If everything on your homepage is emphasised, then nothing will be important
  • Avoid unnecessary animations: too many graphics, dense text, patterned backgrounds and hard-to-read fonts and headlines
  •  The logo should link back to the home page (except when you are already on the home page). It has pretty much become a standard functionality
  • Changes to homepage can have drastic effects on your site’s traffic

———

logonewsletter

Subscribe to our monthly newsletter

Receive a summary of the daily tips, files you can work with and other products directly to your inbox!

Have any questions about this post? Contact us, we will be happy to help!

We won’t spam you, we promise.

May 21, 2015

Tip 59: How to make a text more readable?

How can you do the copy of your site more readable?

When working with responsive layouts the size of the font must increase and decrease in size to fit the viewport.

The rule of thumb is to use 52-78 characters width (including spaces) and 150% leading (line-height). If you use a column that is wider than this, increase the leading.  Leading should be proportionate to the font size.

If the spacing is correct, the eye will move along the line instead of down the lines.

One note! If you are using white font on dark background you need to increase the leading. Characters need to be wider apart and more space to look right. Visual illusion!

———

logonewsletter

Subscribe to our monthly newsletter

Receive a summary of the daily tips, files you can work with and other products directly to your inbox!

Have any questions about this post? Contact us, we will be happy to help!

We won’t spam you, we promise.

May 20, 2015

Tip 58: How people read can influence your design

Should you be considering how people read when you are designing an application?

People read in three ways:

  • Casual scanning: Casual read picking up words and sentences to get sense of the content. Normally in a F shape pattern.
  • Purpose scanning: When the user scans trying to find specific content they spend more time at the content and then skip words, i.e. Search engine results page.
  • Engaging read: When users really like a text and slowly read the whole text.

Reading is complex so how can you make it better for the user?

1. Assume that people don’t read each word and that they will scan from left to right (if it’s a LTR language) and then find the next step to focus on. People skip words and the brain will fill in the gaps.

2. Bear in mind that users will spend a lot of time on the left hand side trying to find a line that is interesting. That gives the F pattern, when it’s interesting they read the whole line (or most of it) and then back to the left hand side.

3. Pay attention to the line height and make use of font weights to make a page easier to scan

———

logonewsletter

Subscribe to our monthly newsletter

Receive a summary of the daily tips, files you can work with and other products directly to your inbox!

Have any questions about this post? Contact us, we will be happy to help!

We won’t spam you, we promise.

May 19, 2015

Tip 57: Flat design, Skeuomorph or minimal design?

There are a lot of design trends out there. What are they?

Not so long ago the textures, bevels and dropped shadow were the design trend to follow. After this trend, flat colours started with a simpler typography.

Why should you move to minimal flat design?

– Textures make it feel and look more busy
– People are using mobile devices where space is precious
– Interfaces will become simpler
– There is more focus on content
– Makes responsive design more possible

How to do it?

– Add everything you need
– Now remove things until you have the absolute minimum. Ask yourself if you really really need that item?
– Check how your designs would like in different platforms
– Use a grid and give priority of items without shadows, just use scale, placement and put a hierarchy in place
– Try a broad palette but don’t make it look like a rainbow
– Try different hues from the same palettes
– Typography is key – Sans serif is the recommended one
– Pair different fonts: size and weight
– Make sure contrast is good
– Focus on making it intuitive
– Use subtle details to highlight the different levels of interaction

———

logonewsletter

Subscribe to our monthly newsletter

Receive a summary of the daily tips, files you can work with and other products directly to your inbox!

Have any questions about this post? Contact us, we will be happy to help!

We won’t spam you, we promise.

May 18, 2015

Tip 56: What is the difference between DPI (dots per inch) and PPI (pixels per inch)?

Pixel – A picture element – is the smallest indivisible unit of information in a digital image.

Inch – is a unit of linear measurement on a surface, which could be a screen or a piece of paper.

Dots per inch – A screen has so many dots (each comprising R, G and B elements) per inch of screen.

Pixels per inch – It’s metadata that contains an output size in X measurement, i.e. cm, mm.
It is the width in pixels divided by the output width in the metadata that “per inch” comes from.

That’s why the same image with different metadata may be 72 ppi, 300 ppi or 2000 ppi! The image information is the same; all that’s changed is the metadata.

For web you normally would use 72 ppi and for print at least 300 ppi.

———

logonewsletter

Subscribe to our monthly newsletter

Receive a summary of the daily tips, files you can work with and other products directly to your inbox!

Have any questions about this post? Contact us, we will be happy to help!

We won’t spam you, we promise.

May 17, 2015

Tip 55: Truth about users scrolling and the fold

How should you organise your content so people scroll?

When the web started, studies said that users don’t scroll. However, new studies now have shown that:

– Placing important elements at the top won’t guarantee that users scroll, some people scroll right away and don’t even look at the top elements.
– One column designs are so fashionable that users spend a lot of time below the fold. Things are bigger and users know that the content is below.
– People scroll down the page before it finishes loading.
– The most viewed area of the page is just above the fold, the first scroll (500 px – 700 px down) and then they jump ro about 1000 – 1200 px.
– People spend less time at the top of the page.

How to make people scroll?

– Your layout needs to make it obvious that there is content below – when content don’t seem to end at the fold

———

logonewsletter

Subscribe to our monthly newsletter

Receive a summary of the daily tips, files you can work with and other products directly to your inbox!

Have any questions about this post? Contact us, we will be happy to help!

We won’t spam you, we promise.

May 15, 2015

Tip 54: What is the optimum button size of touch screen applications?

You are designs a mobile application or a responsive website. What is the ideal size of a button?

Help your users! They won’t like clicking the wrong thing or miss the buttons a few times.

Touch targets need to be bigger than desktop targets because the finger is bigger than the mouse pointer. You must consider the human finger size in relation to the screen pixel density. You must know the pixel density of the devices you are designing for and convert the metric units to pixels.

As a rule of thumb based on an average of the industry standard, use a minimum of:
– 8 mm x 8mm for buttons -ideally more!
– Leave 2 mm between elements.

Make sure you test it with users. Are they missing your buttons?

If you want to know more, the industry standards are:

Apple – Minimum of 9mm / 44×44 pixels. This applies best to iPhones that are 320 x 480pixels. From 4S onwards, the phones have retina display so bear this in mind.

Windows – Minimum of 7mm / 26 pixeles,  2mm/8 pixels between elements and the UI control to be 60-100% of the touch target size.

Nokia – Minimum of 7mm for index finger, 8mm with 2mm gaps for thumbs usage and lists minimum of 5 mm line spacing.

Ubuntu – Recommends 8-10mm and ideally 10-14mm.

MIT – Average finger pad is 10-14mm and the average fingertip is 8-10mm.

———

logonewsletter

Subscribe to our monthly newsletter

Receive a summary of the daily tips, files you can work with and other products directly to your inbox!

Have any questions about this post? Contact us, we will be happy to help!

We won’t spam you, we promise.

May 14, 2015

Tip 53: Writing for the web

Think of the web as a linking environment, people read different on screens. It’s very exhausting to read on a screen word by word specially if the site looks like a wall of text. Users will tend to scan pages. Therefore you have to write differently.

Below you can find the top 10 general tips on how to write for the web.

1. Less is more. Cover as much information as you can in a few words

2. White spaces. Leave space between elements

3. Avoid walls of text. Add subheadings, bullets, highlight keywords, simple writing

4. Don’t abuse the language. Use imperative language just for form fields and avoid exclamation marks, computers don’t need to shout!!!!!!!!!

5. Reading patterns. Consider the F, E pattern reading- a couple of horizontal and then a vertical read -> The first two paragraphs must state the most important information

6. Clear content. Just one idea per paragraph

7. Visual Aid. Use graphics to complement your writing

8. Scannable text. Make text easy to scan

9. Sequence. Write content as the inverted pyramid: Conclusion -> Strong arguments -> background. If they stop writing they got the important bit

10. Important content above the fold. Users don’t usually scroll unless they are very interested in the topic

Additionally I can say that some areas of your site require special attention, such as the labels, window titles, etc. Below you can find some tips on how to handle these specific areas.

Labels & Titles

– Try to be consistent
– Don’t label areas where the content is self-explanatory

Window title

– Important for SEO
– Use words that the user will type in search engines
– People bookmark pages. Titles should give out the hint of what the site is about
– Add the company name. Important for branding
– Add a short description
– Limit it to 8 words or 65 characters.The search engine will likely just show 66 characters

Linking pages

if your homepage features a product or an event, that items should link directly to information about that particular event/product.

Dates

– If your site is going to be seen by users worldwide be careful with dates. 02.01.2013 in some countries could mean January and in others it can mean February (ddmmyy vs. mmddyy)

Abbreviations

-Only use them if they are widely know, i.e. DVD or IBM

Numbers

-Align decimal points to facilitate reading
-Use separators if the number is large

e-Commerce

-Put the price in a visible place so users can quickly asses and compare

———

logonewsletter

Subscribe to our monthly newsletter

Receive a summary of the daily tips, files you can work with and other products directly to your inbox!

Have any questions about this post? Contact us, we will be happy to help!

We won’t spam you, we promise.

May 13, 2015

Tip 52: Basic usability

Usable means…

FUNCTIONAL – it works
RESPONSIVE – works everywhere every time
ERGONOMIC – can be used easily by all users
CONVENIENT- everything is within reach
USER PROOF – everyone can learn how to use it

Just to get you started on applying usability to your site, make sure you have a look at the 5 steps below.

STEP 1: Make sure everything works

404errors

Sounds obvious but, make sure all links work.
Get started with Analytics programs like Google Analytics.
Keep an eye on your stats and understand the behaviour of your visitors. Additionally, make sure you are not getting a lot of visits to the 404 page, something important could be broken.

STEP 2: Your interfaces need to teach your user how to use your product

teach users

User interfaces need to teach the user how to use your product just by using intuition.
If necessary, you can add a help section or add assistive instructions aside.
Allow the user to skip help boxes and have access to them if necessary.
Setting up defaults ensures that the user will get it right the first time and save time for your user.

STEP 3: Understand your users

monocycle

People love simple, easy to use, adaptable products.
Your goal should be to make things feel simple to use.
Simple doesn’t mean minimal, it means allowing simple workflows and easy to use features. People don’t read. They dive in.

STEP 4: Be careful with adding complexity

complexity

Adding features can turn out to be unsustainable. When products have a lot of features, it’s harder to realize what feature is the real value to someone. More code means more time maintaining it and more time to react to changes in the market.
Complex technology doesn’t make products hard to use, complex sites do.

STEP 5: Products can have different points of views

direction

Products may different views: the managers, the user and the engineer. The points of view could be all right but a compromise needs to be met and the user’s needs must be fulfilled.
It’s important not to follow your gut. Trust the numbers and let the users lead.

———

logonewsletter

Subscribe to our monthly newsletter

Receive a summary of the daily tips, files you can work with and other products directly to your inbox!

Have any questions about this post? Contact us, we will be happy to help!

We won’t spam you, we promise.