Validate Correct Responses Inline - Spiralyze

Validate Correct Responses Inline

Data Input High Priority 22% Adoption 3 Seconds Saved

Validate field inputs immediately – don’t wait until the end to remind a user that they made a mistake or missed a step.
Conversion Opportunity 0.2%

Errors and skipped fields should be highlighted immediately when a user is filling out a form. This makes it easy for the user to fix the issue and continue on where they left off.

If users forget to enter their ZIP code, or enter a credit card number with too few digits, give them immediate feedback so they can fix their error while they’re already on that part of the page.

When error checking is only performed after a user clicks the CONTINUE or PURCHASE, it results in a frustrating experience. Delayed feedback that only happens on click, forces the users that had the expectation of making forward progress, to figure out where the problem is, fix it, then click continue again – uncertain if this time if will actually work. This is annoying. Annoyed customers leave.

Highlight errors immediately, and on the field itself – this reduces time spent searching for and correcting errors, speeding up the checkout process.

Live-validation also provides a bit of positive reinforcement. It’s the satisfying *beep* at the grocery store checkout – letting users know they’re speeding down the path towards completing their purchase.

Live validation of inputs helps to reduce errors and speed up the checkout process.

Usage

The best in-line error notifications have two primary features: immeadiacy and clarity.

Firstly, they are immediately visible, outlining the field in bright red as soon as the user moves on to the next field, leaving their erroneous input behind them. It should be a visual stop-light, saying “Hold up! You gotta fix this!”

Secondly, they clearly describe the error and how to fix it (See Error Handling). When your printer isn’t working – you want to know why. “PC load letter” is not a useful error message – something like “low on cyan ink” is useful. It tells you what’s wrong, and what you need to do to fix the problem –buy more cyan ink. Tell the user if they have too many or too few characters. Tell them if a date is formatted incorrectly.

For valid inputs, the prevailing convention is to place a green checkmark at the end of the form, or right next to it. It’s a nice little bit of encouragement that says “Hey, this is easy! You got this! Keep up the good work!” It’s a subtle, but effective way to coax consumers through the checkout.

For invalid inputs, the convention is to highlight the field in red and display the explanation next to the field. It says “Look over here dummy, there is a mistake and here is how you fix it.”

Sephora provides no live validation whatsoever.

Walgreens implements effective live error messaging, but provides no positive validation for correct inputs.

Adoption

0
20%
40%
60%
80%
100%

Validate Correct Responses Inline has an 22% adoption rate among our benchmark group.

Best Practices

LIVE Validation

Don’t wait for the user to hit CONTINUE before checking for form errors. As soon as they click outside the active form, validate it. Let them know then and there if they did well or if they need to fix something.

Positive Reinforcement

Everyone likes being told when they’re doing a good job. When an input is valid, have a green highlight or check-mark appear in or next to the field.

Stick to Conventions

Effective communication begins with communicating like anyone else – errors should be in red, positive validation should be in green. Even if there was no text, most users would understand what that means.

Examples

Good

Ikea Example

Ikea implements effect live validation for both valid and invalid inputs.

Okay

Walgreens Example

Walgreens provides live error notification, but lacks positive validation.

Bad

Sephora Example

Sephora doesn't attempt any live validation at all.

BodyBuilding Example

Sephora doesn't attempt any live validation at all.