WordPress.org

Make WordPress Core

Opened 15 months ago

Last modified 8 weeks ago

#50539 accepted enhancement

Explore a larger icon less WP Admin menu

Reported by: youknowriad Owned by: youknowriad
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch
Focuses: ui Cc:

Description

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.

Attachments (5)

Capture d’écran 2020-07-02 à 8.11.41 PM.png (206.8 KB) - added by youknowriad 15 months ago.
navigation.gif (2.3 MB) - added by jameskoster 5 months ago.
navigation.2.gif (3.5 MB) - added by jameskoster 5 months ago.
jjj-on-2021-05-12-at-16-19-30@2x.png (772.6 KB) - added by johnjamesjacoby 4 months ago.
GitLab Menu, with icons, 220px wide, collapsible
jjj-on-2021-05-12-at-16-45-02.gif (5.9 MB) - added by johnjamesjacoby 4 months ago.
Collapsed without icons (with some of my own custom admin styling worth ignoring)

Change History (25)

This ticket was mentioned in PR #382 on WordPress/wordpress-develop by youknowriad.


15 months ago

  • Keywords has-patch added

#3 @youknowriad
15 months ago

  • Owner set to youknowriad
  • Status changed from assigned to accepted

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.

#4 @TimothyBlynJacobs
15 months ago

Related: #47012

Last edited 15 months ago by SergeyBiryukov (previous) (diff)

#5 @SergeyBiryukov
15 months ago

  • Component changed from General to Administration

#6 @chrisvanpatten
15 months ago

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!)

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


5 months ago

#8 @hedgefield
5 months ago

  • Keywords needs-design-feedback removed

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.

#9 @jameskoster
5 months ago

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

This ticket was mentioned in PR #1210 on WordPress/wordpress-develop by youknowriad.


5 months ago

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">

#11 @youknowriad
5 months ago

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.

#12 @jameskoster
5 months ago

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

#13 @youknowriad
5 months ago

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

#14 @jameskoster
5 months ago

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 that will not be a panacea.

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

Version 0, edited 5 months ago by jameskoster (next)

#15 @johnjamesjacoby
4 months ago

What happens when you collapse the menu without icons?

#16 @johnjamesjacoby
4 months ago

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.

Last edited 4 months ago by johnjamesjacoby (previous) (diff)

@johnjamesjacoby
4 months ago

GitLab Menu, with icons, 220px wide, collapsible

@johnjamesjacoby
4 months ago

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

#17 @DrewAPicture
4 months ago

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.

#18 @aaroncampbell
4 months ago

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?

#19 @dryanpress
8 weeks ago

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.
Last edited 8 weeks ago by dryanpress (previous) (diff)

#20 @paaljoachim
8 weeks ago

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

Note: See TracTickets for help on using tickets.