[wp-trac] [WordPress Trac] #28784: Improve the Customize experience on mobile

[WordPress Trac]

#28784: Improve the Customize experience on mobile
-------------------------------------+---------------------------------
 Reporter:  celloexpressions         |       Owner:
     Type:  enhancement              |      Status:  new
 Priority:  normal                   |   Milestone:  4.1
Component:  Customize                |     Version:  3.4
 Severity:  normal                   |  Resolution:
 Keywords:  ui-feedback ux-feedback  |     Focuses:  ui, administration
-------------------------------------+---------------------------------

Comment (by folletto):

 I can help on UX here. ;)

 I think that @celloexpressions' concept above is a good starting point. To
 build on that I'd analyze the user flow in a mobile context: if you think
 about it, the flow is around ''"make a change and see what it means"''.

 This translates loosely to a flow that is like this:

 * Open customizer
 * Open a panel
 * Make the change
 * See how it went
 * Make an adjustment to the same panel
 * See how it went
 * Go to another section
 * Repeat

 This means that we have a sort of "toggle" between change and result of
 change, which on mobile follows the same pattern of the
 [https://core.trac.wordpress.org/attachment/ticket/28784/customize-
 mobile-0.3-icons.gif UI prototype above].

 With this in mind, I feel that we should optimize for '''both''' these
 moments: '''change''' and '''see'''.

 I'm attaching an idea here that hopefully has minimal UI impact, using the
 top bar as a reference. The idea is that when you change something you can
 switch to preview and back to customizer quickly. The customizer takes the
 full screen, so you're well immersed, while the preview page has only a
 clear and simple bar at the top that either goes back or publish.

 Note that while this adds a single tap vs the idea of keeping the icons on
 the left side when previewing, it is well balanced by some benefits that I
 feel weights more than the single tap we spare:

 1. Gives us the proper, full width preview, which is what I want to see on
 mobile.
 2. Still has the full customizer one tap away, which in case of
 adjustments (likely) is the same one tap away I would get either way.

 I hope this helps. ;)

--
Ticket URL: <https://core.trac.wordpress.org/ticket/28784#comment:10>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform