Form validation best practices

A case study of how to get it right

Firstly, what is form validation

Our problem

Process

The array of different validation stylings prior to our rethink on uswitch.com

Display at the right place

Explanation

“Always display validation within the context of the action”

To the side of the input

Twitters excellent instant validation on right hand side of inputs
Obviously aligning validation to the right of the field can’t be used on mobile anyway
Example of a generic uSwitch form. Note the limited space for validation immediately to the right of inputs

Below inputs

The google approach of validation b0elow the inputs

Within tool tips

Vimeos use of tooltips for validation
Example of Facebook tooltip validation hiding surrounding information. Note how all error messages aren’t displayed at once due to this problem

Above the label

Example on gocompare.com of above the field validation

Below the label above the input

Example of this potentially confusing position

The best position for validation

uSwitch application

Our eventual positioning of validation site wide

Display at the right time

Explanation

The right time to inform about the success/failure of provided data is right after the user has submitted the information

Instant validation should only be used for complicated questions.

After

After example (but with tooltip) From Google

During

During example on uSwitch

Before and during

Before and during (But with a more reassuring before message) From Twitter

uSwitch application

Example of use of instant validation being used only in definable sections. Most likely at the end of forms
Examples of micro validations that notify the user before submitting but don’t overwhelm

Use the right colour (and the right icons)

Explanation

Uswitch application

Difference in our positioning and colour of validation messages before and after

Use clear language

Explanation

Examples of unclear and he unhelpful validation messages. From UXmovement.com

uSwitch application

Example of informative and helpful language being deployed at uSwitch. Requirements are clear and present up front. Help text is always displayed. And error message is concise, exact and avoids negative tone.

Universal integration

The 10 rules of form validation

The Creative Agency for your next big thing https://shoreditchdesignstudio.com/ (run by Andrew Burton)

The Creative Agency for your next big thing https://shoreditchdesignstudio.com/ (run by Andrew Burton)