Error States in UX: Best Practices for Effective Error Handling

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.

What is an Error State?

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.

Insight 1: Make error states noticeable

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.

Insight 2: Use the correct UI element for the type of error

Various error states: red text field with warning icon, a dialog box, a tooltip and a toast message.

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.

Insight 3: Design safeguards from possible mistakes

A screens of Instagrams' safeguards. One dialog box asks users, if they want to discard their edits, with "discard" option marked with red color.

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.

Insight 4: Make correcting errors as easy as possible

On first screen there is a toast message that says "To share reviews you must first create an account". Below that message there is a hyperlink labeled: "Set up account". The second screen is a faild login screen. Icons below texfield show what characters have to be included to create a strong password.

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.

Insight 5: Be mindful of the language of the error states

Examples of error state messages. First says "Sorry, you just missed this ride." The second says "We couldn't update these changes. Check your device connection and please try again".

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:

  1. Information that the operation was not successful
  2. The reason why it was not successful
  3. What action do users need to perform next to fix the error

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.

Explore error states with Talebook

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.

Further reading

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