Form validation: A quick win for website user experience

When the simple task of completing an online form is difficult, users are likely to become frustrated; however, effective form validation will guide the user step-by-step when encountering errors and minimize their frustration. Form validation is the process of notifying a user of any errors when entering data to submit the form. This is a crucial part of the user experience when filling out a web form and allows a user to be immediately notified when a mistake is made.

Successful form validation typically does the following:

Keeps the user notified on the status of form
Alerts the user of errors immediately
Uses help hints to indicate the format of the required information

Validation Techniques

There are two primary approaches a web developer can take to implement form validation.

Error-only validation

The error-only approach allows the user to fill out the form entirely before being notified of any mistakes. After the form is submitted, the error page indicates which fields were missing or incorrect type of data. In the case of a long form, this can be a frustrating process for a user.

Inline Validation

The other method is inline form validation. This is popular among sign-up forms and simple web forms. Inline form validation notifies the user of mistakes as they are entering data. This method keeps the user informed and engaged, while reducing the amount of errors and creating a better user experience. In addition, the primary goal is for users to complete the form and a less frustrating experience can lead to higher conversions. Check out this article about the benefits of inline form validation from the blog A List Apart.

Statistics reported in the article for inline validation are telling:

Errors: Decrease by 22% / Success Rates: Increase by 22%
Satisfaction rating: Increase by 31%
Form completion times: Decrease by 42%

Examples of good solutions for form validation:

Wufoo Account Creation Form

This form has plenty of great things going on. The required information is noted with a red asterisks, there is help text that informs the user the purpose behind the required data and the format requirements, and the form tells you what section you are on by highlighting the input box.

Harvest Free Trial Sign-up Form

This form requires a valid email address and URL to complete the free trial process. As a user is entering data, the form indicates required information in red and notifies the user of any errors along they way.

Mint Web Sign-up Form

Mint.com sign-up form indicates which fields are experiencing errors. In the example above, the user must enter a valid email address, password, and zip code to complete the form and the form validation does a great job of notifying the user of errors.

Tips:

Show what is optional vs required. (asterisks for required)
When error is received, use helpful hints to give the user additional tips on how to correct the error
Left align your labels for easier reading
Add placeholder text in the input fields. This gives the user additional examples of the format requirements