Usage
Standardized practices for handling errors across different components and interfaces is essential for a smooth and intuitive user experience.
- Apply the designated error patterns to components and follow the guidelines outlined in the Atmosphere documentation
- Make sure that error messages, visuals, and interactions align with the specified patterns
- Maintain consistency in error handling across different platforms and devices for a seamless user experience
Consistency and clarity
To maintain a cohesive visual language, use consistent styling and formatting for error messages across different components and contexts.
Users should be able to instantly recognize errors.
- Use consistent visual cues, such as colors, icons, and messages, to indicate errors. For example, a red text field border and a red error icon.
- Use a color that distinguishes errors from the rest of the UI. In general, red is used to indicate errors.
- Use universally recognized error icons to draw attention to the error, such as a red exclamation mark.
Messages
Messages must be easy to understand. Use simple, plain language that is easily understood by the user. Avoid complex sentences or technical terms that might confuse the user.
Language and tone
Write error messages in a friendly yet professional voice to help users address the issue effectively.
- Maintain a friendly and empathetic tone in error messages to reassure users.
- Never blame users. Avoid language that might cause unnecessary panic.
- Keep your messages straightforward and informative, to help the user move forward as quickly as possible.
Guidance
Help users to instantly understand the issue and provide a solution or guidance that empowers them to resolve it.
Apply progressive disclosure to give users access to additional information or assistance. For example, include links to relevant help documentation, FAQs, or support resources.
Placement
Proper placement of error messages helps users to easily notice and identify them.
- Place error messages close to where the error occurred to provide immediate context.
- Use visual design elements, such as lines or arrows, to associate the error message to the relevant input field.
- Place error messages consistently across the application, so that users know where to look for error information.
Prioritization
To help users focus on resolving the most critical issues first, prioritize error messages when multiple issues occur at the same time.
- Determine which errors are most critical to the user's task. Highlight those errors first.
- Apply visual design techniques such as color intensity, font weight, or font size to indicate the severity of errors.
- Organize error messages in a logical sequence that makes sense to the user.