Improving the notification badges in admin menu

[hedgefield]

During the WCEU contributor day we received the request from the A11y team to look at the notification badges in the admin menu. Their red color and lack of context was seen as something that could be improved.

So together with Jayman Pandya, Rich Copping, Jasper Cheyney and Vasilis Baimas we looked at different ways to improve this. We first explored ways to add more context with text or expandable rollovers or tooltips, but agreed that this was not good. So we focused on improving the styling itself.

I've attached the design explorations we did below. By moving the badge onto the icon, adding a border and optionally omitting the number (this should be tested), we felt like this would be a nice improvement for the visually impaired, as well as a more calming design layout.

Adrian Roselli took a look and agreed that this would be a good improvement, with his preference also going to design 3 and 4 (with 1 being the current situation).

We will try to make a PR for this if this sounds like a good idea to you all too. Putting the badge on the icon is also a nice step towards the pattern of the notification center proposal: #43484

[hedgefield]

notification badges a11y design exploration

[karmatosed]

This is really interesting to see. Which one was considered more accessible? My instinct says 4 as that doesn't have the visual complexity of the color. That said, as a result it could appear a color close to the shaded icon if color reading issues were present. What happens in that case? Maybe something to show in mock-ups?

[hedgefield]

You mean the white badge? Yes we did like that one for being high-contrast in and of itself, and looking at this lineup it's definitely the one that pops the most, while still being subtle. There were some concerns that it would be missed since it's so close to the near-white color of the menu items. What do you think, something to test?

So I'd like to test the white one, and the two to the left of that, the red with the white border. Adrian Roselli found those two to be the most accessible. They still have the red "attention!" color, the contrast between text and color, color and border, and border and background is all WCAG compliant, and they stays close to the existing pattern.

Having the badge on the icon also creates balance vertically, since all the badges will be directly below each other then, instead of being at the mercy of however long the text of the menu item is when they are behind.

I'll make full mockups for those three, and I can do a user test here with everyone in the office.

[Clorith]

I've got some considerations that need to be made as well for this (especially if going the route of overlapping the icon)

What happens when there's more than a single digit, does it obscure more of the icon, or will it start covering text instead?

Icons can be anything, plugins and themes can use images etc, and I know that premium products often use colored icons to "stand out", which does not follow the normal admin UI scheme, how will such scenarios be covered where it may end up being a clash of colours that actually negatively impact things? (not a problem if using the high contrast option with the white circle at the end though)

[vbaimas]

In addition to our initial placement, I believe that the notification badges in the top bar menu should have the same design pattern, with the notification badges in the admin menu. I think that this content should me clear without the user confusing.

I feel that it would be better to see these cases both.

[hedgefield]

@Clorith I think extra digits on the icon can work, but it's a good point that it could get messy when the icons are colored or very different from the WP ones.

I mocked the most viable options up in Sketch proper, this time also with a 3-digit number (do we support higher than 999? If so, damn, we should cap it there though).

​https://sketch.cloud/s/ek9La

My top 3 would be:

• default placement with the high contrast white
• default red with added border
• the one on the icon without a number

[felipeloureirosantos]

I believe that the white version is the best option. Besides that, I believe that we could put as +99 in case it is higher than 99. In this way, we wouldn't have problems related to big numbers. What's about it?

[JoshuaWold]

hedgefield: I mocked the most viable options up in Sketch proper, this time also with a 3-digit number (do we support higher than 999? If so, damn, we should cap it there though).

^{@hedgefield I like the approach Slack takes, which is 9+ on the icon notification bar. In this case could we get away with 99+ ? In my experience comments has really been the only one where this becomes an issue where having 3 digits could be helpful.}

[karmatosed]

This came up as part of design triage this week. Would be great to see how we can move forward with this @hedgefield and @JoshuaWold - what do you think?

[hedgefield]

@karmatosed Would this be a good candidate for the Design Experiments plugin? We can test it in a bunch of different configurations that I cannot foresee up front. I feel like the white badge behind the label is the favorite? It's that I don't know how to write the code to make this happen myself, if anyone could I'd be grateful.

[karmatosed]

I can see that working @hedgefield, seems sensible to me. How about you start the ball rolling with an issue there? My only wonder is if we can do in the experiments plugin alone but that's worth exploring.

[hedgefield]

Done did, we'll see what comes of it. ​https://github.com/WordPress/design-experiments/issues/19

[mdwolinski]

This issue was brought up in Design triage, and I posed the question if it should be integrated into the Notification System feature development currently being lead by Jon Bossenger.

[chaion07]

Hi @hedgefield! Thank you for reporting this. The design team recently discussed this ticket during a bug-scrub session for 5.9 and based on the feedback we don't think this needs further discussion. A few references were mentioned such as @keoshi's ​post on icons. Additionally we can discuss this during a design team meeting upon checking that there is still issues. Cheers!