Overview
Error messages should be written for every required field.
Make sure when writing an error message they are tailored to the error state:
If the input is empty
Say ‘Please enter [whatever it is]’.
For example, ‘Please enter your first name’.
If the input fails validation
Say ‘Please enter a valid [whatever it is]’.
For example, ‘Please enter a valid National Insurance Number’.
If the input uses characters that are not allowed
Say ‘[whatever it is] must only include [list of allowed characters]’.
For example, ‘Full name must only include letters a to z, hyphens, spaces and apostrophes’.
How it works
For each error:
- put the message in red before the question text and hint text
- set the message font size to 1.25rem
- add a red 5px border to the left of the whole input
- use a red border to visually connect the message and the question it belongs to
- if the error relates to a specific field within the question, give it a red border and refer to that field in the error message – for example: “you must enter a year”
Things to remember
Describe what has happened and tell the customer how to fix it. The message must be in plain English, use positive language and get to the point.
Do not use:
- technical jargon like ‘form post error’, ‘unspecified error’ and ‘error 0x0000000643’
- words like ‘forbidden’, ‘illegal’, ‘you forgot’ and ‘prohibited’
- ‘please’ because it implies a choice
- ‘sorry’ because it does not help fix the problem
- ‘valid’ and ‘invalid’ because they do not add anything to the message
- humourous, informal language like ‘oops’
Read the message out loud to see if it sounds like something you would say.
General errors are not helpful to everyone. They do not make sense out of context. Avoid messages like:
- ‘An error occurred’
- ‘Answer the question’
- ‘Select an option’
- ‘Fill in the field’
- ‘This field is required’
Different errors need different messages. For example, text fields may be:
- empty
- too long
- too short
- using characters that are not allowed
- in the wrong format
An error for a specific situation is more helpful. It will tell someone what has happened and how to fix it.
Some errors work better as instructions and some work better as descriptions. For example:
- ‘Enter your first name’ is clearer, more direct and more natural than ‘First name must have an entry’
- ‘Enter a first name that is 35 characters or less’ is wordier, less direct and natural than ‘First name must be 35 characters or less’
- ‘Enter a date after 31 August 2017 for when you started the course’ is wordier, less direct and natural than ‘Date you started the course must be after 31 August 2017’
Use both instructions and descriptions, but use them consistently. For example, use an instruction for empty fields like ‘Enter your name’, but a description like ‘Name must be 35 characters or less’ for entries that are too long.