Component > Notification Centre

Usage

The Notification Centre is intended to be used in web applications where the user will see (and need to return to) many notifications over the course of their use.

Collapsed

Anatomy

notification center collapsed

States

  1. In products or services which support Notifications, a notification icon appears on the right-hand side of the upper navigation menu
  2. If unread items are in the Notification Centre, then a numeric indicator is shown of the number of unread items

Behaviours

The notification icon is present in all products which support it. If screen space is in issue, it could be hidden unless there are unread items, but it would be ideal to always allow users access to the Notification Centre by an ever-present control.

Open

Anatomy

States

  • Opened, the Notification Centre shows;

    1. A list of all notifications sorted by recency

    2. Stacked notifications of the same type - note: ‘Stacks’ are also subject to the same chronological sorting as individual items, sorted by the most recent item in the ‘stack’.

    3. Snoozed notifications

    4. A select menu to filter the contents of the Notification Centre

    5. A ‘mark all as read’ control to mark all items visible as read

    6. A close icon to hide the Notification Centre

Behaviours

The Notification Centre is a scrollable side-panel which takes over a portion of the viewport to the right-hand side - or the whole viewport on mobile responsive viewports. The list is pinned but scrollable, the controls allow filtering or ‘mark as read’ of the whole list.

Clicking an Action link on an item marks it as read, clicking its dismiss (close) icon removes it from the Notification Centre.

There’s an opportunity to include mico-animations to add some character here and also give the user a definitive feeling of accomplishment as they tick off actions.