Inline validation is the process of showing customers if information has been entered correctly or incorrectly. It’s usually in the form of a tick box or error cross next to the field.
Your customers don’t fill out forms for fun but incorporating inline validation can help reduce frustration as they get close to their end-goal.
When used effectively, it adds numerous benefits to the UX and can significantly improve your results:
- Increases engagement
- Increases conversion rates
- Decreases time taken to complete form
- Improves form flow
- Improves error recovery experience
- Reduces customer frustration
- Reduces cognitive load
- Reduces odds of missing a required field
But our research shows that not all insurance companies are using this quick-win to spark customers’ motivation to complete forms. And they should be – especially as it’s the easiest way to gamify the form experience.
Playing The Inline Validation Game
Gamification – the application of game design elements in non-game contexts to improve user engagement – can easily give your forms the boost they need to move up to the next level.
Described by Peep Laja, Chief Conversion Officer at conversion marketing agency Markitekt, as a “path to mastery”, it encourages users to engage in desired behaviours via reward-based methods.
With inline validation, the reward is a green tick, followed by another green tick and another. The immediate indication is that the customer is reaching their end-goal; accomplishing small goals to reach a big goal is what makes playing a game addictive.
Seeing that green tick leads to a sense of satisfaction: I am progressing, I am achieving. The icon appeals to people’s natural desire to master and to complete. It creates a sense of rapid progression and accomplishment, as well as powerful visual feedback.
All these UX benefits are reflected in our own consumer survey. In May 2017, we asked 117 consumers the following two questions:
When you fill out a form, do you want to be told about mistakes as you type? Yes – 90%
When your answers are correct, do you want to be told as you type? Yes – 75.3%
These are strong statistics that shouldn’t be ignored: your customers want inline validation.
But not all insurance companies that we surveyed are using this trusty technique.
Overall, around half use inline validation on error alone, just under a quarter use it on success and error and a quarter don’t use it at all.
The graph below also shows the following breakdown between direct insurance companies and aggregators:
- Only 60% of aggregators use inline validation
- Of these, 0% use it on both success and error and 40% on error only
- 78% of direct insurance companies use inline validation
- Of these, 26% use it on both success and error and 52% on error only
The following table breaks down each insurer surveyed by whether they use inline validation on success and error, error only or not at all:
|Success and error||Error only||None|
|Legal and General||Tesco Bank||More Than|
|Marks & Spencer||Lloyds Bank||AA|
|Sainsbury’s Bank||Compare The Market|
This shows that thousands of consumers are facing the unnecessary frustration of having to return to a section of a form they thought they’d successfully completed.
The dreaded red cross has appeared on-screen, politely or otherwise informing your customer that they have made a mistake and must try again. This could easily lead to a sense of failure, frustration or anger and increases the chances of form abandonment as time ticks and patience plummets.
With inline validation, they are alerted to those errors quickly without any time-consuming scrolling. The positive green ticks soon fill the screen and motivate them to continue. Once the form is complete, the satisfied customer won’t have to spend as much time reviewing it as they know all their input is valid.
So, offer them this helpful real-time feedback and show them that you appreciate their time is precious.
What Do Our Fellow Experts Say?
Marketing experts agree that making the journey through a form as enjoyable as possible is critical.
Alex Murphy, Head of Performance Marketing at Go Compare, said: “Inline validation is of course beneficial – anything that stops a user needing to hunt for what they have done wrong, like a kind of micro-punishment, is a positive step.
“It has to be done properly though; it has to update immediately when you correct and input error. A Draconian approach that marks things as invalid before the user has finished typing is off-putting, whereas positive live validation inversely gives the user a list of micro-achievements instead.”
In other words, be human. Harness the emotional rather than the technical journey a user is on and make this a positive experience. And if you want to prove these change work, and improve multiple elements of your customer’s UX, you need to be able to track.
Leader in form design and Google Product Director Luke Wroblewski has carried out research comparing forms with and without inline validation.
Overall, those with inline validation scored better on completion and satisfaction rates and showed:
- 22% decrease in errors
- 42% decrease in completion times
- 31% increase in satisfaction rates
Wroblewski said: “Just saying the word form can make users cringe, so imagine what happens when we ask them to fill in lots and lots of input fields. At best, it’s not a lot of fun. At worst, it means errors and lots of them.”
Inviting your customers to quickly and methodically correct those errors – whether it’s an invalid credit card number or non-existent postcode – significantly eases their cognitive load. Their error recovery experience is streamlined as they’ve not had to switch between different thought processes, helping them to feel an ever-growing sense of achievement.
Industry expert Paul Rouke, founder and CEO of CRO agency PRWD, agrees that inline validation needs to act as a positive reinforcer: “Error messages should have the purpose and behaviour of a virtual assistant … They should convince the user to stay, while creating the perception of an easy form that is quick to fill out.
“Anything that can reduce the requirements for users when completing forms, both mentally and physically, should be a primary focus when looking to optimise form completion rates.”
But he also warns about the danger of making your customers feel “stupid” by using inline validation inappropriately.
Inline Validation Etiquette
The logic, style and wording of your error messages are important. Get it wrong and you could trigger frustration or even anger towards your form and your business.
Look at this example from Twitter:
It’s concise, informative and friendly without being over-familiar. Marcin Treder, CEO of design platform UXPin, has described its “discrete charm” as “absolutely seductive.”
Compare that approach with this one and you’ll see that it’s surprisingly easy to come across as impersonal. The perfunctory wording, use of red highlighting and the almost-patronising phrase “try again” all succeed in depersonalising the UX.
So, while keeping them short and specific, think about how you design your inline comments. While the green ticks act to congratulate your customer they’re on track, the error messages shouldn’t deflate them and provoke a sigh.
Embrace Paul Rouke’s idea that they should adopt the style of a polite, professional virtual assistant rather than a basic, automated response. This approach allows you to integrate your brand values and tone of voice into inline validation messages.
Marcin Treder suggests four important considerations when designing your form. Each of these work towards avoiding customer confusion and therefore abandonment rates:
1. Right time
Immediately and politely tell your customers when they’ve provided invalid information – don’t wait until they’ve submitted the form. A prompt response removes the need to reload pages and reread data.
2. Right place
Design the layout of your error messages within the form carefully – make them visually obvious and with clear intent. Aim to place the message within the right context: next to the field for an in-field error (ideally to the right, if your page design allows), next to the submit button for a server error etc.
3. Right colour
Stick to the tried and tested red for error and green for confirmation. But be subtle, there’s red and there’s red – outlining or shading a text box with a pale red is likely to provoke less exasperation than highlighting the whole input field in pillar box red.
4. Right language
Going back to the virtual assistant analogy, use your messages as an opportunity to have a friendly conversation with your customer. Avoid impersonal phrases such as “email is invalid” or “password too short” and create a dialogue that is straightforward, helpful and directional.
So, ask these questions about your forms’ error messages:
- Are they friendly or fearsome?
- Are you using too much red and too many capital letters?
- Are you choosing the most helpful words and phrases?
- Can you include the customers’ name in your messages?
- Can you add tips explaining why particular data is being requested?
- Can you include a password strength indicator?
All these small changes will add to an improved UX that will be noticed by your customers and reflected in your bottom line.
Play the inline validation game well and you’ll soon be reaping the rewards.
Improving Insurance Forms Reviewing the top 31 insurance forms