Website usability defined

Here is what the International Organization for Standardization in ISO 9241 has to say about usability:

The effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.

Let’s break that down:

  • Effectiveness – Can people do what they need to do?
  • Efficiency – How quickly can they do it?
  • Satisfaction – What do they think/feel about experience?

So what does all this mean? Well in today’s web good usability is expect. Gone are the days where the only people using the web where geeks and… other geeks. For many businesses nowadays the company website is the first and only port of call for their customers. So it is vital that they have a good experience.

But what you really want is to create a website that offers a better experience and is easier to use than all your competitors. Better usability can help improve conversion, customer retention and reduce site maintenance costs. Ultimately it can increase revenue.

Make your website more usable

The first thing to note is that nothing in life is intuitive; everything we do must be learned. So don’t assume people are going to know how your website works. People aren’t coming to your website for intellectual stimulus, so make it easy for them.

Having said that, more and more things are moving to the web, and more people are using it on a daily bases. Therefore, design patterns are emerging and becoming more standardised.  A couple of good resources for this are http://patterntap.com/home and http://www.welie.com/patterns/index.php.

Key usability rules

  • Prioritisation of content (above fold)

The fold is the limit of what is visible on a web page in a browser before you have to start scrolling. In this area it is key that you tell the user what the website is and what they are meant to do on it.

  • Clear calls to actions

Calls to action can really help the user do what they are meant to do. Be sure to make them stand out from the rest of the site.

Screen shot of a website showing good example of call to action

  • Have links that look like links

Example of clear linksLinks are an important way of moving around your site. So it is key to make them look like links. This can be done by positioning and styling e.g. Links that are situated in the body of text are often underlined and in different colour. Links that are positioned in a bar along the top of the page are perceived as the navigation. It is also a good idea to style a visited link differently. This will help user understand where they have been.

  • Good content hierarchy

Content Hierarchy is basically your site structure or how your various pages relate to each other. There is no simple rule for how to make a good hierarchy and may take some testing before you hit the optimal structure. A good starting point is to layout all your pages on stick notes and draw lines between them to indicate the path you want users to take. Ask yourself ‘If I want to find this information how do I get there from the homepage?’ Make sure you build in the right links and navigation people to get there.

  • Clear fonts

Example of bad fonts

It is obvious that your copy has to be legible. So choose a clear readable font that is contrasting with the background. When reading a book you will notice that it is nearly always written with a serif font, this is because they tend to be easier to read. But on visual display they can sometimes appear pixelated at low resolution.

Writing in capitals can be useful to emphasize a point but will be harder to read. This is due to the brain remembering the shape of words as well as the letters needed.

This image is an example of bad use of fonts.

  • Clear navigation

Navigation is arguably one of the most important parts of a website. It is what allows people to move around your site to find what they need. Generally you want your key areas displayed along the top of the page with the possibility to drill down if needs be when you hover over the link with your mouse. Sidebar navigation is often good for categories or variations of whatever you are talking about on the page. Think very carefully about how you structure yours site and how you want people to move around it. Try and keep the number of clicks need to do anything down to a minimum.

Example of good navigation

  • Search box

If your site has more than a few pages it is worth considering adding some search functionality. This will help user get straight to where they want without having to trawl through pages and pages of irrelevant material.

  • Breadcrumb / progress through checkout

A breadcrumb shows the user where they are on your site relative to the homepage. Progress through a checkout is similar to a breadcrumb except that tells user what stage they are at in the process and what there is still left to be done. These are very important for giving users points of reference and an easy way back to previous pages.

  • Visual feedback

Visual feedback is simply allowing the user to know that there is a cause and effect i.e. If the user clicks on a button make the button look like it has been depressed. If the user clicks to enlarge an image then display a spinner or a loading bar so they don’t think they are waiting in vain for something to happen.

  • Visual cues

Example of a visual cuePeople can process images much quicker than they can words. So help them out by giving them a visual cue as to what you want them to do.

  • Avoid jargon

Try and avoid long or technical words. You can’t assume that everyone coming to your website is going to know your subject like you do.

  • Have a home button

Always have a home button and make sure it is recognisable as a home button i.e. Do not rely on people knowing that your company logo also doubles up as a button to take them back to the homepage. Visiting a website for the first time can be overwhelming and providing the user with a recognisable home button will give them reassurance and a point of reference.

  • Use words as well as icons

If you are going to use icons, which is good because an image can speak a thousand words, then make sure there is no doubt what the icon means by providing at least 1 or 2 words.

Good exapmle of icon use

  • Reduce copy

This is simple people don’t want to read pages and pages of text. So keep it short highlight the key areas with good semantics e.g.  sub headings and bold text.

  • Keep design to a minimum

Eample of minimum designDesigners out there might not like this but design is not the most important thing on your website, the content is. Design is there to enhance the content and make it easier to digest, so keep it simple and to the point.

In Conclusion

Second guessing how people are going to use your website is difficult. I’ve given you some of the key things that are often overlooked which I hope you have found useful. There are many many more things that can be done to improve usability. However, a great way of seeing how people use your site is to simply watch them, you may find some suprising results. If you want to learn more about user interface design then a good place to start is Ten Usability Heurisics by Jakob Nielsen.

Here are some more usful blog posts relating to this subject:

Creating action-driven & persuasive landing pages

The intersection of HCI, Information Architecture and SEO

6 official design and UX guidelines you can’t afford to miss