An error message is a short message that appears on the screen when a user does something wrong or a software product itself fails to perform and complete a certain action. They are often perceived as insignificant annoying notifications that no one actually reads before clicking “OK”, but in fact they play a vital role in providing information on any problems and issues that users encounter during app use and aiding them in completing tasks successfully. The way error messages are designed impacts user experience heavily: poor design leaves users in confusion on what exactly went wrong and how to fix it, which in its turn leads to frustration and even app abandonment, whereas effectively crafted messages serve as a helpful tool in providing clarity on how to proceed when encountering an issue.

Types of errors

The most effective way to design an error message is to rely not only on the overall look of an app, but more on the certain type of an error the message is designed for.

Errors that occur within software products can be of two types: those that happen within the system and those that are the result of users' incorrect actions.

Common system errors:

Unstable connection, server issues;
Data procession issues;
Security failures

Common user-related errors:

Incorrect form input, including passwords;
Wrong type of data upload;
Misunderstanding the functionality (skipping necessary steps to complete the task, clicking on inaccessible pages, etc.)

Key rules for designing error messages

The way an error message is designed defines whether it is going to be helpful and useful in enhancing user understanding of an error and finding solutions or whether it will only promote frustration and make users leave the app. Here are some important rules UX designers should stick to in order to make error messages effective:

Make the design user-centered

First and foremost, error message design should be focused on the users and user experience enhancement. Put users needs and expectations higher than any principles of visual esthetics or current design trends, as well as conduct user testing regularly, study user feedback and make improvements to keep users satisfied.

Provide a clear error description

When something goes wrong, the first thing every user needs is to clearly understand what exactly happened, especially if they've never encountered such an issue before. A well-designed error message should provide clear information and be specific about the problem instead of being vague or generic.

Suggest clear solutions

The next step is to help users move on with what they are doing, which can be done through concise and easy-to-comprehend instructions. Provide clear descriptions of everything one should do to overcome the error, as well as add an option to exit the task in case a user doesn't feel like retrying at the moment. If there is a situation where nothing can be done, clearly explain the reason.

Use visual cues

Visual cues help our brains to grasp information quicker and better, so using visual elements in error messages is a great way to enhance user's understanding of an error and ways to solve it. You can use colors, icons, various UI elements to highlight important bits of data, assist users in navigation and structure information.

Keep the design consistent

Consistency is one of the key UX design principles, and error messages design is not an exception. The tone, color scheme, shape and other factors of the error messages should be consistent throughout the whole product to give users a sense of familiarity and control.

Make messages easy to read

Make sure that the text is easily readable, especially against darker background colors, which makes it accessible for elder users and people with visual impairments. Compatibility with various assistive tools like voice control is a great bonus.

Study feedback and make adjustments

As any other UX element, error messages should be regularly tested and improved based on user feedback. Observe how users interact with the error messages in your app, gather and review user feedback, analyze whether error messages do their job to the fullest or if there are still some pain points waiting to be improved. The look matters too - error messages need a regular redesign to keep up with the current UX trends and match the overall product's design.

Things to avoid when designing error messages

Poor error message design can affect the whole way users interact with the software product. One uncompleted task leads to another, which eventually makes users leave the app in frustration and promotes user recession. Let's discuss some common mistakes in error messages UX that negatively impact user experience and have to be avoided:

Technical jargon

An average user isn't familiar with technical jargon and complex terms - they need to be spoken to in a simple, easy-to-understand manner, especially when it comes to issues that need to be solved quickly and there is no time to search for additional explanations.

Vague error description

The more accurate the error description you give, the more chances there are that the user gets a full understanding of an issue and ways to overcome it. Generic messages like “Something went wrong, try again later” don't explain the reason of an issue, and thus don't serve as a helping tool, but rather waste users’ time and lead to frustration.

Absence of solution options

Providing a clear explanation of an issue isn't enough - an error message should also contain clear instructions on how to move on with the task and what actions to take to try again. Without guidance, there is a high risk users will find it easier to leave the app rather than search for ways to solve the issue on their own.

Accusatory tone or unnecessary humor

The tone of an error message should be neutral, calm and supportive. Accusatory tone or caustic jokes are a definite “no” in error message UX: in the moments of confusion users need guidance and reassurance, not feeling like it's their fault something went wrong. It's acceptable to use light humor to relieve stress - for example, in the form of a funny animation while the task gets re-done.

Absence or insufficiency of visual cues

As we've mentioned earlier, visual cues are a great tool to quickly and clearly communicate to the users that an error occurred and how they can resolve it. The absence of such deprives users of an effective and easy way to visualize the issue, which, again, can provoke confusion and wrong actions on user's behalf.

Main goals of error messages UX

To sum it up, error messages design should fulfill 3 main goals:

Сommunicate an error to the user;
Help the user overcome the error;
Educate the user on how to avoid the error in the future.

Conclusion

Errors, system failures and various types of issues are an inevitable part of the user experience. No matter how irritating it sounds, sometimes things can get rocky even when completing minor tasks in the most perfectly crafted apps, leaving users in the search for guidance on how to overcome that. Error messages are designed to be that guidance, from clearly explaining what exactly has occurred and why, to helping resolve the issue and avoid it in the further interactions with the product. The way error messages are designed impacts an overall success of any software platform: well-implemented messages provide users with a sense of security and build trust around the product, while poorly designed ones provoke confusion and can make users feel the app is not safe enough to stay on. So even if error messages might not be the most important part of a UX design, they still play a huge role in enhancing user experience and making it as smooth as possible.

Error messages in UX: how to make them effective and user-friendly