Usage

The notifications tray may contain only the Get work done content type, which can include messages across all levels of criticality. Messages generally solve for the following use cases:

  • Quick access to abandoned workflows
  • Critical business or system-related messages
  • Needs attention business or system-related messages
  • Neutral business, feature, or system related messages

Appearance and behavior

Notification access point

Access point states

  • Default
  • Hover
  • New / Default
  • New / hover
  • New / click

Notifications Tray

Tray Behavior

  • When the tray is open, it has a fixed height, so a maximum of five notifications are visible at one time. There is a scroll bar on the right side of the tray, and more notifications are visible when the user scrolls down.
  • There’s no limit on the total number of notifications that can appear in the tray, and the scroll is infinite.
  • The overlay to provides visual focus to the tray.
  • Sort order is determined by publish date first and criticality second 
  • Empty message
  • Error message

Individual notifications

  • Body: What happened, why it matters
    • Ideal length 75 characters; maximum length, 110 characters (preference is to keep a notification on 2 lines)
  • CTA: What to do next
    • Ideal length 20 characters; maximum length, 30 characters
  • Close icon: Dismisses notification

States

  • Unread
    • All text is bold and stays bold until the user interacts with the message (reads it, clicks on the CTA, or deletes the message by selecting the dismissal symbol in the right corner).

  • Read
    • When the user clicks the CTA, the notification changes its state to “read,” the text changes from bold to regular, and the CTA link changes from blue to purple. The user can click on a previously-visited CTA and it will still deep link him into the product or to an external page as before.
Accessibility pro tip

Read state: Once a link has been visited, it should be visibly clear (purple instead of blue) and the screenreader will indicate that it has been visited. See accessibility guidelines

See accessibility guidelines
  • Hover
    • When the user hovers over any notification, a background grey “patch” appears, providing visual feedback to strengthen the interaction.
    • When the user’s mouse hovers exactly on the CTA, the content gets an underline:
Accessibility pro tip

Hover state: For every “hover” action indicated here, it will be replaced by “keyboard focus.” Keyboard focuses will have an extra blue outline for tags (notifications) and a gray outline for buttons (dismiss icon).

See accessibility guidelines
  • Dismiss
    • When the user hovers on the [X] or close icon, the text turns slightly darker. At this point, the user can click the X and dismiss the notification
Accessibility pro tip

Dismiss state: The user can hit enter for buttons or use spacebar; for links, they can select control-option-space). The close icon also has the entire text of the notification body in its aria-label, so the user always knows which notification they’re about to dismiss.

See accessibility guidelines

Content

Here’s what makes an in-product notification a success:

  • It’s short and to the point. Sure, you have a 110-character limit, but ask yourself if you need to push it to that limit. Usually you don’t.
  • It has a clear action. The call to action should be enticing, clear, strong, and punchy—leading the user to a place where they can easily get something done, learn something beneficial, or fix something—in one click.
  • It’s used sparingly. Not everything is worth an announcement. If we overdo it, we’ll create a sense of both annoyance and distrust in our customers.
  • It helps users get work done. That’s why they’re in our product, after all.
  • It educates users about something new that will benefit them. Everyone wants to learn about something that will make their jobs easier or quicker.
  • It tells them when something’s been fixed. Let the user know we’re constantly working to improve their experience.
  • It gets out of their way. Notifications are only there to inform, to gently remind, or to give the user a starting point to get something fixed or done.

All our voice and tone principles apply to all the content we create, but three of them are especially aligned to crafting notifications:

  • Speak their language. When we talk with our customers, it’s a human-to-human conversation. We use everyday words and phrases to earn trust and build confidence.
  • Focus on the payoff. Any task is hard work when the goal isn’t clear. Explain why it matters, not just what needs to be done. A little perseverance up front lightens the load later on.
  • Keep it simple. Our customers are busy. We’re here to help, not get in their way. We understand their goals and give them just what they need to move forward.
Do
Use the notifications tray to surface system level “Needs attention” or “Critical” messages
Craft a notification to help the customer re-engage with an abandoned workflow.
Include a relevant call to action whenever possible. Deep-link the user into the product or to an external page.
Don’t
Notifications do not take the place of page level messages
Do not use the Notification tray for marketing promotions.
Do not surface third party offers in the Notifications tray
Do not surface first party offers in the Notifications tray

 

  • Was this Helpful?
  •