The best error message, as we all know, is the one that never appears. However, faults are inescapable no matter how good our design is. When people interact with products, something is sure to go wrong at some point.
Error messages may appear little, yet they are an important part of the user experience. Users frequently use the quality of error messages to assess the product's quality. One of the things that irritate users is poorly written error messages. On the other hand, good error message UX design can improve users' subjective pleasure and speed of use.
How to Write Good Error Messages?
The management of user pain points is a key element of UX. The error message is one of the most dreaded (by users). This might be an issue that occurs while a user is signing up for a product or one that occurs in the middle of a user's workflow. The objective is to make the encounter as painless as possible for the users. When it comes to writing these kinds of messages, microcopy best practices and style guides can help, but they're more than simply the basics.
Here are some general principles to assist you in creating the most effective error messaging for your consumers:
1. Be Specific Rather Than Speculative
Image is taken from Bootcamp
Error messages should be written in a clear and basic manner. When viewing an error message, the user should be able to understand the issue. It is of no use if the error message is vague and the user is unable to determine the reason for the message. Users have no way of resolving the issue, which has a negative impact on the product's experience.
Example:
Image is taken from Strikingly
2. Keep It Short and Meaningful
Image is taken from Bootcamp
The necessary information should be included in the error message. The majority of the time, the user is unwilling to read a lengthy tale. Write a brief description that is meaningful to the user and offers him a clear understanding of the problem and how to address it. Avoid over-communicating the problem and avoid using superfluous terms.
3. Avoid Technical Jargon
Image is taken from Bootcamp
The majority of users are uninterested in the technical intricacies of the problem. The user becomes perplexed if a communication comprises technical phrases or jargon. Avoid using jargon or referring to implementation details in your writing. If technical or sophisticated details must be mentioned, put them in a troubleshooting section and direct the user so that he may rapidly remedy the problem.
4. Be Humble and Don't Point the Finger at the User
Image is taken from Bootcamp
A decent error message is modest in nature. It politely explains the problem to the user without condemning him for his behavior. The user has the ability to repeatedly perform an incorrect action. However, it is the role of the designer to properly warn him of his errors.
“As a way to give your error messages a more human tone, try saying it out loud to someone. When you say it out loud, how does it sound?” Sonia Gregory.
Example :
Image is taken from Strikingly
5. Negative words should be replaced with positive words
Image is taken from Bootcamp
On the user interface, there are some unpleasant words that should be avoided. Because an error message is based on the user's odd activities, the system may display something that is disrespectful to the user.
John Ekman gives a great illustration of how to use "yes" and "no":
“I asked the woman at the Stockholm airport counter a few years ago if I could upgrade to business class for a ticket to the United States. She responded, "I'm sorry, but it isn't possible." You'd have to pay a premium for that.” I tried the same thing again while checking in for the return flight, “Of course, sir!” was the reaction this time. “How would you want to pay for that?” says the narrator.
So, despite the fact that the seat availability and upgrade potential were both the same, I received two completely different responses: one "yes" and one "no."
6. Give the User Instructions
Image is taken from Bootcamp
A good error message contains three parts: identification of the problem, cause details if available, and a solution if possible. When a user encounters a mistake, they want to solve it as fast as possible. The error message should provide the user with sufficient information to help him out of the incorrect condition. The notification may also direct the user to another location or person who can provide more information about the situation.
Example:
Image is taken from Strikingly
7. Make Your Points Specific And Relevant
Image is taken from Bootcamp
The message should include pertinent information that allows the user to quickly relate to the provided location and alternatives. Point clearly the exact location of the issue, including where the user should go and what steps they should do to fix it. If an error message contains ambiguous information, the user will feel perplexed, making it difficult for him to correct the problem.
Example :
Image is taken from Strikingly
8. Don't Use All Capital Letters
Image is taken from Bootcamp
Upper case text is difficult to read and gives the user the impression of yelling. Because an error message is a place where the user is alerted of a potentially dangerous situation, employing uppercase language can make him feel discouraged.
9. Take the Corrective Actions
Image is taken from Bootcamp
The error message's actions are essential. Appropriate actions give the user direction on what to do next. Actions are options for resolving the issue. A message can include one or more user actions.
“Give the alert buttons short, reasonable names. The greatest button titles are one or two words that convey what happens when you press the button.” — iOS guidelines.
Use the same action name as the button title if the user must take particular activities to resolve the mistake.
Example:
Image is taken from Strikingly
10. Adopt a Progressive Disclosure Strategy
Image is taken from Bootcamp
Place extensive information about an error message under the Show/Hide area if you think the user won't want to view it. It can be beneficial to a more advanced user who wants to learn about technological details. Simply place the least important information in these parts, as most users will not visit the Show/Hide section.
11. Make Use of Appropriate Positioning
Image is taken from Bootcamp
It's critical to position the error message closer to the region where it belongs. Users shouldn't have to look around after reading the message to figure out what it's about.
When a user is filling out a form, for example, providing validation error along with the controls it refers to is the greatest experience. Otherwise, the user will first locate the incorrect control before attempting to rectify it.
An error message should be easy to see and understand. Even if the user has scrolled to the top or bottom of the screen, a message should appear in the current view.
12. The Right Visual Design for the Error Message
Image is taken from UXplanet
The error message should be accessible at all times. Use high-contrast text and background images/colors to make the message stand out and be easily read.
The error notice wording is red, as is customary. Yellow or orange colors are sometimes chosen since some resources claim that red is excessively stressful for consumers. In all circumstances, make sure the error text is readable and stands out against the background color. Remember to include a color-related icon beside the color to make it more accessible to persons who are color-blind.
Conclusion:
You're ready to rebuild or upgrade your company's website, and you may have some design ideas or features you'd like to include. Before you do anything else, make sure that the UX, or user experience, is your top priority in your site design. Customer engagement, lead generation, and sales are all influenced by the user experience.
A good user experience does more than just help your visitors navigate your site; it also elicits emotional responses and brings you closer to your customers. However, no matter how much guidance there is out there to get your design noticed, getting UX right can be difficult at times.
The goal of user experience design is to get people to answer "Yes" to all of those questions.
We can't design a user experience, and we can't recreate the user experience of one website on another. The user experience will vary depending on the website. A website's design must be suited to company aims, values, manufacturing method, and products.
Everything should be tested, and you should try to see your site through the eyes of your target audience. Your site will eventually become easier to use for your specific site visitors, which could lead to additional sales or new clients.
When it comes to the level of usability or ease-of-use, each site builder has pros and downsides based on the features, flexibility, and intuitive design of the editing interface. On the one hand, you have a builder like Strikingly, which is both simple to use and extensive. On the other hand, a page builder like WordPress or GoDaddy doesn't give you many options when it comes to page creation. With the best website builder, you can create a memorable user experience that inspires users to return to your site.
Strikingly has grown to become the go-to free web design software for startups, small businesses, and professionals all over the world, with over 3 million users. Our team is always coming up with new web design templates that prioritize user experience while staying current with industry trends. We hope that by using these concepts as a framework for our templates, we can provide prospective entrepreneurs with a solid platform for constructing unique and feature-rich websites.
