[UX] Review color patterns for admin bar menu links

[jenlampton]

In the admin bar, it appears as though menu links that have children get both a visual indicator arrow, as well as a different color background. This background color change can be confusing, and can interfere with usability when navigating to very deep places, or when menu items overlap.

I would like to recommend that we revisit this color change for items with children, and instead adopt a more standard color-change pattern such as:

I would like the hover color for the menu item to match the color of the sub-menu it opens, indicating that the two are related, and demonstrating the contrast between it and all of it's neighbors.

Level 1: -- special case

• Background: Black-gray
• Hover background: medium gray
• Active trail: light gray
• no expanded trail

Level 2: -- same for all following even levels

• Background: Black-gray
• Hover background: medium gray
• Expanded trail: same as hover, medium gray
• no active trail

Level 3: -- same for all following odd levels

• Background: Medium gray
• Bckground hover, black-gray
• Expanded trail: same as hover, black-gray
• no active trail

Proposed change

5 levels deep:

Image styles:

Current examples from the Configuration menu

5 levels deep:

Image styles:

[jenlampton]

I've created a PR so people can see how it feels, but the CSS in there probably needs a cleanup before this is ready to commit.

[olafgrabienski]

Reviewing the color of admin bar menu items is probably a good idea. I guess it's also a lot of work, as a nested menu has so many aspects (changing states, menu trail visibility, ...). I've only had a quick look at the PR so far. At first sight, it works okay within the single menu levels, but in my opinion it makes the whole menu trail less clear.

[izmeez]

I like the proposed changes in the PR. It is much simpler to follow visually with multi-nested menus, especially when they fold back on each other, e.g. Configuration > Content authoring > Text editors and formats. I'm in favor of the proposed change.

[izmeez]

I'm going to add pr - works for me but leave needs testing and needs more feedback for others to chime in.

[avpaderno]

I resized the browser to make the first sub-menu drawn on the right and its sub-menus on the left.

I think that, in this screenshot, it is still clear that the Overview sub-menu is Structure > File types > Audio > Manage displays > Overview.

To compare, when sub-menus are all drawn on the right, this is how they appear.

[izmeez]

@avpaderno Do you think the second image, all displays to the right, is a problem? Remember the user is not looking at a static image.

[avpaderno]

Do you think the second image, all displays to the right, is a problem?

No, I do not.

I just meant that the first screenshot (the worst case) is as clear as the second screenshot (the easier case).