10 Usability Heuristics Every UX Designer Should Know

04 February 2020

10 Usability Heuristics: It’s Easier Than You Think

Agente Content Team

usability heuristics

What do we mean when we talk about good UX/UI design? Undoubtedly, every top quality design boasts its own WOW features to stun users. Yet, there’s something fundamental that any good design is rooted in—10 usability heuristics.

Back in 1994, Jakob Nielsen shared his experience in the field of usability engineering in 10 general principles for interaction design. Decades later they are still relevant and help UX designers and development teams to raise the level of user satisfaction with the final product.

Usability Heuristics explained

First things first, let’s make the word ‘heuristic’ less enigmatic. According to Nielsen, there are 10 universal principles for product design:

  1. Visibility of system status.
  2. Match between system and the real world.
  3. User control and freedom.
  4. Consistency and standards.
  5. Error prevention.
  6. Recognition rather than recall.
  7. Flexibility and efficiency of use.
  8. Aesthetic and minimalist design.
  9. Help users recognize, diagnose, and recover from errors.
  10. Help and documentation.
Download office posters with 10 usability heuristics here: https://uxposters.agentestudio.com/

 

Visibility of system status

We feel comfortable with the system if we are in full control of it. For example, when you are listening to a song on your phone, you need to see what song it is and the number of songs left on your playlist. When you are typing a post in Twitter, you want to see the number of characters you have left (as you may know, your tweets are limited to 280 characters). When you are jogging with your fitness watch, you need to check your pulse, pace, and distance. Reliable and predictable systems empower us to make further decisions, be it a bus ride or interaction with a device. 

So, according to the first heuristic, UX designers need to understand the information that is crucial for a user and present it in a timely manner. There are two types of such information:

  • Persistent status. For example, battery life, mobile network or Wi-Fi connection indication on your mobile phone.
  • Feedback after a user action. For example, the change of button color after a user has pressed, or a progress indicator when information is being downloaded.

system status design

Source: Skyscanner

Match between system and the real world

There are two rules here: speak the user’s language and follow real-world conventions. While interacting with a device, a user should feel like communicating with a human being.

When the user doesn’t understand the machine-oriented language, they feel frustrated. They leave the website or app and go elsewhere where they feel more comfortable.

For example, we have a landing page of a product company. In your opinion, which button is more understandable: ‘Meet & greet’ or ‘Contacts’?  Both have the same purpose—to display the company’s address and contact information. However, the second variant is direct and clearer. In all probability, a user has already interacted with websites like this and found contact information in the ‘Contacts’ section.

The same principle should be applied to icons. The more an icon resembles the function, the better. 

icons design

Source: Agente

User control and freedom

This heuristic might seem to overlap with the first one, yet it states a separate logical principle: Every system should have an emergency exit. For example, undo buttons help to go a step back. They are especially needed in devices with a touch screen where accidental taps are common.

Sometimes, you get lost on the way to your goal. It’s especially common while visiting online stores. How many times have you ended up with items in the cart that you don’t need? Instead of canceling the whole purchase and starting again, you can simply use a ‘Remove’ button and take a superfluous item from your cart.

system control design

Source: Dribbble

Consistency and standards

User interface should be predictable and learnable. Jacob’s law of Internet user experience states that people spend most of their time browsing other websites and interacting with other apps.

Users expect your product to follow conventional principles that they have already seen on websites or apps of the same industry. This is called external consistency. For example, the ‘Cart’ button usually looks like a shopping cart and is placed in the upper right corner.

ui design consistency

Source: Dribbble

There is also an internal consistency that you maintain in a family of products. For example, below you see two iPhone screens with system messages. Notice the same font style and the same color of active buttons.

Error prevention

“Errare humanum est”— “To err is to be human.”. The clever design should minimize errors. This is especially important for healthcare, finance, and transportation where an accidental click can lead to the loss of huge sums of money, or it can jeopardize people’s lives.

According to Nielsen, designers should “either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.”

For example, use separate colors for ‘delete’ and ‘cancel’ buttons, or send an “Are you sure?” message when a user wants to delete something. 

save or delete design

Source: Dribbble

Recognition rather than recall

Which question is easier to answer:

  •  Was Apple founded by Steve Jobs and Steve Wozniak?
  • Who founded Apple?

Naturally, the first question is easier, as it contains the clue to the correct answer.  There are two types of memory retrieval: Recognition and recall.

The first one is easier, as you are already presented with an object or concept you are familiar with. It is a very shallow form of retrieval from memory and it doesn’t require any work. Recall demands extracting rarely used information from your memory. It is a deep intellectual process that requires more work.

The recall process is difficult and error-prone, so a good user interface doesn’t require a user to do it frequently. Instead, it offers graphical options that are instantly recognizable. For example, images of menu categories instead of bare description.

menu categories

Source: Dribbble

Flexibility and efficiency of use

Design should be friendly to both experts and newbies.

Experienced users should be able to speed up their interaction with the system. For example, keyboard shortcuts, macros or various app accelerators (e.g., tap twice to like an Instagram post).

New users would not notice these accelerators so they tend to use features in the most convenient and logical way for them.

For example, designers who learn Sketch use menu options instead of keyboard shortcuts. When users get to know the system, they can find the best way to optimize their experience with accelerators.

shortcut design

Source: Dribbble

Aesthetic and minimalist design

There is a concept of a signal-to-noise ratio. Good design has a high signal-to-noise ratio, which means relevant information (text, visuals, animation)  prevails over the irrelevant.

Every extra unit in the UI prevents users from seeing the relevant items and accomplishing their tasks. So if there’s something in your design that is here only for beauty, get rid of it.

An excellent example of a high signal-to-noise ratio is the Forbes search panel. There’s very little to distract the user from the primary task, which is conducting a website search. 

search design

Source: Forbes

Help users recognize, diagnose, and recover from errors

There are three things a system should do when an error occurs:

  1. Inform the user what has happened. It’s advisable to use a combination of a warning text and visuals (red font or a warning sign).
  2. Explain the problem in simple terms.
  3. Explain how to fix the error (for example, provide an ‘undo’ button).

error prevention

Source: Spotify

 Help and documentation

Although we hardly ever read the documentation before starting to use a device or application, there’s a high probability that we will go back to it someday. The more interactive a product’s help center is, the quicker users can solve their issues. Help information should be easy to search for, and it should be concise as well as focused on the user's task.

help and documentation

Source: Twitter

On a final note

We strongly believe in the 10 usability heuristics and practice them in Agente projects. That’s why we created a set of 10 posters to remind ourselves of the golden UI standard, and why we put them up in our office—to be inspired every day.

They help project managers, UX/UI designers and developers to plan and build intuitive digital interfaces. What’s more, these posters are used in UX audits while conducting heuristic analysis.


Download our UX posters and use them to remind you of how good design is made, and to and check that your products abide by the 10 usability heuristics.

 

 

Share

Stay tuned for news

Useful articles from our content team right to your inbox!

Sveta Yurkevich

Marketing Manager

Thank You!

Get ready for our updates in your inbox.

Was this article helpful?

We would like to hear your opinion and improve our content

Thanks for your rate!

Let's talk

Is there a challenge your organization or company needs help solving? We’d love to discuss it.

Budget
  • $8000 - $15000
  • $15000 - $30000
  • $30000 - $50000
  • More than $50000
  • Not decided yet

Thank You!

Your message has been successfully sent.
We will contact you very soon.