Validation or error messaging helps ensure that data captured online from our users is as accurate as possible. From making sure it is entered in the correct format, to ensuring we have the correct addresses and contact details for our users. Validation and errors are essential for data quality.
Anatomy of an error
When we alert users to something that requires their attention, we use the reserved colours in our colour palette, these colours are designed to stand out from our brand colours, rather than blend in. Validation errors that appear in origination forms use the colour Danger, along with an alert icon. The associated icon that displays with an error message is crucial for accessibility, as using colour alone to differentiate from the rest of the text on the page is insufficient to meet the accessibility guidelines that support users with colour vision impairments.
Some of the questions presented to users have multiple inputs e.g., Date of birth – Day, Month and Year. Each input has its own error which appears stacked.
Error triggers & display
Error messages are triggered when the user either navigates to the next page in a process, submits the form or confirms an action. The system checks the data entered and identifies where it needs attention, such as incomplete mandatory fields, or incorrect formatting.
Errors can also be triggered instantly as the user moves from one field to the next, also known as ‘onBlur’, but not all validation can be consistently performed in this way, requiring errors to be triggered again on submit.
Error messages can appear in two places:
- Descriptive Alert text message that sits with the field in error
- Page level Alert box error summary that sits at the top of the page. The summary lists the errors on the page and anchor links to each. This is only triggered when the user tries to proceed to the next screen while there are active errors,
The summary is a useful feature for all users, as it acts as a second method of exposing error messages and it provides a path forward when someone tries to leave a page with active errors. It is also crucial for accessibility, as it maximises the discoverability of errors on the page in a way that is important for a variety of user groups, such as screen reader users and people with cognitive impairments.
Writing error messages
Writing concise and descriptive error messages is very important in helping users correct mistakes and move through processes easily and with confidence. For more information on writing errors read Error messages in content guidelines.