Cart abandonment is one of the top concerns of online sellers, and one of the first areas of investigation when starting a conversion optimization effort. And what is the checkout process other than a series of forms to complete? Every form field presents an opportunity for human error, technical error or simply confusion and frustration. Though usability problems are not the sole culprit in cart abandonment, (some customers are comparing prices, want to save a cart for later, change their mind at the last minute, have fears of a site's security, etc.), form design is under your control, and can be improved through design testing.
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.