Inline validation is a feature used within a webform that delivers messages to the user based on whether the information they enter is correct or incorrect
Typically a form will have inline validation on errors, where the user is presented with an error message when they exit (or blur) out of a field. Inline messages are shown close to each field, for example above, below or to the side of the field
The primary aim of using inline validation is to make the user aware of issues as they move through the form, so they can correct them before the submit the form. This is a more interactive, and user-friendly, process than the original method of displaying error messages in one batch, after submission.
A further recommendation is to use inline validation to show the user that they have entered information correctly. Whereas an error will often require a message to be shown, and this message guides the user on what they need to correct, a notification of entering the correct data can be a simple tick box, or a green border around the field itself.
Inline validation comes in two types:
Validation on error When a user makes a mistake in a field, and then a message is shown to them.
Validation on success and error When a user successfully completes a field then they are notified visually, and when they make a mistake in the field then a message is shown to them
The definition of Inline Validation: Inline Validation is a process of checking user inputs in form fields as the user moves between the fields. Inline validation includes functionality to show messages, or indicators, to users based on whether their inputs were correct or incorrect.
Why should I include Inline Validation in my forms?
The original method for displaying errors in forms was to allow the user to input data, then submit the form, then the errors would be shown in one batch. In some cases, this gave the user a number of errors to correct, and the process of correcting the mistakes would feel significant to a user. This increased the chance that a user would give up (drop off) and the conversion rate across all users would drop.
Inline Validation helps reduce the perceived effort required by alerting the user to issues as they move through the process. An example is a telephone number field that has inline validation to check the formatting of the phone number. If the user mistypes their contact number, by missing a digit off, or by entering the information incorrectly, then a message next to the field will alert them to the mistake.
“Use inline form validation with tick marks to show users their input is valid. This is a form of positive reinforcement rather than just using red X’s. This also prevents the situation where a form has been submitted with incorrect details only to be reloaded again for the user to correct their mistakes. Help them get it right the first time”
The functionality behind inline validation will contain rules that match the validation that takes place on form submission. There are no standalone providers for inline validation, so the solution is nearly always created by an internal development team.
The time to build an inline validation solution varies, but a typical build process for a short form would be one day for design and UX, two days for build and half a day for testing.
Is Inline validation worth it?
Calculating the potential impact of inline validation is based on two factors: what is the cost to develop and deploy this feature, and what is the expected return.
The impact of moving from no inline validation to validating within the fields is significant, and you are likely to see a strong increase in form conversion rates. If you have inline validation "on error" in place, and you're planning to launch validation on success then the uplift will likely be smaller. On high volume sites that uplift may well result in a good increase in income.
If I launch inline validation, how can I measure its success?
The KPI for any change to a form is the conversion rate, however focusing on a single metric may blind you to further optimisation opportunities. If inline validation is launched on a form, there may be five to ten additional touch points and messages to the customer.
Having a deeper understanding of user behaviour in your form will allow you to see how the inline validation messages impact on the UX. Using a platform like Formisimo will allow you to see 59 new metrics on form behaviour, and the following will be useful to determine the success of inline validation:
How often a field is changed by users
Which fields users return to the most
The drop-off rate of the submit/continue button
The field-by-field path that users take down your form