DES 5.2 Prevent errors and assist recovery from errors by providing supportive information

  • provide required information indicators:
    • use images with alternative (alt) text (see des 4.1):
      • e.g. alt="required";
    • Use characters such as '*';
    • Do not indicate by colour only (see des 1.3);
    • Nb: avoid using database type jargon such as 'field' as in 'required field:'
      • to most people a field is where cows graze.
  • provide brief and clear instructions at the start of the form, e.g:
    • the purpose of form;
    • The number of pages;
    • Warn about information that might be needed for successful completion:
      • e.g. account numbers etc;
    • Warn about any time limitations or time-outs.
  • be careful with timeouts:
    • ideally avoid specifying timeouts and time limitations completely;
    • Where there are time limitations and timeouts, design in a facility to ensure that there is the possibility to request more time;
    • If a timeout needs to occur, try to ensure that users will be able to restart the process without losing the data they have entered.
  • provide required format instructions/examples:
    • before the input.
  • Provide meaningful and useful error messages:
    • Position the message at the top of the page not in a pop-up, dialogue box or separate page;
    • Distinguish the message from the rest of the page;
    • Supply a full range of meaningful error messages to the developer - in the messages:
      • explain the problem and how to fix it,
      • Do not use technical jargon.
  • indicate the location of errors on the form itself:
    • highlight in a non-colour dependent way;
    • If possible, provide more information about the error at the site of the error:
      • e.g. the number of the problem - 'error 2 of 4'.

tip: specify the inclusion of default form entries only where it makes absolute sense to do so. avoid placeholder text just for the sake of it (this was an accessibility recommendation that is now outdated and causes more difficulties than it solves).

Illustration of clear error message: provide a valid email address. Also an icon with error 1 of 1 is shown next to the label  Good: Password requirement (6 chars, no spaces) is before the input box