7 Steps To Have Impressive Error Messages
No matter how good our design is, errors are inevitable.
We all know that the best error message is the one that never shows up. But no matter how good our design is, errors are inevitable. When people interact with products, inevitably something will go wrong at some point.
A big part of UX is managing pain points for users. The key is to make everything as smooth and painless as possible.
You should show users’ errors, but not like everyone else. Error messages give people the information they need to move on while identifying any frustration and alleviating anxiety.
Certainly, when faced with an error, users feel a little frustrated and stressed. Your potential customer expects one result and instead gets another result that interrupts their workflow.
This is your chance to minimize frustration and deliver a helpful message that encourages task completion.
1- Prevent Error from the Beginning
I’ve mentioned that the best error message is the one that never shows up. So if you prevent errors from showing up from the beginning, that would be great.
Error messages make the user feel uncomfortable, and showing them to the user for some trivial problem means you’re constantly instilling a negative feeling in your user, and that diminishes their importance and no one takes them seriously on your website anymore.
Put yourself in the user’s shoes and try out a user journey map to check where the user might go wrong along the way. Then see if it’s possible to make design changes that prevent those errors.
let’s analyze some example:
- In the Apple and Instagram login form, you won’t be able to submit the form if you do not meet their requirements.
- if you’ve used Twitter, you must know that the characters that go over the limit are highlighted in red. the red number presented at the bottom; that’s the number of characters you’ve gone over the limit.
2- Be Clear and Concise
No one wants to read long texts, even for the most important things — let alone to fix an error. It’s a well-known fact that people skip where they can. So the longer an error message is, the harder it will be for people to find the information they need because they’re just scanning the pages and not reading word for word; they want to get to the point, and your error message should help with that.
Now, sometimes it may not be possible to write a message that short, so don’t drive yourself crazy trying to get to 8 or 10 words. Just remember that less is better and clarity and usefulness are the most important things.
Write a complete and long line message for yourself first and then cut out the unnecessary words. If you do cut words, make sure you still retain the necessary information. The goal is to be precise and concise.
3- Give the user an instruction
Whenever an error occurs, the user wants to fix it as soon as possible.
A good error message has three parts:
- Problem identification
- Providing details, ❌if helpful❌
- Share solution
You must always provide a solution to the error at hand, but don’t communicate the problem in too much detail, just explain how to fix the error. Otherwise, the user’s frustration will grow as they either waste their time trying to find the answer themselves or give up.
Tell the user the mistakes accurately:
Imagine a scenario where a user enters an invalid symbol in the username input when trying to login. Instead of reminding the user of the symbol or telling her/him that it’s a username issue, your message says, “You can’t create an account.” Let me just tell you What they are supposed to do, they will leave your website.
When providing solutions, there may be more than one option, for example, when a user tries to sign in, they may get an error message saying there’s no user with that username. Your user may have entered their username incorrectly, or they may not have registered on your website at all.
You need to know that users may not even know if they are registered on your website. Therefore, you can ask them to check their username again, or if they are not registered on the website, to do so. then try to login again.
Let’s look at another case, a 404 error can come from a typo, moved or deleted content. A useful 404 error page can encourage users to check the spelling of their link or take an alternative route to find the content they are looking for.
4- Write for People, Not for Machines
Most users are not interested in the technical details of the problem encountered. If a message contains technical terms or jargon, the user will be confused.
- The message should be written in plain language. If it is necessary to mention technical and complex details, place them in a troubleshooting section and guide the user to solve the problem quickly.
- Avoid addressing people in the third person or using impersonal terms like “the user”, to describe them. Instead, address people directly, using pronouns and contractions, and aim for a reassuring, conversational tone.
UX microcopy is about connecting with users and giving them a good experience, not bombarding them with technical jargon they won’t understand.
5- Be Humble — Don’t Blame User
Users are already frustrated when they get an error message — don’t make it worse by blaming them.
Know that users can always take the wrong action. But it’s the design’s responsibility to inform them of their mistakes in a good way.
- Avoid accusatory language by focusing on the solution rather than the user action that caused the error.
- avoid phrases like “you did” or “you didn’t” when explaining what went wrong.
Always keep instructions specific to what the user needs to do to fix the problematic action.
It is important to be careful when using “you” and “your” as emphasizing the relationship between the person and the problem could make them feel chastised. For this reason, it is important to keep the language of error messages as neutral as possible.
- Avoid phrases like “You did,” “Your action caused.”
- Avoid using upper case text, as this gives the impression that the system is shouting at users.
Imagine explaining the problem to someone you care about, how would you do it? This can be a great way to add a more human tone to your UX error message design.
6- Always be positive
Since error messages are based on some unusual actions of the user, there is a possibility that the system may indicate something disrespectful to the user, making the scenario unpleasant.
This should be an opportunity to positively inform the user about errors, rather than reinforcing a negative interaction. Some style guides, such as Apple’s, favor a friendly tone over choosing positive words, so check your company’s style guide to be sure. You should respect a user who is stressed right now.
7- Use Inline Validation
Inline validation is basically putting the error message right next to or above the label it belongs with. This also assists with accessibility as screen readers should read the error message and the field label together, allowing all users to better address the issue at hand.
Giving users a long list is only going to frustrate them further and make it extremely difficult to understand, especially users with screen readers.
inline messages are ideal for forms as they notify the user of the error right next to the error itself, making it easy to spot and correct.
Giving users a long list is only going to frustrate them further and make it extremely difficult to understand, especially users with screen readers.
When it comes to designing error messages, it’s important to think holistically. Start by researching and analyzing and thinking about all the places in your product where something could go wrong. List them, and then start designing a concise and friendly error message for each place.
Work with UX writers to review existing error messages. UX writers consider both context and the user’s state of mind when reviewing errors, and update the error text where necessary. And don’t forget to validate your solutions. Always test your error messages with real users.
Error message design may seem like an insignificant part of information architecture, but it can have a huge impact on the user experience. By reducing friction, you keep users on track and help them complete what they planned.
