top of page
  • Darren Wilson

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 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 information such as names or numbers, which may be locked deep in our memory bank. Accessing those deeper parts of our memory requires more cognitive effort and is more tiring.

It may be good for a quiz to ask open-ended questions that need us to open the vaults in the memory bank (vs multiple choice questions, which at least give you the key) but it’s not recommended for user interface design.


Good user interface design ensures that important content is easily discoverable and requires minimum cognitive effort.


How to achieve it

  • Information architecture and menu system that meets users expectations

  • Use visual cues to create an association to specific information

  • Display Inline feedback or contextual information as appropriate

  • Provide a help mechanism, particularly for more complex tasks

  • Limit content which the user needs to have memorised in the first place

  • Surface or make it easy to find content that has been viewed previously


Examples

  • Password entry hints and tips

  • Contextual text matching, such as finding the correct Rail station

  • Provide a help mechanism, particularly for more complex tasks

  • Recently clicked / viewed items


Password entry for Twitter, which provides rules upfront to try and prevent rather than cure
Password entry for Twitter, which provides rules upfront to try and prevent rather than cure


Contextual filtering reduces errors AND reduces workload but minimising number of characters needed
Contextual filtering reduces errors & reduces workload

BBC iPlayer has quick access to recently viewed list to easily picked up where you left off
BBC iPlayer has quick access to recently viewed list to easily picked up where you left off


7. Flexibility and efficiency of use

“Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.”

Description


As users, we are all different. We have our own personal ways of doing things as well as when and how we do them, which are all based on levels of skill and experience as well as how we’ve been taught.


As designers, we need to cater for all types of user and ensure that the experience is intuitive and compelling for all of them at different times.


How to achieve it

  • Create memorable shortcuts for frequently-used functions, and/or complex tasks

  • Allow those shortcuts to be user-configurable by the user

  • Personalise the experience by tailoring content for the person viewing it

  • Contextually display content depending on what task is being completed

  • Offer ‘onboarding’ and ‘scaffolding’ to continually help users to improve and become more proficient and efficient


Examples

  • Provision of shortcuts, ideally customisable

  • Accelerators in Search Engines

  • Use of a help mechanism, particularly for more complex tasks

  • Scaffolding UX, which educates and informs users to know more


Adobe Illustrator options with keyboard shortcuts displayed to be used later
Adobe Illustrator options with keyboard shortcuts displayed

Grammarly use scaffolding as a technique to educate and inform users to know more
Grammarly use scaffolding as a technique to educate and inform users to know more


8. Aesthetic and minimalist design

“Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.”

Description


There is often debate between UX and UI about what content should be shown, and how it should be represented.


The optimal resolution is finding the balance when any visual elements that are displayed either aid the usability and/or contribute a positive addition to the overall user experience. If it does neither, then it should be removed.


Removal of superfluous content allows the user to focus on the primary task and for any content that is shown to sing.


It’s also important to think about all types of users, some of whom may struggle with lots of colours (particularly striking) in a small space and small text.


How to achieve it

  • Only display content that adds something to the experience

  • This relates to static and dynamic elements

  • Apply white space to create focus on particularly important elements

  • Use colour to aid intuition as well as enhancing the aesthetic

  • Clear and bold calls to actions with intuitive labelling


Examples

  • Google Home Page

  • Android Auto

  • Air BnB website

  • Apple iOS

  • Spotify mobile application


Google web page with ultra simplicity: search bar and personalised shortcuts
Google web page with ultra simplicity: search bar and personalised shortcuts

Android Auto Music screen, showing only what is necessary, beautifully
Android Auto Music screen, showing only what is necessary, beautifully


9. Help users recognise, diagnose and recover from errors

“Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.”

Description


Related to principle 5, if errors do occur, then the system should assist the user to demonstrate what has happened and what to do next. In plain and simple language with clear and concise instructions.


Users can more easily forgive when the error is recoverable and they understand exactly what is required of them.


How to achieve it

  • Recognise where and why errors may happen

  • Use preventative measures, if the error cannot be eradicated

  • Be useful and only highlight errors that have an impact on the user

  • Avoid jargon and use clear, concise language

  • Make it obvious what the solution is and what the user needs to do next

  • Only display when useful


Examples

  • Displaying excess characters while still allowing the user to edit

  • Forgot to attach file reminder

  • No email subject title reminder


Twitter post showing excess characters, as well spelling errors (via Grammarly)
Twitter post showing excess characters, as well spelling errors (via Grammarly)


A modal pop-up which the user needs to interact with to close, declaring it has no error...
This on the other hand is not helpful...



10. Help and documentation

“It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.”

Description


The best systems don’t need a manual or quick start guide to allow us to operate them.

However, there are situations where the provision of help content can facilitate the user to have an enhanced experience and have a better understanding.


This help may be generic in first use experience, or contextual concerning a specific problem the user may encounter.


Content within the experience that is directly accessible may also be of assistance. These may come in the form of documents, videos or tutorials.


Any such content should be jargon-free, easy to read, correct and up to date.


How to achieve it

  • Consider an onboarding mechanism to introduce users to the experience

  • Use software updates to introduce new features and interactions

  • Have a search facility to allow the user to look for content

  • Implement contextually sensitive support to assist the user with the right information at the right time

  • Use machine learning to provide hints and tips to the user if they aren’t accessing key features or using the system efficiently (but be aware if this support is constantly dismissed)


Examples

  • Use of Augmented Reality

  • Integrated, onboarding sequence to aid set up and first use experience

  • Coachmarks support when using a new app, or there have been new additions and/or changes


Use of AR in 3rd party application to help AUDI owners change oil in their vehicle using their iPad
Use of AR in 3rd party application to help AUDI owners change oil in their vehicle

Image Credit - Agentur Graustich



Use of coach marks to articulate key interactions to users of the Flash Scores sports application
Use of coachmarks to articulate key interactions to users of the Flash Scores sports application


Now that you have an understanding of what Heuristics are, in Part 2 I shall look at what it takes to apply these in a UX evaluation.




Further Reading











Get in touch with the author


Darren Wilson, Managing Director at UXcentric

darren@uxcentric.co.uk

07854 781 908



97 views1 comment
bottom of page