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

Recommendations

• 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.

Examples