When writing an error or warning message, consider these questions:
- What is the issue?
- Knowing what the issue is (or knowing that we don't know) can help frame what to communicate to the user.
- What is the cause of the issue?
- Common reasons could be user action, server/network issues, or not being able to find a resource.
- What can the user do to resolve the issue?
- If it's the app fault, explain that. If it's user error, can you identify the most likely cause?
- Is there a path a user can take to resolve the issue?
- Whenever it is possible for a user to take action on the issue, a path should be given. For example, if using a Banner or Toast, provide a call to action in them.
Quick Use Cases
Each of these is explained in more detail. For needing a component quickly, consider these common scenarios.
Page level error or warning has occurred
Background process problem
Application wide error or warning
Types of Errors and Warnings
This error type is used when an error applies to the entire page. They are represented as Banners, placed at the bottom of the Page Header.
They can be used to:
- Summarize individual errors found on the rest of the page.
- Inform the user of important, but non-critical information about the page.
- Bolded Headline (optional)
- Sentence explanation & next step
- 1-2 CTAs can be buttons or links (optional)
- Headline should be title case if two words or less, otherwise sentence case
- Sentence(s) should be action focused, active voice, and include next steps for user to take. No links in body
- CTAs should be title case for two words or less, sentence case for more
Form Errors and Validation
Form errors are among the most common type of errors. Each individual component page provides specific styling and text location. It is recommended to also use a Banner as a summary when multiple errors exist.
Validating on submit
This validation occurs after a user has hit a save or submit button. These errors are paired with Banners and individual form field errors.