Heuristics #9: Help Users Recognize, Diagnose, & Recover from Errors-Simplified by the examples.

Harsh Gorasia
UX Planet
Published in
4 min readSep 24, 2020

--

The Jakob Nielsen’s 10 heuristics will be served as a series or as episodes to you all. I will publish each heuristic a week- Every Thursday.

If you haven’t read or you want to know what is heuristics, why we need them & who made this? For that, you can check this article- Heuristics #1: Visibility of system status.

ERROR… is the word that we all deal frequently in our daily activities, especially the people dealing with the machines. The error will occur when the intentional action was not been able to achieve the desired outcome between the system and the user.

The occurrence of the error immediately stops the flow of our actions. That’s why nobody loves the error. We already discussed how to prevent the error in the heuristics #5 called Error Prevention. If you haven’t read, you can check this article- Heuristics #5: Error Prevention. What this heuristic tries to convey is try to build a design that prevents the occurrence of the error in the first place and then creating well-designed error messages.

It’s not possible to prevent errors because the users will never stop making mistakes. What designers can do is try to design the system in the best possible way that leaves minute or no scope for the occurrence of the error.

So today’s article will help you to learn how to deal with the errors and how to present them, which will be our today’s #9 heuristic called Help Users Recognize, Diagnose, & Recover from Errors.

In simple terms, design the error messages with human readable language and by guiding & providing the solution on how to solve or to recover from it.

There are certain guidelines on which things are necessary to make a good error message. These guidelines are available from the last 2 decades and only a few points have added now after a long period.

Good error messages should be polite, easy to understand(human-readable language), precise, constructive advice, clearly visible, less time to fix the problem & educate the users. See the example of a good error message from the Adobe CC desktop application.

Adobe CC desktop application showing the error message following the guidelines.
Adobe CC desktop application showing the error message following the guidelines.

Let’s understand it more clearly by the set of examples:

Example 1, Zerodha Console- Website
See how Zerodha has designed an error message in detailed following all the guidelines. They have used simple language, precise problem statement(network issue), polite phrasing(seems to be an issue reaching our systems), constructive advice on how to resolve the error(try refreshing the page) & didn’t skip to educate the users by providing the detailed error problem.

Zerodha well-designed error message.
Zerodha well-designed error message.

Example 2, Microsoft Windows- OS
Here you can how Microsoft has used the “cancel” icon in red color to indicate the error with the proper statement. They cleverly used the cancel icon with red for more accessibility purposes. Color-blind users can also clearly depict the error message because of icon usage.

Microsoft Win10 uses red color with the icon to maximize accessibility.
Microsoft Win10 uses red color with the icon to maximize accessibility.

Example 3, Amazon- Website
See how it showing the warning sign and text in red color to indicate the error message along with the precise & simple text saying- Your password is incorrect.

Amazon’s error message.
Amazon’s error message.

Example 4, Housing- Website
In this example, Housing clearly defines the error by guiding the user to enter the valid email address and also giving an example of how a correct email address should look like. A clever way to teach and guide to recover from an error.

Housing showing a cleaver error message guiding the user to input the correct email address.
Housing showing a cleaver error message guiding the user to input the correct email address.

As we are aware that the error can’t be prevented or cut off completely from our life. But what we can do is to build well-designed error messages that can help users to resolve the error and get them back ASAP to their journey of the product.

I hope I delivered it to the point. I will post the last heuristic principle which is tenth, exactly after a week. Stay tuned!

Will appreciate your feedback, love & comments.

Wear your mask 😷, wash your hands 🧼 & maintain social distance 📏.
Namaste 🙏.

If you haven’t read or you want to know what is heuristics, why we need them & who made this? For that, you can check this article- Heuristics #1: Visibility of system status.

Reference to know more about Heuristics & UX: https://www.nngroup.com/articles/ten-usability-heuristics/

--

--