top of page

How to design error messages for humans

Error messages are an all-too-familiar nuisance. But when designed well, they can create a helpful and empowering user experience.

Illustration by Anita Goldstein.

Profile picture of Michael Craig

4.28.2021

7 min read

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.



A good error message reading: "File Rename: Can’t rename 'Photos' because a file with that name already exists. Please choose a different name." And a bad error message reading "Error: Null."


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.



An error message by Doordash reading "Unfortunately, this promotion is only available for new users."


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.



A good error message reading: "Oops! We couldn’t find the password or username you entered," with the option to reset the password. A bad error message reading "Unrecoverable error. Requested Range is not Satisfiable. Request-header field (section 14.35) missing and cannot be completed."


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.



An error message by Microsoft reading: "Something unexpected happened: Reporting this problem will help us understand it better. You can wait a bit and try again or restart your device. That may help," with an error code.


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?”



A good error message reading "Yikes! Something went wrong" versus a message reading "An error occurred."


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.



An error message by Chase reading "We can't find that username and password. You can reset your password or try again."


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.



Form fields in red and in black and white


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.



Autocomplete textual suggestions when feeling in a home address on Lemonade


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.



Users are only presented with a single input field when signing up for Slack


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.

RELATED ARTICLES

SUZANNE SCACCA