Heuristic evaluation - how to improve UI design with Nielsen’s heuristics?

What is a heuristic evaluation?

Let's start a little bit with history. Dating back to the ’90s, the usability pioneers Jakob Nielsen and Rolf Molich created the general principles for interaction design. The final set, which we are going to discuss here broadly, was released by Nielsen in 1994. Colloquially called “heuristics” were developed based on years of experience in the field of usability engineering. Sticking to them contributes to greater user experience and an increased number of new and returning visitors. 

Heuristic evaluation is recommended in order to eliminate a major chunk of usability issues without necessarily involving real users. Therefore it is a perfect solution for small teams and early-stage startups because they can do it internally. Below we tackle each of Nielsen’s heuristics accompanied by examples. 

#1: Visibility of system status

The first of Nielsen's heuristics says that the system should always keep users informed about what is doing and simultaneously giving feedback within a reasonable time. Because moving around the system, the user asks two questions: where am I and what is happening now? We can answer the first question using breadcrumbs, which is a secondary navigation system that shows a user’s location in a site or web app. Breadcrumbs also provide one-click access to each of the parent directories. When it comes to the second question, a similar mechanism may inform the user that he has placed some items in the basket, but he still needs to choose delivery options and make a payment.

When you download something, a progress bar shows how much time the users need to wait approximately. Moreover, this element communicates that the system is working, which reduces uncertainty. It prevents users from clicking the download button multiple times because they were not sure if it is actually working on the request.

Imagine waiting for an elevator. You press the call button and expect it to light up to reflect that the system knows you are waiting and will send an elevator soon. You might even be able to see what floor that elevator is currently at, so you can determine how long you will need to wait. Open communication between the system and the user not only allows you to understand what is happening but also empowers you to make decisions based on that information.

#2: Match between system and the real world 

The system should speak the users’ language and avoid incomprehensible system-oriented terms and jargon. If people do not understand the terms used on the site, not only they will feel foolish and unsure, but also a lot of them will go elsewhere to find a more clear explanation or even to not complete their task. Additionally, more common words are also better for SEO because they are what users search for. 

To match the user’s expectations, information should be presented in a natural and logical way that makes sense to the user. 

Communicate like a human. Not like a machine.

The next issue concerns design. It is much better when your UI elements look like objects in the physical world. For example, highlighting passages on your blog feels much like using a brightly colored marked to select important text in a traditional book or choosing a movie to watch on Netflix feels like scanning the shelves of a video store. Familiarity is the key and makes these experiences satisfying.

#3: User control and freedom

The third principle talks about giving the freedom to the user to navigate and perform actions - for instance, the freedom to undo or redo any accidental moves. When it comes to online shopping, every user should have control over the operations he performs within the website - like the ability to easily remove a product from the cart with a click. 

Nielsen's research shows that around 30% of all internet clicks are back button clicks.

#4: Consistency and standards

Having so much experience with the interfaces, our brain has created certain patterns, and now we look at the specific things at specific places. For instance - placement of the logo is on the left at the very top and linked to the main page. The search bar is usually on the top right as well ass the cart. Remember that consistency is one of the most powerful contributors to usability. Using best practices and common patterns will eventually result in a much better overall experience. 

#5: Error prevention

It is worth mentioning that even better than good error messages is a well-considered design that prevents users from making errors in the first place. In other words, an excellent UX should be like a reliable friend who no matter what warns you before you are about to make a mistake.

There are two types of errors that users make:

1. Slips - happens when users want to perform one action, but end up doing something else, often similar. For instance, typing an “i” instead of “o” is a slip. The best ways to  prevent slips are:

• offering suggestions (e.g. search suggestions enable users to type less, making fewer slips that would produce no results),
• including helpful constraints (e.g. picking up a date range that fits),
• choosing good defaults (e.g. it is useful when users have to perform repetitive actions - in a reminder app, can be some prompts such as Tomorrow, Next Week, In one Hour),
• finally using forgiving formatting (e.g. in a field requesting a phone number it is  better to provide format with spaces such as 000 - 000 - 000).

2. Mistakes - occur when users have goals, they take the right steps to complete them, but the steps will result in an error. They are much more severe than slips. There are solutions to avoid them: 

• following design conventions (e.g. when booking a flight you can use greying out dates in the past, letting know the users that they cannot select them),
• communicate affordances (e.g. an “affordance” refers to the possibility of an action on an object - we say that an elevator button affords being pressed). 

#6: Recognition rather than recall

In a nutshell, there are two types of memory retrieval: recognition and recall. The first one happens when you easily recognize a person or an object that you have seen before. We can say that it is a very shallow form of retrieval form memory, and it does not require much work. The second one is when you have to find an infrequently used piece of information in your memory. To do it, people need to activate more memory chunks, which means that the recall process is a deeper retrieval and requires more work. 

In User Interfaces, you should promote recognition by making information and functions visible and easily accessible. Many mobile apps start with tutorials but we definitely prefer using tips that are tailored to the page that the user is visiting because tutorials provide too much information might be unnecessary. 

#7: Flexibility and efficiency of use

Every system has two types of users - a newbie and advanced. The interface should be flexible, transforming itself between both of them. For instance, while installing new software that asks if the user wants to go ahead with default installation or custom installation. An advanced user chooses a custom installation to cut out the unnecessary moves.

The efficiency of use means ensuring fast page load time, which has a significant impact on the website's conversion rate.

#8: Aesthetic and minimalistic design

No need to remind quotes such as less is more (Ludwig Mies Van Der Rohe), or Simplicity is the ultimate sophistication (Leonardo da Vinci). We strongly agree that minimalist design with great technology is a winning combination. The best clue is to give relevant information and remove all the unwanted things. 

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

In short, it is important to design in a way that the user does not have to google to diagnose and solve the problem he is facing. When an error appears on the page, inform the user about it in a clear and understandable way to get rid of that. 

#10: Help and documentation

The last of the Nielsen's heuristics shows that even if we comply with all previous rules, some users will still need help in using the website. At the very bottom of the page, users should find links to relevant help sections - this is a relatively good solution that allows them to quickly and easily find answers to users' bothering questions. 

Nielsen’s heuristics in app development

The presented guidelines are general rules of thumb and will mostly be applicable to any web and mobile applications (you can also check some of our’s UI designers’ best practices in app design). They have been reflected in many of the digital products designed by some of the most successful companies in the world such as Apple, Google or Adobe. Therefore we strongly recommend implementing heuristic evaluation in your designs. 

For more useful tips about Product Design check our e-book and if you're looking for UX and UI services tailored to your project's needs here are our Product Design solutions.