DES 5.1 Simplify form design, use good spacing, sensible grouping and labels for every element

A form with a good layout and that is easy to use will benefit all users.

Poor design will lead to errors, confusion and abandonment.

  • Ask for only the information you require - avoid form bloat.
  • Create a clear path through the form:
    • Avoid multi-column forms unless absolutely necessary;
    • Avoid creating a 'jagged' misaligned appearance.
  • Group similar items together and order logically:
    • Give each group a title and make distinctive:
      • Use borders, spacing, colour etc,
      • Specify the use of <fieldset> - typeface?  and <legend> to generate these natural groupings automatically in the code - see example;
    • Split very long forms into separate logical pages:
      • Indicate progress, e.g. (page 2 of 4),
      • Provide means to go back.
  • Provide a label for every form element.
  • Position form labels properly:
    • Make sure they are close to the input - avoid large gaps;
    • Text and select (option) elements:
      • to appear to the left of,
        • consider aligning to the right,
      • Or immediately above;
    • Radio buttons and check boxes:
      • To the right.
  • Make labels unambiguous:
    • Make the text as direct and unambiguous as possible;
    • For radio buttons and checkboxes, try to make the label text as self explanatory as possible:
      • e.g. 'Yes, I have read the terms and conditions' rather than just 'yes'.
  • Use the simplest form element for the job:
    • e.g. a drop-down option box may be easier than a long array of radio buttons
    • If fewer than 7, then a list of radio buttons is preferable as all options will be visible.
  • Avoid use of the reset button:
    • It is very rarely (almost never) necessary and liable to get selected by mistake.
  • Do not use auto-submitting 'jump menus':
      • These are option boxes that auto submit as soon as something is selected with a mouse;
    • They prevent people who cannot use a mouse from using them and, therefore, accessing all the options;
    • Ensure you design in a submit button with all these types of menus.

Poor: avoid jaggy alignment and large spaces between label and input elements: Good: put labels next to input elements  Good: A clearly laid out form -  showing good grouping, clear labels close to their input elements, appropriate use of radio buttons (choice of 3 mutually exclusive items). 
Good: a nicely grouped form can be generated by the underlying code - specify that you want to use fieldset to your developer  guidance_3.3b
Use drop down menus rather than selection from long lists of radio buttons  ALL elements must have labels. For dates indicate day month and year 
Place labels for radio buttons and checkboxes to the right of the element  Do not use the reset button - there are almost no cases where it is warranted