Designing Errors: What to Say When Things Don’t Go Right
When browsing a website, users want to be able to find what they’re looking for easily and without trouble; it’s the key to good user experience. However, sometimes things don’t work the way they’re supposed to or someone finds themselves in a place they shouldn’t be. In these cases, they may encounter an…error message.
Uh oh. Well, while it may not be the desired outcome, it isn’t the end of the world. Well designed error screens can guide users back on track. It’s best to prevent errors in the first place but if not, there are some fundamental parts to keep in mind.
What Makes a Good Error Message
Helpful Information
Sounds obvious, but if something doesn’t work, it’s important for users to be able to understand what happened and why.
Vitaly Friedman from Smashing Magazine says, “Most of the time, these messages don’t really refer to the specifics of the user’s input. They provide a very general statement explaining that the input is wrong, with plenty of floral and cryptic words along with it.”
The error message should clearly express the issue in simple terms. This prevents confusion and frustration and ensures the user has an idea of what went wrong.
Error messages can also provide an example of a correct input to help users solve the issue.
For full error screens, the site should offer helpful links to places like the homepage, hopefully bringing the user back to where they want to be.
Wording
Proper word choice is crucial for making sure users know what happened and what they should do next. Leave out useless tech codes or vague phrases that are unnecessary to a regular user.
An error message should also never blame the user. Targeted language may make frustrated people even more feel annoyed or offended. As Tubik explains, “Whatever form you wrap this message in, it will hurt the user who is already worried about things going not the way they wanted [...] Try using clear instructions instead of blaming: for example, say ‘Enter the valid email address’ instead of ‘You’ve entered the invalid email address.’”
Proximity
Users shouldn’t have to search for the problem area on a long form or web page. Show errors close to the sections in question rather than grouped together at the top or bottom of a page.
Never Just Red
In western countries, red is the color of wrong, bad, negative, etc. when it comes to information. Therefore, it is logical to make error messages red as well. However, color can’t stand alone. For example, users who are colorblind will have trouble finding the problem, making the entire service less accessible. Instead, color should be combined with other signals like icons, bold highlights, or even a small animation.
Red should also be limited to only the worst errors, not all of them. Tim Neusesser and Evan Sunwall of Nielsen Norman Group say, “Design your error messages to indicate the problem's severity. For example, sometimes users only need to be warned of unexpected or potentially undesirable outcomes but can otherwise advance their workflow. Differentiate between these ‘good to know’ messages from those posing a barrier to the user's progress.”
Importance of Error Messages
Designers hope that people will be able to use their product easily and with no problems, but that’s not realistic. It’s important to create well-designed error messages and screens so that if something does happen, users understand and are guided to solutions so they can continue on their journey.
