UX feedback -- Notification Drawer


Comments welcome and encouraged.

UX evaluated the notification drawer demonstrated at: https://bluejeans.com/s/mvaJS and created a set of feedback, organized into the following categories:

  • Design solution included
  • Usability issues identified
  • Patternfly issues identified

Our feedback includes comments on:

  • The notification drawer interactions
  • Toast notifications and interactions
  • Content types that belong in the notification drawer and toasts

The demo included some explanation on the following topics, which we’ll evaluate when the components/areas become part of the meeting agenda:

  • Audit log/event log with CLI access
  • Specific examples of notification content and the actions users can take


Design Solution Included

Issue 1: CloudForms uses the old notification icon and badge visual (shown below).

32 PM

Suggestion: Always use the newer notification badge visual (shown below: fa-bell). When there are issues in the notification drawer, show fa-bell with a solid blue badge (no dot in the center), as PatternFly suggests.



Issue 2: When there are no notifications, the bell icon appears with a white outline (not solid).

Suggestion: When there are no notifications, the bell icon should appear as solid white (fa-bell), as PatternFly suggests.


Issue 3: There’s no scrollbar on the notification drawer, so you can’t see 94 new events unless you mark them Read one at a time.

Suggestion: Add a vertical scrollbar inside the accordion content, above the Clear all button region (see image below – note that the button image is incorrect here).



Issue 4: Items in the notification drawer don’t display their severity or action to take.

Suggestion: Show severity icon and action to take for each issue in the notification drawer, as show in the notification section at:

Issue 5: Sample notification toasts messages shown do not contain actions link or kebab menu.

Suggestion: Show action link and/or kebab menu for multiple actions where appropriate.


Issue 6: Items that are actually Tasks are shown in the Events category.

Suggestion: Put items that are tasks (provisioning and its status, e.g.) in the task category, showing progress bars. Follow the guidance in the image below (design concept for CloudForms) for displaying:

  • Task status severity
  • Progress bar
  • Kebab for appropriate actions

05 PM


Issue 7: Events is the first accordion in the demo content.

Suggestion: Tasks should appear first, followed by Events.

50 PM


Issue 8: A horizontal scrollbar appears on the notification drawer in the demo.

Suggestion: Disable horizontal scrollbars in the notification drawer.



Usability issues identified

Issue 9: There’s no UI location for seeing historical and audit events.
Note: Per Development, there is a jobs page, but they believe it’s broken (from the upper right menu, go to Infrastructure provider > tasks.)

Suggestion: UX should work with Development to discuss where in the UI tasks and events are accessible to users and how users should interact with those pages.

Issue 10: What is the state of the bell icon if there are no unread items in the drawer?

Suggestion: UX should work with Development to ensure that the bell icon appears as solid white if there are no unread items in the notification drawer.

PatternFly issues identified

Issue 11: not clear (to me) re the events in notification drawer:

  • PatternFly should document that having an X on a row clears an entry from the drawer.
  • If there’s a kebab (multiple actions menu), the clear X should be an entry in the kebab menu. (if a row supports multiple actions and includes clear, clear should in the menu as “clear.”)
  • Change “New” to “Unread” in the accordion title.

Suggestion: UX will publish in PatternFly, using examples to illustrate each point.

Issue 12: What types of events and tasks could appear in the notification drawer and what do associated actions look like?

Suggestion: UX to investigate:

  1. What content types go into what categories?
  • Jobs/tasks
  • Events: system initiated occurrences, user initiated?
  • Other?
  1. What actions can I user typically take for these content types?

  2. Can we generalize pattern/design solutions for answers to the questions above? If yes, UX will present suggestions and publish in PatternFly as appropriate.


My personal opinion is that actions that relate to the current page you are working on (e.g. Something that would communicate using a toast notification) should not auto update to be in the drawer as well, imho everything in the drawer should be actionable, or in other words both give me information i was not aware before and that can help me to go to where i need to go in order to “resolve” the notification.


Just a note…

manageiq is using a forked version of the PF notification code with few new pf fixes backported.

Once a usable PF version is available, we’ll need to merge these - which means getting most of https://github.com/ManageIQ/manageiq-ui-classic/pull/611 into patternfly - big performance hits with thousands of notifications using the vanilla component.

(The changes are mostly in the first 3 or the last 4 commits:


(We do have a few later pf bugfixes backported in some form or other:



Issue 4 was a bug and it has been already fixed.


Issues 1-3 are addressed here: https://github.com/ManageIQ/manageiq-ui-classic/pull/3095