A notification gives people timely, high-value information they can understand at a glance and easily dismiss. Per Nielsen Norman Group, there are two types of notifications:
- Action-required notifications alert the user of an event that requires a user action. In this sense, they are similar to validation, but since they were not sparked by the user’s own action, they require a different design.
- Passive notifications, which are informational; they report a system occurrence that does not require any user action. Many notifications in mobile apps are passive: they usually announce an event of potential interest to the user.
When to use this component
- To announce an event that has some significance to the user.
- Use action-required notifications when an announcement is urgent and should be intrusive, such as a system downtime alert or when an immediate software update is required due to a security vulnerability.
- Use passive notifications for information that is not urgent and thus should be less intrusive. This might be a reminder to run a software update or of an upcoming deadline. Note that passive notifications are easily missed so using multiple ways to convey that content such as through a customer email are recommended.
When not to use this component
- They are not triggered by users’ immediate actions. Do not use for error messages. Use an alert component instead.
Accessibility and Usability
- Notifications should be inline. If you are exploring a pop-up feature, you would want to look at implementing a toast component.
- Provide a heading for the type of notification (e.g., Important Announcement, Upcoming Deadline, Software Update). This provides screen reader users with an easy way to find the notification.
- As a notification is inline and has a heading, it should not have an aria-live region.
- Provide an icon to inform users of the kind of notification at a glance (e.g., i for information, ! for an important announcement, etc.).
- Provide concise, informative notifications.