Below is a draft based on new UX guidelines template and written for new Vanilla website prototype (in 21.10 cycle). It may be used as a base for finalising the Notification design guidelines spec.
Overview
Notifications are messages that communicate information to the user.
The two main variants of notifications are toast notifications and borderless notifications.
General Usage
When to Use
Use Notification to inform users of system status updates or changes. It should be useful, lightweight and doesn’t interrupt user flow as they accomplish their important tasks in our software.
Only send notifications where necessary. Confine each notification to the portion of the interface and workflow it is relevant to.
When not to use
Notifications are not Modals, it doesn’t disable the main content until the user explicitly interacts with the modal dialog.
Anatomy
Toast Notification
Definition
Toast Notification is short, time-based messages that slide in and out of a page and provide nondisruptive information. It either disappears automatically or can be dismissed by the user.
The look
Usage
When to use
- Use toast notifications on page to deliver short messages about system updates and changes
- Use toast notifications when actions are required.
Usage advices
- Toast notifications are normally placed at the bottom left or right corner of the page. The designer may want to position the toast notification in an alternative location because of UI considerations.
- The timestamp, action buttons and the close button are optional and can be removed.
- The colour of notification status should correspond with the message intent.
- Keep messages clear and concise. Examples:
“Your changes were saved successfully”
“The item was deleted [Undo]”
“A user {name} requested access to this [Approve] [Deny]”
Behaviour
Dismissal
Toast notifications will dismiss automatically after five seconds on the screen. The option to include a close button is to allow users to dismiss them sooner.
Examples
On JAAS
Borderless Notification
Definition
Borderless notifications are used in cases where a notification sits inside another component, such as a table cell or a card. Inline notifications display both task-generated and system-generated messages and persist until they are dismissed by the user or the notification is resolved.
The look
Usage
When to use
- Use borderless notification to alert users about content on a specific area in the UI. They are frequently used in forms, tables, and cards.
Usage advices
- Place borderless notifications near their related items.
- Highlight bar could be removed.
- Keep the message under two lines.
- Do not cover other content with inline notifications.
- The notification width varies based on the context and page layout.
- Be descriptive and give users clear next steps.
Accessibility considerations
Care should be taken to ensure that notifications are consistent with the overall accessibility of the view.
For example:
- Notifications should be reachable and operable by the tab order of the view, allowing users with motion difficulties to interact with or dismiss the notification
- Care should be taken when using auto-dismiss time-based notifications, for example some users may take longer to read and may miss the notification.
- Only use time-based auto-dismiss notifications for non-critical, information only alerts
- Motion should be kept to a minimum to keep the view accessible for all users
- Keep the copy simple, in line with our style guide and use the active voice where possible over the passive voice
Reference
Cross-product analysis: N/A
Competitor analysis: Carbon