Web forms often validate input only after the "Continue" or "Submit" button is clicked. In this case, the page refreshes when there is an error in the form, hopefully providing an explanation of the errors. Some websites make the errors easier to understand than others.
One of the worst ways to point out an error is with a pop up message. Once the message is closed, unless the customer has perfect recall, it's easy to forget what the box instructed:
A little bit better but still sub-optimal, many sites use red bullet points at the top to explain errors:
Remember that web usability revolves around the adage "don't make me think." Both these methods require a lot of thinking. A better way is to highlight the fields that need correction in the form itself.
Even better is to use "inline validation," showing input errors after each field is completed (when the user tabs or clicks to the next field). Office Max is one example.
A user testing study by Etre and Luke Wroblewski found that inline validation resulted in a:
- 22% increase in success rates
- 22% decrease in errors made
- 31% increase in satisfaction rating
- 42% decrease in completion times
- 47% decrease in the number of eye fixations (easier to visually process)
The 22% increase in success rate means 22% less people abandoned the form, all else equal. It's definitely worth testing for yourself.