Web usability guide

Best practices are half the answer

A good web or app designer is like a good accountant, you are much better of with a good one than bad. However, unlike accounting it's often a slight deviation from 'best practices' that greatly improves the success of your web assets. So how do you know what's acceptable deviation and what isn't? You could guess and hope. Better still you can harness the power of user feedback to gather real usability data and actionable insights.

Focus on big problems

Typically on any one website there are only a few issues with large bottom-line impact. This is where your focus should be - the small number of crucial improvements that make a big difference to both your users and your marketing. Very few websites are so sophisticated from a user perspective that they need fine tuning. Leave that for another day.

Ask more questions more often

Rarely is it effective to obtain deep usability insights for a narrow range of metrics. It's better to allocate your website optimisation (usability) budget across a wider range of user research so that you can expose the bigger problems and iteratively optimise. Test more broadly and do it more often.

Cumulative insights count for much

Regular amounts of small usability testing keeps both the budget low and rewards high. In addition the value of the cumulative insights across the wide range of testing will continue to grow and give a lot of cross contextual insights that you can use across your other web assets.

Horizontal attention focuses left

When users initially approach your page, they'll spend considerable time looking for something where they expect to find it.

The left-most part of a web page typically contains a navigation bar, so it's not surprising to learn that according to studies by usability expert Jakob Nielsen attention grows after the 200-pixel mark, with the most attention around 300–500 pixels.

Stick to the conventional layout simply because it works well with the way user's currently look at web pages.

1. Keep navigation all the way to the left. This is where people look to find a list of current options.

2. Keep the main content a bit further in from the left, with your most important content showcased between one-third and halfway across the page. This is where users focus their attention the most.

3. Keep secondary content to the right. This keeps the focus on the main content however still gives you a placeholder for other relevant information.

Vertical attention focuses above the fold

As the web and indeed web users have evolved we are far more conditioned to scrolling. However, from the perspective of attracting and retaining attention, the real estate above the fold on your pages is more valuable. Users do look below the fold, but not nearly as much as they look above the fold.

Even though 5% of users' total time is spent past the 2,000-pixel mark, user attention eventually peters out, and the further down the page users go, the less time they generally spend on each additional information unit.

1. Viewing time above the fold averages 80.3%

2. Viewing time below the fold averages 19.7%

People will look very far down a page if (a) the layout encourages scanning with appropriate headers and visual markers, and (b) the initially viewable information makes them believe that it will be worth their time to scroll.

However, for the most part, the content that's most valuable to your mutal goals (i.e. that of your users and your business) should be above the fold. It's also advisable to have a strong piece of engaging content, or call to action, at the very bottom of the page.

Scrolling versus paging

As stated above, users will scroll. In fact, it's better to present a long article as one scrolling canvas than across multiple page views because it's easier for a user to keep their focus in the downward direction than to click through through multiple fragments.

A word of warning: like any interaction users decide whether to continue along the scrolling path only if the information above makes them believe there is value in doing so.

In short, make sure that the important stuff remains above the fold.

Writing for web

Web content needs to be scannable. People rarely read on the web, they scan, picking out words, phrases and visual markers.

In general good web content uses;

• one idea per paragraph
• genuine content, not 'marketese'
• at least half the word count of conventional writing
• meaningful headings and sub-headings that convey usefulness
• credibility building tools such as appropriate graphics, high quality writing and outbound liks to other sources

Long versus short content

The best strategy is probably one that feeds the mixed needs of your users i.e. often users need simple overviews to orient themselves to a solution before they embark on more in-depth research.

In general good web content;

• Starts with concise overviews in short content pages
• Links to in-depth content for themes that require more comprehensive coverage

In short, the cost/benefit ratio is what matters, not simply the benefit alone.

F-Shaped reading pattern

Eyetracking studies show that users often read web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

Of course, this is not indicative of how all users read all varieties of content however the F viewing pattern is a rough general shape.

The implication for content design is as follows;

• Users will scan, not read your content thoroughly
• The first paragraphs must state the most important information
• Starting headers and paragraphs with information carrying words will help engage users with the proceeding words in the sentence

Strategic keywords

Web users are still very much search dominant. By speaking the users' search language you give yourself the opportunity of being found. Not being found is akin to ignoring the vast majority of your audience, or worse still being deemed irrelevant by them.

In addition usability studies show that you get 40 - 60 characters to explain you proceeding content i.e. headlines (and importantly, links) should be an ultra-short abstract of the associated content.

Photos as content

Put simply, users pay attention to information-carrying images that show content immediately relevant to the information. Likewise, they ignore images that are purely decorative. Generic or 'stock' images are potential cognitive wastelands that you are better of removing altogether.

Optimising for screen resolution

• The general guideline here is to not design solely for a specific monitor size because this convention changes rapidly
• Use liquid layouts that vary according to the user's window size
• Optimise for the most widely used screen size - currently this ranges as follows;
  • 1024x768 14%
  • 1280x1024 14.8 %
  • 1280x800 14.4 %
  • 1366x768 10.1 %