Error messages are frustrating to see. They mean that somewhere, somehow, something went wrong. The mistake can be due to a user error or a system malfunction. Either way, both us as humans and the product we’re interacting with are imperfect by nature, which means mistakes are bound to happen.

Because of this reality, error messages are a vital aspect in the user experience in any app or web design. The key is making errors useful so that users can be helped to overcome roadblocks, instead of abandoning the experience altogether.

The list of best practices below can help make empty states and related error messages more effective for the user experience (UX).

By clearly describing what the error is, why it happened, and how to overcome the problem, an error message can be a powerful UX resource to empower users.

1. Make error messages human friendly

Be clear and specific

Error messages are seen as an annoyance because they’re often extremely vague. They might say that “an error occurred,” but not much else. This leads to a dead end since the user doesn’t know the true cause of the error, nor which action to take next in order to overcome the problem.

Users shouldn’t have to guess what’s wrong with the product they’re using. By clearly describing what the error is, why it happened, and when possible, how the user can overcome the problem, an error message can be a powerful UX resource to empower users despite any mistakes that occur.

The above left is a good example of an error message that is clear. It explains what the error is (a rename error), it explains why it happened - because another file with that name exists. Finally, it explains how the user can overcome it, by specifying a different name. The error message is specific enough, so that the issue doesn’t turn into an insurmountable obstacle.

In the above example, Doordash has a nicely designed error user experience. When entering an invalid coupon code, it gives a helpful and descriptive error as to why it’s invalid, thereby helping the user to understand what action they need to take next. Helpful information like this can prevent users from abandoning a product altogether.

Avoid jargon

Using technical jargon can scare users off because they don’t know, and don’t care, what it means. Instead, use simple language that the average user can understand. As designers, we may sometimes forget that we’re not designing for ourselves, but for people who will use the product on a regular basis. By keeping the user in mind at all times, we can ensure that even error messages are presented in a human-friendly way.

In the above example to the right, a user is presented with an error that contains meaningless jargon and no way to overcome the error. The only action the user is presented with is to hit “OK.” Clearly, in this case, an “unrecoverable error” is not ok.

Instead, we can present users with different actions they may take, and explain the error using clear UX writing language.

Keep it short and to the point

An error message shouldn’t feel like reading an essay. Most of the time, the extra details are meaningless for users who’re looking for a much quicker bottom line. Instead, keep error messages short and simple and leave out any lengthy explanations.

In the example above, Microsoft acknowledges an error and gives the user actions to try to recover, along with reporting the problem, so the company can further examine what happened. Also notable is the error code listed in the bottom left corner. Instead of trying to include all the technical error details, this short and unobtrusive code allows users who wish to do so, to search for any resolutions on their own.

2. Don’t play the blame game

The famous saying holds true when it comes to error UX: “It’s not what you say, but how you say it.” Tone plays a big role in how users perceive an experience. The last thing you’d want to do is make the user feel stupid for using your product, or like the error was their fault.

Use positive verbiage

Writing good error messages is quite similar to resolving conflicts between humans. Using negative phrases only escalates the situation, so it’s important to avoid phrases that make the user feel attacked. A good rule of thumb when writing error messages is to think: “Would I actually verbalize these words to a real person?”

Don’t (visually) yell at the user

Even though a product may not physically yell, it can give that impression by using all capital letters or if the design looks too alarming. A design that feels too negative could create an unpleasant experience and put their continued use of the product at risk.

In the above example, Chase Bank avoids using phrases like “you did” or “you failed to do,” and instead, takes the blame gracefully, explaining that they “can’t find” the missing information. Chase then proceeds to provide additional steps to help the user recover their information.

It’s important to remember that users form an opinion of your company based on how they experience your product or service. Blaming them for issues, even if they are their fault, is a quick way to lose customers. By designing error messages that convey information in a positive, encouraging way, you improve your product’s overall user experience, and empower them to overcome any issues encountered.

3. Make error messages a learning experience

Jakob Nielsen, principal of Nielsen Norman Group, said in 1996 that users don’t really read documentation: ”Nielsen's first law of computer documentation is that users don't read it. The second law is that if they read it anyway, it's because they are in deep trouble and need the answer to a specific problem.“

This “law” still holds true today. Seldom will users actually read documentation or help guides before using a product, and, if they do, it’s usually because something has gone wrong. We can use this behavior to design error messages that educate and guide users in the process.

For example, when presenting an error that’s due to something a user “can’t” do, it may be beneficial to provide suggestions of actions they can perform. Alternatively, we can provide a link to resources that will help with what the user is trying to perform.

4. Make error messages accessible

UX designers should be concerned with making their designs accessible to all types of users. These may include people who have visual, motor, speech, or other impairments. Since users with a wide range of abilities will face errors, it’s important that they, too, can recover from unexpected roadblocks.

Don’t rely solely on color

We’ve become quite comfortable with the notion that red equals error. However, some users may have different vision impairments. In these situations, it’s important to have an alternative, such as a communicative icon or a thicker border, so that the error still stands out to the user.

In the above example, we see multiple cues to indicate an error state. In addition to the common red color around the input state, there's clear text signaling for what’s required from the user, along with the exclamation warning icon, so that the error is recognizable even without color.

Level up error UX with keyboard navigation

Users with motor disabilities may navigate content mostly using a keyboard. One way we can improve the UX of error interactions is by “auto-tabbing” the cursor to the relevant error and allowing them to tab to the next error, instead of having to manually go through the entire form, including the parts without errors.

Keep error layouts consistent and natural

Errors should be consistent in where and how they appear. For instance, it would be confusing if system errors are displayed at the top of the screen at first, and then other parts of the screen later on. By keeping the placement and visual language consistent, users can identify the error quickly and feel gain control of their experience.

5. Improve UX with error message prevention

The only thing better than user-friendly error messages are error messages that never appear. Though it may not be feasible to prevent every error, it is possible to reduce the amount that users see by applying a few design enhancements.

Prevent input mistakes

One of the most common sources of error messages is when users fill out input fields. We can put some thought into the design to prevent common mistakes.

In this example, Lemonade Ltd. uses address autocomplete suggestions to prevent users from entering an incorrect address.

Another common input error relates to phone numbers and Social Security numbers. Sometimes, websites expect users to include the dash “-” when entering a number and will generate an error if only numbers are typed. A better approach would be to design input fields that auto-format information to the way you need it, thereby preventing unnecessary errors from slowing down users.

Here are a few more input error prevention tips depending on the design:

• Disable booking dates in the past

• If a website has an age requirement, disable birth years past the requirement

• Auto complete email addresses with “.com”

Error prevention should be a part of the user experience design process. It means thinking about the entire user flow and analyzing what could go wrong. After identifying potential issues, we can then improve the design so that the errors never occur in the first place.

Present information in bite sized chunks

Another great way to prevent errors from happening is to not overload the user with too many actions at once. In the case of web forms, users are often presented with 4 or more fields to fill out. The more users have to do, the higher the chance for errors.

Slack onboards new users by having them fill out just a little bit at a time, instead of presenting a typical web form with multiple inputs. With only one piece of information to insert, users feel welcomed and encouraged, and there’s a lower chance for an error to occur.

Conclusion

Error messages are annoying. Though it may not be possible to get rid of every blunder along the way, we can make errors more pleasant to encounter. Good error message design contributes to the overall experience of your product and perception of your company. Like any other aspect of the design, it’s important to test and validate how users experience error messages and continue to improve them.

Remember, the main goal is to make sure that any obstacles that come up don’t stop users in their tracks completely. Keep them moving and empower them with error messages that are beneficial to real humans.