Notifications are surfaced to the user attention through the notification badges. From the feedback we got, the recent separation of notification badges in alerts and notifications seems to work well in communicating the difference in urgency each kind of notification has for the users.
Nevertheless, there are some aspects that can be improved:
- **Space efficiency.** Surfacing both badges requires to take more room from an already crowded personal bar. While taking some extra space was unavoidable when providing two entry points instead of just one, the use of space can be optimised in some situations. For example, when there are no unread notifications we are still showing an icon and a "0" counter just to keep an entry point for the user to check read messages.
- **Accessibility.** The inactive state for the badges (when there are no unread messages) uses a grey which is to light for the white text to be readable on top of it according to the basic accessibility considerations. In order to fix this, increasing the contrast may not be the best option since the badge can become too prominent for an "inactive" state (calling the user attention as if there were new notifications when there are not). More details in T98526.
**Proposed solution**
In recent research sessions with users, a different approach was included as part of the tests (T114086). The new approach was designed to be more efficient with space (there are no counters when all notifications are read), and it makes it easy to comply with the accessibility guidelines without generating confusion between active and inactive states.
The basic approach is to use persistent icons with smaller badges for the counters (but counters will be only shown when there are unread messages). Different colors and levels of grey will be used to communicate the different states as shown below:
{F2736875}
* When there are unread notifications, icons and badges are prominent: icons are dark grey, and badges use color (red or blue depending on the urgency of notification types).
{F2736877}
* After opening the panels, alerts are read automatically (icon becomes grey and there is no counter of unread items). The messages icon remains dark but the badge is lighter in contrast (but still compliant with accessibility guidelines).
{F2736879}
* Finally, hen all notifications are read, only light icons are shown in order to avoid demanding too much user attention but still providing an entry point to check the different kinds of notifications.
**Further considerations**
The model worked well when used as entry point for accessing the notification panel without a single issue. A [[ http://pauginer.github.io/prototypes/notifications/notification-panel/index.html | simplified prototype ]] was used (only showing one badge), in order to check whether the metaphor worked. The testing of the badges was not the main goal of those testing sessions, but accessing the panel was done repeatedly.
Another initial concern, was about readability. Using smaller badges limits the room for the counter text. As shown [[ http://pauginer.github.io/prototypes/notifications/notification-panel/index.html | in this prototype ]], we were able to use a 13px font size which is even bigger than the regular font size used in the personal toolbar (12px). Users were able to quickly identify how many unread notifications there were.