Notifications are organised in two big categories: alerts and messages. According to @DannyH and @Quiddity, these groups represent different priorities. While alerts represent actions very directly connected with the user (e.g., the user being mentioned or thanked) while messages can represent new activity of interest for the user (e.g., someone replied to a conversation you are following).
Active editors may benefit from being able to identify the kind of new notifications they receive before opening the notification panel. In that way, they can react immediately to alerts while not getting distracted by new messages they can reply to later.
It is worth considering that we don't want to add additional complexity for those users who are getting a low volume of notifications (and may be able to react to them as they come).
Although this may result in a small change, since it is an always visible element users make repeated use of it for their daily work, I would strongly recommend testing the idea well before it is delivered to our users.
We expect the change to result in a reduction of the ignored alerts. Thus, it would be great to measure changes in that regard (T108208).
Separate counters with different prominence
- Distinguish the counters for alerts and messages. We can surface the number of unread notifications of each kind. The categories can be represented by icons: a bell for alerts (consistent with mobile web notification icon) and a chat bubble for messages (consistent with all the conversation-related icons). Both items will be present even if there are no unread notifications to provide a persistent entry point for them (except for users who never got a message notification before).
- "Use separate notification badges." By presenting separate entry points for each kind of notification users have a persistent place to find the kind of content the are interested in. That allows to communicate urgency in a way that is better aligned with the priority of each kind of notification. Alerts can be presented in red since it represents a quick to consume high priority info, while messages can be highlighted in blue to avoid adding too much pressure for communications to be dealt with (it is also aligned with the use of blue for progressive actions since messages are expected to have a follow-up action: open them to continue the conversation). (Color probably needs to be adjusted for Modern and CologneBlue)
Mockups:
When there are no unread notifications, both badges are visible but with low prominence:
When there are new alerts, they are highlighted in red. The alert badge will become grey once the notification panel is open.:
When there are new messages, they are highlighted in blue. While still noticeable, a user getting notifications frequent may feel less pressured to respond to them immediately while still aware of the new activity.
When there are both new alerts and messages, alerts are highlighted in red and messages in blue. The response time for opening alerts is expected to be lower for users, so it makes sense to present them more prominently:
We need to adjust the notification panels. Instead of having the choice between alerts and messages we are presenting just one kind of information. We may need to make it clear what the panel is about to avid confusion (e.g., by adding the icon and presenting the text as a title for the panel):
