Notification tray

The notification tray pattern combines badge and link components with text and icons to provide a focused, consistent place for users to access messages within an app or system.

Also known as: Notification center, system notifications, notification bar, system messages.

Anatomy

A. Notification icon (required): Icon that opens and closes the tray and shows the number of unread notifications.
B. Section label (optional): Header text summarizing the content within the tray or section.
C. Title (optional): Brief text summarizing the purpose and severity of the notification.
D. Message (required): Descriptive text providing important contextual information.
E. Link (optional): Call to action that provides the user with a direct pathway, used in action-based notifications.
F. Active tab visual indicator (required): Border indicating the current view.
G. Timestamp (optional): Text indicating either relative or absolute time, based on the type of notification.
H: View all link (optional): Link allowing users to view all notifications.
I. Mark as read button (optional): Button that marks all notifications as read.
J. Icon (required for error and warning notifications): Visual indicator communicating the urgency of the notification.
K: Settings icon (optional): Icon allowing users to manage the frequency of non-critical notifications to reduce disruption.

Usage

Best practices

• Enable users to dismiss or mark notifications as read.
• Enable users to customize their notification preferences.
• Include timestamps on each notification to give context on their relevance.
• Ensure the tray is easily accessible from any part of the application.
• Keep notifications in the tray until the user views or takes action on them.
• Follow all guidance found in Badge and Link when implementing those items within a notification tray.

Action-based notification tray

Action-based trays generally present a list of tasks in the format of a to-do list. They are typically system-generated tasks that require action from the user.

• Always include a call to action, either in the form of a link or make the entire notification selectable to open the pathway.

Activity-based notification tray

Activity-based trays are generally presented in the format of a news feed or activity log. They are typically user-generated notifications that communicate edits, changes, or comments to other users.

• Order notifications by time, with the newest at the top.
• Use more friendly, less formal formats for timestamps such as “1 minute ago,” “2 hours ago,” or “3 days ago.”
• Include the exact date and time if necessary.
• Reference Grammar and punctuation to learn more about formatting date and time.

Combination notification tray

Combination trays use patterns from both action-based and activity-based notification trays. They can include system-generated tasks or user-generated notifications that communicate activity from other users in the product or system.

• Place the most urgent or highest priority action-based messages first to ensure the most critical tasks are completed first.
• Always include call to actions within the section including action-based messages.
• Use section titles in addition to icons and color to help users scan the notifications.
• Include time stamps, either exact times or less formal options when relevant to your context.

Behaviors

Notifications can be either passive or active depending on the importance of the message and whether action is needed. The persistence of the notification depends on the urgency of the action required. System-generated errors or actions that require users to act on them before continuing with their workflow are the most critical.

Read vs. unread messages

Effectively distinguishing between read and unread messages is crucial for user experience. There are several methods to mark messages as read and manage unread notifications. Consider the following:

• Implement a “Mark all as read” or “Dismiss all” option for dismissing notifications.
• Action-based notifications may be marked as read after the call to action is selected or when the task has been completed.
• Activity-feed notifications may be marked as read after panel is opened, or disappear completely when “Mark as read” or “Dismiss all” is selected. Ensure this is a low effort for users and don’t require them to select each message to dismiss.

Empty state

When there are no notifications, the tray will display an empty state message.

Platform considerations

Notification trays can be accessed multiple ways in mobile. This includes the hamburger menu, top nav trailing icons, or the bottom tab bar. In mobile, notifications are viewed as a full page versus a drawer.

Content

• Follow best practices outlined in Messaging when writing content for individual notifications within the tray.
• Use sentence case for all content except for section labels, proper nouns, or acronyms.
• Avoid abbreviations, acronyms, or jargon unless they’re commonly understood or necessary.

Section label

• Don’t include punctuation.
• Use all caps with no punctuation following the overline typography pattern.
• Indicate the purpose of the notification with clear text like “To do” or “News feed”.
• Limit section labels to a few brief words.

Calls to action

• Follow Link and Button guidelines for help crafting content for calls to action and buttons.
• Limit link labels and buttons to a few briefs words such as “Mark as read,” “Dismiss all,” or “View all.”
• Use clear language to indicate the purpose of the link or button such as “Update now.”

Related guidelines