G2 Notifications

[pablohoneyhoney]

Evolving snackbars and notices to be more native to G2 language and adaptable to different cases and positions, based on relevancy and type of message.

Relevant to

https://github.com/WordPress/gutenberg/blob/master/packages/components/src/snackbar/README.md#design-guidelines

https://github.com/WordPress/gutenberg/blob/master/packages/notices/README.md

[chrisvanpatten]

The left padding seems slightly too much (I would expect the text to be equidistant to all corners?) but I like the look of this in general :)

[pablohoneyhoney]

Worth exploring! Just wanted to provide a flexible system to be tested further in context.

[karmatosed]

First, very pleased to see notifications getting iterated. I would love to see whatever patterns emerge spread beyond the editor.

In looking at this I feel the darker messages do stand out more, however, when combined with potentially a darker toolbar it's more overwhelming. I. don't want to drive this, but could exploring a light grey lift the white? I feel it otherwise is a level beneath the block toolbar, which feels the wrong hierarchy.

[richtabor]

This is awesome! We chatted about this in today's design meeting, though I'll write out notes here:

1. Let's explore moving the notifications to the top
2. Instead of stacking them in a column, we could try an iOS style approach, where multiple notifications are grouped/layered and when you click on the top one, the others are pulled out of the group.
3. The current pre-G2 style could be fine (shadow and all).

[folletto]

Let's explore moving the notifications to the top

YESSSSSSSS! 🥰

[richtabor]

What if we did something like this?

[ZebulanStanphill]

From an accessibility perspective, what's the best place to put the notifications?

[richtabor]

From an accessibility perspective, what's the best place to put the notifications?

At the top right is closest to the update button, and also makes it a consistent location for when the patterns sidebar is open and a pattern is inserted.

[enriquesanchez]

From an accessibility perspective, what's the best place to put the notifications?

I'd say top-center, since it's in the general field of view. Also, the wider notification should be easier for most folks to notice and interact with.

Definitively worth reading The problem with snackbars and toast messages by Adam Silver:

Notifications are meant to give users confidence about an action they perform so that they can proceed with confidence.

But, snackbars take control away from the user and can cause stress— turning the interface into a race against time.

If the user is working on something that requires close-to-constant feedback—like working on a Google doc—then add a persistent status area to the UI that users can check at a glance.

In most other cases just show the message front and center, without it automatically disappearing so users can see it and act on their own terms.

I'm not sure a 'status area' is the right solution for us, but we already have a mini-tiny-kind-of version of a status area in the 'Save draft' button, where the button's label changes every X minutes as the document gets auto-saved, then it goes back to being a button:

I wonder if this is something that can be evolved or explored a bit more, even if only to confidently discard the idea and move on:

[folletto]

I'd say top-center, since it's in the general field of view. Also, the wider notification should be easier for most folks to notice and interact with.

Yes, I agree. The focus of the person is likely on the content, or in case of publishing, in the sidebar. So top-center or top-right is ideal.

I wonder if this is something that can be evolved or explored a bit more, even if only to confidently discard the idea and move on:

Note that the "Top Toolbar" mode takes over all that space to move the block toolbar up there, and it's a very important option to have a more de-cluttered UI. So we should keep that top toolbar as empty as possible.

[enriquesanchez]

Ah, that is a great point. I had totally forgotten about the top toolbar, thank you @folletto

[paaljoachim]

It would be nice with a kind of status update on this issue.

It seems that currently we have the notification show up in the bottom left. It would be nice to move this up in the top right of the Gutenberg layout area. Giving it a lot more visibility. Thoughts and ideas on how to proceed?

Btw Having it in the top bar. Even though the top toolbar might be on a line below. We would likely have the post/page title in the top bar.

[pablohoneyhoney]

It might be better to just stick with top floating centered to gain relevancy without disrupting the rest of the interface. Something along the lines of what was shown above (outdated details).

[paaljoachim]

I will go ahead and remove the "Needs Design Feedback" label and add inn the "Needs Dev" label.

[mikestottuk]

👋 hopping on here too, as this has been bothering me for a while now - mainly having to move from top right focus, to bottom left for a notification which I then have to click in time before it goes away.

I agree the top floating centre is a good place for the notifications. When I hit publish (or update) the main thing I want to do is see how it looks on the front end.

So even just having a permanent "View" which opens in a new tab (vs the multiple clicks to see in a new tab if going the preview route) would work for me personally.

Toasts would be useful for other notifications like "another user is editing part of this post" or you've hit update and there's something wrong with your content (a little bit how gmail sometimes tells me I've used the word "attached" but forgot to attach anything).

[jasmussen]

This is one of those issues that if addressed well could really elevate the entire interface. Even just as an improvement to the snackbar interface and positioning.

What makes me the most excited is the refresh this can give to notices, what we have at the moment could use a bit of love:

The notice is also used in other contexts, such as for contrast checking, where it exists in a resting state. That can make the prominence a bit difficult to balance:

In any case, I would love to pair on the implementation with any developer available. Let me know!

[jordesign]

Just checking in on this - @jasmussen does the new Snackbar method mean this is no longer relevant? Or it still is due to the other contexts mentioned in the comment above?

[jasmussen]

I believe that @richtabor has evolved the visual language of snackbars a little bit, it's definitely closer now. That said, we still have big yellow notices which are poor in their visuals, and need updating to the suggested style.