Why are error messages important?
A lot of websites make usability mistakes on their form pages. And that’s how they lose visitors.
On a form page that’s extra painful because if you lose a visitor there, you lose a very valuable visitor. A visitor who’s willing to make the effort to get in touch with you or perhaps even to order something.
A visitor who fills out a form (or tries to) is a visitor you should cherish. Here are a few tips.
1. Use the language of the form
If the form is in English, the error messages should be in English.
Sounds self-evident, I know. And on single-language websites this usually isn’t a problem. But on multi-language websites it often is.
Error messages are often overlooked in the translation process. Make sure they aren’t on your website.
2. Use understandable language
Don’t use code or words only programmers know the meaning of like “Customerrelation_gender_error” or “FieldT12empty”. That’s pretty much all I’m going to say about that one.
3. Be nice
How hard is it to just be nice?
The person filling out your form is a potential customer. If he forgets to fill out a field, say so nicely.
4. Be specific
General error messages like “Fill out all the required fields” are an excellent way to scare off potential customers. An error message like “Invalid credit card” isn’t exactly helpful either.
Give the user more details about what went wrong and what he can do to fix it: “There was an error processing your credit card. Please check your name, credit card number, and card expiration date for correctness. Remember, these must match the card exactly.”.
The more specific your error message is, the easier it is for the user to fix the problem.
5. Don’t blame the user
If the user has made a mistake while filling out your form it’s not a good idea to rub it in. Don’t tell the user what he did wrong. Tell him what he should do to get it right. Don’t write:
- You forgot to fill out your email address.
- Please fill out your email address.
6. Avoid spelling errors
Check the spelling of your error messages. Error messages are hidden away and often get overlooked. Make sure an editor checks them.
7. How do you check all this?
Leave your form empty, press the ‘Send’ button and read the error messages.
Imagine it’s somebody else’s website and see if everything’s clear and if there isn’t anything that would annoy you.
Next, put in some ‘wrong’ data (email address without an @, postal code that doesn’t exist, date of birth in 2020, etc) and see what kind of error messages it generates.
It really isn’t that hard. So hop to it!
Julia Slavin says
Nice tips in overall. I could only add a few to strengthen the point:
* Make a tip per a field – it’s not so nice to get to the top of the page, read the message and look down for the relevant field.
* Where is possible to validate the input in real time – do it and show the tip immediately after the field loses focus.
* Show positive indicator after verifying the data. For example, if the visitor has submitted a valid email address, color the field’s borders in green.
* Keep the error tips as short as possible, even if it makes them less mannered. For example, instead of “To create a strong password, please use both letters and numbers. Passwords may be maximum six characters long”, say “Please combine up to 6 letters and numbers”. This bullet a little bit contradicts your 4th tip about being more specific. I suppose that a compromise should be found to keep the message clear yet brief.
* Present your tips in a way that doesn’t take any effort from the visitor, for example clicking on an (?) icon to switch the tip on and off.
Good luck with your forms!
Els Aerts says
Thanks for adding your tips, Julia!
Love your blog, and specially this post!! I couldn’t agree more!!
Did you notice that under ‘3. Be nice,’ your example text “You did not enter the correct text etc” is critiqued in your very own ‘5. Don’t blame the user’? I cringed at the “you did not” myself. How about, “Those characters didn’t match. Try this one”?
I couldn’t agree more with the mantra to never blame the user. It is always up to us to be clear and accommodating.
Els Aerts says
@Erika: You’re absolutely right. ‘You did not’ is to be avoided in error messages. My bad.
One comment regarding email addresses. If they didn’t enter an email address, sure, “please enter an email address” is good. However, if it’s an invalid email address. saying something like “Please enter a valid email address” isn’t the best, because they may have made a typo and won’t catch the “VALID” word in the middle. Instead, something like: “We couldn’t validate the email address. Please check your email and enter a valid address.” may work. I know the wording isn’t the best, but I’m just thinking off the cuff. The point is, if the user has made a typographical error, it’s usually good to point it out, as most users will only glance at the error message and assume they’re missing something.