Notifications, Messages, and Error Handling — part 1
Effective messaging instills trust in the system, communicates relevant information, and creates moments of delight for the user. A good design system should utilize the following components to deliver informative, actionable and timely messages to users when necessary.
- Toast Notification (Part 1)
- Top Hat Notification/Banner (Part 1)
- Dialog messages (Part 2)
- Inline Messages (Part 3)
- Empty Screen/No Access (Part 3)
- Complex Error Handling (Part 4)
- Write simple, succinct but helpful messages (Part 5)
Flash Toast Notification
Flash Toasts are duration controlled. They provide information or feedback related to a performed user action. Flash toasts stay on the page for a few seconds, depending on how content-rich the message is and fades out automatically without user interaction.
Key Features:
- Temporary and Timed. Disappear after a few seconds (time depends on content length).
- Confirmation or informational message.
- Not critical. Often does not require user action.
- 0–1 CTA.
Different Message State, CTA Variations
Placement
- They appear at the top middle part of the screen and keep a certain fixed top padding.
- They overlay the content beneath it.
When to use:
- Use this for confirmations, alerts, errors or system information that are not critical or require no user interaction.
Multiple Flash Toasts:
- There is only ever one flash toast displayed.
- When a second toast is triggered while the first is displayed, the first should start disappearing before the second one starts to appear.
Interaction Rules:
- It will fade automatically from view without requiring the user to dismiss it manually.
- If the user hovers on the message, the timer counting down stops. When the user’s cursor moves out, the timer resumes and after a certain time, it fades out.
CTA(s):
- there could be 0–1 CTA (link style)
Flag Toast Notification
Flag toasts provide action-based messages or convey informational and /or critical account-related messages. They are used for confirmations, alerts, warnings, and acknowledgments that usually require user interaction.
Key Features:
- Temporary but not Timed. Requires user to manually dismiss the message.
- Critical information or system feedback
- It usually requires user interaction.
- 0–2 CTA(s).
Different Message State, CTA variations
Placement
- They appear at the top middle of the screen and keep a certain fixed top padding.
- They overlay the content beneath it.
When to use:
- Use this for confirmations, alerts, errors or system information that usually require user interaction and are somewhat critical.
Multiple Flag Toasts:
- Consecutive toast can be shown at the same time stacking top-to-bottom.
- Up to 3 flag toasts can be stacked. (Up to change)
Interaction Rules:
- It will remain persistent until the user performs the required action or dismiss the message.
- It will disappear when there is an interaction elsewhere that signals users giving up or are finished with the current interaction.
CTA(s):
- there could be 0–2 CTA (link style).
Top Hat Notification/Banner
Top Hat notifications communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action.
Key Features:
- Persistent. Should only disappear once the related issue is resolved
- System-level messaging, usually not triggered by user actions.
- Critical information.
- 0–2 CTA(s).
Different Message State, CTA variations
Placement
- They appear at the very top of the screen, above the application header.
- They do not overlay or cover the content beneath, instead, they push the content including the header down.
When to use:
- It communicates system-level messages that are relevant to the user regardless of their place in the application. For example: no internet connection(offline), system down/maintenance and etc.
- A Top Hat Notification persists over a session and appears without user initiating the action.
- Use Top Hat sparingly.
Multiple banners:
they will be stacked on top of each other. Pushing all content down.
Interaction Rules :
- Top Hat remains persistent until the related issue is resolved.
CTA(s):
- there could be 0–2 CTA inline style placed in the message.
Above is a general guideline of the toasts notifications and top hat banner notification. Special thanks to girija bhomawat for helping with sorting out the use cases and laying a good base of the guidelines. We’ll continue the discussion on other types of messages used in other scenarios…
