COI Toolkit Beta


5c Minimising the errors entered by users of your forms  
Home / index
6a Search form design


5
Forms

How to design and layout basic forms so that they are easy to understand and fill out.

How to minimise the potential errors entered by the people filling out your forms.

When errors occur how to make fixing the errors as quick and easy as possible

Test:Forms: test yourself!

5d Handling errors and supporting input corrections


Provide meaningful and useful error messages

  • Position the message at the top of the page itself – not in a pop-up, dialog box or separate page
  • Clearly distinguish the message from the rest of the page
  • In the message, use plain English to:
    • Explain the problem...
    • ...and how to fix the problem
    • Do not use technical jargon or codes

Indicate the location of errors on the form itself

  • Highlight at the location
    • Graphics and colour together work well – for accessibility reasons, do not rely on colour alone
  • If possible, provide more information about the error at the site of the error:
    • For example, the number of the problem – 'error 2 of 4'
    • Even a repeat how to fix the problem

Notes and discussion points

What about client site validation?
If you have client-side validation check for errors as the user leaves each element:

  • But do not prevent the user from navigating around the form because of an error in one of the form elements
  • Consider ‘greying out’ the submit button while the form is incomplete or there are errors on the page

View references for this page
Example error handling. A box above the form clearly shows that there is an error and lists the 2 errors and the steps necessary to fix the errors. On the form a warning icon and a colour change clearly identifies the location of the error and the alt text for the icon repeats the steps necessary to fix the specific error

© Crown Copyright 2004-2010