Why it matters
The content and tone of error messages have a big impact on a user's experience.
Good error messages:
- help users understand what happened
- tell users how to recover
- give them next steps when they make an error they can't recover from
Prevent errors from happening in the first place
Take preventative measures by adding some assistive text in areas of your forms and applications that are the most error prone. Rather than imposing rigid formatting requirements on users (for things like phone numbers), implement data sanitization and normalization behind the scenes to further optimize the experience and prevent mistakes.
Give users important information upfront
The best example of this is password requirements. There is truly nothing more frustrating than attempting to create a password and learning the requirements via error message. Just tell users what they need to include.
This example from our create account form pattern shows how this can be done, and includes functionality that checks off each requirement as it is met.
Show users the correct format
When you can't automate data normalization, show users the correct format using helper or placeholder text.
Error placement
When possible, show the error message close to where the error occured. Proximity helps reduce cognitive load and help users understand what they need to do to recover.
Writing good inline error messages
Inline error messages should clearly state the problem and guide users towards a solution.
The tone of your messages should be helpful. Imagine how you might explain a problem to a friend or family member.
Be clear
Clarity is essential, be specific about what went wrong.
Don't
Do
Be brief
Inline error messages should be as brief as possible.
Don't
Do
Be helpful
Avoid negative language and show empathy towards the user's situation by avoid blaming language (even if they caused the issue). Maintain a positive tone to reassure users and encourage them to proceed.
Focus on how the user's action impacted the system rather than using technical jargon or system-specific terms that might be confusing.
Don't
Server error
File upload failed.
Error code: 150058
Do
Unable to upload files
Make sure your images are in JPG, JPEG or PNG format and try uploading again.
Writing good error pages
Don't let your error pages be a dead end, give your users options:
- direct them to search or another page
- offer a technical solution if applicable (refresh the page, try again later)
- tell them about other channels (toll-free number or email) where they can get help
Examples for common HTTP response status codes
301 - Moved permanently (and 302 - Found)
Users don't need to know the nuances between 301 and 302 redirects, so simply tell them that this page has moved.
If you've set up an automatic redirect to the new location, consider giving them a shortcut link to go there immediately instead of waiting.
404 - Page not found
Most people don't understand what 404 means, so clearly state page not found.
Don't let your 404 page be a dead end, tell users what they can do next.
500 - Internal server error
Most 500 series errors won't make sense to most people. For any 500 series error page its important to let users know the problem is not their fault.
It doesn't hurt to give users a few things to try, and you should offer another channel (toll-free number or email) if they need help right now so it's not a dead end.
Where to learn more
Here are some helpful articles we recommend about writing good error messages.