Also called a validation message, an error message is related to a users input. They let the user know if the information they enter is incorrect or incomplete.
Why we have a design pattern for Error messages
We have a design pattern for Error messages so users understand and can see:
- they need to take an action to proceed; and
- what action they must take to resolve the error.
When to use Error messages
Use Error messages on all digital services and online forms where the user will input data.
Only display an Error message when the user selects the "Continue to next step" button.
When not to use Error messages
Do not show Error messages in the following instances.
- Before a person has inputted any data.
- When a person selects or tabs to a new field.
- Before a person is finished typing.
- When a person moves away from a field.
- To tell a person they are not eligible or do not have permission to do something. Instead, show a warning message to let them know:
- why we cannot accept the entry or selection;
- what to do next; and
- includes a way for them to leave the transaction.
How Error messages work
If a person's input is incorrect, the system must let them know. We provide them with a visual cue and clear message to help them recover.
Placement
Top of the page
Summarize all errors at the top of the screen the user is on.
Example of an Error message summary
Field
Highlight the field where the error occurred. Describe the problem and how they can fix it.
Example of a form field with an error message
Language and style
The language you use should tell the user what went wrong and how they can fix it. These messages must be clear and written in plain language.
Example: Replace default system messages like, "Field is blank" or "Entry not valid" with clear Error messages like, "Enter your postal code" or "Closing date must be after the starting date." These messages are easy to understand and point people to the solution.
Use standard messages for different form field types.
Example: A radio button field and a select field should use the same standard message.
Top of the page
The error summary should be styled as a Warning alert. Use these hex codes.
Background: #FED4BD
Icon: #943706
Text: #943706
Field
For each error use a red border to visually connect the Error message and the form field it belongs to. Use these hex codes.
Background: #FED4BD
Icon: #943706
Text: #943706
Example of an Error message
