For temporary alerts, replace static notification banners with toast notification

Description

The current static banner notifications are used in many different capacities. They are used to notify of important upgrades, tasks that need to be performed, and when an action is a success or a failure. These messages persist and are not dismissable, taking up valuable real estate.

Proposal

Replace user-action based notification banners (success, error, etc.) with toast notifications. Users will have the ability to dismiss the notification before it fades. This dismissal should persist in the database so it is never shown again.

Links / references

Documentation blurb

Overview

Toasts are an unobtrusive window element intended to display brief, auto-expiring bits of information to the user.

Use cases

Temporary notifications, user-action feedback.

Feature checklist

Make sure these are completed before closing the issue, with a link to the relevant commit.

• Feature assurance
• Documentation
• Added to features.yml

added UX in GitLab FOSS label

marked this issue as related to gitlab-foss#35649 (moved)

marked this issue as related to gitlab-foss#31890 (closed)

changed the description

marked this issue as related to gitlab-foss#31890 (closed)

In working on https://gitlab.com/gitlab-org/gitlab-ce/issues/31890, I realized that toast notifications would be the best way to notify users that they have committed their changes and have switched to the newly created branch. I also think this will help us to get rid of banners being used inappropriately as discussed in https://gitlab.com/gitlab-org/gitlab-ce/issues/35649.

cc/ @jschatz1 @timzallmann @victorwu @JobV

Agreed, much nicer @sarrahvesselov. Maybe they should be on the right, below the top navigation, as opposed the left? So it doesn't block the navigation ever.

@sarrahvesselov : I thought the banners discussed in gitlab-foss#35649 (moved) is referring to something like the marketing use cases:

Anyways, I like our current static user-action based banners because they often contain actionable links. Wouldn't the smallest iteration be to just a dismissible x in the banner?

The toasts look great. But we'd need them to persist on the screen if we provide call to action links right? And is it typical UX to provide links in toasts?

Agreed, much nicer @sarrahvesselov. Maybe they should be on the right, below the top navigation, as opposed the left? So it doesn't block the navigation ever.

This was just a quick POC
We should definitely standardize location in an unobtrusive location.

I thought the banners discussed in gitlab-foss#35649 (moved) is referring to something like the marketing use cases:

No, that issue is referring to all the different types of banners we currently use. Toast notifications should only be used for temporary alerts (not for the example you provided). We currently use permanent banners for temporary alerts, an annoying user experience IMO. Here is just one example:

Wouldn't the smallest iteration be to just a dismissible x in the banner?

Sure, it certainly would be. In the end, I believe users should not be forced to dismiss temporary alerts (file uploaded, commit successful, etc.). That is why I suggested the addition of a toast notification system.

mentioned in issue gitlab-foss#35649 (moved)

Thanks @sarrahvesselov for the clarification. I agree for any temporary alerts that have no further affordances, toasts would be a welcome change.

@ClemMakesApps @jschatz1 : Should we create separate issues for each alert?

changed title from Replace static notification banners with toast notification to For temporary alerts, replace static notification banners with toast notification

I think it's okay to have one issue for this. We would just want to make sure that issue references each place where we want to use toast versus our existing notification system

mentioned in issue gitlab-foss#35712 (moved)

changed milestone to %Next 2-3 months in gitlab-foss

@sarrahvesselov love it, nice one.

Wouldn't the smallest iteration be to just a dismissible x in the banner?

I have opened an issue about this a while ago: gitlab-foss#19160 (closed)

There was also some discussion about redesigning flash message a while ago here: gitlab-foss#19649 (closed)

@sarrahvesselov cool that you're talking this on. Regarding "Depending on the message being displayed, we can offer users the ability to dismiss the notification before it fades." I think we should always offer the option to dismiss it and we should persist the dismissal that in the database, not the cookie, so that it never shows again.

I think we should always offer the option to dismiss it and we should persist the dismissal that in the database, not the cookie, so that it never shows again.

I think you are right here @sytses. There is no reason not to allow a message to be dismissed. I will update the description.

changed the description

marked this issue as related to gitlab-foss#35649 (moved)

removed the relation with gitlab-foss#35649 (moved)

mentioned in issue gitlab-foss#35821 (moved)

marked this issue as related to gitlab-foss#35821 (moved)

mentioned in issue gitlab-foss#35581 (moved)

mentioned in issue gitlab-foss#36321

marked this issue as related to gitlab-foss#32858 (closed)

@sarrahvesselov @sytses exactly what i propose here: https://gitlab.com/gitlab-org/gitlab-ce/issues/32858

with inbox style toasts:

a simple codepen example (no sliding animation, which I think would be nice): https://codepen.io/tobiasdev/pen/GjorQJ?q=toast

https://dribbble.com/shots/2568870-Toast gives an example of an auto-receding banner.. which does kind of the same thing/is kind of similar (jus takes up the whole width.. which is perhaps not what is really needed

mentioned in issue gitlab-foss#32858 (closed)

gives an example of an auto-receding banner.. which does kind of the same thing/is kind of similar (jus takes up the whole width.. which is perhaps not what is really needed

This one is interesting, there may be an opportunity to improve the static banners with this. For a toast, I don't think full width is the way to go.

a simple codepen example (no sliding animation, which I think would be nice):

On this one, do you prefer no animation? It was hard to tell from your comment.

mentioned in issue gitlab-foss#37450 (closed)

marked this issue as related to gitlab-foss#37450 (closed)

Temp assigning to me, as I work out the paradigm for toasts.

assigned to @dimitrieh

marked this issue as related to gitlab-foss#38163

marked this issue as related to gitlab-design#49

moved from gitlab-foss#35741 (moved)