Gutenberg: 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