Appearance and behavior
Access point states
- 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
- 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
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
- 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
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
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.