10 Usability Heuristics: Exemplified

Ever wished you had a set of clear principles that you could look to in order to help ensure that your product or design is as user-friendly as possible?

Enter Jakob Nielsen’s 10 Usability Heuristics.

These 10 principles are broad guidelines that outline suggestions for what a product should and should not have in order to be as user-friendly as possible.

Below, I will attempt to explain these heuristics by providing examples of both good and bad uses of each principle.

1. Visibility of system status:

It is important to make functions visible and ensure that users are aware of what is going on in a timely fashion. We should also try our best not to keep things hidden from users.

Good Example:

Google Drive’s ‘upload file’ function provides users with a micro-interaction demonstrating progress in a circle icon for the uploading process and then shows users a small green checkmark symbol in place of that circle once the file has been successfully uploaded.

Bad Example:

When prompted to log in to the Blackboard mobile app, if the user accidentally enters an incorrect email address or password, they receive an obscure, somewhat confusing error message stating that the credentials they have entered are incorrect. Instead of keeping users informed, this error message confuses users as it does not tell them which form or category of credentials they have entered incorrectly, forcing them to redo the entire login process without a clear sense of what exactly went wrong.

2. Match between system and the real world:

Products and their various components such as buttons, language and icons, should be designed in a manner that corresponds with the way that users are used to them looking in real life, i.e. buttons should look like real-life buttons and a calendar should look like a physical calendar. This will help users recognize and thereby comprehend these features better.

Good Example:

The icon for the MacBook trash bin closely resembles a real-life trash bin and users can drop items in it, just as they would with a physical trash bin. This helps users recognize and understand what the purpose of the trash feature is and how it functions.

Bad Example:

While the un-labelled paintbrush icon in the Apple Numbers and Pages apps looks like a paintbrush, it does not, in fact, function as one, and is instead used to indicate a formatting menu, which can be a source of confusion for new users who might be expecting a paintbrush to allow them to paint, as it would in real life.

3. User control and freedom:

It is important to give users a clearly marked, easy way to undo actions or redo tasks.

Good Example:

The email feature that shows users a pop-up message after sending an email, giving them the option to undo the email that they just with one simple click in a clearly marked way.

Bad Example:

The iMessage app has no way for users to recall a text message (a feature that other communication apps such as WhatsApp and Slack do provide). Since it is quite common for users to send text messages erroneously, it can be frustrating for them to not have a way to undo this action.

4. Consistency and standards:

Don’t confuse users by deviating from standard product conventions, and make sure that all text, buttons or icons of the same function look the same.

Good Example:

Since it is standard for retail websites to keep the account sign-in option on the top right of the site, the Target website follows this convention and places their sign-in option in this area. Additionally, they also specifically use the words ‘sign in’ to have users access their accounts, as opposed to using different language such as ‘view my account’ or ‘log on’ or like, due to the fact that it is conventional to use the words ‘sign in’.

Bad Example:

Since Google Plus’s “+1” feature was essentially the same thing as the “like” feature that products such as Facebook and LinkedIn had, by calling this feature by a different name, Google Plus deviated from the convention of using the “like” terminology, resulting in user confusion.

5. Error prevention:

Help prevent errors from happening when your product is being used.

Good Example:

When booking a plane ticket on their website, JetBlue does not allow users to pick a return date that is before their departure date in order to prevent users from accidentally choosing a date that is too early.

Bad Example:

Yahoo Mail does not prompt users when they forget to insert an attachment, allowing room for users to err by sending an email without attaching the file that they intended to attach.

6. Recognition rather than recall:

Since users have an easier time recognizing things than they do recalling them, it’s important to minimize the user’s need to remember things and instead make information visible and easily accessible so that all users need to do is recognize and retrieve the information they need.

Good Example:

Google’s search system remembers users’ previous searches and makes it easily accessible by showing it to them as soon as they bring up the search bar so that if users wants to see things they previously searched for, all they have to do is recognize their prior query and click on it to bring it up. Additionally, previously viewed search result links are changed from blue to purple, making it easy for users to see which pages they have previously looked at so that they don’t have to try and remember.

Bad Example:

Yahoo’s search engine does not change the colour of previously viewed search results links and does not provide any clear way for users to differentiate between links that they have already opened and those they have not yet opened, forcing users to remember which sites they’ve already viewed and which they haven’t.

7. Flexibility and efficiency of use:

A system should support the ability to be used efficiently, in a way that is customizable and should teach users these more efficient ways of doing things.

Good Example:

Sketch allows users to customize their personal toolbar by dragging in their favourite menu options while also providing a default toolbar for novice users. The program also enables users to utilize keyboard shortcuts to accomplish various tasks, making the process more efficient.

Bad Example:

Vimeo does not provide a way for users on their basic plan to adjust the playback speed of their videos, making the process of watching a video less efficient for users who would like to customize their playback speed by increasing or decreasing it.

8. Aesthetic and minimalist design:

An interface should be designed with the user’s goal in mind and should not be cluttered with irrelevant or infrequently used information.

Good Example:

Google search’s interface is clean, uncluttered, and simple with a minimalist design that focuses on the search bar since its user’s main goal is generally to search.

Bad Example:

The Gates N Fences website is extremely cluttered and contains a lot of irrelevant information and information that is likely not to be used often, taking the focus off of the user’s main goal.

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

Ensure that error messages clearly indicate what is wrong in simple language and tell users how to fix their errors.

Good Example:

The email sign up page error messages clearly shows users what is wrong with their entry in plain language and advises them on how to fix their entry so that they can continue on with the sign-up process.

Bad Example:

Blogger.com’s 404 error page does not tell users anything about what went wrong or how they can fix it, which can easily confuse users.

10. Help and documentation:

Provide users with clear and easily accessible help and when necessary, integrate documentation into the product itself in a findable and usable way.

Good Example:

Slack’s Slackbot offers users an easy and readily accessible way of getting help. All users have to do is message the bot with their question and it will help them by either answering it or providing the documentation necessary to answer their query.

Bad Example:

The Merriam Webster Dictionary app does not offer any visible help or documentation, preventing users from being able to access help when they need it.