Error message structure
A user typically sees an error message when they attempt to perform an action but cannot continue because something isn’t right.
Make your error messages brief yet descriptive. A useful pattern to follow is to include a description, reason, and resolution:
- Description: What happened?
- For example, if the user's login failed.
- Reason: Why did it happen?
- For example, if an SSH key doesn't allow auto-login.
- Resolution: How can it be resolved?
- For example, a user may need to manually log in to the host.
Combine your description, reason, and resolution with a title to create a strong error message. For example:
- Description: Login failed
- Reason: The SSH key for auto-login is either not available, is unauthorized, or is password protected.
- Resolution: To manually log in to the host, click Log in.
Best practices for writing error messages
Keep these best practices in mind when crafting error messages:
Don’t blame users
A user should never feel like the error is their fault. Avoid language like “You did something wrong.” Depending on your message, you may need to use the passive voice instead of the active voice so that you don't assign blame to the user.
Before | After |
---|---|
You did not provide your authentication credentials. | Authentication credentials weren't provided. |
Give users a next step
A user should never feel stuck. If they’re hit with an error, give them the information they need to continue with their task.
Before | After |
---|---|
Your list already has the maximum number of items. You are not able to continue customizing. | Your list has the maximum number of items. To continue customizing, remove an item. |
Avoid jargon
Error messages are frustrating enough without technical terms that users might not understand. Avoid jargon and use terms that are familiar to your users.
Before | After |
---|---|
Error code 5959: Outdated version information. Task termination pending. | Your task is outdated. To keep it active, update its version. |
Include the right amount of description
Tell your user what is wrong. An error without an explanation can add to their frustration and prevent them from finding a solution.
Before | After |
---|---|
An error occurred. The email cannot be sent. | To send this email, turn on your email permissions in user settings. |
However, don’t include too much information. The user doesn’t need to know exactly what is going on behind the scenes. Only give them information about what went wrong and what they can do next.
Before | After |
---|---|
Your information cannot be saved. Our system is currently designed to accommodate 1 record per user. The system memory is unable to store more at this time. | Only 1 record can be saved. To continue, remove one of your records. |
Lead with the benefit
When providing users with a resolution, start the sentence with their goal ("the benefit"), followed by what they need to do to continue.
Before | After |
---|---|
Click Log in to manually log in. | To manually log in, click Log in. |
404 error pages
A 404 page is an error page that a user lands on when the content they're trying to view either doesn’t exist or can’t be found. 404 pages are named after the type of error they communicate: “Error 404: Not found.”
Write 404 pages with error message best practices in mind: Explain what a 404 error is, define how users can proceed, and provide the tools they need to get there.
Effective 404 pages combine several elements to regroup, redirect, and empower lost users to reach their desired destination or find a new one.
Heading: Communicates what a 404 error is in plain language that users can understand. Avoid including “404” or “404 error” unless it’s clearly defined after: “404: That page no longer exists.” Write 404 headings without end punctuation (no period), unless punctuated page headings align with your brand or product.
Next steps: Defines how users can proceed, typically by inviting them to search the site, explore suggested content, or both. Always write the next steps in full sentences and punctuate accordingly.
Suggested content (optional): Points users toward relevant pages such as onboarding information, reference guides, or FAQs.
Link to home page: Provides a quick and easy way for users to navigate back to your site’s home page.
Best practices for 404 error content
Consider your 404 page as a flight path instead of a dead end. Use clear, informative microcopy to point users in the right direction. To see an example, visit PatternFly’s 404 page.
To create effective 404 pages, follow these best practice guidelines:
Use understandable language. Skip technical jargon by writing your 404 heading in plain and specific terms.
BeforeAfterError 404: Not found404: That page no longer existsAvoid exclamations, colloquialisms, and excessive humor. Write 404 headings to be informative and repeatable. When users land on a page more than once, jokes grow stale. Steer clear of extraneous words like “Uh oh!” or “Oops!”.
BeforeAfterUh oh, spaghetti-o! We lost that oneWe lost that pageOops! We dropped the ballWe couldn't find that pageHuh, that's odd...That page no longer existsAvoid assigning blame to the user. If your brand doesn’t use first-person plural (“we”) pronouns, use “that page” or “this page” as your heading's subject instead.
BeforeAfterYour search came up emptyWe can't find that pageThe page you're trying to reach doesn't existThat page no longer existsTurn error into opportunity. Always provide a link back to your site’s home page, and include supplemental next steps below your heading to encourage users to explore options beyond just going back to where they came from.
BeforeAfterThat page doesn't exist.Another page might have what you need, so try searching PatternFly.Channel your brand voice. Bland, impersonal error messages can be frustrating. Infuse your 404 page content with brand personality to support a more inviting site experience.
BeforeAfterError 404: Not found
Requested URL not found on this server. Please try again.404: We couldn't find that page
Another page might have what you need, so try searching PatternFly.Write for all audiences. Be mindful of localization. Puns, wordplay, and cultural references may not localize for all users. Prioritize clarity over cleverness.
BeforeAfter404: Not all who wander are lost...
But this page is. Search again or find your way back home.404: We lost that page
Let's find you a better one. Try a new search or return home.
View source on GitHub