On websites, there are two types of elements – those that are fundamental, like a working link structure, let’s name them the basics. And then, there are those colourful animations or functions that offer convenience: the delighters.
In this blog post, I am going to outline the main mistakes made with one the ‘the basics’, error messages, and what you can do to improve them.
Error messages should have the purpose and behaviour of a virtual assistant. Not least, they are in the checkout very close to the conversion and should convince the user to stay, while creating the perception of an easy form that is quick to fill out.
There are three main aspects to tackle when it comes to creating error messages:
1. The Copy
If you have five minutes, I can only recommend watching this short TEDx talk. It is hilarious, but at the same time delivers an important message in terms of error messages: “Why am I included in the process?” says the comedian Andrew Norelli in the video. That’s precisely the point, the user shouldn’t know anything about the logic behind the input fields! Instead, it should appear as easy and understandable as possible (which means written in the user’s language).
Obvious but sometimes still disregarded: the key information of error messages is to point out what needs to be amended. If that’s not the case, the use of error messages is very limited. In this example, the user is actually more confused because the message is not only too general but because the attention is drawn to a wrong place in the form:
It is frustrating to the user when an error message pops up. If you must then go on to read a big block of text before you are able to amend the input field accordingly, it makes the user experience even worse. The golden rule is here like so very often, keep it short and simple!
Forms that do not provide inline validation have one big disadvantage. When the user has made many mistakes, all the errors will be aggregated and displayed as a long red to-do list and no one likes a big red to-do list!
Another problem to consider is the position of the error message. When it’s outside of the user’s view, the user will have no idea why they can’t proceed to the next checkout step and leaves the website thinking the website is broken. Form design guru, Luke Wroblewski, found out that inline validation implies a few benefits e.g. a 31% increase in satisfaction rating and a 22% decrease in errors.
Luke Wroblewski’s research also showed that the process of filling out the form will be slowed down when the error message is displayed too early. The negative effect hereby is the distracting function of the error message while the user is typing. Even though I’m a big fan of the brand, ALLSAINTS does deliver bad UX at the very beginning of the checkout. When the e-mail address is longer than 4 characters, (this doesn’t even cover .co.uk) the user is faced with an error message “please enter a valid email address”.
When the user can’t go to the next step and doesn’t see what input field needs to be corrected. Here you can see an example of the PC-World checkout (hint: it’s the postcode).
Red is the colour of choice to make an important message immediately visible. To use it for styling error messages seems, therefore, a logic step. The only problem with the colour red is the aggressive look. Together with the error message, it makes it look like a rude message the user is not likely to read. Better making use of red gingerly and, like the blog post of John Ekman says, take the blame in the copy in order to aim for a high customer satisfaction.
You may be familiar with the apple website checkout, and as you can see in the example below, there is not such prominence drawn to the input fields that need to be corrected. Nevertheless, through the yellowish background colour and the red font, it’s absolutely clear which fields are faulty.
When you now have a look at this example and compare it to the mocked up version, which do you think is less intrusive?
Outstanding Error Message Techniques
Giving helpful advice
To give not just advice what exactly might be wrong but also how exactly to fix it. And if the user doesn’t understand the problem, providing help e.g. by displaying a phone number to call the service centre.
Creative/funny error messages
To defuse the situation and delight the user even though something went wrong, funny or creative error message is in most cases, a perfect choice. There are two main things to consider. Funny error messages should follow the branding/context and the wording shouldn’t be too flowery so the message about what has to be amended will not get lost.
Personalised error messages
Why should the personalisation process stop when it comes to error messages on the checkout? If the customer is already signed in or has already entered his/her name in a previous step, you can easily use it to personalise further steps. It could look like:
“We’re sorry Mathew, but we couldn’t find your postcode, could you please check it again”
Take the blame (“We’re sorry”) – Personalisation (“Mathew”) – Explanation of the Error (“couldn’t find your postcode […]”)
With that little bit of simple personalisation, the error message creates the assumption that the website already knows the user and is personally assisting them on their way to the purchase.
Allow multiple formats/error insensitive
The best thing to do would be, of course, to avoid error messages and let the format of the value be the users’ choice. This is already often used in the search box e.g. if you want to search for a book on the Waterstones website you have the option to type in the author, title, or ISBN.