Notification [draft for new Vanilla site]

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