[wp-trac] [WordPress Trac] #37661: A New Experience for Discovering, Installing, and Previewing Themes in the Customizer

[WordPress Trac]

#37661: A New Experience for Discovering, Installing, and Previewing Themes in the
Customizer
-------------------------------------+-------------------------------------
 Reporter:  celloexpressions         |       Owner:  celloexpressions
     Type:  feature request          |      Status:  assigned
 Priority:  high                     |   Milestone:  4.7
Component:  Customize                |     Version:  4.2
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch has-           |     Focuses:  ui, accessibility,
  screenshots needs-testing has-     |  javascript
  user-testing ux-feedback           |
-------------------------------------+-------------------------------------

Comment (by folletto):

 Ok, I did some testing, here's some of the important bits design wise:

 1. Feature Filter — the entry shouldn't select, it should just open. The
 search and selection is triggered only once one of the options is
 activated, thus avoiding any blank screen, and preserving the accordion
 visual.
 2. Favorites — the entry shouldn't select, but should update the list once
 "Get Favorites" is clicked. In that scenario, no other control gets the
 check mark.
 3. Feature Filter(s) — Can we avoid having the accordion-inside-the-
 accordion effect? Scrolling is a perfectly valid way to navigate. If we
 think it's not the case, we can iterate on that. But... let's not jump
 ahead building it first.
 4. Search — If there's a text inside the search box and the search get
 focus, the control should get selected and search initiated with the
 existing text. If this is technically difficult, at least pressing enter
 should trigger search on that same search string.
 5. (Mobile) Button switcher labels — We probably need to review the text
 of these to be clearer. "See X themes" maybe changed to "Show X themes"
 (more consistent?) and "Filter themes" maybe changed to "Back to themes
 filters" (to give a sense of continuity) or another analogous approach.

 Here some minor details (note I'm testing in Chrome Mac, so other browsers
 might see it differently):

 1. Check —  position of the circle should be slightly adjusted to be
 vertically centered (`... .selected:after` with a `margin-top: -2px` or
 similar solution).
 2. Glass — position of the ifon is too high, again should be vertically
 centered (`... .themes-section-search_themes:after` with a `bottom: 8px;`
 or similar solution).
 3. Background color — I'd suggest as per mockup to have a slightly darker
 gray for the right area with the thumbnails (`#DDDDDD`). This if it aligns
 with the current color standards of customizer. It helps achieving a
 better contrast.
 4. The loading spinner on the right while the thumbnails get loaded would
 be great it it could be centered also vertically.
 5. There's a slight 4px white "tab" on the left of accordions when open.
 6. The mouse cursor shouldn't be `pointer` but `default` on items that are
 already selected (search excluded).

 To answer some of the pending questions above:

 > the "Featured, Popular, Latest, Feature Filter, Favorites" items in the
 left sidebar look like the customizer controls. But they do different
 things, we're now at 3 types of UI controls that do different things but
 look the same (the only difference is the small arrow for the last two
 ones):

 We might have gone a bit too far in standardizing against customizer UI
 patterns. I think what we have still works well enough, but let's see if
 we have a better version equally within patterns.

 > I'm not sure about the checkmark for installed. It feels weird to get
 checks for that and then featured. I'm a little confused as the check
 seems diluted as a result. Maybe we can see this more in testing. Just
 noting as a possible pain point.

 Yeah. I expect this to emerge during testing  if it's a big issue. Let's
 see.

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