Your users will make mistakes. It’s inevitable. That’s what error messages are for – but so many companies are doing them poorly, and they’re pissing off potential customers in the process.
So, how can we better design error messages to increase user experience, and therefore, increase conversions?
Error Message Errors and How They Affect UX
Error messages can be so frustrating. How many times have you went to fill out a form to create an account, only to receive a message like this:
It’s the type of thing that makes you want to drop what you’re doing and break something, right?
— Craig Sullivan (@OptimiseOrDie) December 7, 2015
Error messages trigger cortisol, a well-known biomarker of psychological stress. This cortisol buildup can turn into anxiety, and eventually, when a user is sufficiently frustrated, they give up.
Sometimes, the damage isn’t only sustained to the lost conversion, but it also turns someone into an active detractor of your brand. Investing in a better user experience tends to work in the short term (increased conversion rate) as well as the long term (increased retention, brand loyalty, word-of-mouth, etc).
A Case Study in Poor Error Message Design
Ever booked a flight with Spirit Airlines? It’s not the best customer experience (to put it lightly). It warmed my heart to note that their error messages were also subpar.
So I started out my form by messing up everything (I’m not a savvy digital citizen):
Uh-oh, I didn’t inform them I was a Mr….Well, I fixed that, but then I was informed I had another error!
Email invalid? Good call. Forgot the .com. Can fix that up rather easily:
But what is this? I also seemed to have had a typo in my matching email! I wish they’d informed me about that when I was fixing my first email :(
Well. Apparently someone signed up with my email already. I guess that’d be okay, but I wish they’d have given me a ‘password recover’ option in case that was my email. Oh, and maybe they could have left the passwords I tried to enter in the fields here. Dammit.
Not all forms are that bad, but many have the same common mistakes. Avoid them and you’ll be ahead of much of your competition. Here are some common mistakes:
Mistake #1: Ambiguity
Your error messages should clearly define what the problem was. Ever got a message like the following?
Why? What the hell do I do now?
Bitly sort of pissed me off with this error message, because it doesn’t tell me what was wrong. Username? Password? Both? Who knows. “Nope,” also sounds kinda condescending/not helpful. Finally, best practice is to tell me how to fix it, but I got nothin’…
That’s a common one. I love it, though, when a form clearly demarcates your errors from the valid submissions. Meetup.com shows you exactly where the problem occurred and what to do about it:
Mistake #2: Condescending Language/Blaming the User
One thing you definitely don’t want to do is scare the user into thinking the problem is much worse than it is. You also don’t want to make them feel stupid, like it’s their fault.
As Usabilla put it, “It is also important to be humble, admit you’ve made a mistake if you have. However, even if it is a user error we’re dealing with, NEVER blame the user.” They gave a hyperbolic example of this, but it’s actually pretty common:
UXMovement cautions against using negative words, saying “negative words can make users feel like they’ve made a huge mistake, leading them to think the situation is worse than it is.” They also offer a few words to avoid:
Mistake #3: Poor Placement Error Messages
UXMovement talks about this in their article on making error messages more reassuring:
“Error summaries magnify the seriousness of the mistakes when they’re grouped in a long bulleted list. When most users see that many errors at once, they’ll likely give up and forget about fixing them.”
What’s more intimidating than seeing something like this after you hit ‘submit’?
But even if you’re not planning on using inline validation, at least make it clear where the error occurred. Positioning of error messages isn’t thought about often, but it’s important. Here’s how Usabilla put it:
“Finally, the positioning of your error messages are key. This all comes down to good User Experience design practice. Logical positioning not only saves you further detailing the situation, but also allows the user to quickly see where they are going wrong and – that word again – recover!”
The following example is better than placing it all at the top, but it’s still pretty bad because you can’t tell where the actual error was (e.g. ‘name cannot be empty’ is between first and last name, making it ambiguous):
Users need to know where the error occurred. As Hazel Bolton from Formisimo noted, Netflix is guilty of displaying error messages above the form and only highlighting the error fields red. As she said, “the error could be missed or the fields hard to locate”
Mistake #4: Unclear Expectations
This mistake is so common and it’s so important to get it right. Even if you have a nice and apologetic message, place it in the right spot, and make it clear what went wrong, you’ll still anger users if it’s not at all clear what they’re supposed to do next.
Many error messages don’t give you a solid next step. Like the example from Spirit Airlines above, they could have given me a few options such as ‘account recovery’ or ‘oh, you have an account? log in here.” Instead, they just said my email had already been registered.
A better option comes from Wells Fargo (surprisingly):
A superior error messages takes the opportunity to educate the user on how to fix it. Look at how great MailChimp is at suggesting a solution to the problem:
Even better, if you’re not flexible with the format of certain data, like phone numbers and zip codes (which you should be), then it’s nice to let users know what to expect upfront. To do that, you can write some microcopy.
Using Microcopy to Prevent Errors in the First Place
Microcopy is defined as “the small bits of text/copy that help instruct and alleviate the concerns of your users.” It can help prevent form errors before they ever happen.
For example, Joshua Porter noticed he was getting a ton of form errors on the “enter billing information” page. So he added a tiny bit of copy to remind users to enter the billing address associated with their credit card, and noticed the errors went away, “thus saving support time and increasing revenue on the improved conversion”
Here’s another example of where microcopy could have helped:
Peep was trying to fill out a form on a venue’s website in order to get a quote for an event.
However, he was returned this page with a big red message saying, “there was a problem with your submission” at the top – message plagued with ambiguity of course.
The error was that he entered a range of guests (rational choice, seeing as it’s hard to state an exact number of guests for events), but they wanted an exact number. Of course, they didn’t mention this before he hit ‘submit.’ Microcopy explaining to estimate an exact number would have been helpful.
(Though, with this example, I think there form has more problems than simply a lack of microcopy).
Error Message Best Practices
While I can’t tell you exactly what text, placement, color, timing, etc will work on your site, I can tell you some design staples and best practices. Then you can dive into some usability research, form analytics, and testing to figure out what works best for your own site.
Error Message Best Practices That Have Lasted Through The Years
NN/g offered the following best practices in 2001 and they still hold up:
- Visible and highly noticeable, both in terms of the message itself and how it indicates which dialogue element users must repair.
- Preserve as much as the user’s work as possible. Let users correct errors by editing their original action instead of having to do everything over again. For example, in presenting search results, show a search box with the user’s original query terms to facilitate revisions. If no hits were found, let users search a wider scope with a single click.
- Reduce the work of correcting the error. If possible, guess the correct action and let users pick it from a small list of fixes. For example, instead of just saying “city and zip code don’t match,” let users click on a button for the city that matches the zip code they entered.
The 4 H’s of Error Messages
UXMas has a helpful framework for error messages that they’ve dubbed the 4 H’s. They say error messages need to be:
UXMas says the number one rule “is to make sure your error messages sound like they’ve been written for humans.” They give this example as an example of a shitty error message:
Sounds like a robot wrote it.
Also, avoid jargon and any technical/nerd speak (unless that’s your audience, I guess). What does this mean:
According to UXMas, three factors go into making an error message helpful:
- Is it visible?
- Does it explain clearly what went wrong?
- Does it help the user recover?
We talked about this above. Position your error messages in an intuitive way, make them red and clearly visible. Clearly explain the problem. Offer a helpful solution.
UXMas says “keeping your tone light-hearted can help to keep the user on-side—especially if this suits the tone of your brand.” However, I think humor is contextual with your audience. Might frustrate them more if you’re making light of their errors. Might also work well. I do know that 404 pages are a great place to add some light-hearted humor (and a strategic redirect).
Though Yahoo! has an amazing example of humor in their form validation:
This one is easy: don’t blame the user. We already talked about this above. Take the blame. Apologize and offer a solution.
What About Inline Validation?
Inline validation is a beautiful way to find, alert, and correct errors in real time. Instead of waiting until pressing ‘submit’ to learn of your errors, you are told right away what went wrong.
Here’s an example of inline validation:
The research on inline validation is solid. Luke Wroblewski tested inline validation (in 2009) against a control (after-submit validation). Though the sample was small, they found the following results with the inline version:
- a 22% increase in success rates,
- a 22% decrease in errors made,
- a 31% increase in satisfaction rating,
- a 42% decrease in completion times, and
- a 47% decrease in the number of eye fixations.
- 22% more people making it through your forms is well worth the effort – and so is creating a more satisfying experience for anyone filling out the form.
Not bad. Look into inline validation for your forms. A good example of inline validation online is booking.com:
How To Track Errors
It’s nice to implement best practices, but it’s even nicer to figure out where people are falling off on your specific form. How do we do that? Well, we have to set up some way to measure form analytics, error messages, abandonments, and completions.
You can see the average corrections per form starter and use that as a baseline. The goal, of course, is to reduce the number of corrections on a form field (and thereby reduce friction on the form):
How To Track Errors on Google Analytics
“Employ a series of custom events on your form with each event representing a field on that form. Your category should define which form is flagging errors; your action should define each form field; and your label can be dynamic, pulling in both a description of the validation rule that triggered the error and the value entered that broke the rule, separated by a pipe (i.e., “|”). This one may require developer assistance.
Once set up, you can then dive into a custom report that quantifies and stratifies the most critical errors on your forms. At that point, you can assess the root causes of the errors by inspecting the values users are entering. Finally, you should then either relax your validation logic or include better help text to minimize the number of errors impeding your most important conversion activities.”
Designing error messages is all about limited the amount of frustration users feel with your form. If they’re too stress – too much cortisol builds up – you risk them giving up to go watch Netflix or something. There are too many better things to do than deal with a crappy, complex, condescending submission form.
So, yes, do usability research yourself, but start with these error message best practices:
- Don’t blame the user.
- Write like a human, not a robot.
- Make sure errors are clear, and the messages are positioned in a place that is intuitive.
- Make sure users know how to fix said errors.
- Don’t list all errors at the top of the page. Inline validation is a good solution.
Error messages ever frustrate you? Let me know some examples of the worst forms in the comments section.