How to write & design user-friendly error messages
We are humans and therefore bound to make mistakes. Whether it is during our daily routines or interacting with web pages and applications, it is easy to forget or grossly neglect something. When it comes to user experience on web pages, it is always frustrating when you face an error which you understand nothing about the root cause. But recognizing the cause of an error would inadvertently make us conscious next time.
Users hate error messages, regardless of whether they or the server causes it. In web design, it is important to know the constraints in which the server would fail to perform a task and then strive to eliminate them. Sometimes, error messages can be conveyed if a user finds it hard to fill a data form correctly or if the device in use has a poor network connection.
Nevertheless, users would hope that the best error message never shows up on the web page. But you can’t do away with error messages, no matter how good your web design is. That brings us to the question; how do we write and design user-friendly error messages? When users interact with your products, mistakes are bound to happen. Whereas errors may be considered a trivial matter, they have a massive influence on user experience. Inconsiderately written error messages are annoying to users. Hence, we shall explore how to write and design user-friendly error messages without compromising user experience.
Table of contents
- Why do errors occur when users interact with web pages or applications?
- Writing and designing user-friendly error messages.
- Components of an ideal error message
- Focus on clarity
- Write concisely, but be precise.
- Don’t use language that appears to blame your users.
- Focus on providing solutions to the users
- Types of error messages to use on a user-friendly interface
- The bottom line
Why do errors occur when users interact with web pages or applications?
As stated earlier, whether it is filling up online forms or synchronizing data, the server process can almost certainly fail users. A mistake made on applications or web pages can lead to the system failing to respond accurately or even fail to complete processes.
Every error that pops up on the user interface, regardless of who is responsible, is a source of frustration to the users. No matter who is responsible, how errors are handled hugely impacts user experience. The following are some of the reasons why a web page or an application can pop up an error message:
- The user’s input does not match the interpretation of the web server or application.
- When the user is unaware of the application’s process.
- The web server or application does not complete an action due to poor internet connection.
Writing and designing user-friendly error messages.
Components of an ideal error message
Let’s look at the top recommendations on how to write and design user-friendly error messages. A practical and user-friendly error message should generally:
- Give directions on how the user can fix the problem.
- Be displayed at the right time and position on the web page.
- Be displayed in the appropriate colour.
- Be short and crisp, but be able to convey the full reason.
- Communicate what is happening.
- Be clear to avoid any confusion.
Focus on clarity
Clarity is vital when it comes to writing error messages. To enhance the user experience, ensure your error messages describe the problem, why the problem came about and recommend what the user can do to fix it. Besides, the message should be expressed in clear language so that users can understand the issue and how to fix it. The key aspects when it comes to clarity of error messages include the use of technical terms and abstractness.
Steer clear of technical terms
As stated earlier, error messages should be written in simple language. That said, the use of technical terms is likely to confuse the user. A clear error message should point out the actual actions or goals the target user should pay attention to. It may be argued that your target users are tech-savvy, but regardless, you have to avoid the use of technical terms because your site is bound to receive all sorts of visitors.
Steer clear of abstract error messages
Abstract error messages fall short of providing sufficient information about the problem. An abstract error message, for instance, would highlight the fact that something went wrong, but would not give further details to users regarding how they can resolve the problem. User-friendly error messages focus on clarity in terms of information and actions that lead to a resolution. Thus, it is vital to be explicit enough and indicate what went wrong and the consequential cause of action. Examples of abstract error messages include:
- ‘Something happened.’
- ‘There was an error.’
- ‘An error has occurred.’
Looking at those three, it is easy to realize they don’t have explicit information that shows the cause of action towards resolution. Overall, a clear, user-friendly error message should answer the following three questions:
- What is the problem?
- What is causing the problem?
- How can the user solve it, or prevent the problem from happening again?
Write concisely, but be precise.
More often than note, users would want to scan through text rather than read word by word. That implies that users are likely to find it difficult reading through error messages with more text in it. If something goes wrong, a proper error message should be short, precise and concise text that informs users what happened and provides action cause towards resolving the problem.
Research conducted by the American Press Institute indicated that shorter sentences contributed to greater user understanding:
- Sentences with eight words less contributed to 100% reader understanding.
- For sentences with 10 to 14 words, users understood 90%.
- For longer sentences with 40 words or more, reader comprehension dropped to 10% or less.
Based on these findings, you could argue your case for shorter error messages. Therefore, try to write essential text only. Besides, your goal is to communicate a message to the user. As such, you should strive to make it short and meaningful. The following aspects are key to achieving conciseness.
Specificity to the situation
A good error message should be able to address a specific situation. More often than not, websites use one error message to address all the validation steps. Let’s look at the following two examples of error messages for someone who has left the email field blank:
“Enter a valid email address.”
“You have missed the @ character in your email.”
In the above examples of error messages, the first one checks to ascertain that the email field isn’t left blank when submitting the form. On the contrary, the second one shows that you have incorrectly typed in the email format by missing the @ character. These are two different causes of action. The first requires you to type everything whereas the second one narrows down to the specific problem, which requires that you type in one missing character.
Do not overly communicate the problem.
Whereas users prefer short and precise error messages, it is almost impossible to keep them that short in some instances. Primarily, error messages should give users concise directions on how to resolve a problem. That said, you would expect that the error messages should only contain the relevant information needed to achieve a resolution.
Keeping out unnecessary wording is vital. To do so, understand what you want to communicate and stick to it. By doing so, you will identify and get rid of unnecessary details that don’t add substance to your message. Furthermore, not all error messages can be explained in a single sentence. In such instances, designers’ resort to the use of troubleshooters. Overall, a well-designed error message tries to explain the problem alongside its resolution in the shortest terms possible.
Don’t use language that appears to blame your users
.That is what we call, minding your tone, and it is important that you do. The tone you use in writing your error messages has a tremendous impact on how users comprehend your message. As such, an appropriate tone will help users to relate to a situation better.
Most websites out there pop out messages that are phrased in a manner that appears to accuse the user of being at fault. Phrases that start with words like, ‘you did,’ or ‘your actions resulted in’ should be avoided. Therefore, while writing and designing error messages, bear in mind that these errors are essentially frustrating, and to accuse or judge users even frustrates them more. As a tip, try to focus on the problem and not the user’s action that resulted in the problem.
Here are examples that illustrate two ways of designing error messages. One is acceptable, whereas the other one appears to blame the users.
- Write: Your username and password do not match.
- Avoid writing this: You have entered the wrong username and password.
From the two examples, one has a positive tone while the other points to the user’s blame. The first one tries to incorporate the human tone in the user interface, making it more user-friendly than the other.
Focus on providing solutions to the users
Imagine filling out a data form, and after you click the ‘send’ button, the message that pops up says something like this; “Something wrong happened.” Such a message is considered abstract. Of course, the user will understand that something wrong happened, but where are the extra details? That will leave your users in limbo because they wouldn’t know what to do next to fix the problem. Others may have to stop at that point and focus their time and energy, trying to find the solution on their own or even contact customer care support.
As a website owner, such scenarios where the user has to stop an online task because of lack of information should be avoided. It implies that the service on your platform does not meet the user-oriented criteria. Good error messages are centred towards helping users get through a task efficiently and effectively.
A compelling error message on the user interface not only informs what the problem is, but it also provides a step by step cause of action needed to solve the problem.
Types of error messages to use on a user-friendly interface
- Poor network connection errors
As stated earlier, the cause of the error could be as a result of bad internet connection with the device in use. If that is the case, display a proper error message to inform users that the page may take longer to load because of poor network connection.
- Empty but mandatory field errors
Some data forms require that the user fill up mandatory fields before proceeding to the next button. This type of error makes them aware of the particular fields that they have missed to fill.
- Inappropriate value errors
This error message lets the user understand that they have entered the wrong information somewhere along the way. As such, they will remember to correct their details before clicking the proceed button.
- Insufficient character limit errors
This error lets the user know the requisite numerical limit of characters needed in a particular field. That will make them know the limit they have to type in.
Error messages have a tremendous impact on user experience. They present a perfect opportunity for you to generate great relationships, share your brand your personality with users. When writing and designing error messages, try to be detail-oriented and specific. Research shows that the average users have at least ten passwords and five usernames. Given this information, it can be quite frustrating to figure out what detail you need if the error message is not specific.
Overall, avoid over-communicating the problem, remain friendly, steer clear technical terms, and be humorous if necessary. The ideal error message should tell the user what the problem was, why the problem came about, and how they can solve it henceforth. Remember that however much trivial error messages may be considered, they have a substantial overall impact on user experience.