10 usability heuristics every web designer should keep in mind

Whenever you are designing or developing a product you’ll always have to keep the target audience into account to create something successful. But unfortunately, that’s not enough. Here are the 10 usability heuristics by Jakob Nielsen explained with useful examples. Compare your product and find out if your product conforms the usability heuristics. If not,.. Time for some drastic changes!

1. Visibility of system status

The system should provide constant feedback to the user when he or she is doing something. Did the user click to open an application? Then there should appear a loading icon or a progress bar to make it clear to the user that the system is working and doing something. When it does not, the user will think that he or she has to click again or that the app froze.

A good example of system status are breadcrumbs. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

Another good example is a percentage loading bar. The problem here is that plenty applications only show how much percent it takes until a file is successfully uploaded. The user should have an idea on how much time is left until it’s completed. So always try to add the estimated time while using a percentage loading bar. This is what the user really wants to know.

2. Match between system and the real world

Always research what your target audience is like, and try to match to what they believe is the real world.
Does a 65-year-old use the terms like “tablet” or do they all just call it an iPad?

Make sure that terms, icons and any other element on your website is matched to the real world of your target audience. If you don’t, the user will get confused and will leave your website or application.

A good example is the recycle bin or folder on Windows. We all know that we have to throw trash into the bin or store files in a folder, as we do in the real world.

3. User control and freedom

If the user makes a mistake, always provide an emergency exit where he can go back to the previous situation.
If you don’t give an emergency exit, the user will be trapped on that page.

A good example is to return to the homepage by clicking on your logo that is on the top of your page. Make sure that your logo is always a URL to go back home.

Another good example is using CTRL + Z to undo changes in Word, Photoshop or any other program. It is a clear emergency exit for when you accidentally delete something and want to bring it back.

4. Consistency and standards

A page should always be consistent. This means that the layout on every page should be the same as the one that the user saw on the homepage. If not, the user will get confused because he will have to search every page for items.

If we’re talking about standards, we mean the similarities outside the website. For example, a button to go back to the homepage is always called ‘home’, a search button is called ‘search’ and not ‘find this’,..

5. Error prevention

It’s better to always prevent errors. A good example is when the system completes “@ho..” into @hotmail.com or give a list with possible email providers.

Another good example is the auto completion of Google. It can automatically fill in your personal information (Street address, zip code, country,..).

The less a user has to do himself, the better. Users will make fewer errors and save time. They will enjoy your website or application even more and that’s what we are aiming for.

6. Recognition rather than recall

The user should not think while using your website or application. Therefore make it easy for the user to recognize elements.

A good example is the use of icons. An icon makes the user recognize certain functions without reading the text.
(Do you recognize these 6 icons? I bet you do!)

7. Flexibility and efficiency of use

Make sure that the most used functions have a shortcut. The user should be able to get from point A to point B in the most efficient way as possible. The less experience user should also have the flexibility to use different paths to go from point A to point B.

A good example is the use of items the user recently used/looked at or related items.

8. Aesthetic and minimalist design

Websites and applications should never contain useless information. This will distract the user of its path to point B. This is how ‘flat design’ emerged. Apple switched to flat design with iOS 7 and Windows with Windows 8.

9. Help users recognize, diagnose, and recover from errors

Error messages help users a lot with navigation through and use of the system. An error message like “Error code: 0xe01a020f” says nothing to the user. OK, it does say there is an error, but we can’t diagnose it.

The popular 404 page (Page not found) is an example of this. A good 404 page contains the following information.

Recognize:
The 404-page indicates that the page is not found.

Diagnose:
The 404-page tells the user that they may have entered a wrong URL or that the user came through a broken link. The user can contact the webmaster to report a broken link.

Recover:
Give the user a search field where he or she can search for the information he was looking for. There also should be an option to go back to the homepage.

10. Help and documentation

A good system should function without help or documentation. But there are some exceptional circumstances where the users need documentation.

For example, a website or application could use FAQ (frequently asked questions) to help the user understand.
Another example is documentation for a freshly bought product (eg. Android smartphone). You probably know how it works but you might want to look up how you take the battery out.