Error messages
Error messages appear when the user’s proposed action fails.
Anatomy
When a user inputs an unexpected value in the input field, an error message will appear below the field followed by a 16 pixels error icon. Both the icon and the error text are in red. The input field frame is displayed in red.
Helper text
When helper text and error message are both shown, the error message always appears above the helper text.
Place error message above helper text.
Hide the helper text when there is an error.
Border
Display input field border in red when there is an error.
Display the input field border in any other colour when there is an error.
Button/upload area
Display an error message below the upload button.
Add a red border to the upload button.
Display an error message below the upload area.
Add a red border to the upload area.
Language and tone
Be clear and concise
Communicate errors with a brief, clear, positive and solution-oriented approach. Be direct and natural.
Be specific
Be specific about required information and what users should do to recover from the error.
Provide a solution
Always provide a solution to the user through clear instruction. When applicable, provide an example.
Be empathetic
Speak in a humanized tone to be empathetic to the user. Let the user know that you understand their frustration.
Common error message templates
Follow the templates and examples below for common errors to create an error message that fits your context.
This error appears when user leaves a required field blank.
Provide a clear solution for the user to correct the error.
Show an error without providing a clear solution with actionable language.
Be specific, clear, and direct in communicating the required information to the user.
Show general errors to the user without including the context.
This error appears when the user fails to input valid/correct information such as entering an invalid postal code or phone number.
To keep messages clear and concise, provide the solution to the user and include an example of a valid entry.
Enter a valid postal code,
such as T3Y 8Y2.
Provide a clear positive solution with an example.
Postal code entered above is not correct.
Use a negative structure like “is not correct” or “incorrect”.
Enter a valid phone number,
such as 403-124-4567.
Provide an example as to what the user should do and a hint to what the information should look like.
Your phone number is not valid.
Provide an error without a solution. Frame the error message with a solution, along with an example of a valid input.
This error appears when the user fails to input a valid/correct date. Date range/duration information should be provided in the error message.
View more information on date formatting.
The student must be 16 years old or older to be eligible for funding.
Provide adequate information.
The student is younger than 16 years old on the session start date. They are not eligible for funding.
Provide inadequate information. This example is not telling the user what age is accepted for funding.
The study period must be between 3 and 52 weeks.
Give the user a clear idea of the acceptable date range.
Study period must be longer than 3 and shorter than 52 weeks.
Be too wordy. Try to be less wordy, more direct and natural in your message.
Error within a value range
This error appears when user fails to input a valid/correct amount.
Books and Materials cost must be lower than $4,000.
Provide a correct value if it is known.
You have exceeded the maximum amount.
Show an error without providing a solution.
Input outside accepted values
PID must be between 10 and 15 digits.
Give a ranged value when possible.
PID must be at least 10 digits
Provide inadequate solution. This example gives an unclear solution. User only knows that the PID must be at least 10 digit.
Upload errors
When there is an error with the requested file, error message appears below the file upload button or area.
View more information on file upload.
File upload errors can appear when a user does any of the following:
- Wrong file format uploaded.
- File size exceeds the upload limit.
- Upload fails.
- Duplicate file is uploaded.
- Required file is missing.
Wrong file type
The selected file must be a PDF, JPG, PNG, or TIFF.
Provide user with the list of accepted formats.
Unsupported file format. Please try again with below mentioned formats. PDF, JPEG, PNG or TIFF file type(s).
Use wordy and negative structure.
File too large
The selected file must be less than 5MB.
Provide user with the exact file size limit.
File size over limit. Please try again.
Give the user an error without unclear instruction on how to be successful.
File upload failed
We experienced an error while uploading your file. Please try again.
Use humanized tone when stating the problem. In this example, the service accepts the responsibility for the failed upload and eases the frustration that user might feel.
File upload failed. Please try again.
Use blunt language. This example is not taking responsibility for the failed upload, and is passively blaming the user.
Duplicate file uploaded
This file is already uploaded. Please upload a different one.
State the problem in a clear language and provide a solution as to what action should be taken.
Duplicate files are not accepted. Please try again.
State unclear problem. This example has a negative structure (“are not”) and does not guide the user to a solution.
No file selected
Provide a clear solution as to what user should do.
Provide an error without additional context as to what is required to be successful.
Invalid characters used
This error appears when user inputs invalid characters. To keep messages clear and concise, provide a guided solution.
You may only use Aa-Zz, 0-9, accents, a period, apostrophe, hyphen, and space.
Display valid characters when possible. This example also conveys the accepted letters case to the users.
You may only use letters, numbers and the following special characters; accents, a period, apostrophe, hyphen or space.
State the guided solution in two parts.
When the accepted characters are known, include an example in the error message.
*Use “only” when relevant.
Alberta Bar ID must include numbers only, such as “12345.”
Provide clear guided solution.
The Alberta Bar ID must consist of numerical digits only e.g. 12345
Use wordy and confusing language.
Incorrect number of characters
The Mobius reference number must be 10 digits.
Provide a clear guided solution with context.
Ensure Mobius reference number is ten digits.
Display numbers in letters.
