Notifications

Uses

• Inform: to alert users about new content, important updates, or system changes.
• Guide: to direct users toward specific actions, such as completing a profile, making a purchase, or exploring a new feature.
• Engage: to re-engage users and encourage ongoing interaction with the product.
• Provide Feedback: to confirm user actions or inform them of a system’s current status.

Best practices

• Be relevant and valuable: only send notifications that genuinely help users accomplish a goal or provide useful information.
• Personalize messages: Tailor notifications to individual users and their specific needs to significantly increase engagement.
• Keep it concise: Write short, clear, and easy-to-read messages, avoiding jargon and technical terms.
• Use clear calls to action: When appropriate, include clear, actionable buttons that tell users exactly what to do next.
• Be timely: Consider the user’s context and trigger notifications at the most relevant moment.
• Delay for new users: On mobile, wait a bit before sending notifications to users of freshly downloaded apps to avoid alienating them.
• Consider high-attention needs: Use sound and haptic feedback for crucial, high-attention notifications, but reserve these for true emergencies.
• Don’t overuse: Avoid sending excessive notifications, which can lead to annoyance and users ignoring all messages.
• Offer control: Give users the ability to customize notification settings, allowing them to opt out or set preferences for frequency.
• Provide a list: Instead of showing all notifications at once, consider putting them in a list that users can access on their own.
• Ensure easy dismissal: Notifications should be easily dismissible when they are no longer needed.
• Maintain consistency: Use consistent branding, icons, and color schemes for your notifications.
• Ensure accessibility: Use proper contrast and font sizes to make sure notifications are legible for all users.
• Use appropriate visuals: Employ contrasting colors and clear, simple designs that fit with your overall brand and don’t clutter the interface.
• Use multi-channel approaches: Coordinate different types of notifications, such as in-app messages and push notifications, so they don’t become redundant.
• Implement grouping: Bundle related notifications together to keep the user’s Notification Center tidy.
• Use sound and haptics for high-attention notifications: Consider incorporating these feedback mechanisms for critical alerts on mobile devices.

Types of notifications

Notifications vary by type and attention required, including in-app alerts, pop-ups, banners, toasts, and modals for active user feedback, and external notifications like push notifications, emails, and SMS for updates when the user isn’t actively engaged with the app. Other forms include badges, which indicate new items on app icons, and status indicators for system feedback.

Notifications by attention level

Notifications can be categorised by the amount of attention a user needs to provide:

• High attention:
  • Alerts/errors/exceptions: messages that require immediate user action or response to an anomaly in the system.
  • Confirmations: potentially destructive actions that require a user’s confirmation to proceed.
• Medium attention:
  • Warnings: notifications that provide information but don’t require immediate user action.
  • Acknowledgements: feedback on a user’s action, such as a confirmation that a file was sent.
  • Success messages: notifications that inform the user of a successful operation.
• Low Attention:
  • Informational/passive notifications: messages that provide information without requiring any immediate user action.
  • Badges: small dots or numbers on app icons or dashboards indicating new content or updates.
  • Status indicators: visual cues that provide system feedback.

Notifications by visual presentation and interaction method

• In-app notifications: appear while the user is actively using the application.
• Toasts: small, temporary messages that fade in and out to confirm an action (e.g., “Message sent”).
• Snackbars: similar to toasts but often include an action, like “Undo”.
• Modals/dialog boxes: pop-ups that require user interaction to close and are used for critical information or confirmations.
• Banners: temporary messages that appear on the screen and then disappear, often for low-priority information.
• Announcement bars: persistent messages at the top of a screen to provide ongoing updates or information.
• External notifications: delivered through channels outside the application.
• Push notifications: alerts that appear on a user’s device even when the app isn’t open, often for time-sensitive updates.
• Email notifications: traditional messages sent to a user’s inbox.
• SMS notifications: text messages sent to a user’s phone.

Accessibility notes

• Use aria-live=”polite” for announcements.
• Don’t rely on color alone to indicate type.
• Provide a close or dismiss function, and make it availble from the keyboard