COI Toolkit Beta


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


5c Minimising the errors entered by users of your forms


Provide ‘required information’ indicators

  • Use images with the alternative text set to ‘required’ or ‘required information’
    • ...or use characters, such as '*' (asterisk)
    • ...or use real words, such as ‘required’
  • For accessibility reasons, do not indicate the required information by using only a colour change by itself. You can use colour though to make it stand out more
    • Avoid using database jargon such as 'field', such as 'required field' - to most people a field is where cows graze!

Provide clear and concise instructions at the start of the form, information such as:

  • The purpose of form
  • The number of pages and the potential time it should take
  • Advance notice about information that might be needed for successful completion. For example
    • National Insurance numbers
    • account numbers
    • reference codes
  • Advance notice about any time limitations or timeouts

Provide required format instructions and/or examples to clarify and explain input requirements:

  • Place near to the input
    • Ideally before the input, and ...
    • CODE:... ideally within the <label> tab
    • CODE:If not possible, use the title attribute as well as a visible format example

Provide help where it is needed

  • Ideally with text displayed on the form itself...
  • ... if not, use an ‘info’ or ‘help’ link to a pop-out or pop-up [see 4c]

Additional considerations:

Be careful with timeouts:

  • Ideally avoid timeouts and time limitations completely
  • Where there are time limitations and timeouts, ensure that there is the possibility to request more time
  • If a timeout occurs, try to ensure that people can rejoin the process without losing the data they have entered

Notes and discussion points

Are required information indicators always required? What about ‘optional’ indicators?
If the majority of the form needs to be filled in, it makes sense to only highlight those elements that are not required. Do this using obvious text such as the word ‘optional’.

Do not mix form types, either use forms with required indicators or optional indicators but not both.

What about in-page validation?
[see 5d] for more on in-page validation

Examples of required information indicators: a red asterisk, an image with alt text of <required> (enhanced with colour), the text <required> given next to the label Example of a simple text label <optional> showing optional information For date entry use of a dropdown makes it less likely that mistakes and formatting errors will be entered

© Crown Copyright 2004-2010