You practically can’t buy anything online without filling out some kind of a form.
So it’s important to have your forms be clear, easy to understand, easy to fill, and (which is very often overlooked) easy to make mistakes on.
Things happen. People mistype. Or their thumbs are fat on mobile and they misclick. You cannot expect everyone to do everything exactly as you’ve planned.
You have to plan for mistakes too.
And once they happen, you have to make sure it’s easy to understand what’s happened and how to fix it.
So where are you placing the error messages on your form? If they’re not placed where users expect to see them, you could jeopardize their capability to complete your form, and that means less revenue for you.
Top of Form Validation Vs. Inline Validation
A research study discovered that displaying all error messages at the top of the form puts a high cognitive load on user memory. This forces users to recall each error message for each erroneous field.
The approach that reduced the user’s cognitive load was displaying error messages inline with erroneous fields. Inline validation relies on recognition instead of recall so users can correct their mistakes faster and easier.
Another study found that “the distance between the erroneous field and error message influences the efficiency of error correction”. Top of form and bottom of form validation resulted in the longest amount of time to initiate correction, while inline validation resulted in the shortest.
User Preference of Error Message Locations
The study proved placing error messages inline with the erroneous fields lead to the best performance. It also showed which location next to the field was the most intuitive.
Why Right of the Field Is Best
The western reading system goes from left to right. When users move their eyes from the input to the error message, it feels like a natural progression that requires little mental and visual effort. Moving their eyes from the error message back to input for correction also follows the natural flow for rereading text.
Why Left of the Field Is Worst
It also feels counter-intuitive because users expect higher priority elements to be on the left side. Placing the error message on the left makes it more important than the field. But the field is more important because users need to focus on it to correct their input.
Why Above the Field Increases Cognitive Load
The close proximity of the two texts creates visual noise that distracts users when they’re trying to read the error message or the label. Seeing both texts in their field of vision makes it difficult to concentrate on just one of them and can confuse them.
Best Error Message Location for Mobile Forms
Mobile screens lack the horizontal space to display an error message and field side by side. This means error messages to the right of the field is not the best location on mobile forms.
Instead, place your error messages below the field. This was users second most preferred location in the study. Although it doesn’t correspond with the user’s natural left to right reading flow, it does correspond with their natural top to bottom reading flow.
Conclusion
If you have time to implement error messages for both desktop and mobile, opt for placing them to the right of the field on desktop and below the field for mobile devices. Not only will error messages to the right aid user scanning better, but it also results in a shorter form length.
Place your error messages where users expect to see them. Error messages should correspond with user reading flow, so errors take less cognitive effort to correct.
When users work and think less, they’re able to complete your form faster. No one enjoys filling out forms. The faster you help users get through it, the sooner they can move on to what they really want to do.
The Best Place for Error Messages on Forms
PS. Whatever you do, don’t do this:
