In today's article, Writing for Better Error Messages UX, we will discuss how error messages affect the user experience and how we can improve these messages to help users achieve their goals on the website.
Of course, the best messages error are the ones that never show up. However, these error messages are inevitable no matter how great the design is made for UX. When people interact with products, eventually, something is bound to go wrong.
The error messages may seem trivial, but they are essential elements of user experience. Most users determine the quality of the product by the quality of error messages. You probably noticed how annoying poorly written messages error are. On the other hand, good error messages can increase the speed of use and can be subject to user satisfaction.
In this article, we will also discuss our recommended tips in writing for better messages, including the following sub-topics:
It can really be frustrating to receive messages on filling out an online form. How many times did you experience filling out a form or creating an account, only to receive an error message like this?
This is true for cases where you filled out a long form and then received an error after. It makes you feel that you just want to give up and hit the X button to exit the website.
Another example of message frustration is when the message is ambiguous, and you wonder why?
These error messages according to psychology can trigger the existence of cortisol, which is a known biomarker of psychological stress. When there is cortisol buildup, it also results in anxiety, which causes the user to give up.
Additionally, these messages do not only damage the loss of conversion but also turns users to brand detractors. Thus, it is very important to invest in better UX which works both short term (conversion rate) and long term (retention, brand loyalty, word-of-mouth, etc).
You can improve the errors in messages by avoiding these common pitfalls:
Common pitfalls with error messages
Ambiguity
The messages that you place on the website to prompt users of the issues would be clear. It should clearly define the problem.
Do not put the users on the spot wondering what did they do.
An example would be Bitly's message, which attempted to be “conversational”, however failed to give the users the specifics on how to correct errors such as what is the problem? Is it the username or password? Both? No one knows.
In short, do not make your users think by letting them know exactly where the error was, why it happened, and what to do about it. Be clear.
Condescending language (blaming the user)
There are messages that can be out of context, which tends to scare the users into thinking the problem is worst than they thought. Avoid this and also do not make the users feel stupid or it's their fault.
We can expect there will be human errors on the part of the user. But even though this is the case, do not blame users. Ever.
The examples above show negative words, which make the user feel disrespected. Aside from setting a human tone to craft the texts, you should also consider being humble and kind in choosing the right words to warn the users.
Improper placement of error messages
Do not make the texts very long and avoid doing error summaries in one go. Users could feel they want to give up when they see a very long error text. Error summaries magnify the seriousness of the mistakes grouped in a long bulleted list. If users see these many errors at once, they will likely give up on fixing them.
Applying inline validation works great for longer messages, which also instructs users on how to fix the problem.
If you’re not planning to use inline validation, make it clear where the error occurred. Also remember that the positioning of error messages is critical. This is rarely considered as part of the best practices in UX.
The positioning of effective error is the key. This comes down to good user experience practice. Applying the logical positioning not only saves you further detailing the situation but also allows the user to quickly see where they make mistakes and help them with the recovery.
Unclear expectations
This common mistake example and it is essential that we get this right. Despite the best practices of placing phrases like a warning or input on the top of the page, being nice and apologetic, and delivering it with a clear text, you would make the users feel angry and frustrated if you left them hanging without a clear plan of action, or the next step.
There are many messages that do not provide the users with the next steps. A classic example would be Spirit Airlines, where they could have given me a few options for the users like as “Account recovery” or “Have an account? Log in here.”
Instead, they just prompted the user that they are registered.
Wells Fargo on the other hand provided a better example of where to instruct users to log user data:
We already mentioned previously that the best messages are the ones that never appear in front of the users. If you prevent errors from showing up from the beginning, that would be great.
We've also learned that mistake messages provide users with a feeling of discomfort. Additionally, showing these to the users for some trivial problem means that we constantly instill a negative feeling in the user, which diminishes their importance. No one takes them seriously on your website anymore.
So let us place ourselves 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.
We take Instagram and Apple login forms as examples. Both Apple and Instagram logins won’t allow the users to proceed if they do not meet their requirements. Both of these get the medium app to prevent any critical errors from the start.
Another example would be Twitter. If you are familiar with Twitter, you know that you cannot go over the app's character limit. You won't be able to post unless you resolve the number of texts allowed.
The extra characters are highlighted in red when a user goes over the character limit.
Microcopy is important to apply in any UX design. A microcopy comprises small bits of text that provide instructions and alleviate the users' concerns. Thus in any UX design, microcopies can help prevent form errors before they ever happen.
For instance, in the current UX design form, we see errors in the billing section on the payment forms. To lessen receiving of these mistakes, we can add a microcopy to remind users that they need to enter the billing details associated with their credit card.
This will thus save support time and increase revenue on the improved conversion.
Another example of how a microcopy can help in preventing any mistake messages from happening is on the event where users need to fill up an event form.
When the form is filled and submitted, it prompted the user with the message: There was a problem with your submission, which is ambiguous.
The error found was when the user entered a range of guests rather than an exact number. This error cannot be helped at all because this was not mentioned to the user before proceeding with the submit button.
The existence of a microcopy that tells users to enter a single number is only allowed, which would eliminate such a mistake on submission.
Crystal clear texts
When it comes to designing error messages, clarity is always the top priority. In UX design, you should be able to describe what happened, why it happened, and what the user can do about it.
In addition, the message should be written in plain language so that the target users can easily understand both the problem and the solution without asking for support.
At any cost, avoid abstract messages that don’t contain enough information about the problem. In many cases, these texts simply state the fact that something went wrong and don’t help users understand the root cause of the problem. Do not assume people know about the context of a message. Always be explicit and indicate what exactly has gone wrong.
It can be confusing when an error message design doesn’t offer any clarity as to what exactly went wrong.
Get rid of technical terms
We already discussed crystal clear texts to avoid confusing the users. The same thing can happen with message contains technical terms. Writing messages with technical jargon or terms will also result in getting the users confused.
Again, the text should always describe the problem in terms of targetting the user's actions or goals. Even when your users are tech-savvy, it’s still better to use non-technical terms or use plain language that everyone can easily understand.
Avoid auto-scrolling and auto-jumps
Should we automatically scroll users to the first error when the submit button is clicked? There is no clear answer to that question as this pattern works very well for some users, while for others it doesn't.
Truth is, any prompt movements on the page are likely to cause frustration with some users. Also, users tend to find auto-jumps more annoying than auto-scrolling. At least the latter communicates the direction of change and hints better to where users have moved to.
So, which is the best thing to do here? We suggest that you start without auto-scrolling, Instead, try to display the error summary with links.
For instance, if it makes things slow on the page or it is not working as expected, consider adding auto-scrolling. And by no means move users up and down the page for no obvious reason. This is a safer way to increase completion times and introduce confusion when it’s probably not needed.
Write a message concisely and precisely
You should be aware of the fact that people rarely read pages. Instead, online reading behavior is all about scanning the pages and picking out individual sentences.
Thus, the more text on a page, the harder the text is to scan, and the more likely users won’t read the text at all.
A study conducted at the American Press Institute found concluded that shorter sentences resulted in increased understanding:
If sentences contain less than eight words, it is expected that users can 100% understand the information
If sentences contain longer than forty-five words, the user's comprehension drops to less than 10%.
We recommend that you try to reduce the message down to only its essentials. And this includes the error messages. The goal is to write short but meaningful error messages.
Don’t over-communicate the problem
In addition to writing concise and precise messages, error messages should also provide the users with tasks to easily resolve the problem. try to write messages that only contain the information required for users to help them achieve this.
Start by understanding what you want to communicate, then get rid of the unnecessary details that don’t help the users.
Well-designed error messages often try to explain how to fix the error message. But in some cases, we know that it can be a challenged to to explain the problem in one short sentence.
In this case, designers can use troubleshooters. These are step-by-step instructions on how to solve the problem.
Thus, we can learn here that we need to avoid displaying troubleshooters as body text in the error message.
Do not try to explain a complicated troubleshooting process within an error message. Instead, use progressive disclosure to provide this information. The section that contains the steps should be hidden by default, and when the users want to learn more about the problem, they click “How to fix it.”
Avoid blaming the user
We already know that one of the traits of a good error message is humility. This means that the error message should convey the problem in a graceful manner to its users without blaming their actions.
We need to accept that human errors are inevitable and the same is true with an error message. The user can perform an incorrect action again and again. No matter what the case is, the design’s responsibility is to inform the user of an error message in a nice, human tone way.
Always remember that the user will not feel good if the error message he or she is reading is insulting rather than helping.
Give the user an instruction
Always remember that whenever an error message occurs, the user wants to fix it as soon as possible.
A good error message has three parts:
Identify the problem
Providing details when helpful
Share solution
Always provide a solution to the error message at hand, but avoid writing the problem in too much detail. Instead, simply explain how to fix the error message. 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 this: A user enters an invalid symbol in the username section when trying to log in. Instead of reminding the user of the symbol or telling them that it’s a username issue, your error message or inline validation says, “You can’t create an account.” Expect the next thing they will do is to get out of your website. They leave.
When it comes to providing solutions, there may be more than one option when it comes to situations like user login. They may get the following error messages:
An error message that says there’s no user with that username.
An error message that the user has entered their username incorrectly
An error message that the user may not have registered at the website at all
Conclusion
It is important to think holistically when it comes to designing an error message. It may be too overwhelming to design or write an error message, but you can start by researching, analyzing, and thinking about all the places in your product where something could go wrong. You can list all of the possible error messages to help you start designing a concise and friendly error message for each place.
We have discussed the importance of microscopy with regard to writing an effective error message. We recommend that you work with UX writers to review existing error messages. UX writers are good at considering both context and the user’s state of mind when reviewing errors. They update the error text where necessary. Do not forget to validate your solutions and always test error messages with real users.
Designing error messages may seem like an insignificant part of the content architecture. However, it can have a huge impact on the user experience. By avoiding an error message to happen in the first place, you can keep users on track and help them complete what they planned to do on your website.
