Make WordPress Core

Opened 4 years ago

Last modified 4 years ago

#50423 new defect (bug)

The expand icon at the bottom of the collapsed admin menu is not easily discoverable.

Reported by: dmatamales's profile dmatamales Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots
Focuses: ui, administration Cc:

Description

I had a long-standing client who has been using WordPress for years recently complain to me that the admin menu was collapsed on one of their sites. They told me that they would like it to be expanded like it is on their other site.

They seemed to think that it was something that I would need to change as a developer or in some advanced setting somewhere. When I went to tell them how to do it, I realized that the process is less than ideal for these reasons:

  1. The expand icon is hidden at the bottom of the menu, so it is really hard/unlikely to discover, especially if you've accidentally collapsed the menu and then scrolled or navigated away.
  2. The expand icon is literally a play button. It's a right pointing triangle inside a circle. I might expect this icon to manage a video or audio plugin given the context.
  3. The expand icon blends in with all of the icons representing menu items. It looks like just another menu item. It is the exact same size and color. There is not even a separator between the expand icon and the last item's icon, so the icon is lumped in with whichever menu item's icon is last (see attached screenshot).

The expand icon does not look like a control for the menu, it looks like another icon in the menu. And due to its appearance and location, it is not easily discoverable, especially for someone who may have accidentally collapsed the menu months ago during their first tutorial using WordPress.

Attachments (4)

expand-button-in-collapsed-admin-menu.png (18.1 KB) - added by dmatamales 4 years ago.
A screenshot of the expand button in the collapsed admin menu.
50423 customizer.png (137.0 KB) - added by afercia 4 years ago.
50423-mockup-expanded.png (140.7 KB) - added by thimalw 4 years ago.
Design suggestion - expanded
50423-mockup-collapsed.png (126.8 KB) - added by thimalw 4 years ago.
Design suggestion - collapsed

Download all attachments as: .zip

Change History (9)

@dmatamales
4 years ago

A screenshot of the expand button in the collapsed admin menu.

#1 @SergeyBiryukov
4 years ago

  • Keywords needs-design added

#2 @afercia
4 years ago

  • Keywords has-screenshots added

Worth noting any change to this icon should be applied to the very similar icon used in the customizer, for consistency. See screenshot below.

@thimalw
4 years ago

Design suggestion - expanded

@thimalw
4 years ago

Design suggestion - collapsed

#3 @thimalw
4 years ago

  • Keywords needs-design-feedback added

Above screenshots are what I came up with for the design.

I don't think we need a redesigned icon here. The problem seems to be that the button blends in with the other items on the admin menu and changing the icon itself won't do much to distinguish it from the other items.

The expand/collapse button on the customize page is fixed to the bottom of the menu with a higher z-index than the other items. We could do the same thing here and have it as kind of a "footer" area on the admin menu.

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


4 years ago

#5 @kristengunther
4 years ago

  • Keywords needs-design needs-design-feedback removed

The design team discussed this ticket during weekly design triage and agree that the approach @thimalw shared solves the problem. The margin makes the icon more visible from the other items in the dashboard sidebar.

We noted that this icon also exists in the Customizer and we think it makes sense to keep the icons consistent. In the Customizer, the icon has an additional hover effect of a ring around the icon. We thought adding this additional hover effect to the dashboard Collapse/Open icon would draw a connection for viewers, as well as help this option stand out further.

Note: See TracTickets for help on using tickets.