Posted by & filed under Communication, PatternFly Design.


The Notification Drawer is a content delivery system to expose time-based information such as events, tasks, and alerts. It is a self contained system that is viewable without having to navigate to another area of the application. Upon login it offers initial notifications for what has changed in the form of dismissible Toast Notifications and a permanent interactive icon in the header bar. It is hidden or revealed at the user’s request.


The goal of this design is to address the concerns related to notification drawer and how it should be collapsed in a responsive state for both the vertical and horizontal navigation.


Desktop State for the Notification Drawer

This is an existing design for how the notification drawer looks on desktop screens. More details can be found in PatternFly:

  1. Icon: Displays visual differentiator when new or unread notifications are present. Clicking on the icon will slide out a drawer and dismiss the toast notification. Clicking on the icon again will close the drawer.
  2. Drawer Title: Title of Drawer.
  3. Accordion: Only one notification tab may be opened at a given time -maximizing drawer space. Italicized text will indicate number of new events. Clicking on the title will expand accordion.
  4. Row: Example content shows relevant icon creating a visual differentiator between content severity or object type. New/unread notifications are shown in bold.
  5. Row Hover State: Example of hover state.
  6. Mark All Read: Clicking “Mark All Read” changes all visible unread rows (bold row type) to read (regular row type).
  7. Icon Empty: The empty state shows no new events.
  8. Row Actions: Clicking on the Kabob menu will reveal a drop down containing actions for that item.
  9. Infinite Scroll: Infinite scroll reduces need to identify time range on accordion tab. Allows for free-range historical search of notifications.


Design for Responsive State

The Notification Drawer can have two states: Without New Notifications and With New Notifications. The whole design can also be found in InVision:


Notification Drawer Without New Notifications

  1. The icon of Notification is exposed on the navigation bar (not in the navigation menu like before). Because we use full/empty state to show if there are new events, the icon should be visible at all times so the user will know if there’re new events at a glance. An empty icon is used to show the state of No New Notifications.
  2. When User clicking on the Notification Icon , the notification drawer will be open and the bell change to be full and blue (#0088ce).
  3. The notification drawer will take over the whole screen width. That is because the mobile screen is much smaller than the PC’s and there’re plenty of actions to make in this page.
  4. When there are no new notifications, all the labels are default to be collapsed.
  5. Only one Label may be opened at a time. The other two Labels will stuck in the top/bottom of the screen (if user open Label 2, Label 1 will stuck at the top and the Label 3 will stuck in the bottom)
  6. User can scroll up and down within a Label  to view more events. It will load 10 events at a time by default.
  7. When scrolling to the bottom of the list, user can pull up to load more events.


Notification Drawer With New Notifications

  1. When there are new notifications, the icon will change to be full.
  2. When User clicking on the Notification Icon, the bell change to be blue (#0088ce).
  3. The Mark All Read button will stuck in the bottom within the label.
  4. After clicking on Mark All Read, all the new/unread notifications within this label will change to be read and the Mark All Read button will be hidden. Also, the text under the Label name will show “0 New Events”.
  5. We used to have a unified expanded icon in the PC’s version. But it may be too complicated on mobile. So all the info will be shown and user don’t need to expand a event anymore.

Leave a Reply

(will not be published)