Improving the position of the GlobalNotice

[renintw]

The current location of the GlobalNotice doesn't seem quite ideal. Would it make sense to move it slightly? @WordPress/meta-design Does the team have any thoughts on this?

[StevenDufresne]

I think we need to identify when the global notice is displayed and what the UI is doing in those cases before design weighs in. For me, it's more than just changing the location. Thoughts?

[jasmussen]

Just to get the terms right to what I'm familiar with myself. From the screenshot, the blue version I would refer to as a "Notice", and the black one with an X button, I call "Snackbar". (I know, weird term, but )

I'm assuming the notice disappears when this is out of Beta? If not, then I'd move towards using the more wp.org standard notice design that the language bar uses, shown at the top of the entire section below the nav:

For the positioning of the snackbar, usually we put those in the bottom left corner of the screen, just like the block editor. I don't know that we need to do it differently here?

There's a larger meta-question of what the snackbar is to be employed or not, and that reallly is mainly a question of what it is meant to show:

• If it's light-weight and okay to miss, like "Saved successfully", we might not even need the X.
• If it's more important, we keep the X.
• If it's still more important, maybe we should be using an inline Notice, dismissible or not, like the "Unable to locate the recovery codes at this time".

So for me the main question is: when does it show and what does it show?

[iandunn]

I'm assuming the notice disappears when this is out of Beta?

I think it will, so this might not be an issue after that.

[renintw]

I think we need to identify when the global notice is displayed and what the UI is doing in those cases before design weighs in. For me, it's more than just changing the location. Thoughts?

👍 Agreed. Just like a few scenarios that @jasmussen mentioned, we need to reach a consensus on the usage of Notice and Snackbar (GlobalNotice). From my understanding of Snackbar, these two are the primary use cases where they might be needed:

• Operation confirmation: The user has completed an operation, such as deleting emails or uploading files, and needs confirmation of successful operation.
• Minor errors: The user tries to perform an operation that cannot be completed, such as typing errors, etc.

Then, the display time of the Snackbar should not be too long to avoid annoying the user. However, the time should not be too short either, otherwise the user might not see the information.

And Notice, it usually refers to messages or alerts of higher importance, or we just don't want it to be closed actively by users or not even able to be closed. Could include major updates, important warnings, or changes in features that need user attention.

So IMO,

• if it's lightweight and okay to miss, like "Saved successfully", we probably could use Snackbar.
• If it's more important, and we don't want the information to disappear, we could use Notice then.

What do y'all think?

[renintw]

and the black one with an X button, I call "Snackbar". (I know, weird term, but )

The naming here is kind of not that precise, and it would likely be resolved via https://github.com/WordPress/wporg-two-factor/issues/208.

usually we put those in the bottom left corner of the screen, just like the block editor. I don't know that we need to do it differently here?

For the block editor, placing it at the bottom right seems reasonable. But it seems to me that this site may be more suitable to place it at the top right, like options c and d below.

a) b) c) d) e)

[jasmussen]

I actually meant the bottom left not bounded by the center column, but leveraging the available space.

But looking at these, my question comes back to: what problem are these notices trying to solve? For the moment I've only seen "This is notice" messages — what real messages will they show? There may be better patterns to leverage. For example in this flow, a snackbar is not needed, since all the confirmation info you need happens in the canvas:

Separately, if we do need a snackbar, can we just use the Gutenberg component?