Writing error messages is not sexy. In fact, it’s incredibly tedious and boring. But don’t confuse tedious and boring with unimportant. Often, the quality of an error message can be the difference between a sale and an abandonment. And a poorly written error message is a needless and shameful way to lose a sale. The good news is that improving error messages has a high ROI as the cost of the investment is very low.
It’s important to remember that our sites are really self service software applications, and they’re very likely not as intuitive as we think they are. Referencing back to one of my previous posts, “Is elitism the source of poor usability,” we have to remember that our customers probably aren’t as tech savvy as we are, and they are definitely not anywhere near as familiar with our sites as we are. So, it’s important that we’re very clear in our messaging when something goes wrong.
So what does it take to write a quality error message?
- Be specific
It’s so important that we tell our customers exactly what went wrong. Our developers have to write code for every possible instance, but all too often we resort to generic and vague language in our error messages. Here are a couple of examples:
As a customer, I’m not sure what I’m not sure what happened or what I should do about it. I might try once again, but if I got this message a second time I would be gone.
This either/or scenario is really an example of a lazy error message. Which is it? Is the address improperly formatted or does it contain invalid characters? We need to tell customers specifically what is wrong and tell them how to fix it.
- Use clear language
It’s very important to avoid anything that even remotely resembles tech jargon. Try instead to use short words that are part of everyday language.First, a bad example:
Huh? Customers understand “password” but “authentication credentials” are certainly unclear and sound kind of scary, frankly.This one is much better:
This is both specific and written in clear and simple language.
- Strong visibility
Error messages need to be extremely prominent. Use color and other symbols, such as exclamation points, to help the error message stand out. It’s also helpful to separate the error messages from the rest of the page with white space. Include the message prominently at the top of the page and also at the specific field, if it’s a form error.Here’s a good top of page error:
I would like to see more white space around the error message, but otherwise this is really good.And I really like this way to highlight a particular field where the error has occurred. It may not be pretty, but then it probably shouldn’t be. It should stand out, and this does. Even better, we get a very specific message telling us exactly what’s wrong with the field.
- Be polite
Whenever an error occurs during our customer’s experience with our site, we’re in danger of losing her if we don’t handle it well. So, let’s be as courteous as possible. The cost of courtesy is zero, and it allows us to come across as friendly as possible.Here’s one that is both specific and polite:
- Provide examples for how the information should be entered correctly
It’s very important they we’re not only specific in defining the problem that occurred but also specific in explaining how to correct the problem. If the customer has entered his email incorrectly, we cannot assume that he knows what he did wrong or how to enter it correctly.Here’s an error message that explains the format pretty well:
However, the customer may not understand what “domain” means. It may be be better to also use a real example with a well-known domain like “email@example.com.” Even better, incorporate the information the customer entered, if possible.For example, the error might say something like:
You entered “kevin” for your email address, which is not a complete address. Please enter an “@” symbol followed by an email provider after your email name. For example, “firstname.lastname@example.org.”
Even better, be proactive. Stop the error before it occurs.
I really love how Restaurant.com handles their form fields. Upon entry to a form field, a dialogue box dynamically appears next to the field with some helpful information. The movement that occurs upon entry really draws your attention to the helpful information, which I find considerably more effective than help text persistently present under or next to a field. It’s far easier to ignore static text than something that appears when you enter the field.
Additionally, the folks at Restaurant.com have included some great help text that provides important information. In this example, they’re letting us know the address must match the billing address on our credit card. Excellent!
And here, we get some specific information about the value of our password and the basic requirements for the password. And we get some nice politeness to close it out.
Save those sales. Give error messaging your full attention.
Error messages should get just as much attention as any other site functionality in the requirements processes for our sites. We should give error messaging as much attention as we give to marketing copy. It may not be sexy, but it’s critically important if we want to avoid needlessly losing sales.
What do you think? How much time to you put into error messaging? Do you have examples of particularly good error messaging? Would you add anything to the list of quality error message attributes?