UX feedback -- Notification Drawer


#1

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

2017-11-22_10-58-06

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.

image

separator

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.

separator

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).

image

separator

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:
http://www.patternfly.org/pattern-library/communication/notification-drawer/#/design
separator

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.
http://www.patternfly.org/pattern-library/communication/toast-notifications

separator

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

separator

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

Suggestion: Tasks should appear first, followed by Events.

50 PM

separator

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

Suggestion: Disable horizontal scrollbars in the notification drawer.

separator

2017-11-22_10-58-06

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.

2017-11-22_10-58-06
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.


#2

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.


#3

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:

)


#4

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


#5

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