Encountering errors is an inevitable part of using technology. Whether it’s filling out a form, submitting a transaction, or interacting with any application, users often come across error states that disrupt their experience. How the system handles these errors can make a difference between creating a frustrating or satisfying experience for the users.
An error state is a screen or a UI element that informs a user that something went wrong. Error states, also known as error messages or feedback, play a crucial role in UX design. They serve as communication channels between the system and the user. By understanding the principles of designing error states, UX professionals can create seamless and intuitive experiences that foster user trust, minimize frustration, and ultimately improve overall user satisfaction.
Using red to signify that something went or is about to go wrong is a standard practice in UX design. Short messages written in red text inform the users about the error and what action they need to take to fix it. The red color brings users’ attention to the elements of the UI that require their action. However, considering accessibility guidelines, designers should never use only color to signify error. Additional elements, like warning icons, should always be used as well.
In some cases, users may encounter situations where they need a warning about unexpected or unwanted outcomes but can still proceed with their workflow. In other cases, they may encounter critical errors (like “lost connection” or server crash) that prevent them from achieving their goals. It is crucial to distinguish between these “additional” messages and those that inform about significant obstacles to the user’s progress and select appropriate framing for a type of error, both in terms of UI element and text description.
For example, error screens and overlays may be more appropriate for critical obstacles. At the same time, dismissable tooltips or toast messages may be suitable for errors that allow further workflow but may lead to unintended outcomes.
There are many different methods of displaying error messages. Selecting the correct UI element for a specific type of error is essential.
According to Page Laubheimer, there are two types of errors: slips, which occur when users try to perform an action but something goes wrong in the process (like typos), and mistakes, which happen when there is a miscommunication between a system and a user.
App design should be safeguarded against possible mistakes. Destructive actions, like discarding content or deleting an account, should be marked red. Warnings in the form of confirmation dialogs are also a good idea.
A good error message informs the users how to correct a mistake. It is a good practice to connect error messages with a UI element it involves. This practice is called inline validation. Basically, inline validation is displaying an error message right next to or above the interface element (like the input field) it belongs with.
If fixing an error requires performing an action that users can take only on a different screen, it is a good idea to provide a button or hyperlink that takes the users to a place where they can fix the error. There, users can resolve the issue by providing additional data, selecting the proper setting, or fixing their mistakes.
Lastly, choosing the appropriate tone and words for error messages is crucial. According to Fanny Vassilatos and Ceara Crawshaw, a good general structure for error messages is:
Overall, the error message should be concise. The shorter it is, the more likely users will read it. It is best to avoid overly informal language and to use humor sparingly. Only in some instances, blending an apology with something funny, surprising, or novel may salvage a disappointing situation.
While writing an error message, you should clearly and unambiguously explain why the error occurred. It would be best to avoid jargon and excessively technical language unless it includes information necessary to recover from error. Additionally, phrases like “you did” or “you didn’t” that put the blame for the error on the user should be avoided. Instead, it is best to use a positive tone as much as possible.
Errors are disruptive to user flow and can be frustrating to users. Unfortunately, they are unavoidable. The best a designer can do is to prepare for the worst by designing error states that help users quickly recover from system errors.
A lack of them is infinitely worse than an error state itself because this situation leaves the users alone to figure out what went wrong.
If you are a designer tasked with creating error states for your product, we prepared something just for you. Talebook created ready-to-use wireframes exemplifying best practices for designing error states. Check them out here.
Error-Message Guidelines by Tim Neusesser and Evan Sunwall
Error Handling & Feedback by Fanny Vassilatos and Ceara Crawshaw
Designing Better Error Messages UX by Vitaly Friedman
Best 10 Examples And Guidelines For Error Messages by Meg Long
How to Design Error States for Mobile Apps by Nick Babich