WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 9 months 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 2 years ago.
37417.13.gif (2.6 MB) - added by celloexpressions 2 years ago.
view-page.jpg (45.4 KB) - added by melchoyce 2 years ago.

Change History (12)

#1 @westonruter
2 years ago

  • Keywords ui-feedback ux-feedback added

#2 @karmatosed
2 years 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
2 years 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
2 years 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
2 years 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
2 years ago

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


10 months ago

#7 @celloexpressions
10 months 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
10 months 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
9 months 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.