How-To Use Inline Validation to Increase Conversion

Inline validation is an opportunity for merchants to provide a fundamentally better checkout experience for their customers.  Unfortunately, it’s an opportunity most retailers don’t take advantage of.

The problem with conventional checkout forms is that they wait until after a customer has tried to submit to validate the form for mistakes.

You know the story; you spend 10 minutes filling out a checkout form, hit submit, and get back a page that is completely blank because of an error. It’s frustrating for customers and undoubtedly causes a decrease in conversion.

Inline validation can dramatically improve your checkout experience and lower your cart abandonment rate.

By validating your checkout form in real-time, field-by-field, you are giving your users immediate feedback as to whether they’ve filled out each field with appropriate inputs.

Usability expert, Luke Wroblewski, documented some compelling data to support how effective real-time validation can be in an ecommerce setting. In a test he conducted with usability firm Etre, he found real-time validation caused:

·      22% increase in success rates
·      22% decrease in errors made
·      31% increase in satisfaction rating
·      42% decrease in completion times

In addition to his research, Luke also attests to the fact that he has seen real-time validation reduce errors by over 80% in other studies.

The end result is getting more customers through your checkout forms, faster and happier. Sounds like a recipe for increased conversion.

The downside of this for a lot of small to medium sized retailers is that they are at the mercy of what their ecommerce platform offers. In many cases, the cart platform maintains control over the entire checkout flow and merchants can’t intervene.

For retailers who have a proprietary cart or access to their checkout flow, let’s take a look at how inline validation should be implemented from a technical perspective.

Technical Implementation

Every checkout form has fields that need to be validated for accuracy on the client-side (in the browser), as well as fields that need to be validated server-side.  The ideal situation is that every field on your checkout form is validated both ways.

Client-side validation can be done with JavaScript or HTML5’s built-in validation functionality. Potential drawbacks with using a JavaScript solution are that users can disable JavaScript in their browser. Potential drawbacks with HTML5 are that it is only supported by modern browsers. That being the case, validation should also be done on the server-side.

You should validate fields once a user has finished their input for a specific field and they have moved on to the next field. This action is called “blurring” a field. For server-side validation, you can utilize AJAX to send the field data back to your server to be checked for accuracy.

If the data looks good, return a response and show the user that the field has been filled out in a way that’s acceptable. If not, return a helpful error message and display it inline with the associated field (meaning adjacent to the field). If your server response takes more than one second, you might consider displaying a small spinner graphic to indicate to the user that something is happening behind the scenes and reassure them while they wait.

Here’s a great example of real-time validation from the new Twitter sign up flow.

Inline validation reassures users and makes the arduous process of filling out a checkout form a little bit more enjoyable. If you can reduce the friction people experience while buying from you, you’ll undoubtedly reap conversion rewards.

 
Close

We wrote the book on shopping cart abandonment.

The Cart Abandonment Equation

Join our private newsletter and download The Cart Abandonment Equation ebook instantly. The book contains nothing but actionable advice to increase your ecommerce conversion rates.