Reduce the risk of all input errors

All users make mistakes when inputting data (for example, into forms and checkouts). Aim to prevent these errors occurring, but make it easy for users to correct errors as they occur.

Users can make costly mistakes if they don’t fully understand the implications of their actions or can’t rectify their errors. Error prevention is all about reducing risk to your users.

What to do

To pass this guideline, you need to make sure that:

  • All data input submissions are reversible; or
  • All data input submissions are checked for input errors and the user is given a chance to correct any mistakes; or
  • Add a confirmation page to the data input submission process that summarises the input and the outcome, with an option to correct or discontinue. This page has an input field (for example, a confirm button or checkbox) that acts as confirmation of the submission.

Tips

  • This guideline expands on Guideline 3.3.4.
  • This guideline applies to deletion of data as well as submission.
  • Although each technique alone is enough to pass this guideline, add as many of the techniques to your process as possible.
  • Provide a confirmation webpage that gives the user a chance to read a summary of everything they have input, and positively confirm their actions (especially if inputs were spread over several pages in the process).
  • Validate forms inline and add error messages if input is incorrect. Be specific in explaining how to fix mistakes.

See also

Your website has detailed help and instructions

Your users have a range of abilities. Some will instinctively know how to use your website and others will struggle. You can help your users get the most from your website by offering help wherever you can. This is especially relevant to forms, where your users need to input the right information for the form to work.

What to do

Offer help on your forms by:

  • Labelling input buttons with the nature of the input (for example, ‘Subscribe’ or ‘Buy’); and
  • Where an input field needs more information than a label provides, add a link to that information near the field (for example ‘Help with this answer’); and
  • Where a field needs a specific format, use a label, adjacent text or placeholder text showing the correct format (for example, ‘Date: DD/MM/YYYY’).

Tips

  • A link to further information, such as help for a form, counts as an “essential” exception against opening a link in a new window (see Guideline 3.2.5). Opening a link to help in a new window allows the users to follow the help whilst skipping between windows.
  • An example of when further information would help is beside a free text field to answer the question: ‘Why are you a good candidate for this job?’ The help could offer hints and tips on the correct format for an answer. Make certain, for instance, to note any character or word limit.

See also

Reduce the risk of input errors for sensitive data

All users make mistakes when inputting data (for example, into forms and checkouts). You should try to prevent errors occurring, especially when users are committing to legal or financial agreements, or otherwise sharing their data.

Users can make costly mistakes if they don’t fully understand the implications of their actions or can’t rectify their errors. Error prevention is all about reducing risk to your users by adding in confirmation stages to processes that pose a legal or financial risk.

What to do

To pass this guideline, you need to make sure that:

  • Legal commitments, financial transactions, test responses and changes to user controlled data are reversible; or
  • Legal commitments, financial transactions, test responses and changes to user controlled data are checked for input errors and the user is given a chance to correct any mistakes; or
  • Add a confirmation page to the data input submission process that summarises the input and the outcome, with an option to correct or discontinue. This page has an input field (for example, a confirm button or checkbox) that acts as confirmation of the submission.

Tips

  • Guideline 3.3.6 widens this guideline to include all types of data transfer, not just these high-cost transactions.
  • This guideline applies to deletion of data as well as submission.
  • Legal commitments are transactions where the user incurs a legally binding obligation or benefit.
  • User controlled data means things like name and address fields for a user’s account.
  • Provide a confirmation webpage that gives the user a chance to read a summary of everything they have input and positively confirm their actions (especially if inputs were spread over several pages in the process).
  • Validate forms inline and add an error message if input is incorrect. Be specific in explaining how to fix mistakes.

See also

Suggest fixes when users make errors

All of your users make mistakes – they’re only human after all. When they make mistakes on your website (whether it’s their fault or not), they get frustrated.

Fortunately, it’s also a great time to demonstrate to your users how much you care about them. Show suggestions and hints when users make mistakes on things like forms and checkouts.

What to do

To pass this guideline, you need to make sure that:

  • Your forms identify input errors.
  • When the error is missing a required field, communicate this to the user with a text suggestion.
  • If the error is in the format of the input, the suggestion shows the correct format (for example, ‘The date must be in the form DD/MM/YYYY’).
  • If the error is because the input needed to be from a limited list of values, provide these values and explain them.

Tips

  • This guideline builds on Guideline 3.3.1, by adding a requirement to make a suggestion for user input to fix errors.
  • Be specific.
  • If a user makes an error, provide a list of links that the user can follow to jump back to correct their input.
  • Make it easy to re-submit incorrect forms by retaining all correct data.

Exceptions

You don’t need to provide suggestions if:

  • Making a suggestion would negatively impact data security.
  • Making a suggestion goes against the purpose of the field.

See also

Label elements and give instructions

Chances are your website will have a feature that requires your users to fill in some information. This might be on a checkout page to buy a product, a contact form to get in touch or a newsletter sign-up to opt in to your mailing list. You need to ensure your users know what’s required of them when they reach one of these elements on your website.

Without clear labels and instructions, your users won’t know what to do.

What to do

  • Label all input fields clearly and helpfully.
  • Where a field needs a specific format, give an example (For example, for a ‘date’ field in a form you might use ‘Enter the date as dd/mm/yyyy’)
  • Mark required fields with an icon and explain what the icon means before the form.
  • Keep your labels simple – too much explanation can be counter-productive. Things like ‘First name’, ‘Email’ and ‘Your message’ are fine.
  • The same goes for instructions, ‘Required fields are in red and have a * symbol’ works great. So does ‘Fill in this form and click ‘Submit’ to get in touch’.

Tips

  • Instructions need to take into account how they use sensory characteristics.
  • Think about how your use of colour affects things like required fields if you want to highlight them by colour. Don’t highlight by colour alone, pick a symbol too.
  • Consider error identification as well, and make sure that you give helpful instructions when your users make mistakes on forms.

See also

Clearly identify input errors

Everyone makes mistakes, even you and I. Make it easy for users to understand and correct their mistakes with a bit of guidance. Provide timely and clear error identification guidance when users make mistakes on your website. Using error identification keeps your website running smoothly and keeps your users from getting frustrated.

One of the worst areas for mistakes websites are forms, including checkouts, newsletter sign-ups and questionnaires. Any of your users can make a simple error that means they can’t submit your form. If users cannot identify their mistakes, they will leave.

What to do

  • Identify and explain to the user any mistakes that you can detect automatically.
  • Add error explanation close to the error, showing what is wrong and how to fix it.

Tips

  • If a form requires input in a certain format, show and describe the required format.
  • If a mandatory field is empty, highlight the field and explain what’s required.
  • Build forms to be forgiving, accepting variations on the formats you prefer.
  • Don’t ask for too much information, just what you need.
  • Be specific. Use clear, concise instruction and form field labels.
  • Highlight mistakes in forms with colours and symbols.
  • Don’t clear a form if a user makes a mistake. Save the information and allow the user to edit their error and continue.
  • Provide extra help by giving your contact details on all pages (the header or footer are great) and especially near forms.

See also