The A to Z of UX - E is for Errors: 14 tips for how to handle the inevitable mistake

Updated: Dec 16, 2019

Darren Wilson


Let’s be fair, people make mistakes all the time. It’s human! 


The impact of the error is often dependent on the situation. Hitting the wrong character to mis-spell a word might be a minor irritation. Selecting the wrong button setting into motion a critical and irreversible action can send you into meltdown!


We can also assume that if an error CAN be made, it WILL happen at some point. As such, unless it can be designed out, a plan is required for how to handle the user experience of the aforementioned error. 


Errors can be categorised into many forms, but can be broadly put into two categories - slips and mistakes [1].   

  • Slips are made when performing subconscious actions we are used to performing, such as pressing the wrong character on a keyboard, or taking the wrong route. It often happens as we faily to apply the proper attention to the task, and are on ‘auto-pilot’.

  • Mistakes result from more conscious, deliberate actions. They occur in new situations, where incorrect decisions are made based on the information we have before us, which perhaps relate back to our previous experience. For example, expecting to a button to behave one way based on experience, yet it does something completely different.

It is widely accepted that the majority of people don’t read instructions when operating something for the first time. We figure things out as we go and prefer intuitive experiences that facilitate this.


As a result, we often make mistakes as we go. Providing for supportive feedback, rather than criticism can mitigate this onboarding of a new product.   


The significance of the errors that we make can be used as a means to measure the usability of a given product or experience [2]. 

  • How many errors do users make?

  • How severe are these errors?

  • How easily can they recover from the errors?

We can measure and quantify error rates objectively i.e. time or counters or subjectively via Likert Scales. We can also convert into value with respect to loss of productivity i.e. time and resource [3].


As UX Designers, it’s our role to make experiences as compelling and usable as possible so that people can be efficient and effective. How to handle errors is a fundamental part of that success. 


Here are some tips to design experiences, helping minimise pitfalls a user may come into contact with, and what to do when they do.



Prevention is better than cure


As designers we should endeavour to eliminate as many potential errors as possible.  We should fully understand the system design to see where they may transpire, and have them designed them out wherever possible.


Where this is not possible, we can apply techniques to mitigate any risk of error.



1. Provide constraint


Constraining what the user can or cannot do in context will prevent them from trying to make an action that is not possible. 


For example, if there are a limited set of correct responses, present these in a closed, bounded format, which will prevent an error occurring i.e. drop down, radio button etc.


A good example of this is an address finder. Enter the postcode and then select the correct address from the drop down provided.


Here is another example from a shoe size selector on the Schuh website. When clicking the drop down for choosing a size, it removes the sizes that are now out of stock. 


What I also like is that is goes a little further and informs which sizes are low in stock, therefore potentially preventing disappointment in future. 


A nice boot too! ;)

Schuh website size selector component with contextual options preventing ordering a size that isn’t available
Schuh website size selector component

Trainline provides a contextual search to assist with finding the correct station you require. If there are multiple answers, and you’re not sure which is the correct one it helps you out. 


For example, when heading to London, it could be that you have no idea which one is best. It provides and prioritises the selection of ‘Any’, saving time and prevents an error requiring corrective action later. 


Trainline contextual station finder showing matches to text string, but also with the ability to select any station from a particular location
Trainline contextual station finder

2. Display system status


One of Neilsen’s usability heuristics [4] is to provide visibility of system status. A useful way of providing this is via Rich Visual Modeless Feedback (RMVP) [5]. Rich in terms of providing detailed feedback as to what is happening. Modeless with respect to the user not being required to interact with the product to receive said feedback. 


An example of this is during an install / update.  On a mobile device an app demonstrates at point of access that activity is in progress, is unavailable and provides a cue when activity should be completed. That way there is no error in requesting the app during this state.


On a Windows system, there is explicit information for the user not to turn off the device. It doesn’t say why, but I suspect all could go very wrong if you do!


Windows 10 update saying don’t turn the computer off...., or else!
Windows 10 update

Think about what information is critical for you and how it can be presented simplistically, requiring no interaction.



3. Build on familiarity 


Using stereotypical UX components and iconography that users are familiar with increases predictability of the correct functionality.


Using a familiar strategy doesn’t require using exactly the same implementation, but should follow a strong metaphor that is easily understood. Otherwise it may need explaining or annotating.


Amazon Music, Spotify and i-Tunes all use variants of the same shuffle icon, which fit in with their own visual language. This ensures users can correctly identify the correct functionality.


Music Players with familiar icons for easier understanding
Music Players with familiar icons for easier understanding


4. Use affordances


Affordances are characteristics of an object that suggest how someone can interact with it. The concept was originally applied to physical objects - a door handle 'affording' pulling while a door plate 'affords' pushing. The same theory also applies to digital. 


In the early days, skeuomorphism was used to help users by making content appear more ‘real’. For example, digital buttons were designed to look like physical buttons that 'afford' pressing. 


E-commerce sites also use the concept of a shopping basket / cart, which provides the affordance to go and pay for our purchases.



Amazon Shopping Basket with affordance of basket to put shopping into and then pay for
Amazon Shopping Basket

 

Today we are more sophisticated in terms of what we know, but similar challenges apply with more complex interactions. Buttons are now more discernible to users, so the need for skeuomorphism is more redundant. We can now do this by means of shapes, contrast, colors and use of copy for example.

 

However, other interactions, such as dragging content, may not so obvious. Therefore, users need affordances to make them more apparent. 


In this example from Google Maps, a simple line is used to draw the eye to a potential interaction point. It affords the action of pulling the tab up to reveal more content (but also acts as a button). This line changes shape to an arrow in context (to close the drawer). 


In addition, shading and rounded corners are used above the map to create a shadow effect to demonstrate depth, giving the illusion of a floating tab that can be dragged away to reveal more of the map underneath suggesting a drag interaction to reveal more content. 


The shape of the drawer and the orientation of the line also communicated the direction of travel for the swipe action. 


These techniques help make discovery of the content more successful and reduce the possibility of an error.



Google Maps illustrating how digital affordances can be used to communicate the correct functionality
Google Maps illustrating how digital affordances can be used to communicate the correct functionality


5. Apply consistency


Applying a set of rules for designers to follow will promote consistency. It will save time and money and lay the foundations for a great user experience, keeping your customers happy.


It instills confidence and reassurance in the user. Having a consistent experience increases predictability, therefore reducing the need for learning and propensity for error. 


For example, Material Design define what selection controls are and how they should be used in different contexts etc. Once the user has learnt it in one place, they will quickly understand how to use it elsewhere, reducing the probability of error.


Material Design requirements ensure consistency e.g. when to use radio buttons
Material Design requirements ensure consistency e.g. when to use radio buttons


6. Use onboarding


Having downloaded a new app, or opened a feature for the first time, the user is likely to be at their most open to being given assistance. What is this app all about? What’s new? How do I interact with it? What new gestures are there? What can I do with it? What do these new terms mean? 


Increasing discoverability is key to giving the user the knowledge and tools to complete tasks correctly and without error.


Providing a soft, high-level and contextual summary of what they have before them can facilitate learning significantly. Especially if there are hidden functions accessed via gestures or more complex interactions.


Some are simply instructional, others get you to do the interaction itself to further enhance learning. For example, the Filmr app guides the user through a sequence of interactions to access the functionality correctly. 


Instructional tips from Filmr that encourage the user to perform the interaction to aid learning
Instructional tips from Filmr that encourage the user to perform the interaction to aid learning