10 Usability Heuristics for User Interface Design

10 Usability Heuristics for User Interface Design

Jakob Nielsen’s Usability Heuristics Explained

10 Usability Heuristics for User Interface Design

In the beginning of a project, it’s easy to start brainstorming design ideas. The usability issues are evident, and you have ideas for how to solve them. Before jumping straight into design, you may want to consider conducting a heuristic evaluation.

A heuristic evaluation is a method to identify usability issues in a user interface (UI). During the evaluation, you compare the UI to a set of predefined usability heuristics. The most common set of heuristics are from usability consultant Jakob Nielsen.

Evaluating the UI against these principles allows you to objectively assess a design. Plus, it serves as documentation, which can help you gain buy-in from stakeholders. Below are the top 10 usability heuristics you should refer to next time you’re auditing a website or product.

10 Usability Heuristics for UI Design

1. Visibility of system status

The first principle states that the system should always keep the user informed of its status. Displaying system status can take on the form of a progress bar, loading spinner, or change in button color. These microinteractions provide users instant feedback, so they always know what’s going on. Rather than wonder if they need to submit an image or fill out a form again, they rest assured knowing the system is computing their actions.

Visibility of System Status
A confirmation in VSCO informs users their image was imported successfully.

2. Match between the system and the real world

A website or product should speak the user’s language. Sometimes, businesses bog users down with long promotional content before they present the information pertinent to the user’s search. Or worse, content will include system-oriented language that no one other than programmers would understand. Keeping the copy relevant and concise will help users complete tasks faster.

In addition to language, this principle states that an interface should match the mental model of users. A mental model is a user’s idea of how an interface should work. Users develop a mental model based on their experiences and beliefs. An example of matching the system with the real world is designing a navigation menu that conforms to how a user would find information in a brick-and-mortar store.

Match Between System and the Real World The Metrolink app uses words users would say when referring to train tickets and the location where they would physically store them.

3. User control and freedom

Users should have the ability to correct their mistakes. They should be able to take control of their actions and have the freedom to leave the interface without an extended dialogue. Users who feel empowered interacting with your website or product even if they make a mistake will have a much better experience than users who have to contact customer support to have their mistakes corrected for them.

User Control and Freedom An undo function allows Evernote users to revert to a non-formatted note.

4. Consistency and standards

It’s important for your website or product to have a consistent UI and standardized processes. A button that always turns a darker shade of blue on hover or confirmations that always appear at the top of the page teaches users how an interface works. If a button turns blue on one page, but turns orange on another page, users may be more hesitant to take their desired actions.

In addition to having a consistent UI, a design should also follow platform conventions. A couple of platform convention examples include the placement of the company logo on either the top left corner or in the top center of the page or a magnifying glass icon to represent the search function.

Consistency and Standards The Starbucks Locations page follows the design pattern of many other Locations pages with the list of locations on the left and a map view on the right.

5. Error prevention

While an interface should support undo (see heuristic no. 3), it would be more ideal to design an interface that prevents users from making mistakes in the first place. One way to prevent users from making mistakes is providing a confirmation message before the system registers the action. This way, users are forced to verify whether or not they meant to delete an item from their cart.

Error Prevention ID.me displays a tooltip with password requirements. As users type in a password, each requirement turns green to indicate it is met.

6. Recognition rather than recall

Along the same lines of the error prevention heuristic, an interface should be designed in a way that allows users to complete tasks without having to rely on their memory to do so. All objects, actions, and options pertaining to a particular screen should be visible on that page. This minimizes memory load and assists with faster completion rates.

Recognition Rather Than Recall Google Maps displays recent searches to allow users to select from one of their previous destinations.

7. Flexibility and efficiency of use

An interface should be flexible enough to cater to both novice and advanced users. Some users may be visiting a website or product for the first time, which may mean a higher learning curve. In contrast, some users may already be experienced with an interface and may seek shortcuts to complete frequent actions.

Flexibility and Efficiency of Use

Novice and advanced users have access to the same data, but Google Analytics offers Segments for advanced users who would like to drill into the data.

8. Aesthetic and minimalist design

Minimalist design refers to an interface that is stripped down to only the core functions and content the support a user’s goals. Irrelevant content clutters the design and can detract the user from completing their tasks.

Aesthetic and Minimalist Design Nordstrom’s layout is minimal, but not plain. White space separates groups of information from each other and the size of the buttons draws users’ attention to the CTAs.

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

Users will make mistakes whether they triggered them or the system did. An interface should clearly explain the error, so users can take the appropriate action to correct it. Error messages should be written in the user’s language (see heuristic no. 2) rather than system-oriented language.

Helps Users Recognize, Diagnose, and Recover From Errors

An inline error message in Best Buy’s checkout process specifically informs users which field needs to be corrected.

10. Help and documentation

This last heuristic states that every interface should be equipped with help and documentation. These usually come in the form of a help desk or FAQ section. Providing these resources allows users to find answers to their questions, which results in fewer calls to the customer support team.

A help desk should be organized by the user’s goals with articles that clearly define the steps to achieve them. Apply heuristic no. 2 regarding the user’s voice and add images to support the text.

The ultimate goal of a heuristic evaluation is to identify usability issues objectively. You may present this evaluation by annotating the design or creating a spreadsheet. In most cases, you may want to prioritize the issues based on level of effort and impact on usability—creating a roadmap for improvements.

Help and Documentation Shopify’s help center places a search bar at the top and divides content into broad categories with descriptions of each sub-section below.

Tags: No tags

Add a Comment

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