[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 celloexpressions):

 This is looking great, Dan!

 Replying to [comment:5 dancameron]:
 > **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.
 I agree, swiping to open the controls could cause issues and we have diect
 tap targets anyway. We'll probably want to do swiping to back out of
 panels still, but let's break that out to #29593.

 > **Icons**
 We now have a dependency on #28504 for this. This approach addresses the
 primary concern there that the icons aren't necessary due to the lack of a
 collapsed state. We should consider leveraging this new view (without the
 header) for the collapsed mode on larger screens as well, as (as you
 noticed yesterday) the current collapsed UI is practically invisible.

 > **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.
 This is probably okay; I'm generally not a big fan of hiding things on
 mobile, but it's just the main customizer help sentence or the theme
 preview name/description, which could also be redundant. The other option
 would be to only hide it in the collapsed state; that would cause some
 vertical icon jumping but might be okay. Related: I think we need to make
 it overflow-y: hidden also since getting a scrollbar on collapsed icons
 looks strange.

 > **Preview**
 Agree that this part will need some more work.

 > **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.
 Let's also try making the icons be on an `#eee` background instead of
 `#fff` to match the rest of the frame. This could all change if #29158
 happens in some form, so let's not worry too much about it.
 > **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.
 Actually, we should definitely do this because it wouldn't make sense to
 have icons on sub-sections in panels. So the icon view is only really
 useful if we bump out to the top level anyway. Maybe a bit disruptive, but
 for good reason.
 > **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.
 This is definitely a good start! There are several minor UI things (and
 places where we can simplify/remove animations that shouldn't be seen),
 but I agree that we should finalize the direction before making it pixel-
 perfect. I'm going to leave those notes in a separate comment.

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