Inline Validation: Can It Improve Conversion?

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.

Tags:

Related Articles

6 Responses to “Inline Validation: Can It Improve Conversion?”

  1. Nice article. In order to measure improvements it should be noted that you should be measuring your old form in the same way as the new form. Compare apples with apples. We conducted such a test and found a 13% improvement in one step of the form (now with inline validation) resulting in an actual 20% lift in conversion.

  2. Greg says:

    My assumption would be that the inline validation would raise form completions (without testing anyway), though I’ve seen some shocking messages that were clearly written by a programmer. Make them friendly!

    Another approach I like is having a green tick box next to (completed) validated fields, it’s nice to be reassured during the process.

  3. You need to do a A/B testing to get the best result of the test.

    Nice articel btw.

    BR
    .m

  4. I guess inline validation is done by JavaScript?

    If so how do you handle people that do not have this option turned on in the browser?

    Do you need to code twice for those with and without JavaScript turned on?

    Any explanation?

    • Yeah it is done by JavaScript, namely jQuery, mooTools or other JavaScript framework.

      In my opinion, second (server-side) validation is a must.
      a)You must validate users with JS off.
      b)You must validate scripts/bots/etc.

  5. I went to OfficeMax.com for the inline validation, looks fairly good.

    Does anyone know of other websites that are doing a great job with the inline validation? So that I can go look at other examples to get better ideas on how I want to do it on my website?

    Please give me some URLs…….thanks.

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS