Article Title

Author Name

{CATEGORY}

{date}

{#hash1}

{#hash2}

Illustrations by {name}

{excerpt} A sprint is when a company or team dedicates a certain amount of time (around 2-4 weeks) to work on a specific project at full speed.

{0} Min read

Profile picture of Michael Craig

7 min read

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.

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. 

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.