The home screen displays an alert banner at the top. Alerts can: require an immediate action, remind about a task, or notify about something that happened while the user was away. Users can end up with multiple alerts. Tapping an alert deep-links to the screen to resolve it. Severities: danger, warning, info, success.
What’s a clear, accessible way to present multiple alerts without color noise or clutter?
I've referred to this article in my research for exploring some UI options for stacked banners while working on an app with notifications that included completion badges, reminders, errors etc.
https://www.toptal.com/designers/ux/notification-design
What we landed on ultimately was to make sure that when notifications stacked, it didn't take up too much real estate on the screen—so testing font-sizes, colours, ect., was part of the process, along with time on screen, and gestures to dismiss.
We also organized the notification banners in levels. Whatever was urgent, was shown on the screen, and in their user settings, their profile picture would have a little number to denote some additional notifications/alerts that weren't necessarily pressing to their experience.
Here's a visual of a secondary notification via the video platform Loom.
In many design systems, you have colours for banners/notifications. Commonly red for danger, yellow for warning. Do you have a design system in place? There are lots of UI examples with minimal design and subtle colour use. Here's an example of a design system with a notification drawer of components for inspiration.
https://www.patternfly.org/components/notification-drawer/design-guidelines/
If stacking and/or sorting notifications by priority is not an option, you can also explore drawers like the above, or a collapsable banner.
Ex: [ You have X notifications (➜) ] User taps ➜ to expand full list
There is a visually effective solution: placing the notifications in a top frame arranged in an auto vertical carousel, and an indicator with the total number of notifications (4 in the example below).
