WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 3 years ago

Last modified 3 years ago

#29949 closed enhancement (maybelater)

Customizer collapsed mode is barely usable

Reported by: celloexpressions Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.4
Component: Customize Keywords: has-patch needs-refresh
Focuses: ui Cc:

Description

When we were working on improving the Customization experience on mobile (#28784), @dancameron proposed displaying top-level section icons in the collapsed/preview mode for quicker access from that mode. We ended up going in a different direction with mobile, but his proposal remains a significant improvement for larger-screen users, where the Customizer's "collapsed" mode is barely usable. Once the customizer is collapsed, it can be nearly impossible to locate the tiny icon to expand it, and it is hard to tell that you're still in the Customizer. This mode is important, especially as we begin to emphasize the ability to navigate around on the site within the Customizer more.

I've converted Dan's plugin (done that way for easier iteration, testing, and collaboration) to a core patch and ironed out the remaining bugs. Once #28504 is in, this is ready to go (shouldn't need a refresh after that).

Attachments (9)

29949.diff (5.8 KB) - added by celloexpressions 4 years ago.
Better collapsed mode for the Customizer. Requires 28504.2.diff, see #28504.
customize-collapsed-after.png (38.3 KB) - added by celloexpressions 4 years ago.
29949-stray-icon.png (19.2 KB) - added by ocean90 4 years ago.
29949-misplaced-panel-arrow.png (8.1 KB) - added by ocean90 4 years ago.
29949-48px-are-missing.png (107.9 KB) - added by ocean90 4 years ago.
29949-missing-collapse.png (7.8 KB) - added by ocean90 4 years ago.
29949.2.diff (5.8 KB) - added by celloexpressions 4 years ago.
refresh
29949.3.diff (6.1 KB) - added by celloexpressions 4 years ago.
No 2nd expand button, remove animations, keep open sections/panels open.
29949.4.diff (5.7 KB) - added by dancameron 4 years ago.
Fixed patch to remove conflicts from merging into current trunk

Download all attachments as: .zip

Change History (32)

@celloexpressions
4 years ago

Better collapsed mode for the Customizer. Requires 28504.2.diff, see #28504.

#1 @dancameron
4 years ago

Thanks Nick.

#2 @ocean90
4 years ago

Cool stuff so far, found some issues. Happy to commit this if these and #28504 are fixed.

#3 @celloexpressions
4 years ago

@ocean90 can you check if you still have one of the test plugins for mobile active? Were you testing 29949.diff? Those should have all been fixed in that patch, and the "header" in your screenshots shouldn't be there anymore (that'll be on the mobile ticket). It should also be disabled on mobile (<600px), since we'll be doing the "header" but not the "sidebar" in the collapsed mode.

This ticket was mentioned in IRC in #wordpress-dev by ocean90. View the logs.


4 years ago

@celloexpressions
4 years ago

refresh

#5 follow-up: @ocean90
4 years ago

With 29949.2.diff and no test plugin active I now see something else.

  • In collapsed mode we now have two uncollapse buttons, thats weird. Shouldn't it remain as a close/cancel button?
  • In <600px we also have two uncollapse buttons, the top one looks lost. Is there a reason for hiding the controls?
  • With the controls always visible you will never have the same preview as on the frontend because we will lose some pixels for the controls.
  • Collapsing the controls shouldn't close any open controls.
  • Is an icon enough let the user know what's behind the section? It should have at least a title attribute.

With these points we would be closer to #28784 and curious why it's pulled of. Would like to see this happen in 4.1. The test plugin does already a great job.

#6 in reply to: ↑ 5 @celloexpressions
4 years ago

Replying to ocean90:

  • In collapsed mode we now have two uncollapse buttons, thats weird. Shouldn't it remain as a close/cancel button?

I added the second expand button for two reasons: to make it more prominent as well as retaining the one at the bottom, and to ensure that users expand the controls and can save changes before closing, with all of that UI being consolidated at the top. I imagine the most common workflow will be: Customize, collapse, browse site, save/publish, close Customizer, so adding a second expand arrow to the top facilitates that and avoids users trying to close the Customizer and getting the AYS, then not being able to find the save button because the controls are collapsed. We could just leave the close button there, but particularly to avoid missing "Save & Publish" it seemed better to have the second expand button, and also to not move the first since it's unified with the collapse button.

  • In <600px we also have two uncollapse buttons, the top one looks lost. Is there a reason for hiding the controls?

Since horizontal space is so limited on devices that small, which tend to be portrait, we felt that it was more important to give the full width to the preview and to have a "header" on mobile. Since that would be implemented in the other ticket, this patch tried to avoid changing that much. We'd end up not showing the original icon, and in the meantime we would just have both, with the top one being a more realistic touch target.

  • With the controls always visible you will never have the same preview as on the frontend because we will lose some pixels for the controls.

I think the main point of collapsing the controls will be to focus more on the previewing component of the Customizer, with the workflow I outlined above. The point of this ticket is to make the fact that you're still in the Customizer (and probably have unsaved changes) clearer, and to bring quicker access to different sections. The collapsed mode takes 46px away from the site width, vs. the 300px that the expanded controls take, and essentially hides the UI to allow the user's focus to shift to the preview.

  • Collapsing the controls shouldn't close any open controls.

You mean closing the active section/panel and returning to the top level? We need to do something like that to successfully minimize the UI so that the icons can be displayed next to each other and there can be no scrollbar. If you remember the icon for the section that you want to go back to, you can just click that icon to auto-expand the section/panel when you want to re-expand the controls to make another tweak. I don't think that's particularly disruptive given the workflow outlined above.

  • Is an icon enough let the user know what's behind the section? It should have at least a title attribute.

I suppose we could add a title attribute, but rather than relying on the various ways that browsers implement (and no touch support, etc.), I think the dual expand buttons make it clear that you can just expand it back out to see the fill section titles.

With these points we would be closer to #28784 and curious why it's pulled of. Would like to see this happen in 4.1. The test plugin does already a great job.

I want to see it in 4.1 also, but we still need to get to a complete patch. Again, it's tricky to patch that independently from this, but I can try to do that if you'd prefer to commit all three tickets together. Realistically, I would probably need to make one big patch, because the labels of the buttons will need to be different for the different layouts, so the patches will conflict if we try to do both separately.

#7 @obenland
4 years ago

I imagine the most common workflow will be: Customize, collapse, browse site, save/publish, close Customizer, so adding a second expand arrow to the top facilitates that and avoids users trying to close the Customizer

Tapping or clicking it makes it change its purpose and functionality, and not just a little. But drastically. An accidental second tap and the customizer is closed. I think it promotes the exact opposite of what you're intending. The top uncollapse button just feels weird, I have to agree with ocean90.

If the bottom toggle is not prominent enough for you, what about positioning it right underneath the last section, like in the admin menu?

I also don't like the collapse animation, it feels slow and laggy. I realize it's its current behavior, but we should change that. It would also help with the weird movement of the collapsing preview notice.

#8 @celloexpressions
4 years ago

I'd be okay with dropping the extra expand button if that's the consensus, that part doesn't matter as much to me. Either way we have the AYS to prevent closing with unsaved changes, so it's more a matter of which functionality we want to show there.

The animation is tricky, and I dropped it from the expand action because that was even worse. But we do generally animate in the Customizer for things like this (sections, panels, add-widgets, etc.), so maybe we could just try making it faster? It's actually specified in the patch, since we need to override the default behavior to drop the animation on expand. .2s is a bit slower than what we do in some other places; panels are .18s.

#9 @folletto
4 years ago

Tapping or clicking it makes it change its purpose and functionality, and not just a little. But drastically. An accidental second tap and the customizer is closed. I think it promotes the exact opposite of what you're intending. The top uncollapse button just feels weird, I have to agree with ocean90.

Agreed. No double collapse. :)

This ticket was mentioned in IRC in #wordpress-dev by celloexpressions. View the logs.


4 years ago

@celloexpressions
4 years ago

No 2nd expand button, remove animations, keep open sections/panels open.

#11 @celloexpressions
4 years ago

29949.3.diff should address all outstanding issues.

This ticket was mentioned in Slack in #core by dancameron. View the logs.


4 years ago

@dancameron
4 years ago

Fixed patch to remove conflicts from merging into current trunk

This ticket was mentioned in Slack in #core by dancameron. View the logs.


4 years ago

#14 @ocean90
4 years ago

  • Keywords 4.2-early added
  • Milestone changed from 4.1 to Future Release

Let's put this together with #28784.

#15 @iseulde
3 years ago

  • Milestone changed from Future Release to 4.2

has-patch 4.2-early so moving to 4.2.

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


3 years ago

#17 @ocean90
3 years ago

  • Keywords 4.2-early removed
  • Milestone changed from 4.2 to Future Release

Moving back until we have a plan to tackle this.

#18 @celloexpressions
3 years ago

  • Keywords needs-refresh added

What type of a plan are we thinking here? I don't see any dependencies; the mobile reworking is not related to the approach here since this is large-screen-only. One possible improvement would be to explore doing a few device-size buttons here that resize the preview, where one is a full-screen icon that has this functionality.

We should refresh this patch to use the new control|section|panel.focus() methods in JS when re-expanding. As well as probably using the expand/collapse methods for closing everything when collapsing.

#19 @celloexpressions
3 years ago

#28504 is a dependency; once that happens I'll revisit this. Waiting for a decision there, basically.

#20 follow-up: @samuelsidler
3 years ago

The more that I think about it, the more I'm not convinced that the Customizer needs to be useful when collapsed. The current collapsed mode is basically preview (ticket:28504#comment:34). In that vein, I think it makes sense to keep it collapsed how it is now.

My only complaint with the current behavior is that I wish the "reveal" button was more pronounced. As it stands now, it's hard to tell that I'm in preview mode.

#21 in reply to: ↑ 20 @afercia
3 years ago

Replying to samuelsidler:

The current collapsed mode is basically preview

Was thinking the same thing while working on #32819 and maybe instead of "Collapse" should be just "Hide sidebar/Show sidebar".

My only complaint with the current behavior is that I wish the "reveal" button was more pronounced. As it stands now, it's hard to tell that I'm in preview mode.

In #32819 we're trying to improve the focus style, please have a look at the screenshot there: was thinking to keep the blue and the box-shadow on the button when the sidebar is collapsed to indicate that is in a sort of "active" mode. Thoughts?

#22 follow-up: @celloexpressions
3 years ago

  • Milestone Future Release deleted
  • Resolution set to maybelater
  • Status changed from new to closed

The approach in this ticket has a hard dependency on #28504, so we have to maybelater this as well. Instead/for now, I would like to at least see a larger/more visible button for bringing the Customizer back up (beyond just the focus styling). Thinking we'll have a good opportunity to do that in #31195 if the approach I proposed there happens. Planning on making that a plugin soon to facilitate testing.

#23 in reply to: ↑ 22 @samuelsidler
3 years ago

Replying to afercia:

In #32819 we're trying to improve the focus style, please have a look at the screenshot there: was thinking to keep the blue and the box-shadow on the button when the sidebar is collapsed to indicate that is in a sort of "active" mode. Thoughts?

I'll catch you over in #32819. :)

Replying to celloexpressions:

Instead/for now, I would like to at least see a larger/more visible button for bringing the Customizer back up (beyond just the focus styling). Thinking we'll have a good opportunity to do that in #31195 if the approach I proposed there happens. Planning on making that a plugin soon to facilitate testing.

I'm not sure I like the option in #31195 – "full screen," basically, but without actually being full screen. That said, experimenting with a plugin and running user tests would be a great way to find out what's better.

Note: See TracTickets for help on using tickets.