Definition

Inline validation reduces friction on a form by displaying a validation messages as soon as the user enters data into the form field. Normally the message is shown adjacent to the field to confirm if the user needs to take any action before they proceed to the next field. This has five clear benefits.

According to the Baymard Institute 40% of e-commerce checkouts don’t use inline validation and 20% don’t implement it correctly.

The main benefits of inline validation are:

1. It makes it easier for users to find errors.
2. The nature of the field is still fresh in the user’s mind. This makes it easier for them to remember what needs changing.
3. Instant error notification improves user confidence and reduces cognitive load as the visitor doesn’t have to check the form before submitting.
4. It helps to flag missed fields and so the user is less likely to skip mandatory fields.
5. For persisting credit card data fields it helps prevents errors (e.g. too short or too long card numbers), and thus a page re-load which can clear the entire page input.

There are two common mistakes when implementing inline validation:

1. Premature inline validation – This is where the user’s initial entry of data triggers an invalid error message before they have completed the field. This can annoy visitors and it may cause them to look for an error that doesn’t exist.
2. Out of date error messages – This refers to the situation where error messages aren’t refreshed and removed live as the user corrects their data. This results in an incorrect error message being shown even though the customer has corrected their mistake.

Here is an example from Ebay on its mobile app registration form. It flag up errors immediately the user completes each field. This improves usability by giving instant feedback and conversion through a better user experience.

Source: ebay.co.uk

Resources:

Conversion marketing – Glossary of Conversion Marketing.

Over 300 tools reviewed – Digital Marketing Toolbox.

A/B testing software – Which A/B testing tools should you choose?

Usability testing – How to do usability testing to improve conversion.

Card sorting – 6 top card sorting tools to improve website navigation.

Credit:

Input icons created by GOWI – Flaticon