WordPress.org

Make WordPress Core

Opened 15 months ago

Last modified 2 weeks ago

#37417 new enhancement

Customize Nav Menus: more visible way to navigate the preview to a menu item object

Reported by: celloexpressions Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords: ui-feedback ux-feedback needs-patch
Focuses: ui Cc:

Description

Nav menus in the customizer have the benefit of live preview. One of the more hidden aspects of this experience is the ability to view a menu item's object in the preview with the "original" link in the menu item options. Unfortunately, being hidden in the item properties dropdown, this feature is little-known.

Can we add a link for this to the menu item handle somehow? I've create a preliminary (fully-functional) patch for this, and while I like the UX I think the UI could use work (feels cluttered). This helps to reinforce the connection between menus and content, as well as making it easier to see what an item is linking to when the current menu isn't shown in the preview. It also helps users that may not know that you can navigate links within the preview.

Attachments (3)

37417.9.diff (2.5 KB) - added by celloexpressions 15 months ago.
37417.13.gif (2.6 MB) - added by celloexpressions 15 months ago.
view-page.jpg (45.4 KB) - added by melchoyce 15 months ago.

Change History (12)

#1 @westonruter
15 months ago

  • Keywords ui-feedback ux-feedback added

#2 @karmatosed
15 months ago

I would -1 the implementation done with the eye icon being the point of clicking. It is assuming a lot of meaning that icon just may not have in this case. I know this may not be suitable, but why can't we have it just work on click? Yes it's less obviously discoverable, but I'm not sure and eye icon is as discoverable as may be assumed.

To that point, it does feel really cluttered and I am concerned about other languages to English in longer strings.

#3 @melchoyce
15 months ago

I'd also -1 an eye icon — we've already used it to mean visibility in the admin. To me, showing an eye here means "this item is visible in this menu." Clicking it would signal to me "hide this item from the menu." Introducing a secondary meaning (preview) is counter-intuitive. I'd only use the eye to maintain the visible/invisible or show/hide meaning.

#4 @celloexpressions
15 months ago

Yeah, the eye is not a great solution. I'm concerned that navigating on click could cause issues because clicking on the header currently expands the menu item options, and you also need to click to then drag and reorder items, so inadvertent clicking could become an issue. Any other ideas?

#5 @melchoyce
15 months ago

Maybe adding "View" or "View Page" to the open menu item? (Attaching an image to show what I mean).

Otherwise, I'm not sure this even needs a UI. If it's in your menu, you can click the menu item itself to view the page. This feature doesn't seem super necessary.

@melchoyce
15 months ago

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


3 weeks ago

#7 @celloexpressions
3 weeks ago

Note that the "original" link ("home" in the above screenshot) is where the view behavior currently lives. Maybe we should consider moving that to align opposite the remove button and say "View [post type label]" instead? I don't think the "original" link functionality is used (or noticed) frequently; that change could be a better balance between functionality and clutter.

#8 @melchoyce
3 weeks ago

I honestly had no idea that's what that link did. It would be worth being more explicit here, since I don't think that link is entirely clear.

#9 @celloexpressions
2 weeks ago

  • Keywords needs-patch added

The other purpose of that existing link is to note what the original title of the menu item object is. Since that's also likely unclear and not particularly necessary, I'd support removing the "original link" functionality in favor of a visible "view {post type/taxonomy label}" link.

Note: See TracTickets for help on using tickets.