Don’t you hate it when you see a big red error message on your screen? You are trying to complete a simple task on the computer but are unable to find out what the problem is and how to fix it.
A well-designed error message would have prevented this frustration and might have helped you in completing the task at hand.
In this article, I found a bunch of useful best practices for improving the error messages on your platform to improve the user experience.
Best practice #1: Define the problem
When the user receives an error message, it should be immediately clear why the error has occurred.
The user needs to know what the problem is because it can be very frustrating not knowing. The frustration can lead to users leaving the website.
An example would be when a user is trying to register to a platform and get’s an error message that says the password does not meet the requirements.
If those requirements are not clear to the user, he or she will find it very difficult to finish signing up. The user should be made aware of these requirements and shown what requirements the password does not meet.
A study by (Frisch, D., & Baron, J. (1988). 149–157) defines ambiguity as to the subjective experience of missing information relevant to a prediction. This paper describes that ambiguity affects decision making.
This is relevant to this article because when error messages miss information they are perceived as ambiguous. Thus this should be avoided because you might impact the decision of finishing the task on your platform.
Even when you are describing the problem it can be perceived as ambiguous because the user needs to know what to do next.
Best practice #2: Describe how to fix that specific problem
The user needs to know how to fix a specific problem when he or she gets an error message otherwise the user might feel blocked.
An example would be when you are using a coupon code on an e-commerce website. The coupon gets rejected and you get the following message; “The coupon is not valid”.
I would want to know why this is rejected so I could fix the problem. Maby it has been expired for example and I should just stop trying with this particular code. Maby I just mistyped the code into the coupon field.
Here is an example of how NordVPN (the VPN of my choice) does it when trying to create an account with a wrong domain name. It gives you an error of what the problem is with the e-mail I used. There is one thing they could improve though because they remove my e-mail address after pressing continue which makes it hard to find out what you typed in the last time. Maby it was just typed incorrectly?
Another example of a company that does this right is Steelseries. They are one of the best company’s that sell computer peripherals. You would expect a company that sells keyboards to know what they are doing with anything related to typing.
You can see here that while registering an account you have the requirements there immediately. I messed up on purpose and it showed me exactly what requirements I failed to meet. This way I can fix it quickly.
The final confirmation of this concept is that this is one of the usability heuristics for user interface design by Nielsen, J. (1995). This describes that error messages should help users recognize, diagnose, and recover from errors.
So remember to define the problem and what to do next so the user experience isn’t perceived as ambiguous.
Best practice #3: It can be okay to point out someone’s mistakes
Contrary to common belief, research has shown that blaming error messages doesn’t always increase a user’s anxiety.
A study by Maricuțoiu, L. (2019) shows that error messages affect the user’s anxiety levels. Different types of messages all increase the anxiety levels of the users. This is something that a conversion optimizer tries to minimize because it takes away from the user experience.
That anxiety has an effect on the user experience that has been confirmed in research by Hackbarth, G., Grover, V., & Yi, M. Y. (2003). Where they tested the effects of playfulness and anxiety on the perceived ease of use. Both of these factors had a significant effect on the perceived ease of use.
The study from Maricuțoiu, L. (2019) tested a neutral message, neutral error, and blaming error.
To my surprise, we can see in the graph a blaming error has a lower anxiety rate than the neutral error.
This means that blaming the user doesn’t always decrease the user’s experience! I strongly recommend testing what type of error message works best for your goals because it can have a big effect on the user experience.
Best practice #4: Preventing the error altogether
The best error is no error at all. When looking at an error, see if you are able the prevent this error so the users never see one. This is the first step in my opinion.
In a checklist of usability heuristics for user interface design from Nielsen, J. (1995) it describes that careful designs can prevent a problem from occurring in the first place. One way of doing it is preventing them but you can also prompt users with a confirmation box before they finish their action.
An example of this concept is shown by Tebex while people need to register their accounts. The users are asked if they are above 16 years old before creating the account. This way the users check for the error before it happens! It might not work for everyone but it will decrease the number of errors shown.
On a side note, this is also very interesting because some websites let you put in your date of birth to check the age of the user. This is a lot harder than just clicking a checkbox. You could argue that more people will lie about their age but I think designing around the change of abuse is never the way to go if it ruins the user experience because it’s the user’s responsibility not to lie about their age in the end.
Best practice #5: Cosmetic changes to designing errors help comprehensions
You can use color and design to make a complicated error easier to understand. This is especially true in programming but the concept applies the same on a website.
In a study by Dong, T., & Khandwala, K. (2019, May) they researched the effects of seemingly cosmetic changes to error messages and the effect they have on the speed of comprehension.
It shows that using color and whitespace to emphasize important parts of the error has a significant effect on the speed of comprehension. This specific study was done to highlight a specific problem in lines of code.
I would argue that the same concept holds in designing errors for web platforms because a webpage can be filled with a bunch of elements. When an error occurs the user needs to find and solve the error that is shown between these elements. Highlighting this problem with a clear design can help users spot and solve the problem faster.
Best practice #6: Place your error close to the error zone
The location of the error message can have a significant effect on the user experience.
A study by Seckler, M., Tuch, A. N., Opwis, K., & Bargas-Avila, J. A. (2012) showed that the errors that are most effective for increasing the user experience are close to the field where it happened. They compared this to placing error messages at the bottom and top of form fields as this is very common in web design. Here you can see the different variants that were tested.
This study Seckler, M., Tuch, A. N., Opwis, K., & Bargas-Avila, J. A. (2012) showed that the errors that were close to the input fields had a significantly better user experience.
Another example of this would be in a shopping cart screen. Usually, users can change the number of products that they have added to their shopping cart. Sometimes you might need to restrict the number of items a user can buy for a specific reason.
When this error occurs you should put reason close to the amount changing button. This way the user can quickly identify the location of the error and understand why it has happened. This way you are applying the effect discussed in the previous study Seckler, M., Tuch, A. N., Opwis, K., & Bargas-Avila, J. A. (2012).
The main point is that the user can link the error to their action fast by using the smart placement of web elements.
Best practice #7: Write friendly or neutral and provide users with an active role
When writing error messages it can be very effective to provide users with an active role and a friendly or neutral tone.
A study by Kukka, H., Goncalves, J., Heikkinen, T., Suua, O. P., Zuo, Y., Raappana, H., … & Ojala, T. (2015, June) showed that writing error messages in such a way has a positive impact on the user’s affective state. The active role helps users take action when the error has occurred.
A few examples of neutral, positive, hostile, passive, and active messages can be seen in the messages used for this research.
A good rule of thumb for error messages would be like the active neutral and active friendly in the above example. You could argue that this contradicts the previous point where we state that it’s okay to blame a user. This research classifies blame as a hostile tone. In defense of that argument, I would say it depends on your blaming tone. It’s also possible to remain friendly and point out someone’s mistake. An example of a friendly blaming message that would fit in the research context could be something like this: “We are very sorry because your input made our system crash! Touch OK to resume”.
Best practice #8: Always allow users to continue their action
When users see an error in the middle of their action you need to make sure they can keep their progress and continue where they left off.
A study by Kukka, H., Goncalves, J., Heikkinen, T., Suua, O. P., Zuo, Y., Raappana, H., … & Ojala, T. (2015, June) shows that resetting a user’s progress because of an error message can cause a person to quit the interaction altogether.
They tested this concept using big screens and sending users back to the starting point when the error occurred. See how this person reacts to such an event. You can see the frustration in his gestures.
This same concept can be applied when users fill-in form on web applications. When a user fails to fill in a field correctly you should never just remove that information that he or she put in. This would mean the user would need to refill the field and will be less likely to finish the form. Keep the information where it is and suggest how to fix it if possible. This way the user won’t feel as frustrated because the first attempt wasn’t for nothing. An example of this would be the following login screen:
Notice the email address was typed wrong so it keeps the data in the field and gives a suggestion to fix the problem.
I hope this guide has given you some researched guidelines to make errors a little better for your users. If you liked this article feel free to share it or link it on your website. Good luck with optimizing your errors and have a great day! Want’s start testing error messages? Check out my Google Optimize tutorial.
Frisch, D., & Baron, J. (1988). Ambiguity and rationality. Journal of Behavioral Decision Making, 1(3), 149–157. https://doi.org/10.1002/bdm.3960010303
Baylor, A. M., Warren, D., Park, S., Shen, E., & Perez, R. (2005). The impact of frustration-mitigating messages delivered by an interface agent. IOS Press. https://books.google.nl/books?id=OALvAgAAQBAJ&lpg=PA73&ots=ng4wBobTbU&dq=info%3ADhlrX0gl0BQJ%3Ascholar.google.com%2F&lr&pg=PA73#v=onepage&q&f=true
Maricuțoiu, L. (2019). Emotional response to computer error messages. Psihologia Resurselor Umane, 4(2), 46 – 53. https://www.hrp-journal.com/index.php/pru/article/view/272
Hackbarth, G., Grover, V., & Yi, M. Y. (2003). Computer playfulness and anxiety: positive and negative mediators of the system experience effect on perceived ease of use. Information & Management, 40(3), 221–232. https://doi.org/10.1016/s0378-7206(02)00006-x
Nielsen, J. (1995). 10 usability heuristics for user interface design. Nielsen Norman Group, 1(1). http://courses.ischool.utexas.edu/rbias/2014/Spring/INF385P/files/10%20Usability%20Heuristics%20for%20User%20Interface%20Design.docx
Dong, T., & Khandwala, K. (2019, May). The Impact of” Cosmetic” Changes on the Usability of Error Messages. In Extended abstracts of the 2019 chi conference on human factors in computing systems (pp. 1-6). http://library.usc.edu.ph/ACM/CHI2019/2exabs/LBW0273.pdf
Seckler, M., Tuch, A. N., Opwis, K., & Bargas-Avila, J. A. (2012). User-friendly locations of error messages in web forms: Put them on the right side of the erroneous input field. Interacting with Computers, 24(3), 107-118. https://core.ac.uk/download/pdf/191871154.pdf
Kukka, H., Goncalves, J., Heikkinen, T., Suua, O. P., Zuo, Y., Raappana, H., … & Ojala, T. (2015, June). Touch OK to Continue: Error Messages and Affective Response on Interactive Public Displays. In Proceedings of the 4th International Symposium on Pervasive Displays (pp. 99-105). https://www.researchgate.net/profile/Jorge_Goncalves11/publication/276287191_Touch_OK_to_Continue_Error_Messages_and_Affective_Response_on_Interactive_Public_Displays/links/5555e19108aeaaff3bf540ef.pdf