Explore a larger icon less WP Admin menu

[youknowriad]

The menu items in WP-Admin feels too narrow compared to the standards of 2020.
The icons also make it feel too distracting and the icons doesn't add much value when the label is visible.
This ticket explores A larger (just a bit) icon less WP Admin menu.

https://core.trac.wordpress.org/ticket/50539

<img width="837" alt="Capture d’écran 2020-07-02 à 8 11 30 PM" src="​https://user-images.githubusercontent.com/272444/86400407-7b70ca00-bca0-11ea-9f6e-dfb9c6c8e037.png">

https://core.trac.wordpress.org/ticket/50539

<img width="837" alt="Capture d’écran 2020-07-02 à 8 11 30 PM" src="​https://user-images.githubusercontent.com/272444/86400407-7b70ca00-bca0-11ea-9f6e-dfb9c6c8e037.png">

[youknowriad]

We can do a lot more but if this is a direction we'd like to explore, I felt it's better to start with small iterations.

[TimothyBlynJacobs]

Related: #47012

[chrisvanpatten]

I miss the icons a bit, but wonder if perhaps a change to the new @wordpress/icons set might help bring in some lightness without totally ditching them, as the new icons are more open and airy?

Love the extra padding though (and I'm itching to get those higher luminance colors!)

[hedgefield]

Nice! I kinda miss the flavor of the icons too but I'm not sure if that's because they were always there. I'd say more breathing room is more important than the icons, though maybe we can make the sidebar a little wider too? The FSE sidebar is a bit wider and I quite like that. That could give just enough space to experiment with some lighter icons, as @chrisvanpatten suggested. But if only this change shipped it'd be pretty nice already.

One thing I would do either way is lower the 'collapse' option a bit more and make the icon just the triangle, without the circle. Because it's the only icon left the eye is drawn to it more now.

[jameskoster]

Could this be an opportunity to utilise the visual design of the navigation components in the Site Editor, and create some alignment between wp-admin and Gutenberg? (See rough concept above).

Figma prototype: ​https://www.figma.com/proto/7jWcW1Ofv6dQLsGPEkQoii/Navigation-alignment?page-id=0%3A1&node-id=1%3A213&viewport=727%2C443%2C0.17424878478050232&scaling=scale-down

Trac ticket: https://core.trac.wordpress.org/ticket/50539

<img width="994" alt="Capture d’écran 2021-04-27 à 11 01 40 AM" src="​https://user-images.githubusercontent.com/272444/116223995-04815200-a748-11eb-8614-5d3eede5b701.png">

<img width="1043" alt="Capture d’écran 2021-04-27 à 11 01 58 AM" src="​https://user-images.githubusercontent.com/272444/116224039-12cf6e00-a748-11eb-9595-2af0e57c1796.png">

[youknowriad]

It has been some time since I didn't iterate on this ticket, I think it's probably time to try to figure out what the next iteration could be and aligning with the upcoming site editor sounds like a great way to think about this.

In ​https://github.com/WordPress/wordpress-develop/pull/1210 I explored aligning the current sidebar with the proposed design above by @jameskoster, it's not there yet. The biggest missing piece is the width of the sidebar which is important but I didn't want to touch it yet because it would conflict with some Gutenberg styles causing overflow, so I kept the narrow one for now. I'm missing the chevron icons as well.

I just wanted to share early to gather some feedback.

[jameskoster]

Nice!

I think the width will be important, but if we can't touch that for now, then getting all the other spacing aligned will help soften the transition between wp-admin & site editor. Just a couple of small suggestions in that regard:

1. If we remove the padding on #adminmenu .wp-submenu the text lines up nicely on the Y axis.
2. Adding some top/bottom padding to #adminmenu li.wp-has-current-submenu will help clarify where the submenu starts and ends. The CSS I used to achieve that is below, in case it is useful.

#adminmenu li.wp-has-current-submenu {
	padding: 8px 0 24px;
}

/* Shrink the separator when it follows an open submenu */
#adminmenu li.wp-has-current-submenu + li.wp-menu-separator {
	height: 0;
}

/* If a separator precedes the current submenu, reduce the padding so that an 8px gap exists between separator and menu item */
#adminmenu li.wp-menu-separator + li.wp-has-current-submenu {
	padding-top: 0px;
	margin-top: -12px; /* 8px = 20 (separator height) - 12 */
}

/* Don't apply top padding to first menu item */
#adminmenu li.wp-has-current-submenu:first-of-type {
	padding: 0 0 24px;
}

I added a gif demonstrating how things look with these changes.

One other note: The active style for menu items without submenus (see Comments) looks a bit funny. We can probably use the active style from the submenus there (blue background).

[youknowriad]

@jameskoster I injected your suggestions and applied the regular active link style to the "comments" one (top level without children).

The number of edge cases in this menu is insane though, we need to test it well :)

[jameskoster]

Yes I already noticed some issues with plugins. And with large submenus, the spacing is not always an effective indicator of where they begin / end. Increasing the width will help, but not be a panacea.

This one still needs some time in the oven for sure.

[johnjamesjacoby]

What happens when you collapse the menu without icons?

[johnjamesjacoby]

The menu items in WP-Admin feels too narrow compared to the standards of 2020.

I agree that 160px seems narrow. GitLab uses 220px fwiw. (Will attach a screenshot for comparison after commenting.) The WordPress Customizer is 300px.

The icons also make it feel too distracting and the icons doesn't add much value when the label is visible.

I disagree that it is distracting. I also disagree that they do not add value. Take icons away from most of Gutenberg's UI and it becomes a dull and muted mess of words without boundaries or context.

They are quantitatively high-value to more people than they are low-value to.

This ticket explores A larger (just a bit) icon less WP Admin menu.

For the sake of transparency, Automattic-lead initiatives like FSE and WooCommerce are evident sources of inspiration and motivation for these concepts and their timing (and they are all under the same payroll).

Comments from @youknowriad ​here elude to the idea that these are not just concepts, but certainties that other initiatives should alter their courses for.

---

Injecting my feelings – removing these icons whitewashes WordPress Admin. It eliminates company logo-marks from highly visible UI. It nullifies hours spent creatively whittling away SVGs and icon-fonts to get them just-right. It's also boring, bland, lacking in personality, and makes it nearly unidentifiable as WordPress – it's just another rectangle now.

[johnjamesjacoby]

GitLab Menu, with icons, 220px wide, collapsible

[johnjamesjacoby]

Collapsed without icons (with some of my own custom admin styling worth ignoring)

[DrewAPicture]

This ticket and the solutions it proposes feels premature to me.

Such a change warrants a more clearly-defined problem backed by user testing data and design team consensus. Maybe there are external discussions about this issue I'm not aware of that could be linked and/or quoted here?

As @johnjamesjacoby has alluded, there are almost certainly wider implications for the WordPress extension community to be considered here and those voices seem to largely missing from the conversation.

Either way, I think I'd expect a change such as this to first be proposed on make/core, community feedback collected, the problem (if there is one) more clearly defined, and then solutions proposed.

[aaroncampbell]

Overall I agree that the admin menu could use some work and I love the idea of making the elements larger. I'm not sure I understand the removal of the icons and indentation (on submenu items in ​pull/1210) - both feel like steps backwards for me. Not exactly a large-scale user test, but I had my spouse, who is currently due for new glasses, test navigating through wp-admin with both menus and she had a significantly easier time with the smaller size, icons, and indentation than with the larger size. My guess is that it would be even easier with icons, indent, AND larger size but we didn't test that.

I'm still a little unsure what exactly we see as the problem we're trying to address. Is it that users are struggling to navigate the menu? Is it that it's harder on mobile, or maybe phones specifically? Is the problem that we don't like icons and want to remove them (or maybe the iconography is difficult to keep up)? Is it that the menu is too complex or crowded to navigate?

[dryanpress]

While I do think iconography in the admin should certainly be open to evolution (and unification with @wordpress/icons), losing the icons from the Admin Menu entirely feels like both radical departure and regression.

To add and reiterate some benefits of top-level menu items containing icons:

• Icons differentiate the WordPress experience from other UIs. The general WordPress brand is tightly coupled with Dashicons today. As the Admin dropped webfonts in favor of System Fonts and moves towards CSS Custom Properties and inevitable light/dark themes, icons will be one of the few branding opportunities that make all WordPress Admins feel similar.
• Icons provide a language-agnostic way to navigate -- users well-versed in WP-Admin iconography can roughly navigate the WordPress Admin today in any language, even if they don't know that language.
• Icon-driven navigation is central to the Block Editor's UI -- 82% of the items in the top toolbar's default state are icon-only with tooltips (9 of 11). Icons are also integral to presentation of @wordpress/plugins in the editor UI, it seems a logical extension and retention of status quo to have WordPress Plugins parallel this pattern. While the Site Editor's left sidebar currently lacks iconography, I'd love to see some there.
• Icons empower Plugins in the ecosystem to design features that extend Core's design language. If a Plugin modifies Posts or Users, by using the same icon it visually communicates to users the tool is acting on one of those Core objects. One risk of removing this prescribed visual language is Plugins all bringing their own variations, furthering the bespoke UI issues in the 3rd party ecosystem where every Plugin screen looks different.
• As a contextual and adaptive menu where order and availability of items varies between every WordPress site and even user roles on the same site, icons act as position-agnostic visual waymarkers. Whether Settings is listed as the 10th item or the 20th item, users don't need to count item position nor read every text label to locate the item. Icons expedite navigation and discovery.

[paaljoachim]

Because of the huge impact a redesign of the WordPress sidebar menu area has, I believe this idea should be made into a Feature plugin project. ​https://make.wordpress.org/core/handbook/about/release-cycle/features-as-plugins/

Associated:
https://core.trac.wordpress.org/ticket/47012

[Joen]

A few days ago I happened upon this ticket again, and got inspired to try an idea. A few versions ago, a new color scheme, "Modern", shipped with WordPress. As a spur of the moment thing, I tried adding to that scheme a small CSS only refresh that tweaked the width, some paddings and margins, and refreshed some of the icons. I was a bit surprised that it worked so well.

It’s not that much CSS, and it addresses concerns voiced on this ticket:

• it doesn’t change any markup that plugins might rely on
• it doesn’t remove or rename any menu items
• it doesn’t remove the icons, making it well with the collapsed sidebar

In fact as a non-default color scheme swapping back and forth proved an excellent way to take a first very careful step towards refreshing the admin sidebar. I even tried it with a slew of plugins to make sure things worked (Jetpack, Yoast, Akismet), and things worked well.

I brought it to the core design chat where it was agreed that since this is such a small change, it would be to try in 5.9. Though it was suggested that the extra styles should best happen as a separate checkbox on the color scheme page.

What do you think?

[Joen]

Color scheme CSS refresh.

[paaljoachim]

It is a very good idea! It looks really nice Joen! A very cool idea!
I am not sure if I got this correct. In regards to the design chat. There was a mention of adding a checkbox.

Brainstorming...
We could perhaps add a checkbox below the color selection in regards to changing the left WP sidebar. So the user can choose to only adjust the color (radio box) and if they also wanted to change the left sidebar having a checkbox to click to do so.

Closing this, probably not a route we'll be following.