Nothing is more frustrating than filling out a badly designed form.
It’s a common experience, though. How many times have you entered a password only to be taken back with red ink proclaiming “Error! password needs a capital letter, two numbers
Nothing is more frustrating than filling out a badly designed form.
It’s a common experience, though. How many times have you entered a password only to be taken back with red ink proclaiming “Error! password needs a capital letter, two numbers, a character, and a quote from a Fetty Wap song.”
Form optimization is a key component of conversion optimization, and form field validation is a big part of that. It’s easy to measure, and optimizing bottlenecks in your forms is a way to produce solid ROI upfront.
What Is Form Validation?
Form validation is a “technical process where a web-form checks if the information provided by a user is correct.”
The form will either alert the user that they messed up and need to fix something to proceed, or the form will be validated and the user will be able to continue with their registration process. For example, Twitter won’t let me use an email address that is incorrectly formatted, and gives me an error message when I try to do so:
But when I correctly enter my email address, it works (and validates it instantly, which is nice):
Basically, validation makes sure that the provided text is in the right format (e.g. for email, firstname.lastname@example.org), and if the text fits the qualifications for a suitable entry (e.g. the email isn’t already registered, or the password fits the criteria).
In general, there are two main types of form validation:
- After Submit Validation
- Inline Validation
After Submit Validation
After submit validation is probably what you’re most used to. It’s also, generally, a worse experience than inline validation.
According to Designmodo, “when the user provides all the data and submits the form, usually by hitting the button, the information is sent to the server and validated. The response of the “validator” is sent back to the user’s computer and it’s visualized as either a confirmation message (“everything went fine!”) or a set of error messages.”
In other words, you fill out the whole form and then press submit. After that, if you made any mistakes, the page will tell you what you did wrong. Sometimes, when errors stack up (especially when they’re all shown at the top), it can get quite frustrating, leading people to abandon forms:
Even worse, sometimes a form will spit back error messages that are unclear. Here’s an example:
Peep was trying to fill out a form on a venue’s website in order to get a quote for an event.
However, he was returned this page with a big red message saying, “there was a problem with your submission” at the top.
The error was that he entered a range of guests (rational choice, seeing as it’s hard to state an exact number of guests for events), but they wanted an exact number. Of course, they didn’t mention this before he hit ‘submit.’ Even after hitting submit, the error message didn’t clearly say to enter an exact number.
As we’ll see below, there are ways, even with after submit validation, to make things clear upfront and avoid the frustration of the above examples.
One way to improve form UX, though, is simple to move to inline validation…
Inline validation is a wonderful way to reduce friction in forms. It’s becoming more and more common, probably because we’ve seen compelling case studies supporting its effectivenestt.
According to Designmodo, inline validation is when “validation messages are shown immediately after the user types in data to form fields. Usually, information is shown next to the fields and encourages the user to take immediate action.”
A good example of inline validation is the one I gave of Twitter above. When you register for a profile, you’re either presented with a checkmark (good to go) or red text explaining what you did wrong:
Most experts agree that inline validation is better for user experience. As Luke Wroblewski put it:
“Web forms aren’t great conversationalists. They ask a bunch of questions, then wait until you answer them all before they respond. So when you register for that cool social network or use an e-commerce site, it’s pretty much a monologue.”
Inline validation solves that problem, making the experience of filling out a form a bit more conversational. Wroblewski also tested inline validation against a control (after submit validation). Here’s a video example of the inline validation:
Though the sample was small, they found the following results with the inline version:
- a 22% increase in success rates,
- a 22% decrease in errors made,
- a 31% increase in satisfaction rating,
- a 42% decrease in completion times, and
- a 47% decrease in the number of eye fixations.
22% more people making it through your forms is well worth the effort – and so is creating a more satisfying experience for anyone filling out the form.
Why Inline Validation Works So Well
A Designmodo article explained the delight of filling out a form with inline validation here:
“The discrete charm of well-designed form validation in Twitter’s forms was absolutely seductive. Informative error messages popped out right when I’d made an error, immediately eliminating irritation. “Inline validation” helped me understand what was going on right away. I could feel 