Making mistakes is all part of being human. As UX designers, our job is to ensure that when users do slip up, we have the messaging and resources in place to get them back to where they want to be, and fast. That’s where error messages come in.
In this article, we’re going to look at why getting error messages right is so important to a site’s UX design and how you can create error messages that enhance rather than detract from the user’s experience with your brand.
Here’s what we’ll be covering:
Ready to learn more? Then let’s go!
You may think of the lowly error message as a relatively small part of a site’s overall design. However, your error message communication style plays a key role in both solving user issues and informing a user’s decision to stay on your website. It also says a lot about your brand’s approach to the user experience as a whole.
Let’s take a look at some of the other important reasons why clear error messages should be a UX design priority.
Clear, friendly, and instructive error messages can help reduce user frustration by leading users to a solution that helps them reach their goal. When the opposite is true — an error message is unclear, negative, or confusing — a user is likely to become even more frustrated. When this happens, the individual probably won’t have the patience to decipher an unclear error message and is instead likely to abandon the site altogether.
An error message is a great opportunity to provide your users with a positive experience of your brand in a moment of frustration and confusion. While you shouldn’t distract from solving the issue at hand, some on-brand playfulness or humor can work well in these instances to diffuse tension and keep the mood light while the user is on the error page.
Clever UX designers will use an error message to turn a moment of frustration or confusion into one of delight, impacting positively on the user’s overall experience with a brand, service, or product. This can be achieved through the use of compelling or humorous copy or an engaging visual design.
If a user has been having a delightful interaction with your website or app but then stumbles across a confusing, condescending, or complicated error message, this can lead a potential customer to looking elsewhere to have their needs met. When the opposite happens, users are even more likely to become loyal to a brand.
Error messages are a great indicator of a company’s overall approach to the user experience. Why? Because organizations that put in the time needed to craft clear, compassionate, and succinct error messages are likely to have invested in the messaging and communication elsewhere too. Based on the error messages alone, users know they can expect a good experience when engaging with the rest of the brand’s online presence as well.
There are numerous reasons why users might encounter error warnings or error pages. As we all know, a mere typo in a URL is enough to send us to the dreaded 404 error page. However, generally, users encounter error messages because of one of the following three reasons:
An error page, as opposed to just a message or warning, is a HTTP status indicating the server’s response to the user’s in-browser request. The most common error pages are 401, 403, 404, 500, 502, 503, and 504 errors. These errors can be divided into client-side and server-side issues, depending on the root cause of the issue.
Causes of server-side issues include:
Causes of client-side issues include:
UX designers also need to be aware of the difference between when a user makes a mistake, which is conscious, and a slip, which is unconscious. A slip happens when a user wants to perform one action but instead performs a different one. This could occur when a user is filling out an address label on autopilot, for example.
A mistake, on the other hand, happens when the user’s idea or mental model of the system doesn’t match with the actual system they’re interacting with. A UX designer’s error warnings need to be written with both these kinds of user errors in mind and be able to support the user in solving the relevant issues.
Want to know what to include in your error messages to retain your users and help them reach their goals? Then keep reading.
Your error messages should be written in clear and simple language. This isn’t the place for fancy terminology or technical jargon. You want your users to quickly understand both the issue and the steps they need to take to solve it from the information you’re providing them with on the page.
This isn’t the time for that blog post you’ve been dreaming about. Your error message should be short and succinct, with all the information the user needs presented in bite-sized chunks. You want your users to be able to digest the information in seconds, not minutes, and be able to get on with completing the task they set out to do without any further delays.
Anyone who has come across an error message knows that a condescending or unfriendly tone is the last thing you need when you’re in a fix. Don’t blame the user for the error, and instead be friendly, humble, and empathize with the situation they’ve found themselves in. Users are more likely to warm to a brand that understands their needs than a brand that appears hostile or haughty.
This may be an error page, but it’s important not to focus on the negativity here. Use positive words and a friendly tone in your error identification and your problem-solving steps in order to keep the user engaged and encouraged while they solve their issue.
Your error messages should always have the solution to the problem at their core. While it’s great to empathize with the problem, you’ll want to get to the problem-solving part of the message as quickly as possible to keep the user on track and get them back to where they need to be.
By now you probably don’t need reminding of this part, but just to be absolutely clear: always include instructions for the user on how to solve the problem that caused their error. If there is no solution, guide them back to where they came from, or offer alternatives.
Try not to waffle about other features or highlights on your error message and instead stick to the issue at hand. The user will be much more likely to check out your brand’s other features when they’re safely back where they want to be; when they’re stranded, panicking, or frustrated on an error page, all they want to know is how to fix the issue as quickly as possible.
We’ve all seen them: those confusing, long, and jargon-heavy error messages that cause more trouble than they solve. Let’s take a look at all the things you should avoid doing with your error messages to ensure the best overall experience for your users.
Remember that the person you’re writing for is a human, not a robot. They are also potentially an individual with little-to-no knowledge of computers or technology. For these reasons, use accessible, relatable language that avoids jargon for your error messages.
When a user encounters an error message they’re going to feel some degree of frustration. Don’t add to this feeling by blaming them for the error. Avoid saying anything along the lines of “you should have” or “you didn’t” when outlining the problem that’s occurred. You’ll instead want to restrict the instructions on the error message to the specific steps they need to take to fix the problem.
Specificity is key to good error messages. While it can be easy to implement a generic “you’ve encountered an error” message, this is very unlikely to bring the user any value or provide them with assistance in the specific situation they find themselves in. Instead, try to tailor each error message to the unique circumstances that brought it about, and in clear, short sentences, provide them with the information they need to get to solve the issue.
What could be more frustrating than coming across an issue and then the error message providing unclear or ambiguous instructions about how to solve it? Instead of baffling users with unclear messages that could potentially make the situation worse, users need clear, concise, and actionable steps that relate to their specific error message/issue.
What should you keep in mind in every error message? Here are our best practices and tips for keeping user frustration low and problem solving high.
As we have seen, technical language or jargon on an error message can quickly add to a user’s frustration and confusion in what is already a stressful situation. When writing error messages that enhance rather than minimize the user experience, aim to use simple, concise language. Avoid ambiguity and, where possible, keep the message as short as possible. Short sentences and easy-to-digest examples within the error message will also ensure that users understand the issue at a glance and solve it in moments rather than minutes.
An error message shouldn’t only be a warning to the user of a false step, but a route back to where they want to be. To achieve this, you’ll need to include precise and easy-to-follow instructions to get them back on track.
Depending on the type of error that’s occurred, there might be more than one solution to the user’s challenge. In this case, offer multiple, relevant solutions in clear, concise sentences. Consider using bullet points or a checklist to differentiate between each solution and try to keep each point as succinct and actionable as possible.
Be sure to always put your error messages as close to the mistake or slip as possible so that users can immediately see where the issue is. If you place error warnings at the top of the page, when the error is halfway down the page, you’re wasting the user’s time as they try to find out where they’ve gone wrong.
It can be tempting to write error messages in capital letters to indicate there’s a problem. However, this can be alarming to users and isn’t necessary for drawing their attention.
Instead, use a color commonly associated with errors such as red, which will catch the user’s eye without causing them to panic.
On error pages, you’ll want to stay on brand and stick with your brand’s current color palette. Using clear text and images, you’ll easily be able to communicate the problem and the solution without resorting to “shouting” at your users.
In this guide to writing clear error messages, we’ve taken you through what you need to include and avoid in your error message and error page communications in order to fully support and engage with your users in what can be a moment of frustration.
Remember to include specific, actionable, problem-solving steps, use an engaging and empathetic tone, and try to use it as an opportunity to support your branding and delight your users.
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Are your colors clashing or cohesive? In this blog, I talk about clashing colors, their impact, and how you strike the perfect balance with colors in your designs.
You know that good design is all in the details. And nicely used kerning impacts readability, user flow, and brand professionalism in your UI design — more on that in this blog.
Visual communication and UI/UX design work together to enhance user experiences. Here’s how you can balance both in your designs.
Designing for enterprise isn’t just about looks — it’s about making complex workflows easy. Here’s how to do it right.
Learn more →
