Help users understand when a form error has occurred and how they can fix it.
When to use this pattern
Use this pattern to let users know if they have filled out a web form incorrectly.
Only use this pattern for form errors. Don’t use it to tell them they aren’t eligible or that there’s a problem with the service.
How it works
Summarise errors at the top of the page
- show an error summary at the top of the page
- include a heading to alert the user to the error
- link to each of the problematic questions
- use the same error message in the summary and the form
This is so it is visible when the page is refreshed and is immediately read out by assistive technology.
Highlight errors in forms
For each error:
- write a message that helps the user to understand why the error occurred and what to do about it
- put the message in the <label> or <legend> for the question, after the question text, in red
- use a red border to visually connect the message and the question it belongs to
- if the error relates to specific text fields within the question, give these a red border as well
Keep forms simple
- Recovering from errors can be hard for users, especially if a page contains multiple errors.
- Simplify forms by rewriting and where possible, splitting long forms across multiple pages - with each page asking a single question.
Write error messages that make sense to users
Your error messages must to be specific and helpful. So make sure you write them; don't rely on a machine to do it for you.
Error messages must:
- follow the
- be in the active voice – 'Enter your name' not 'Your name must have an entry'
- be written consistently – if one message is 'Enter your name' another one for a missing address should be similar not 'Please provide an entry for your address'
- include a reference to the problematic question so that the user can understand the message without having to re-read the question (particularly important for screen-reader users)
- explain why the error has happened without blaming the user for the error
- tell the person exactly what they need to do – avoid ‘Fill in this question’ or ‘Answer this question’
- be included in the prototypes so you can test them
Test your error messages with users
- Error messages are often neglected - make sure they’re written by a content designer and have been tested in user research
Use inline form validation with caution
Here are some example scenarios with suitable error messages:
Yes-no question with nothing selected
Select yes if you live in the UK