Designing voice and tone for error messages
Why do we need voice and tone in error messages and how does it help in designing our products better.
Let’s begin with a small exercise; look at the image below:
In the above image, you can find three different error messages for the same scenario — a user has entered a wrong password while signing up.
So, which among these error messages, do you think is the correct one? Or are all of the three correct? Well, all of the three error messages are correct in the given context as they tell the user what has happened and provide a solution. The difference is that the solutions have different voices and tones. Let’s dive deeper into each one of them:
The first error message sounds straightforward, clear and can be used in a business environment.
In the second case, the error message sounds casual. It can be used in business applications as well as consumer apps.
In the third scenario, the error message sounds spirited and can be easily applied to a product which has a playful personality.
Importance of voice and tone in error messages
The importance of voice and tone has been repeatedly highlighted in building content style guides and content strategies. The significance of voice and tone becomes more critical while writing error messages.
When it comes to designing for error messages, they are not given enough importance. We assume that users will never encounter these error messages and write the words that come to mind.
But the task of an error message is quite integral to the user experience. It tells users about the hurdles in their journey and how they can surpass them. Error messages not only assist the user in moving forward but also show empathy and help build trust.
So how do voice and tone play an important role in the error messages?
The voice of the error message helps the product build trust, stand out, and be consistent with the users by bringing out the brand personality. The tone reflects different emotions in the error message such as empathy, and humour that add clarity and personal touch to the product.
Categories of error message
Error states are inevitable in all digital products. These error messages can differ in types, situations and interruptions in the user journey. There are two main types of errors:
- Common errors
- Technical errors
Further, we have categorized the errors according to how they interrupt the user journey, as suggested in the book Strategic Writing for UX by Torrey Podmajersky. These interruption pattern of the errors are:
- Inline: User is asked to make a correction to move forward
- Detour: User is asked to change the path to move forward
- Block: When the way forward for the user is blocked
Moreover, in the following column, we have also illustrated a few examples on how to write these error states.
Building voice and tone for common errors
To exemplify the use of voice and tone in error messages, we are going to present three different experiences in the voice:
- Plain voice is a universal voice without any character. It is suited for professional, technical or B2B products. It focuses on clarity, efficiency and professionalism.
- Casual voice tends to be conversational and has an element of empathy. It is suited for B2C products. It is easier to read.
- Playful voice adds character to the voice of the product. It is suited for products such as games which use humour and fun to communicate with the users.
Applying different voice to a few common error states (Also, you can find all the error messages in the tables in this link and use it as per your needs):
- Some common system errors
2. Some familiar system errors during payment
3. Common user input errors during Sign up
4. Common user input errors during login
Tackling technical errors
Technical errors such as ‘404 page not found’ cannot be dealt in the same way as common errors. In an ideal situation, users are not supposed to see technical errors like 401 unauthorized error, 500 internal server error and others, or at least see them very rarely. Yet, these technical errors are critical because if a user lands on a 500 internal server error page and sees the following error message:
He/she would immediately bounce off the page. Therefore, error messages like these neither help the users understand what has gone wrong nor help them move forward. They are like a dead-end in the user experience.
To avoid such situations, here is how one can write a message for technical errors:
1. Be clear: Explain what has happened and how they have ended up here. Just explain the error in simple terms.
2. The problem first, then error code number: Error code numbers like 404, 500, 401 help the developer in debugging the product but the user doesn’t know what they stand for. Therefore, while writing technical errors give more precedence to the problem rather than the error code. The error code can be mentioned in the description.
3. Find a way out: Add links to the homepage or a search button to help the user understand that there is a way out.
4. Enhance the user experience: Adding an appropriate illustration or giving out contact details of the support agent will improve the overall experience. Also, one could add a touch of humour in technical errors. But while adding humour, keep in mind a few things:
- Don’t sacrifice clarity over humour.
- Use humour if the brand personality allows it.
- Don’t offend anyone. Know the limits.
Here is a list of few technical error states that can help design error states in a better way:
Putting together the steps in designing an error message
Error messages are seen as just words, but they actually solve problems for the user. Therefore, there is a need to rethink error messages and start designing them carefully.
Here, the essential steps to remember in designing error messages:
Step 1: Understand the user’s intent
When we write error messages, we only think about how can we fill the gap in our products. But this is a very narrow product perspective where we tend to think only about the product functionality. This viewpoint needs to shift to the user’s perspective. So, we need to ask these questions:
1. How are our users interacting with our product?
2. How is our product helping the users?
After this, we will realize that users are using our product to solve their problems. Hence, even before starting to frame the error message, take it as an opportunity to help users and make their experiences better.
Step 2: Avoid too many errors message
To make the experience better for the users, the first thing to take into account is to prevent or avoid too many error messages as such a situation may lead to frustration. This can be restricted by providing visual cues, and interactive patterns (links)and by assisting with formats (like dates, numbers) to guide the users.
Step 3: Clearly state the problem
In error states, the best course of action is to clearly state that there is a problem and explain what that problem is so that the users can take action accordingly. Keep a few things in mind: the error message should be clear, concise and precise, and should also empathize with the users. At all costs, avoid technical jargon in the error message and do not blame or intimidate the user.
Step 4: Offer a constructive suggestion
Offer a constructive suggestion on how to solve the problem so that the users can carry on forward and achieve the desired goals. If the problem can’t be solved at that moment, tell the users what can be done, and who they can turn to.
Conclusion
While designing error messages, there is a need to forget old methods and start thinking fresh. We must think about how they fit into the voice and tone of our product to build trust and empathy. Therefore, don’t templatize error messages but prioritize on helping the users in achieving their goals.
Look up and use all the error messages with different voice and tone here.
