Web Usability Heuristics

Overview: Principles for web usability

9 usability heuristics can help ensure that users can complete their tasks on websites in an efficient and satisfactory manner. The 9 principles are:

• Simplicity
• Consistency
• Discoverability
• Structure
• Clarity
• Control
• Affordance
• Tolerance
• Ergonomics

Simplicity

As simple as possible. Not overwhelming. No unnecessary steps.

Only what is needed

Superfluous elements make a user interface unnecessarily difficult to make sense of and increase the risk of making errors. Elements that do not support a task or a purpose should therefore be eliminated (not just hidden).

Limited number of options

Too many choices mean that it takes longer to choose between them (Hick's Law), and sometimes it completely prevents users from making a choice (Paradox of choice).

Simple interaction

Interactions with unnecessary steps increase the time it takes to complete a task as well as the risk of errors.

Defaults

Good default settings make interaction easier.

 

Consistency

Uniform, recognisable presentation and interaction. Matches users’ expectations.

User expectations

The user interface and the system’s responses must be consistent with user expectations. Users have a mental model of how a website works, even before they see it. Mental models are primarily formed by users' experiences with other websites.

Internal consistency

Elements and features of the same type should look and behave in a uniform manner on the same website.

External consistency

The user interface should be designed in accordance with conventions. This makes it easier for new users to learn how to use a website.

Consistency over time

Drastic redesigns complicate the use of a website for returning users, while gradual changes better ensure consistency over time.

 

Discoverability

Elements are visible, not hidden. Designed and placed so they are easy to spot.

Visibility

Graphical user interfaces (GUI) are based on visibility. If items are hidden, users must either look for them or remember their location. It is easier to recognise elements than to remember them.

Focus

The placement of elements can make them difficult to spot. This may be because an element is located on the periphery of the users’ field of view - or because another element that seems to be an equally good choice attracts their attention. Although elements are not hidden, they may not be easily discoverable by users.

Prominence

Size, prominence and highlighting are important for noticeablity.

Scroll-supporting design

Large images, boxes, horizontal lines and white space can give users the illusion of having reached the bottom of a web page (illusion of completeness). This may stop them from scrolling further.

 

Structure

Chunking, categorisation and grouping of elements according to users’ needs and mental models. Logical order.

Chunking

The feeling of being overwhelmed can be minimised by chunking elements when simplicity cannot be achieved by removing them.

Categorisation

A lack of or illogical categorisation makes navigation difficult.

Grouping

Elements that belong together should be grouped.

Order

A logical order of items makes it faster for users to find what they are looking for.

Metadata

Taxonomies, keywords and other forms of metadata can help users search large amounts of information.

 

Clarity

Comprehensible, precise and unambiguous communication. Evident differentiation between items. Clear context.

Understandability

Text, links, labels, and menu items create confusion if they are incomprehensible, imprecise, ambiguous or too general.

Discriminability

The difference between similar elements can be difficult to discern for users, although words and descriptions in isolation are clear. In order for users to be able to compare and choose between elements, the difference between them needs to be clearly described.

Information available

Incomplete or missing information, including missing help texts and lack of feedback, causes confusion.

Context

Context can affect comprehension and clarity. The combination of text, pictures, menu items, etc. may result in a different interpretation than if the elements were presented individually. The same concept can have different meanings for different user groups.

Aboutness

Navigation menus, text, images, etc. combined, should make it clear what a website or web page is about.

Visual clarity

Visual language can also be clear or unclear. Icons, images and highlights can be more or less self-explanatory. (The Clarity heuristic can relate to all senses).

 

Control

The user, not the system, is in control. Appropriate pace. Actions can be reverted.

User management

The experience of having control is a prerequisite for users to feel comfortable using a system. Elements that change or move automatically can be distracting.

Appropriate pace

The pace of interaction must be controllable by users. One particular pace may not be suitable for all users.

Cancellation

Options to undo actions should be available when users make mistakes or change their minds.

 

Affordance

The design is self-evident. Interactive elements signal how they should be used.

Self-explanatory

Interactive elements should be as self-descriptive and intuitive as possible. It should not be necessary to read instructions to understand how basic functions are used.

Signifiers

Interactive elements should be designed so that they clearly signal how they are used. Are they clickable, can they be moved, can something be entered?

No misleading suggestions of interactivity

Non-interactive elements should not suggest interactivity. Users should easily be able to separate interactive elements from non-interactive ones.

 

Tolerance

Reasonable interpretation of users’ inputs and clicks. Small errors are ignored.

Interpretation

The system allows for variation in user input and sensibly interprets what users are trying to achieve.

Error handling

Insignificant errors on the part of users are ignored by the system.

Extended clickable areas

Expanding an element’s clickable area can increase tolerance for imprecise clicks and touches.

 

Ergonomics

Physically easy to use. Does not challenge or exceed motor and sensory abilities.

Effortless interaction

Interaction must accommodate the limitations of human physiology. A user interface shouldn’t force users into actions that are physically awkward and cumbersome to perform. This would increase the risk of errors and adversely affect users’ speed and satisfaction.

Size

Elements should be large enough that they are easy to target.

Proximity

Elements to be used consecutively should sit close to each other so that users don’t need to make unnecessarily large movements.

Visual ergonomics

Ergonomics can also refer to visual matters such as good contrast and sufficient size.

 

Background

The 9 web usability heuristics have been identified by analysing 299 usability problems on Danish websites. The usability tests include public and private sector websites, intranets, mobile websites and prototypes. They were conducted between 2012 and 2015.

Heuristics have been used in the design of user interfaces since the 1990s. Older sets of heuristics still make for inspiring reads, but are deduced from software usability problems. Therefore, a disproportionate number of the heuristics are concerned with phenomena such as feedback and error handling that are less prevalent on websites.

Navigation, content and visual design play a greater role on websites than in software. The 9 web usability heuristics make it easier to categorise issues that relate to these aspects.

In many sets of heuristics, feedback, error messages and help text form individual principles. In our system, these components are simply objects of evaluation, just like a website’s navigation, content and features. For example, an error message may be visible, clear or simple.

You can learn more about the 9 usability heuristics in our User-centred Design course or by ordering a usability inspection of your website.

 

Published: 20 January 2021. Update: 9 June 2022. Translation: Børge Kristensen & Fiona Okafor.

Illustration: Marie Soelberg.