Using the 10 heuristics to review the usability of your website or UI

Heuristic evaluation is a method to quickly and cheaply evaluate a user interface (UI). In the early 1990s Jakob Nielsen devised a set of 10 heuristics. These are usually used by experts to test a design at the early stages before, or instead of, user testing.

We have explained these 10 points below with examples so that you can use them to consider the usability of your website, app or in fact any user interface.

1, Show system status

It’s important to let your users know what’s going on and where they are in a process. This is whether this affects your site and whether you are giving your users the right information.

For any parts of your site that require time to load it should do the following: Less than 1 second – just show the outcome; 1-2 seconds – show that activity is underway; and for more than 2 seconds – show the progress.

Make sure your users are aware when they are making a change and, after a user has completed a process, make sure that it’s clear the action is complete. It’s also important to ensure they know what happens next so that they know what to expect and if there is anything they need to do

2, Match between system and the real world

The system should speak the user’s language, with words, phrases and concepts familiar to the user, rather than ‘system-oriented’ terms. Make sure your site follows real-world conventions, making information appear in a natural and logical order.

Lots of organisations are in danger of talking in technical terms or using names or descriptions for things, which their users won’t understand. Take a look at your website and consider whether your users are going to understand the terminology. Are you using understandable ways to categorise your content? Are your instructions clear?

3, User control and freedom

Users often choose options by mistake and need a clearly marked way to exit or undo and abandon the error. This simply means that you should provide the option to go back or undo actions.

Generally, it’s also a good idea not to restrict or change the navigation on a site on certain pages, then users can use the navigation to move between the pages in the same way from anywhere on the site.

In some cases it’s valuable to give your users freedom to explore and see content in different ways. Skyscanner is a great example of this (below), users have the option to compare by price, time and airline and at the top they are see how the price would change if they travel on a different date or from a different airport. This gives the user confidence that they can see all the options and find the best price. At the top there is also the option to ‘Change Search’ in case you have entered the wrong options.

Skyscanner

4, Consistency and standards

This one is fairly straightforward – if you have multiple functions that do the same thing make sure they appear in the same way. Using the same layout, colours and wording will help your users understand that they will have the same function.

This is also relevant for language. Be sure to use the same labels for things that do the same thing and equally don’t use the same word for two different elements.

5, Error prevention

This is about minimizing the ability for your users to make a mistake. For example if you have a contact form, does it check what the user has entered before submitting and let them know if they have made any mistakes?

Sometimes it’s a good idea to give users the opportunity to review their choices before committing to them, letting users review and change details will prevent a lot of mistakes. If users are making an action that can’t be undone it’s a good idea to explain what is about to happen and give them the relevant options to continue or not.

6, Recognition rather than recall

It’s important to give your users all the information and not expect them to rely on the memory or reference information in other places in order to complete a task or make a choice. Give your users clear instructions that are easily visible to help them make the choice at the time.

Money Supermarket have a nice way to give their users have everything they need when completing forms. When you click on a field a tool tip shows on the right to give you extra information. This is unintrusive and easy to ignore if you know what to do but helpful if your not sure what you should be entering.

Money Supermarket makes use of tool tips

7, Flexibility and efficiency

If your UI has more frequent users it’s good to offer shortcuts to help them achieve their task more quickly. These usually go unnoticed by inexperienced users but give expert users the ability to tailor their frequent actions.

A good example of this is keyboard shortcuts used by many applications. Google chrome, for example, has a number of keyboard shortcuts some of which you can see below.

Chrome keyboard shortcuts

8, Aesthetic and minimalist design

Take a look at your site or UI and consider if all the information you are displaying is useful and relevant for the user. Although other things like advertising may be necessary, it’s a good idea to make sure this doesn’t interfere with the information the user is looking for. Also are you being concise? Is there anyway you could communicate the same thing with less? or get the same result with less input fields for the user to enter?

Sit back and look at your page, what jumps out and takes your focus? Is it the relevant information or is it other elements of the page like colours or boarders. Don’t be afraid of leaving space on a page, this can create valuable focus to help the user know where to look and where the important information is. If the page looks too busy the user wont know where to start.

Over the years ebay has improved this greatly, their site used to look very busy and was hard to navigate. They now take a much more minimalist approach and this results in a far clearer and more user friendly interface.

ebay's far more minimalistic approach

9, Help users recognise, diagnose, and recover from errors

When users make a mistake on your website, is it clear what they have done wrong? And is there a suggested way to resolve the problem? For example, if they forget to enter their details into a form field, does it tell them that there is missing information? And does it explain which field is missing and what information they should add to resolve the problem?

If you have a search facility on your website. When people search and find no results is it possible to make a suggestion and propose an alterative less specific search or a place to find out more information?

10, Help and documentation

Help should be integrated into your site or UI as much as possible to avoid having a separate help area. In cases where it is necessary to have a detailed help area it’s important to make sure this help is easy to understand and navigate. It should give simple to follow instructions, helping users to complete their tasks.

_

Resources: http://en.wikipedia.org/wiki/Heuristic_evaluation

Lecture from: https://www.coursera.org/course/hci