Make WordPress Core

Opened 2 years ago

Last modified 9 months 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:
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 2 years ago.
notification badges a11y design exploration

Download all attachments as: .zip

Change History (18)

2 years ago

notification badges a11y design exploration

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

2 years ago

#2 @karmatosed
2 years 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
2 years 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.

Version 0, edited 2 years ago by hedgefield (next)

#4 @Clorith
2 years 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
2 years 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.

2 years ago

#7 @SergeyBiryukov
2 years ago

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

#8 @hedgefield
2 years 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.

2 years ago

#10 @felipeloureirosantos
2 years 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
2 years 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.

#12 @pento
19 months ago

  • Version trunk deleted

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

9 months ago

#14 @karmatosed
9 months ago

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?

#15 @hedgefield
9 months ago

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

#16 @karmatosed
9 months ago

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.

Note: See TracTickets for help on using tickets.