How to design error messages for humans

Profile picture of Michael Craig

{date}

{#hash1}

{#hash2}

Illustrations by {name}

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

7 min read

An error message reading “Whoopsy, something went wrong. Try Again”

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

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 error message user experience (UX) more effective.



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.