Display Clear Error Messages - Spiralyze

Display Clear Error Messages

Data Input Medium Priority 85% Adoption 3 Seconds Saved

If a user makes an error in a form, they should be able to fix it and move on – make sure error notifications are clear and helpful.
Conversion Opportunity 0.2%

Many users are going to make some sort of error when filling out an online form. This is inevitable. Anything from a typo to a misread credit card number can halt their progress through the checkout. This source of friction can be minimized by proving clear and helpful error messages on the form.

If a user is missing a digit in their ZIP code, don't just give them a message saying "Invalid ZIP." Be specific, and say "ZIP code requires 5-digit number." This makes it easier for them to fix the error and move on with the process.

Highlighted in bright, bold, red.

Usage

The worst possible error notification is one that is too vague. Some sites will implement an error message that only appears at the top of the page and simply reads "Invalid address." Imagine going through a grocery checkout only to have the cashier say "Sorry, it won't work." They won't tell you why it won't work, or how you can fix it. Frustrating!

Be specific. If the credit card number is too short, specify. If the email is missing an "@" - specify!

Macy's places some error messages at the top of the page, without specifying where or what the error is.

Staples highlights errors well, but does not specify the error enough.

Adoption

0
20%
40%
60%
80%
100%

Display Clear Error Messages has an 85% adoption rate among our benchmark group.

Best Practices

Next to Error

Online checkouts are a visual experience - if there is an error, draw the user's eye to the invalid input so they can fix it immediately.

Be Specific

Don't keep users guessing - be specific as possible with the error. This makes it easy for them to fix it and reduces friction.

Examples

Good

REI Example

REI highlights and effectively specifies each error.

[Issue30-REI]

Okay

Staples Example

Staples highlights the error, but does not specify what caused it.

Bad

Macy's Example

Macy's does not highlight some errors or provide a good explanation.