Customize Menus: UX Improvements

[melchoyce]

• Improve UX by initially focusing name field in New Menu section
• Improve UX by initially focusing or otherwise drawing attention to Add Items button after creating a menu

We could try using the animation currently used on the Publish button in the Customizer:

​https://gist.github.com/melchoyce/fc28e4b6c643e85331779bfce0b006d8

[afercia]

Not sure the initial keyboard focus should be set on the name field and then on the add items button. Initial focus in the Customizer is now consistent and always goes on the "Back" button. For consistency and accessibility I'd recommend to keep it as is.

I'd rather see the otherwise drawing attention part as an added value :) I understand the need to guide users in the menu creation flow. However, the UI is not designed as a multi-step wizard in the first place.
Seems to me in this flow there's a specific task to accomplish so I'd consider to make the "Next" and "Add Items" buttons look like primary buttons because they identify the primary action in this flow.

[melchoyce]

Replying to afercia:

I'd rather see the otherwise drawing attention part as an added value :)

Let's start with the delayed shaking animation, then. Maybe wait 2s, then shake once.

[bpayton]

@melchoyce how does this look to you?

[melchoyce]

@bpayton Can we use that same animation, but make it shake vertically instead of horizontally?

[bpayton]

@melchoyce Here's an update with a vertical animation. I reduced the shake slightly because it felt excessive relative to the height, but it might not be enough now. What do you think?

[melchoyce]

Looks good. Let's make sure that we update the Publish shake animation, in that case, so they both match. Actually, could they even share the same keyframes?

[bpayton]

Thanks for bringing that up. We have a button-see-me class that will work well.

[bpayton]

I created a PR for this here:
​https://github.com/xwp/wordpress-develop/pull/284

I added a reusable util function for pointing out a button after a delay if the user doesn't focus it first. I plan to use it to address #42211.

[bpayton]

I need to add test(s) for the reusable function but am interested in any feedback in the meantime.

[bpayton]

I'd added the function to api.utils but think doing so is a mistake. I don't want to create a new, public function but would like to share a utility function internally. @westonruter, where might be a good place for this?

[bpayton]

I made updates to better accommodate other scenarios where we shake UI to draw the user's attention (#42211). It would be good to confirm the general direction before writing tests for the reusable function.

Here's a PR where I'm managing the work. I've been working this way with Weston but am happy to provide a patch if another reviewer prefers.
​https://github.com/xwp/wordpress-develop/pull/284

A couple of concerns:

• Finding a good place to share an internal function across files without adding to the public namespace api.utils.
• Naming: I don't like the names I used but haven't thought of better (e.g., all names beginning with pointOut).

Thanks!

[westonruter]

@bpayton I can't think of a better place to add this function than wp.customize.utils, since you're using it across multiple files. If you want to keep it private, then I suggest prefixing with an underscore and marking @private. But, if I recall correctly, the Customizer on WordPress.com has some of the same kind of bouncing effects; so it seems to me that this kind of function should be available for use outside of core?

As for naming, you might want to consider “highlight” terminology. This is used in ​customize-widgets.js.

[bpayton]

Replying to westonruter:

[snip]
But, if I recall correctly, the Customizer on WordPress.com has some of the same kind of bouncing effects; so it seems to me that this kind of function should be available for use outside of core?

I agree this kind of function could be useful outside of core. The reason I wanted to define it as an internal function is that I'm not 100% sure this is the right signature and behavior for general use, and it's much easier to change an internal function after the fact. I'm not against making it available though.

As for naming, you might want to consider “highlight” terminology. This is used in ​customize-widgets.js.

I'd considered it and was initially uncomfortable because I imagined a function like highlightElement doing the highlighting with colors rather than animation, but I don't think it matters. Both are simply drawing the user's attention. I'll make the switch. Thanks!

[bpayton]

I uploaded a patch containing the main change. The change tests well for me in Chrome, Firefox, and IE11.

We need unit tests, and I'm working on them but am hitting odd qunit errors at the moment.

[westonruter]

In 41930:

Customize: Draw attention to "Add Items" button after creating a new menu.

Introduce wp.customize.utils.highlightButton() and wp.customize.Menus.MenuSection#highlightNewItemButton().

Props bpayton, melchoyce, afercia, westonruter.
Fixes #42114.

[westonruter]

In 41932:

Customize: Draw attention to save button after collapsing the publish settings section when the changeset status or date had been changed.

Props bpayton, westonruter.
See #42114, #39896.
Fixes #42211.

[westonruter]

@bpayton I'm seeing a small issue here. I am creating a new menu and the “Add Items” button shakes after 2 seconds as expected. However, then every time I add an item it shakes every time one is added. Shouldn't it stop shaking after I open the available items pane?

[Kopepasah]

@westonruter I am seeing this issue too. It seems that the cancel of the highlight on the button is bound to the publish button's cancel. Seems that this should be bound to adding a new menu item to the menu.

[bpayton]

@westonruter I am able to reproduce this as well. I believe this is due to the button-see-me class applied to the button for animation combined with calls to MenuControl#reflowMenuItems. The issue is also visible when items are deleted for a new menu.

I will look into fixing this by removing the button-see-me class on animationend.

[bpayton]

Fix to avoid re-animation cases

[bpayton]

I attached a patch with a fix.

It isn't perfect in that an animationend listener can remain attached to the highlighted button if anything interrupts animation. Both removing the animation class and removing the animated element from the DOM can interrupt animation. But a subsequent completed animation will remove the listener. I believe this is reasonable compromise over adding an additional cleanup attempt with setTimeout and a sufficient delay.

[westonruter]

In 41950:

Customize: Prevent re-highlighting "Add Items" button after available nav menu items pane has already been opened.

Amends [41930].
Props bpayton.
See #42114.