Add a guideline for stacking alerts #25

Closed A783270 closed 2 years ago

In GitLab by @matejlatin on Apr 1, 2020, 17:19

What is the best way of showing multiple alerts on a page? Can we "stack" them? How would that look?

In GitLab by @matejlatin on Apr 1, 2020, 17:21

marked this issue as related to #499

In GitLab by @matejlatin on Apr 3, 2020, 15:40

From https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/499#note_316541466

Regarding the possibility of stacking alerts, I had this idea in another alerts discussion that is being superseded by this one:

If we do allow them to stack maybe we can add a page control + counter somewhere?

< 1 of 3 > | X

In GitLab by @jeldergl on Nov 9, 2020, 21:23

marked this issue as related to #757

In GitLab by @jeldergl on Jan 8, 2021, 03:51

Hi @matejlatin have you thought about this any further?

@tauriedavis could we prioritize this as part of the alert effort to come to a resolution?

In GitLab by @tauriedavis on Jan 8, 2021, 05:01

I think it would be great to get this wrapped up. Assigning to 13.10 tentatively. Im not sure what OKRs we will have next quarter so depending on that, we may be able to move to 13.9 but TBD.

In GitLab by @gitlab-bot on Jan 8, 2021, 06:58

Setting label(s) ~"devops::create" ~"group::ecosystem" ~"section::dev" based on ~"Category:FE/UX Foundations" ~"group::ecosystem".

In GitLab by @matejlatin on Jan 8, 2021, 14:11

@jeldergl no I haven't had a chance. I'm not sure about 13.9, 13.10 seems more doable.

In GitLab by @jeldergl on Jan 8, 2021, 20:45

Awesome, it sounds like we might be able to look into around the same time too. Until then there’s a placeholder on the Alert component page for it. https://design.gitlab.com/components/alert#multiple-alerts

In GitLab by @matejlatin on Apr 12, 2021, 16:17

@jeldergl @tauriedavis I'm finally looking into this. I started with some research to see if other design teams have solved the issue of how to show multiple alerts/banners. I checked 12 design systems and most don't even mention the possibility of showing multiple alerts and how that should be handled (a few of them didn't even have a comparable component).

The closest that I found is the following:

Shopify suggest that multiple errors should be merged into one

This works for form validation but not really for what we intended here.

Google doesn't allow multiple alerts/banners in Material:

Interestingly, I wrote the following in the original issue for adding alert guidelines:

What I'm thinking now: perhaps we should limit to 1 alert in sections where alerts can appear. That would mean that only one alert can be shown on the page level, only one on top of a modal, only one global error etc.

I started discussing this topic with a couple of designers that I work closely with and we started going down the rabbit holes like: what happens when we're showing 3 alerts, two of them are warnings and one is danger? Should danger be on top in any case? What if we stack them? Should danger be on top?

If we limit the number of alerts to one, we'd only show the one that is preventing the user from completing the task. If there are more, the user would get to them step-by-step. This sounds a bit laborious, but I think that cases where 2 warnings and a danger alert preventing a user to complete a task are an edge case. I'm afraid we might be overthinking this one... I'd really like to hear your thoughts on this. WDYT?

In GitLab by @tauriedavis on Apr 13, 2021, 24:31

Is it possible to pull a few use cases where we currently have multiple alerts so we can see if they can be extrapolated into global guidelines?

In GitLab by @matejlatin on Apr 13, 2021, 11:41

@tauriedavis good thinking, I can't remember any such cases from the top of my head :thinking: Maybe if we ask around?

In GitLab by @jeldergl on Apr 13, 2021, 18:38

That’s a great suggestion @tauriedavis. I lean more towards clarifying in the docs that only one alert should appear at any time anywhere on the page, and then we see if there’s a better solve for instances with multiple alerts.

The reason I suggest only one alert anywhere, and not per section, is because of how I hope to have alerts working in the future with aria-live where multiple alerts present would be a real bugger for screen readers or managing focus.

In GitLab by @tauriedavis on Apr 14, 2021, 04:47

Maybe if we ask around?

Yeah, lets throw it in slack! I've seen multiple people comment asking about multiple alerts and how to handle them so I think other designers will be able to weigh in and share some use cases they've seen recently

In GitLab by @jackib on Apr 14, 2021, 19:11

@mnearents @esybrant FYI

In GitLab by @jackib on Apr 14, 2021, 19:17

Is there a way we could do a code search to quickly inventory all the alerts we have and when they show up?

In GitLab by @esybrant on Apr 21, 2021, 20:38

Is it possible to pull a few use cases where we currently have multiple alerts so we can see if they can be extrapolated into global guidelines?

@tauriedavis @jeldergl @matejlatin This typically happens when the alerts in question are global in nature (shown on many/all pages) and triggered by circumstances larger than the page itself. The circumstances that trigger global alerts often just happen to occur at the same time, or these circumstances just happen to occur at the same time as a page-level alert.

This all comes back to the problem that we don't have any notification center or system of notifying users in GitLab (other than to-dos, which is only certain types of notifications, narrowly defined). An issue we've run into in Fulfillment is we need a way to notify admins/group owners of global events happening to their instance/group. An example would be You have exceeded your subscription's seat count. or Your GitLab subscription will expire in 10 days..

These notifications are global and not tied to any one page, but they are important and in some cases critical, and we need an in-app way to notify users (we also notify via email). Since there's no notification center, the alert component, applied globally, is the next closest option.

However, as we've added a lot of these scenarios and alerts that are triggered based on them, we're seeing more and more stacking of alerts. For example, you might have an alert specific to one page (like a pipeline failure error alert) that stacks with a more global alert like one about your subscription expiring soon.

Here's the issue that I opened about this problem. @mnearents has been working on it and here's the Epic he's been working on with research consolidation and next steps.

Without an alternative way to notify users, I'm not sure this is solvable with PJs guidelines.

That said, I think I good next step might involve guidance/documentation specifically about page-level alerts like what you've proposed (only one page-level alert per page, if there are multiple then the one shown is the most severe one). I think the issue of multiple global alerts stacking or global alerts stacking with page-level alerts is one that can't be solved by PJs.

In GitLab by @jackib on Apr 21, 2021, 20:51

Can we use code search to identify global and page-level alerts?

In GitLab by @JohnMcGuire on Apr 22, 2021, 06:35

@jackib Possibly. Maybe this is just the need to look at a few code examples and see what is common among alert types then craft that into a search term.

In GitLab by @jeldergl on Apr 23, 2021, 19:53

I considered other experiences where multiple alerts can be present, and one that stood out to me was weather alerts. A few of my weather apps show multiple, while some show none at all 😳.

Based on what I saw, I took a moment to test out FigJam and put together a few quick sketches.

In GitLab by @matejlatin on Apr 29, 2021, 17:02

That said, I think I good next step might involve guidance/documentation specifically about page-level alerts like what you've proposed (only one page-level alert per page, if there are multiple then the one shown is the most severe one). I think the issue of multiple global alerts stacking or global alerts stacking with page-level alerts is one that can't be solved by PJs.

I agree @esybrant the issue is not so much about stacking alerts, it's more about not having a place for global notifications (like notification center) so we stick all such warnings to the global alerts and end up with multiple ones like in your example here.

I'll go ahead and draft a recommendation for a single global alert and I think that's the most we can do in PJ. At least for now, we can explore this further later. I like @jeldergl's sketches but to me it seems too much too soon. The main problem for me is that we shouldn't even have multiple alerts. Trying to find a good solution on how to stack them is a bandage solution to a more serious problem.

@jackib @esybrant do we know if there's any work on something like a notification centre being done, or at least considered?

In GitLab by @matejlatin on Apr 29, 2021, 17:12

Looking at the current alert guidelines, for example, these could all be messages in a "notification center" and a notification dot over a nav item alerting the user. These could also be email alerts to the owner of the group/project.

In GitLab by @matejlatin on Apr 29, 2021, 17:29

mentioned in merge request !2358

In GitLab by @matejlatin on Apr 29, 2021, 17:30

I started an MR based on this discussion: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/2358

In GitLab by @jeldergl on Apr 29, 2021, 21:01

The main problem for me is that we shouldn't even have multiple alerts. Trying to find a good solution on how to stack them is a bandage solution to a more serious problem.

@matejlatin Do you think this is possible in a dynamic setting like GitLab? We don't always have control on system hiccups or user actions that lead to alerts.

In GitLab by @jackib on Apr 29, 2021, 23:10

@mnearents is working on synthesis of To-Do and notification related research. This is a UX problem and points to a need to revamp all our notifications.

I see any improvement/guidance on stacking alerts to be a shorter term improvement.

Here's a UX Showcase he did recently - https://www.youtube.com/watch?v=CDCHAntkpww&list=PL05JrBw4t0Kq89nFXtkVviaIfYQPptwJz&index=9

In GitLab by @matejlatin on May 3, 2021, 17:20

Do you think this is possible in a dynamic setting like GitLab? We don't always have control on system hiccups or user actions that lead to alerts.

@jeldergl I don't think it's fully possible. But I also think it's somewhat of an edge case and we could reduce the number of such edge cases if we generally tried to reduce the usage of alerts. That's what I'm suggesting here for now... I don't think we'll ever be able to fully prevent multiple alerts showing up.

Thanks for sharing that @jackib it would be great to have such a notification center...

In GitLab by @jackib on May 4, 2021, 23:45

I'm going to make a suggestion to close this for now, in favor of a longer term solution for notifications. I have yet to see a really bad example of this happening. It's basically on MVC right now, it's ugly but does work. And I think our energy might be better used elsewhere.

What do others think?

In GitLab by @jeldergl on May 4, 2021, 23:47

I think that notifications and alerts are two separate things. Having a notification area wouldn't solve for contextual alerts like data not loading or the need to refresh.

In GitLab by @matejlatin on May 5, 2021, 11:42

@jackib I started a MR with a recommendation here gitlab-org/gitlab-services/design.gitlab.com!2358 but I agree that it doesn't seem to be a huge problem that we need to solve urgently. I'm happy to let someone else work on this or postpone it to a later time.

In GitLab by @jackib on May 5, 2021, 18:48

@matejlatin OK! I think that's fair. We can write a light MR with guidance and acknowledge that it isn't always possible, and then close this in favor of focusing on notifications. WDYT?

Jeremy makes a good point too, and we might want to include a note related to that in the MR.

In GitLab by @matejlatin on May 5, 2021, 19:34

@jackib sounds good. So based on Jeremy's comment we should make a recommendation for when to use alerts on page and global level? In that MR I mean...

In GitLab by @jackib on May 6, 2021, 01:49

@matejlatin I meant this part:

I think that notifications and alerts are two separate things. Having a notification area wouldn't solve for contextual alerts like data not loading or the need to refresh.

Alerts should be used for things like...

We could also discuss page vs. global level. I think it's pretty straightforward: consider the audience, job and urgency to select page or global, always preferring page level (or even section).

In GitLab by @matejlatin on Jun 3, 2021, 16:31

mentioned in merge request !2400

KI-SSC-TEST / design.gitlab

Add a guideline for stacking alerts #25