Error messages, those little things that *should* appear when there’s an error in the data you’ve entered in a form. They are, therefore, frequently associated with a moment of frustration because errors are confusing, annoying and require additional time and attention to rectify. Bah! So annoying.
Error messages are supposed to help users correct their error. However, quite often, they can add to the frustration. Users who are either short on time, don’t know how to correct the error or who are just annoyed at the error may leave your altogether.
Read on to see how you can reduce errors and frustration to increase conversions on your form.
How to find which fields are a problem for your users
There are several reports in Formisimo that can help you identify fields in your form that are tripping users up. I suggest you start by looking at the fields with the highest drop off rates.
Drop offs indicate user frustration.
Next go to your Corrections report. Here you’ll see where your users are changing information they’ve entered. Why? Maybe because the information has been flagged with an error.
This table shows the types of corrections being made. Open your form and test each field to understand what errors might be occurring.
What does a ‘bad’ error message look like?
If you’re not sure how your error messages could be hurting the user experience and causing users to drop off your form, here are a few of the worst examples.
Tone of voice in written language can upset users. Here are a few examples that have infuriated the Twitterati.
Stern to polite in a single sentence – and a typo thrown in for free too! pic.twitter.com/Pi6I2EUhGf
— Chris Callaghan (@CallaghanDesign) November 11, 2015
Oh God! Sorrysorrysorrysorry! What can I do!!?!? Hey BMW, have a think about that tone of yours, young man. pic.twitter.com/WbCcr1aILt
— Matt (@amazematt) December 11, 2015
And here’s one we’ve highlighted before:
This error message doesn’t help me correct my mistake.
Sometimes it isn’t what you say at all. Error handling is about more than just the text in your error message. For example, imagine filling out a whole form, then learning that one field contains an error. It’s even worse when you submit a form and it’s rejected but you don’t know why.
The example below shows all errors in the form listed above the form, rather than next to each corresponding field.
UX Movement suggest that error summaries overwhelm users.
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.
The example above shows a nightmarishly long error summary and is a worst case scenario. The length of the list makes it difficult, even overwhelming, to digest. However, error summaries may, in fact, be easier for some users to process. The summary list would benefit greatly from skip links to help users find the fields they need to fix more quickly.
In addition, displaying error messages next to their corresponding fields provides an important visual and textual cue to help users identify the location of the error field. Other cues should also be used such as highlighting the field and the use of colour, although these should not be used in isolation (edited 05/02/16).
Editor: Please see comment from Jessica at Formulate which includes links to studies and articles that suggest error summaries have accessibility benefits if done well, with skip links to each error.
Error message criteria
UserFocus’s list of 37 usability guidelines for help, feedback and error tolerance is an excellent resource to follow for creating good error handling.
Do all you can to prevent errors
You can’t talk about error messages without recognising that prevention is the best course of action. I’m sure most of you don’t rely on error messages, you want your users to complete your form first time with no errors. There’s probably more you could do to prevent errors though.
The Baymard Institute found that “92% of top ecommerce sites have inadequate form field descriptions in their checkout process”, driving up errors.
Review your form, asking:
- Are the labels on each field as clear as possible? E.g. “Name as it appears on card” instead of “Name”.
- Do you have strict data format rules? Could you be more flexible? To understand this, try filling out your form with a variety of different data e.g. a really long name, a really short name (two characters), different phone number formats etc.
- Are strict data formats explained? E.g. An example of the required format shown.
Web designer, Steven Hoober, says in his article, Error Messages Are an Anti-Pattern:
“I follow the model of immediate helpfulness, as we all should.”
Case study: Login forms
Here’s a common login form:
And here’s Formisimo’s login form:
Email addresses are more memorable than usernames. For new registrants it’s also easier to use an email address than inventing a unique username.
Case Study: Strict name criteria
Cathay Pacific airline has strict criteria on its passenger name field, criteria that tripped up user Sophie Freiermuth:
— Sophie Freiermuth (@wickedgeekie) September 6, 2015
In this case, as in many others, the error is not something the user has control over and indeed shouldn’t be considered an error. This pain point is entirely preventable. I assume that the user had no choice but to use this service, otherwise I’d expect to see a drop off here.
Correct errors as quickly as possible
Alerting users as quickly as possible to an error changes the amount of effort required to correct it.
Inline validation alerts form-fillers to an impending error as they type. Luke W, author of Web Form Design, observed users filling in the same form, with and without inline validation. He found that with inline validation users were “faster, more successful, less error-prone, and more satisfied”. By adding inline validation, form-fillers had:
- a 22% increase in success rates
- a 22% decrease in errors made
- a 31% increase in satisfaction rating
- a 42% decrease in completion times
- a 47% decrease in the number of eye fixations
Below is an example from Twitter’s sign up form. You can that as I entered information in the password field, it is checked and an error message displayed. This allowed me to quickly change my entry, which is checked and validated, all in about five seconds. The mental strain is far lower – in fact, I, as a user, might not even log this as a frustrating moment or think of it as an error. Adobe even explain what criteria they’re checking as they check it, shown here in a tweet from Hannah Alvarez:
— Hannah Alvarez (@hannahkalvarez) August 6, 2015
An error message should clarify
Error messages that repeat the field label offer no help at all. Why repeat the field label? Sure, it might alert the user to a missed field but if they did fill it out already it doesn’t explain what the problem might be.
Explaining why a user’s input needs altering will help them correct it much more quickly. The examples below also take blame away from the user:
Use the right tone of voice
Number 14 on UserFocus’s list requires you to speak kindly to your users:
- Error messages are written in a non-derisory tone and do not blame the user for the error.
Error messages are your opportunity to save a conversion that could be lost in a moment.
If there’s one thing you don’t want it’s to ruin your users’ day. UX Movement have a list of negative words to avoid in error messages:
The following words all have negative connotations: oops, error, failed, problem, invalid, wrong, prohibited.
Be kind and be creative by writing error that are more reassuring.