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.
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.