The Best Way to Show Error Messages

Humans tend to make mistakes. They occur when people interact with user interfaces or because users make mistakes. Sometimes errors occur in the application itself. Regardless of the cause and who is to blame for it, handling and displaying errors has a huge impact on UX (User Experience). Incorrect error handling together with useless error messages can cause a backlash from the user. This can subsequently lead to the user refusing to use your application.

Anyone who has used any applications at least once has received at least one bad error message. Messages that didn’t say anything (for example, “This doesn’t work”); messages that didn’t make sense; messages that did not provide sufficient information; messages of errors that turned out to be a defect in someone else’s program; messages of errors that turned out to be network failures.

Millions of people visit various web pages every day. Well, it doesn’t always work like clockwork. Sometimes errors occur and they happen because of developers or users themselves.  It is obvious that if there is an error then it does not matter which side caused it, the script should show it in a user-friendly way.

However, very often product teams don’t pay enough attention to these scenarios. I’m sure everyone got at least once something like this: “Something went wrong. We have problems, so just close this message. ”

Good error messages reduce the workload on the technical support team. We have seen this in our own experience. When the system received the message “Oops, something went wrong” for any error, the number of calls and requests created could reach 300-400 per day. Solving the problems was delayed because users could not explain what they had done before receiving this message. After designing correct error messages and timely warnings that the system may malfunction, the number of requests and calls has decreased by 10 times and user trust has increased significantly.

The purpose of this article is to remind you that errors should be correctly reported in the system:

• Errors must be stated, no redirects;
• Link errors messages to their causes or place them in the expected place;
• If it is not possible to link – use color code;
• Avoid uncertainty. For example: “You have entered an incorrect password or login”;
• Try to prevent mistakes by adding explanations under the input field.

It is always best to prevent mistakes by giving the user clear instructions for action. But this is not always possible. When errors do occur, correctly displayed messages about them can not only teach your users how to interact with the application but also save them from the feeling that they are illiterate. The error message is the least enjoyable part of the design. However, if you put in some effort, your product will be comfortable to use.