This is pretty much as bad as it gets. The user is just told their input is invalid with no hints as to why that is or how they can fix it.
Form validation errors are inevitable. Yes, they can (and should) be minimized, but validation errors won’t ever be eliminated – they are a natural part of complex forms and user’s data input. The key question then is how to make it easy for the user to recover from form errors.
In this article we’ll go over findings from our usability studies on how the wording of validation error messages largely determines the user’s error recovery experience, and how “Adaptive Error Messages” have shown to significantly reduce the user’s error recovery time.
Common fields that we frequently observe to cause cause validation issues during testing include: phone number (formatting), state text field (‘TX’ vs. ‘Texas’), dates (month names or digits), monetary amounts (decimal separator, thousand separators, currency, etc) credit card number (are spaces allowed?), and address (street number in address line 1 or 2?).
Generic Error Messages
When benchmarking the checkout process of 100 major e-commerce sites, we found that most form validation error messages are woefully generic. This is problematic because it doesn’t do much in way of helping the user understand what the error is and how to fix it. Generic error messages tend to run the spectrum from unhelpful to completely useless. For instance, during benchmarking we saw the ‘Phone’ field yield error messages such as:
- “Invalid”
- “Not a valid US phone number”
- “Not a valid 10-digit US phone number (must not include spaces or special characters)”
The first error message is obviously the worst as it offers zero help as to why the input isn’t accepted – it just states that the site doesn’t consider it “valid”. The second error message is still pretty bad, in that it just says the input isn’t a “valid US phone number” but it doesn’t hint at why that might be. The third error message is better than the others because it not only states that it must be a US phone number but also indicates that a country code, spaces, or other formatting, will cause the validation to fail even if it actually is a legit US phone number.
However, even though the third error message is the best of the generic error messages, our usability tests showed that it is still far from ideal because it doesn’t show the user what the actual problem is. Without any indication of what the actual error is, the user will basically have to do all the work figuring this out themselves.
During our mobile commerce study this subject first entered her phone number but included spaces which provoked a validation error. While this should not cause a validation error at all, the error message itself should at the very least tell the user what the problem is. In this case, the subject thought she might need to add a country code, but that also did not work (middle image). She then removed the country code but during editing, accidentally removed another digit too. So while the phone number was now formatted correctly, it only had nine digits. Alas, at this point the test subject no longer trusted the error message as she it had told her the exact same thing for all three input variations, and instead concluded the site was “broken” and abandoned the purchase.
Most of the time having to figure out what caused an error is just tedious for the user. During our usability studies the test subjects were often observed spending an inordinate amount of time trying to fix errors with generic error messages – especially of the first two types, although plenty struggled with the third type as well, leading to repeat validation errors. Obviously this results in a poor user experience although the subjects were able to work it out most of the time.
However, where things get really thorny is when it isn’t immediately obvious to the user why their input is deemed invalid. This can be downright harmful because it effectively forces the user to guess how to fix the input through trial and error – or give up and abandon their purchase, a route we’ve seen many subjects begrudgingly trudge down.
Adaptive Error Messages
Luckily, testing also revealed a solution to this problem: adaptive error messages. These are error messages that adapt based on what invoked the validation error and use this to provide the user with helpful instructions on how they can correct their input.
In other words, adaptive error messages dynamically change to best match the user’s situation. For example, if a user tried to provide “john.newman@gmail” in an e-mail field, an adaptive validation error message would read “This email address is missing a top-level domain (such as ‘.com’).”
While the copywriting of this validation error message could be optimized, it is still light years ahead of a generic error message as it alerts the user to the specific problem identified in their input. This makes it instantly clear to the user what the issue is and how they can fix it.
This is vastly superior to generic error messages because it alerts the user to the actual validation failure and provides them with an easy way to fix it. If we go back to the earlier phone error example, an adaptive error message could tell a user who had submitted their phone number with a country code that: “It seems the provided phone number includes a country code (‘+1’) which isn’t accepted by the site – please provide a 10-digit US phone number without country code, spaces, or special characters.”
Letting the user know why the validation failed, it makes it much easier for them to fix it. During testing we observed it to drastically improve error recovery time, and perhaps even more critically helped reassure the user that their input in itself wasn’t wrong but that they had just provided it in a format the site was incapable of processing.
Instead of simply reading “Invalid password”, or “Password should contain 6 digits, ..” Symantec provides the user with an error message specific to the validation rule triggered. Here a user has entered their email as password and is told that this is not allowed – an error message that’s much clear and easy to recover from.
When a user leaves a required field blank but fills out all other entries in the form it is most likely because they are uneasy about providing that information. Here an adaptive error message “identifies” this user concern for privacy and returns an explanation as to why the phone number is required and and reassures the user of how and what it will be used for.
Instead of providing the user with a generic “credit card not accepted” message, Toys’R’Us returns the part of the payment error that was returned. For more on card decline errors, which are notoriously generic, see How to Recoup 30% of ‘Card Declined’ Abandonments.
Now, ostensibly the reason most sites don’t do this is because it is difficult. However, if our validation rules are smart enough to identify these types of errors, we should be able to inform the user about the exact problem identified rather than handing them a generic error message. It is precisely because validation errors can be caused by such a wide range of reasons (i.e. the input’s content, length, formatting, etc) that it is so important to let the user know exactly why their input failed because they’ll otherwise have to try and work it out themselves.
So there we have it. Adaptive validation errors – the smarter, situation-aware error message that let’s the user know exactly what the problem is and how to fix it. A much improved validation error experience that the user can easily recover from.
Of course avoiding validation errors in the first place is ideal. The perhaps easiest way to lower validation errors is by accepting all common inputs and formats (and then perform any necessary data and formatting harmonization in the back-end). Other useful strategies include providing proper inline help and formatting examples, indicating both required and optional fields, having helpful field descriptions, and auto-detecting content where possible. Also, consider whether a validation warning might be more meaningful than a validation error.
This article presents the research findings from just 1 of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.
