Design for on-hub notifications in the admin bar

[hedgefield]

Continuing this on from #1, this is the place to discuss and iterate on the design of the notifications in the admin bar.

Below are the first few iterations already done. I will link to their original comments to preserve the context of the original posters:

• Original designs by @hedgefield from 2018
• Fresh new 2020 design by @folletto and @ibdz
• Iteration by @jasmussen
• Iteration by @hedgefield

I believe the first response was that the designs so far present the functional requirements of notifications as well as this specific UI usecase (a menu in the admin bar to view them) quite well already, but more feedback on that is always welcome, as well as nitty-gritty design detail discussion 🙂

[folletto]

Reposting this visual summary here for quick reference:

[folletto]

Ok, I tried to blend together @jasmussen and @hedgefield's proposals.

Notes:

1. I kept Joen's bell as it seems a more standard approach
2. Preserved Tim's icon structure and approach
3. I tried to keep some consistency with Gutenberg's style as suggested
4. I opted for white because it seems the most readable option
5. I tried to go for reduction and simplification, removing titles seems for example to bring more clarity and more clear messages, and moving the time below provides more evidence for the important part: the message.
6. I also opted for the "full height" approach (covering the admin bar) because it allows for more flexibility as well as creating a full height area of the screen that's more focused.
7. Colors / Text is using the native WP Admin styling, nothing new has been introduced
8. Accessibility wise, contrast is checked, and the semantic order has been borrowed from Tim's work as I think it's particularly effective: one accessing this panel will read "2 unread notifications", then gets the ability to clear all, and then can tab through the list. Not show here some kind of "Load X more" action at the end of the list in order to make the "Configure notification settings" accessible.

Please also note that the on-page equivalent will have to be reviewed too to be more aligned with the design choices made here.

[folletto]

For reference, here are the various configurations for the on-hub notifications:

This made me wonder if we need a title at all here. However: it might be necessary for the on-page notifications, so I'll keep this question pending until we've explored these a bit better. → as expected the on-page notifications need it, see #26.

[jasmussen]

Solid work, folks 💕

[raaaahman]

Nice variants.

Although I thought that the logo (WordPress watermark here) is the image. Having one more image really cramps the space for the text in my opinion.

[folletto]

Yes, that's true — it's still up to the plugin author there, so I'd expect they'd balance out the need for an image with the text showing.

I reached this approach trying to balance out the on-page ones in #26. That said, we could definitely decide that on-hub and on-page will require very different images to work. That might be an ok choice.

[raaaahman]

Maybe we could try something like:

• If notification has image, and image is from WordPress media Library, show the thumbnail image (or add a setting for even smaller images) left
• If notification has an image that exists in the plugin's file, show the image as is, left
• If notification hasn't any image, show sender's logo left

"Left" here refers what I see on the variants mock-up.

[folletto]

Yeah, ok! Message received: explore in i5 how it would work without a "right" image. ;)

[folletto]

Here's a concept exploration, "Bubble", I based on i4. I'm very aware it's not within the design guidelines of WordPress so it's not meant to land, but I still find valuable in throwing out ideas in case will then generate more ideas and out-of-the-box thinking (also note the white-on-coral-blue is not accessible).

The behaviour would be similar as the slide-in from the right that happens for iPad multitasking.

[folletto]

Here's the tweaked i5 from the feedback above, not much style difference (just a tweak in the shadow for the scroll) but different handling of the image to align better with the on-page variant:

Check the mirror on-page design i5 on #26 (comment).

[hedgefield]

Really good stuff, looks clean and I think ready for first implementation. Having the plugin icon as fallback for an optional image specified but showing them in the same location feels like a smart choice too. Cool!

[EdithAllison]

This appears superseded by the new design approach tracked in #357, suggesting to close. @Sephsekla