New Admin nav UI is hard to scan - usablity could be improved with simple css update

[waterjerome]

With the 3.2 update the primary (left) nav in the admin was updated with a smooth 3d shadow (right side bevel) effect. After this style change it is harder to visually scan for a desired nav menu item.

-

The issues:

1. nav group separators are are less distinguishable because the separator does not have enough contrast to its adjacent menu items. Suggestion - darken the bg color there.

2. Subnav items are not clearly differentiated from their parent because they share the same 3d visual effect which makes them appear to be on the same plane as their parent items. Suggestion - remove background shading on right side of subnav items.

-

This can be improved without changing the new theme/effect using a quick css change.

Jane, please take a look at the attached before and after .jpg and see if you agree with this recommendation.

Image showing new 3.2 admin nav UI with usablity problem (left) and suggested fixt (right)

The version field id used to track when a issue was reported / the earliest version which the issue affects.

Personally I liked the pre-3.2 amount of separation, and feel like the new version has a "river of nav" feeling to it. Without the white space, I don't know how useful that darker separation line is.... almost makes it feel even more cramped. Since I ceded to majority opinion on lead team with the 3.2 nav style, I'd like the other leads to weigh in.

Perhaps the only change could be no shadow on the separator? Not sure how that'd look, but worth the screenshot.

Admin menu was converted from dropdowns to flyouts in #18382.

The issues outlined in the description seem to be no longer relevant, since only one section can be opened at a time.