The current model to deal with notification read status is based on the use of background color to distinguish read and unread status and the X" icon to discard unread notifications to mark them as read.
We found some issues with this model:
- Not reinforcing the current status. We found some users that when exposed to a notification panel with all unread notifications, it is hard for them to tell whether the notifications are read or unread. The reason may be that there is no way to compare the background color of both kinds of notifications but also that the "X" is not helping enough the user to identify the status.
- The action may have unexpected side-effects. Users associate "X" with "discarding", which aligns well enough with "mark as read" for the action to be discovered but the misalignment in meanings can create some confusion. Some users got surprised that after clicking the "X" for a notification, it didn't disappeared completely from the panel. This seems more apparent when the model is applied to the Notification Page (where "discarded" notifications may not even change position).
- Hard to reverse. Once the user marks as read a notification, there is no visual clue to reverse the action.
- Not accessible to screenreader users
The purpose of this ticket is to explore better alternative models.
Design goals
The solutions we explore should meet the following:
- Make clear the current status. By looking a notification it should be clear if it is unread or not.
- Actionable but not distracting. Invite to change the status without distracting from the notification content.
- Allows to reverse the action from the same place. This will help to quickly switch between the two states.
- Keep the focus on the unread notifications Those are the items the user needs to process. visual clues on read items should not make them more prominent than the unread ones.
Proposed solution
After exploring several options (T136438) and observing user behaviour (T135564) we propose to highlight the status with a dot (try prototype). Since it seems a simplest solution that users were able to identify without issues during our research.
Design details
Shape
- The dot is a 10x10px circle.
- The dot should be placed in a larger active area to be clickable (e.g., 30x30px).
Status
- The fill color and border will change depending on the active/inactive and hover/normal status
- For hover status a tooltip will be shown with "Mark as unread" (when active) or "Mark as read" (when inactive).
- If the dots are defined with CSS, the shape properties such as border or fill color can be part of a CSS transition (0.25s long with ease in-out timing) to make the changes more fluent.
Notification item transition
On the Notification Panel, since notification items get rearranged, we want to adjust the transition for those too (this does not affect the items in the Notification page).
The transition from unread to read item will involve the following steps (probably keyframes of a CSS animation):
- Mark the notification as read. The notification becomes styled as read (grey background and grey dot, see section above) in the same place for a brief moment (0.1s with ease timing). This helps communicate the notification become marked as read.
- Fade out the notification. The notification becomes gradually transparent (0.1s with ease timing) to communicate it is removed from the current section.
- Rearrange unread notifications. Unread notifications fill the gap generated by the notification that disappeared. This starts as the previous step is half way and should last for 0.25s with ease timing.
- Fade in the notification in the read section. The notification (already moved to the right position in the read section) becomes gradually opaque (0.1s with ease timing). Rearranging the read notifications may be needed to make room for the new notification.
Marking as unread should result in the reverse notification. An example of the above steps is shown below:
