Form Design: Inline validation
The Design Need:
The user needs to enter data into the web user interface which has to be validated by the system before the data can be submitted.
Design Examples:
Design Solution:
Web form design best practices for when you use inline validation:
- Do not start validating input too soon. Showing inline validation after entry of data in the field produces the fastest performance. If you do want to show validation info during typing, only start showing it if the entered data conforms to a minimum format, such as x@xx.xx for email addresses
- Do not fade out success and/or error messages. Many users do a final check on the entered data before submitting and expect the confirmations they received during the process to be there. There are also many users who do not look at the screen while typing and easily miss fading confirmations
- Let the user know that you are busy validating input data, if the validation takes some time
- Explain your validation message if necessary. Sometimes only a checkmark is not enough and the user needs more feedback, e.g. when a postal code is validated the user will want to know whether the format is correct or whether the correct code for the address was entered.
When to use:
Offer inline validation in all cases where users need to enter data or answer questions that might not be correct immediately.
Do not use confirmation for simple tasks and answers: this might be confusing for users, since they do not expect confirmation for simple input.
Why use this solution (rationale):
Filling out forms is often problematic. If there is data that needs to be validated and is likely not to be validated, it may be particularly difficult. Instant validation of complex form data prevents users from ending up in a loop of submitting and resubmitting forms to check the entered data.
More info elsewhere:
- “Inline validation in web forms” on www.alistapart.com
- Inline validation design pattern on http://quince.infragistics.com
