Make WordPress Core

Opened 5 weeks ago

Last modified 3 weeks ago

#44391 assigned enhancement

Improving the notification badges in admin menu

Reported by: hedgefield Owned by: hedgefield
Milestone: Awaiting Review Priority: normal
Severity: normal Version: trunk
Component: Administration Keywords: ui-feedback has-screenshots
Focuses: Cc:

Description (last modified by SergeyBiryukov)

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

Attachments (1)

notification badge wp admin.png (57.5 KB) - added by hedgefield 5 weeks ago.
notification badges a11y design exploration

Download all attachments as: .zip

Change History (12)

5 weeks ago

notification badges a11y design exploration

This ticket was mentioned in Slack in #design by hedgefield. View the logs.

5 weeks ago

#2 @karmatosed
5 weeks ago

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?

#3 @hedgefield
5 weeks ago

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.

Last edited 5 weeks ago by hedgefield (previous) (diff)

#4 @Clorith
5 weeks ago

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)

#5 @vbaimas
5 weeks ago

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.

This ticket was mentioned in Slack in #design by boemedia. View the logs.

5 weeks ago

#7 @SergeyBiryukov
5 weeks ago

  • Component changed from Menus to Administration
  • Description modified (diff)

#8 @hedgefield
4 weeks ago

@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).


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

This ticket was mentioned in Slack in #design by hedgefield. View the logs.

3 weeks ago

#10 @felipeloureirosantos
3 weeks ago

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?

#11 @JoshuaWold
3 weeks ago

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.

Note: See TracTickets for help on using tickets.