WordPress.org

Make WordPress Core

Opened 11 months ago

Last modified 3 days 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 11 months ago.
navigation.gif (2.3 MB) - added by jameskoster 3 weeks ago.
navigation.2.gif (3.5 MB) - added by jameskoster 3 weeks ago.
jjj-on-2021-05-12-at-16-19-30@2x.png (772.6 KB) - added by johnjamesjacoby 3 days ago.
GitLab Menu, with icons, 220px wide, collapsible
jjj-on-2021-05-12-at-16-45-02.gif (5.9 MB) - added by johnjamesjacoby 3 days ago.
Collapsed without icons (with some of my own custom admin styling worth ignoring)

Change History (22)

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


11 months ago

  • Keywords has-patch added

#3 @youknowriad
11 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
11 months ago

Related: #47012

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

#5 @SergeyBiryukov
11 months ago

  • Component changed from General to Administration

#6 @chrisvanpatten
10 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 weeks ago

#8 @hedgefield
3 weeks 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
3 weeks 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.


3 weeks 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
3 weeks 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
3 weeks 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
2 weeks 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
2 weeks 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 not be a panacea.

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

Last edited 2 weeks ago by jameskoster (previous) (diff)

#15 @johnjamesjacoby
3 days ago

What happens when you collapse the menu without icons?

#16 @johnjamesjacoby
3 days 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 3 days ago by johnjamesjacoby (previous) (diff)

@johnjamesjacoby
3 days ago

GitLab Menu, with icons, 220px wide, collapsible

@johnjamesjacoby
3 days ago

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

#17 @DrewAPicture
3 days 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.

Note: See TracTickets for help on using tickets.