Alan DraperYour 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?
Another terrible experience is when an error message is ambiguous, probing you to ask, “well, why was that wrong?!” Craig Sullivan has a great example about Amazon:
OK, @AmazonUK – here is the picture. Tell me WHY, instead of this useless error message – stop WASTING my time : pic.twitter.com/h33ofvFr0T
— 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.
Image Source (via Brian Cugelman)
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).
While error messages seem like a dry topic compared to value proposition optimization or gamification, you can vastly improve your user experience just by avoiding a few common mistakes.
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:
Bottom line is, don’t make your users think. Let them know exactly where the error was, why it happened, and what to do about it. Improve your clarity.
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’?
I like inline validation to solve this one, because you get instant feedback, which is great for learning. More on inline validation later in the article.
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”
Google has some design best practices documentation on this. Read up.
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
Good error messages and bad ones have such different results in terms of user behavior. Read this anecdote from UX pro Jennifer Aldrich:
Jennifer Aldrich:
“One day I had two users sitting right next to one another in a lab, one of them working in a 3rd party program and another working in our product. They happened to error out simultaneously. The 3rd party product displayed a giant red X, with the word ERROR in all caps and a pile of crazy script beneath it. The user gasped, closed the browser and shot back in his chair like the screen had tried to bite him.
The user who received the error in our product read a message similar to, “Something weird just happened on our end, sorry about that. Please refresh your screen and try that again.” The error code was listed in small text below the message, as well as an expand option for folks to view the error details if they so desired.
She grinned at me and said, “Oh boy, you’re in trouble now!” And refreshed her screen and continued editing.”
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:
- Human
- Helpful
- Humorous
- Humble
Human
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:
Helpful
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.
Humorous
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:
Humble
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.
If you’re using a tool like Formisimo, it’s relatively straightforward, just check out the Most Corrected Fields report:
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
Tim Leighton-Boyce from CXFocus talked about one of his favorite GA reports on a CXL blog post a while ago:
Tim Leighton-Boyce:
“One of my favourite reports when looking for opportunities is a standard report which most people ignore: the Conversions > Goals > Reverse Goal Path.
I use it for error reporting.
This requires being able to configure a goal for errors, which is not always possible on a site. But IF you can set up such a goal then the Reverse Goal Path becomes very powerful.
The Reverse Goal Path works really well in situations where you cannot predict what the steps leading up to the goal are, unlike a checkout funnel. In fact, the steps which lead up to the goal in this use case are exactly what we’re trying to find out.
You can also set up scripts to track JavaScript errors on your page, which you can send to custom events in Google Analytics. Search Engine Watch explained how to set up custom events in order to track form errors:
“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.”
Conclusion
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.
Read more:
This article was written for Business 2 Community by Alan Draper.
Learn how to publish your content on B2C
Join our Telegram channel to stay up to date on breaking news coverage
Add B2C to your Google News Feed
Comments on this article are closed.