[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:  Future Release
Component:  Customize         |     Version:  3.4
 Severity:  normal            |  Resolution:
 Keywords:                    |     Focuses:  ui, administration
------------------------------+---------------------------------

Comment (by dancameron):

 @celloexpressions,

 After a little bit of work this morning I was able to clean things up and
 post the plugin on github (https://github.com/dancameron/mobile-
 customizer/tree/master) for review.

 Here's a quick run-down, if you remember anything else we discussed
 yesterday (at contributor day) please add it.

 **Swiping**
 I removed swiping in my version. Not because I couldn't get it to work but
 with the design I currently have it's completely unnecessary (IMO). If
 swiping returns it should be to pull the customizer section out (expanding
 it) with handle, whether that's the icons or not. IMO swiping the controls
 in from off screen isn't intuitive with iOS and ASAIK other mobile OSes
 having a swipe from left offscreen gesture translate to going back--which
 would cause false swipes and a bit of frustration for the user.

 **Changes...**

 **Icons**
 * The customize controls have icons now but may need additional attention
 since some could have better relations with another dashicon that I'm not
 aware of.
 * Clicking an icon in the collapsed view opens the section.

 **Title and Description Section**
 At first we discussed the edge case of long site titles, etc.. Instead I
 ripped this section out since that space is too valuable to show something
 the user should already know.

 **Preview**
 * I like the current layout of the header but don't like the look of the
 "Preview" link since it's surrounded with what looks like two buttons. You
 saw what I had originally done with making it a Preview a button but with
 the Save button changing width it ended up being a rabbit hole I didn't
 want to dive into. I also understand that a designer might look at this
 and want to completely change the UI.
 * A UI I thought about doing was moving the preview below the menu items
 and making it a full width button. The problem I had with this is that a
 long menu would not show the preview button above "the fold" as well as
 there would be no link to close the preview.
 * The context of the icon should change when in a preview state, since the
 open eye still shows.

 **Header**
 I cleaned up some spacing and sizes. I think the background should not be
 black; the issue I expressed yesterday is that the user may think that the
 header is the admin bar, not the customizer, if the color schemes match.

 **Widget Panels**
 Added a simple trigger to close the panel if the user selects preview. IMO
 this is a better UX trade-off: since jumping back to the beginning
 wouldn't confuse the user, instead it may frustrate them that they need to
 click widgets section again...at least they know where they are.

 **Next Step**
 There's possibly a few bugs that need to be resolved but I'd like to get
 to a point where our direction is agreed upon; no sense in finalizing
 something that will end up moving in a different direction. In my
 completely biased opinion I believe this looks good but appreciate any
 feedback in making it better and possibly added to core.

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