Notification - Continue exploring designs for multiple inline notifications and global banner notifications

[KennyAtHPE]

This is in "converging" mode.

Building off #2788 Working file

---

Problem statement

Currently, the design system offers designs and guidance only for singular inline notifications. There are currently multiple platforms with use cases that require more than one inline notification specifically at a page-level.

How might we display multiple inline notifications at a page-level so that users are able to quickly and confidently ascertain how many notifications there are, which ones require their attention the most, and if applicable, what is and how to solve the issue?

Out of scope

• How to show multiple notifications at a global and sectional level?
• How do notifications relate to a notification center?

Deliverables

• [ ] Continue exploration of designs and answers to lingering questions
• [ ] Choose 2-3 designs that fit the success criteria to move forward with
• [ ] Share out with team
• [ ] Create a follow-up ticket to work with devs to enhance the current or create a new Grommet component

---

Success criteria

Final design for multiple inline notifications should be:

• Discoverable + Visible
  • Users should be able to quickly tell how many notifications are present and what their severities are
  • Align hierarchically (placement + visually)
  • Prominent but should not replace the main content of the page
• Accessible
  • Must at least meet WCAG level “AA” requirements
  • Tested and approved by Bill
• Visually and systemically aligned with other notifications and established DS patterns

Areas to explore

The following questions should be explored and answered before design can be finalized:

• Using our navigation guidance, where should page-level notifications appear and what pages should the content refer too?
• Should the current guidance be updated to include messages that are longer than two lines?
  • How would this look? Accordion, expand/collapse, shown all at once, etc.
  • What’s the limit?
  • Should this only be reserved for page-level notifications?
• Should there be an optional datetime stamp?
• Should there be and if so what is the limit on how many inline notifications can be shown together at once?
• How should multiple inline notifications be prioritized? Severity, persistence, time, required action, etc.

[KennyAtHPE]

8/29 update:

Continuing to explore more options for styling and visuals that better align with the success criteria. Further accessibility considerations were also researched.

Pulling this back into the to-do column to be reprioritized since this was pulled in late last sprint.

[KennyAtHPE]

More explorations shared from Swati Desai in OH 8/8 OH discussion timestamp 3:50-14:00

[halocline]

More explorations shared from Swati Desai in OH 8/8

Reviewing these explorations, I am wondering how we might simplify more? It feels like we are trying to make the notification do too much work, communicate too much information, and are introducing complexity with a side drawer detail.

• How might we elegantly call attention to a user that there are multiple items deserving of their attention in a manner that is lightweight, leaves them feeling informed that items and their relative criticality exist, and provide an easy way to access the underlying detail should they choose to?
  • How might we leverage the "Notifications" page/hub to do the heavy lifting regarding the underlying detail?
  • How might we use the notification itself to serve the purpose of "calling attention" with high-level, summary information in a lightweight manner?

Consider:

• Using global notification as is, but creating rules around aggregating information and messaging (e.g. use the status color of the highest severity notification with messaging "There are 3 critical notifications and 17 others. View details." which then takes the user to a pre-filtered view of the Notifications page containing the related nofications which have been summarized.).

[KennyAtHPE]

Exploration file

Repurposed Swati and Harsha's initial 3 designs for multiple global banner notifications. Keep in mind that these are just quick explorations. Ultimately, the main goal of all these different designs are to:

• Notify users about critical or warning messages only
• Provide them with a quick summary of how many notifications there are
• Take the user away from the current screen into the notification center where they can view details more in depth

I edited the original 3 options to avoid:

• Having the option to review all notifications on the same page it appears
• Having a drop down list of the notifications since it could potential cover important content + actions
• Showing global banner notifications examples with unknown or good notifications