The A to Z of UX - H is for Heuristics - Part 1: 10 UX principles to assess user interface design

Darren Wilson



Heuristics are a well established and accepted list of UX principles used to assess how well a user interface has been designed for its intended purpose.


“They are called ‘heuristics’ because they are broad rules of thumb and not specific usability guidelines.”

They have been in use for many years by UX practitioners and were more formally authored in the ‘90s by Jakob Nielsen and Rolf Milich. They have been recently updated with minor changes and are as relevant now as they were then.



A heuristic evaluation is what happens when an expert, or set of experts, reviews a product, with the likely result being a list of usability issues that need to be addressed.


Such an evaluation should support, rather than replace, user testing as part of the Human-Centred Design process.


Both are equally important and each will unearth crucial information for the UX designer and product owner.



An expert review can follow a heuristic evaluation, where heuristics have already been established. As a result, expert reviews may be less formal than a heuristic evaluation.



There are 10 guiding principles to consider when either when designing a new, or assessing an established user interface.



1. Visibility of system status

“The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.”

Description


People like to be aware of what is happening so they can take control and make informed decisions. More and more, they expect this status content to be immediate and up to date.


Knowledge of system status is particularly important following a user action so that the feedback loop can be closed.


As humans, we have less patience for latency than ever before. However, communicating clearly and transparently will build trust and confidence in the user.


Being consistent with this strategy, creating predictable outcomes will further enrich the sense of trust.


‘Visibility’ is a red herring, in that feedback could, and should, be provided via different sensory channels. So it can be felt, heard and/or seen by the user.


How to achieve it

  • Provide clear and concise information to the user regarding system status.

  • This can be done visually (an icon and/or text), audibly or through haptics .

  • To improve accessibility, several feedback strategies may be applied.

  • Eliminate system latency and let the user know if an activity is in progress.


Examples

  • Loading content or downloading a file

  • Storage full

  • Sent email confirmation swoosh

  • Button press (graphical, haptic, audible)

  • Empty list or shopping basket

  • Mobile notification icons / battery / Wi-Fi signal



iPad desktop with app notification feedback, app install progress and core system information
iPad desktop with app notification feedback, app install progress and core system information


Money supermarket add a little humour and a human touch to indicate status and prevent abandonment by stipulating that the hard bit is over and done with, while displaying the completion state percentage
Money supermarket add a little humour and a human touch to indicate completion state and prevent abandonment



2. Match between system and the real world

“The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.”


Description


When people interact with a system, particularly for the first time, they will have preconceptions of how it might work based on previous experiences and knowledge of other systems.


By hooking on to those previous experiences and associated familiarities, it’s possible to increase the usability of the interface you are designing for.


Implementing strategies and stereotypes the user will recognise from previous experience, will also aid the user in understanding what they need to do next.


When control behaviour aligns to the user expectations - known as natural mapping - it becomes easier to learn and remember for the next time.


The very essence of Human-Centred Design is that the human is at the core of what we are designing. As designers, we need to understand that things which seem perfectly intuitive for us, may not be for our users.


Terms, phrases, icons, interactions and sounds should be familiar to the user to increase learnability.


Using jargon, acronyms and abbreviations that are ambiguous and confusing should be avoided. Clear, concise terminology should be used instead. This increases confidence and the user will feel good as a result.


How to achieve it

  • Use language that users understand and do not require a dictionary or voice assistant.

  • Don’t make assumptions that content and behaviour you find intuitive will be automatically understood by your users.

  • Carry out user research to better understand your users and what they find familiar.

  • Perform competitor analysis to understand stereotypes that users may be familiar with. But don’t replicate it if it’s not intuitive.


Examples

  • Vehicle Seat / Climate controls (digital or analogue)

  • Oven hob controls (matching the spatial position of hob burners)

  • Use of skeuomorphism for digital controls and functions such as the computer trash can


Bentley Continental Seat Positioning Controls that map to the physical structure of the seat
Bentley Continental Seat Positioning Controls, which map to physical seat structure

Image Credit - Autocar


Volvo XC60 Digital Climate Controls that have a graphic of a human to indicate where air will flow to
Volvo XC60 Digital Climate Controls, which map air flow to the human body

Image Credit - Autocar


iOS storage area for deleted content, which looks like a waste paper bin, and also has separate graphical states whether it is empty, or not
iOS icon for deleted content looks like a waste paper bin, and has different graphics whether it is empty or not


3. User control and freedom

“Users often perform actions by mistake. They need a clearly marked ‘emergency exit’ to leave the unwanted action without having to go through an extended process.”

Description


Many of us live in a world where we are time-poor. We have so many things to do with not enough time in which to do them.


Some actions may have little or no consequence, such as pressing the wrong character on a keyboard or hitting the wrong link on a website.


Others can have greater implications, such as sending an email too early or deleting important information.


We tend to do rush jobs and/or multi-task in an attempt to complete them faster than they should do. Subsequently, we are more likely to make mistakes.


In every interface, it is essential to be able to perform a graceful exit or remedial action. Having an ‘emergency exit’ permanently available reassures users that they remain in control, whatever may go wrong.


This is where the undo and redo buttons come into their own. They are an easy solution to return to a safe place, having found themselves in an uncomfortable or tricky situation.


In creative tools, such as Adobe Illustrator and Sketch, the ability to undo and redo gives designers greater freedom to explore ideas and ditch them if the result doesn’t match their vision.


The back button in browsers and cancel buttons on confirmation dialogues also provide the same confidence.


Dialogues can be frustrating though, and Google has implemented a more frictionless technique, which allows users to undo if there is a problem. If not, then the action is silently acknowledged.


How to achieve it

  • Have dedicated undo and redo functions available for previous interactions and easy return to the desired state

  • Enable a cancel function for ongoing processes or interactions

  • Ensure these functions are visible and labelled clearly


Examples

  • Undo delete

  • Undo/redo the last function or number of functions

  • Cancel a download


Google undo component, used as a remedial action mechanism, rather than forced confirmation
Google undo component, used as a remedial action mechanism

MS Word undo / redo actions buttons and associated list
MS Word undo / redo action and list



4. Consistency and standards

“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.”

Description


Consistency is fundamental to good UX design. It helps users learn and predict what’s going to happen.


It builds confidence from users in the things we create.

There are two types of consistency to be considered:

  • Internal consistency corresponds to consistency traits within the current product experiences, or family of product experiences (MS Office, Adobe CC).

  • External consistency, however, relates to conventions and stereotypes that have been seen that users may be familiar with elsewhere, i.e. from industry or product type.

Applying both types of consistency well can lead to increased levels of learnability and ease of use, while also reducing workload.


How to achieve it

  • Create and enforce a set of design rules or a style guide for all designers to follow.

  • Depending on the size of the project, consider more detailed pattern libraries (such as those for iOS and Android).

  • Include requirements for visual content, type behaviour and interaction, type of feedback and the style of language used.


Examples

  • Placement and execution of common elements such as product navigation and toolbars

  • Style guides for visual elements, behaviours and interactions

  • Conventional keyboard shortcuts such as Ctrl / Command Z for undo


Android app navigation elements are positioned in the same area to aid the user
Android app navigation elements are positioned in the same area to aid the user


Rules of engagement are clearly written to aid consistency as seen here in Material Design
Rules of engagement are clearly written to aid consistency as seen in Material Design


5. Error prevention

“Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.

Description


People make mistakes all the time. It’s human nature!


There are two distinct types of error, which need to be accounted for:

  • Slips - Silly, unconscious errors that people make often when not paying attention. They intend to do one thing and end up doing another, often similar, action. Slips occur more frequently in expert users, as they divert less attention to what have now become automated tasks.

  • Mistakes - These are more conscious errors, which arise from users’ perceived expectations and mental models not mapping to the actual system behaviour.

If errors can happen, they will. So be prepared for them and design your system to try to eliminate them from happening in the first place.


When they do, help the user by providing clear and consistent feedback to diagnose and remedy the problem.


How to achieve it

  • Recognise where and why errors may happen

  • Use preventative measures, if the error cannot be eradicated

  • Where possible, erroneous actions should be reversible - implement an easy redo mechanism

  • Only highlight errors that have an impact on the user

  • Be supportive rather than critical, guiding the user along the correct path

  • Use affordances that people are familiar with

  • But don’t give feedback when not needed..


Examples

  • Constrained product selection when shopping

  • Reminder to attach a file to an email on sending

  • Shopping basket visualisation

  • Password entry guidelines

  • Spelling errors

  • Inline form feedback for errors


Use of constraint by Schuh to only allow users to but what is available, and also indicate what is low in stock
Use of constraint by Schuh to only allow users to but what is available


Money Supermarket use inlinefeedback to indicate an error and what they need to do, in human language
Money Supermarket use inline feedback to indicate an error and what the user needs to do, in human language


6. Recognition rather than recall

“Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.”

Description


There are two ways in which we access memory to retrieve information:

  • Recognition - occurs when a person or thing you see is instantly recognised as it is familiar and perhaps something we see frequently. We find this easy as it doesn't require much effort.

  • Recall - is when need to access less frequently, or rarely used pieces of informat