Different states for notification, associated with home page icon

[helmutdegen]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

Suggestion / feature request

Hello, In a project, we have a dashboard that can display different notification types: alarms (red), warnings (yellow), and information (blue). To look at notification details, or to do something else in the application, the user can navigate away from the dashboard. In order to keep or make the user aware of a reported notification, we want to display visual clues for received or existing notifications close to the home page icon.

Today, there is only a notification circle / ellipse that a number in the fixed, non-changeable color interactive/primary.

Definitions

• We have multiple notification types that have an order of urgency. Example: alarm (1st urgency), warning (2n urgency), information (3rd urgency)
• We have (user) unacknowledged notifications and user acknowledged notifications.
• We have notification colors and notification icons.

Layout

• To inform the user about a newly received or existing notification, and their urgency, we need different visual clues that represent the notification type / urgency. In our case, we use the color red ("alarm") for alarms, yellow ("warning"), and blue ("information") for information.
• To support visually impaired users, a second encoding method is necessary. We suggest using a notification type specific icon that the user can modify.
• There is a number that represents the sum of all unacknowledged notifications.

Behavior

• If multiple notification types are reported, the color and icon of the highest, not acknowledged notification type should be displayed. Example: If at least one alarm is reported and not acknowledged, an alarm notification should be displayed. If there is not unacknowledged alarm and at least one unacknowledged warning, a warning notification should be displayed. If there is no unacknowledged alarm and no unacknowledged warning, and at least one information notification, a information icon should be displayed.
• The user should be able to click on the notification icon. The user is then taken to a page / screen / view that is defined by the UX designer.

[silviowolf]

Hi @helmutdegen, we have discussed this internally and agreed to add this into our backlog. We only disagree with the click feature. As the notification element is designed to cover as less as possible of the parent element, it does not have the required minimum size to be safely clickable. And due to its overlaying nature it does not have a safe space to be separated from the clickable parent element. Therefore, misclicks would be very likely.

Agreed enhancements are:

• Notification can be colored with the common colors (primary, alarm, critical, warning, success, info, neutral)
• Notification can additionally show an icon to meet WCAG SC 1.4.1 (colorblindness)