Read our news

Examples of the heuristics of usability in practice

No comments

The 10 heuristics of usability is a best practice presented by Jakob Niesen in his article: 10 Usability Heuristics for User Interface Design. He lays down a set of 10 rules of thumb which can be applied designed into the user experience, to help the user in their interaction with any digital product.

The 10 heuristics are:

  • Visibility of system status
  • Match between system and the real world
  • User control and freedom
  • Consistency and standards
  • Error prevention
  • Recognition rather than recall
  • Flexibility and efficiency of use
  • Aesthetic and minimalist design
  • Help users recognize, diagnose, and recover from errors
  • Help and documentation

Since Jakob Niesen introduced his ideas in 1995, there have been many attempts to design them into websites, web applications, desktop software, mobile sites and mobile applications. Below are some examples of user interfaces which are applying his rules of thumb.

Visibility of system status

This rule helps communicate to the user, the current state.

This state might be a transitional one, where you want to inform the user how the transition is progressing:

Progress CogsProgress indicatorProgress Indicator

The state might be where you are in a set of stages, and how those stages are going:

From Mint a progress in the process

The state might have changed, so you wish to inform the user the progress and what has happened:

Showing state of completion

Match between system and the real world

This rule helps to connect the real world to the digital world. Allowing the interface to communicate an idea, connect to an emotion, or indicate an action.

The most popular use today is inline imagery:

Human Profile IconsSocial Media Icons

One example is the use of photographs or illustrations on a website to convey the message:

The illustration of connecting people across a world map, conveys the message of shared communication:

Facebook Network

Here is an example of a personal financial software element, connecting to the users emotions in an attempt to reinforce the reasoning why they created a saving goal for an online savings account:

SavingGoals

User control and freedom

This rule helps the user do things and also recover from human error as they use the system. It is good practice to design for errors and allow the user the freedom and support to move forward and backwards in their endeavors.

One example is the ability to undo actions:

Undo DeleteUnfollow on Twitter

Consistency and standards

This rule states that users should not have to wonder whether different words, situations, or actions mean the same thing. It goes as far as suggesting that the industry as a whole has a responsibility to maintain a level of consistancy regarding terminology and methodology. Also it is implied from this that the user should feel comfortable to expect and implied outcome based on their experience with other applications. Today there are many implied standards, which are growing by the second.

Comparison of product groups, Microsoft Word and Microsoft Excel Toolbars using shared consistency, resulting in efficiency in learning and implied intuitiveness.

Consistency Toolbars

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. Users are often distracted from the task at hand, so prevent unconscious errors by offering suggestions, utilizing constraints, and being flexible.

ConfirmationHelping to remove errorspredictive

Recognition rather than recall

Minimize the user need to think by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Helping with recall could be, helping to retreive forgotten passwords, browser history with a search function or recent actions on an eccomerce site. Good examples will aid the user in their endevours by labeling buttons and providing tips to help guide the user to the available next stages.

Amazon ResentChrome History

Flexibility and efficiency of use

Stated as being accelerators, unseen by the novice user, which may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Examples of accelerators are: exits in a wizard process so that advanced users can configure manuelly based on their experience and keyboard shortcuts which allow common actions to be coded into short cut key combinations.

Shortcuts PremiereShortcuts List

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed.

If you replace the word dialogues with the word screen or page, you will fully understand the meaning that Jakob Nieson is infering. There is great temptation to cram in every feature on a homepage, drawing away and distracting the primary user functions. This includes things like upselling in eccomerce when barriers are placed to stop the user preceeding to purchase until they say no to a lot of unrequired accessories.

Good examples:

Windows 8Goggle UI

Bad examples:

America Airlines Clutter Bucket

Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution (ways the user can resolve the problem).

A good example for this heuristic is inline form validation, which prompts the user to correct errors or make better choices based on the users input. When an error occures which the user can not surcomvent, there should be a method to take this error to a support structure so that the user can continue towards a possible resolution. A good example of doing this badly would be the “sorry please try again later” message, which seems to a default message.

Join TwitterCannot Add Image404 Message

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

If you have implemented all of the above best practices, then you only need a limited documentation that its either easily searchable or/and indexed in a way the user can relate to the task at hand.

Many would argue now that help should be inline, or accessable from the task at hand. Using things like tooltips and help panel for advanced tasks. But Jakob Niesen still advacates a help documentation, or at the very least a frequently asked questions library.

Here is Adobe sticking to the letter of what Jakob Niesen outlines:

Adobe Help Interface

Summary

In summary, Jakob Niesen proposes a set of guidance rules, which have gone on and helped the industry for the last 10 years. They are as relevant today as they were back then, because they are based on his experience with human computer interaction.

  1. Preventing User Errors: Avoiding Unconscious Slips by Page Laubhimer, 2015
  2. Memory Recognition and Recall in User Interfaces by Raluca Budiu, 2014
  3. Topic: Heuristic Evaluation – Full set of articles on Heuristic Evaluation

Chris BarklemExamples of the heuristics of usability in practice

Leave a Reply

Your email address will not be published. Required fields are marked *