Skip to content

Notifications UX

Mockups

Goals

  • Consider the best schema to use for grouping
  • Grouping of posts within time period
  • Notifications to open in modals

Actions for Web

  • Introduce a counter on top of the bell to indicate the total number of unseen notifications. Using a colour such as red/orange will portray a greater sense of urgency over the existing blue colour.
  • Visually emphasize unseen notifications over seen notifications.
  • Where possible, notifications should be grouped.
  • Rather than displaying 10 individual notifications where users up-vote a post, these could be combined into a single notification. E.g. michaelfbradley and 10 others up-voted “Vlog 26th July”
  • Only if events occur within close proximity to each other should they be grouped.
  • Introduce ‘time ago’ values for notifications. In the context of notifications, a time ago value will be more relevant to a user. Peter upvoted ‘Some Post’ - a few minutes ago Peter upvoted ‘Some Post’ - July 19, 2019, 10:23:12am
  • Consider capping the total number of notifications displayed within the dropdown
  • A ‘See More Notifications’ action could bring the user to a dedicated notifications page, with filtering options.
  • In order to simplify the notifications, and make each notification more actionable, we would suggest showing all types of notifications in a single screen, without the option to filter.
  • Should a user need to filter notifications, they could do so via a dedicated notifications screen.

Wireframes

Actions for Mobile

  • We would advise introducing a more urgent colour, perhaps a red/orange to indicate unseen alerts. Perhaps including an alert count would further add a sense of urgency.
  • It may not be necessary to allow for the further filtering of notification in mobile. This was suggested for Web, but could be added bloat for mobile. The Continuous scrolling of notification on touch devices could be a suitable alternative.
Edited by Bill Ottman