WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#31289 closed task (blessed) (fixed)

Customizer: theme switcher navigation streamlining

Reported by: folletto Owned by: ocean90
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.2
Component: Customize Keywords:
Focuses: ui Cc:
PR Number:

Description

The upcoming customizer theme switcher has the navigation that while works well in term of information hierarchy with a slide in the opposite direction, has the various navigation element a bit mixed in terms of navigation (arrows directions, headers).

This ticket aims to address these issues.

Attachments (19)

customizer-theme-switcher-views.png (601.7 KB) - added by folletto 5 years ago.
Initial status of the customizer theme switcher
customizer-themeswitcher-i2.png (179.8 KB) - added by folletto 5 years ago.
Customizer: Theme Switch i2 concept — Basic
customizer-themeswitcher-i2-structural.png (179.7 KB) - added by folletto 5 years ago.
Customizer: Theme Switch i2 concept — Structural
customizer-themeswitcher-i2-structural-screenshot.png (202.1 KB) - added by folletto 5 years ago.
Customizer: Theme Switch i2 concept — Structural, with Screenshots
Customizer Themes Switcher 20150210.sketch.zip (1.9 MB) - added by folletto 5 years ago.
Source Sketch File
31289-change-inline.png (14.0 KB) - added by celloexpressions 5 years ago.
More Customizer-inspired change button on the theme heading
customizer-themeswitcher-i3.png (181.7 KB) - added by folletto 5 years ago.
Iteration 3 — Basic approach revised with "Change" button in style.
customizer-themeswitcher-i2-structural-screenshot 2.png (184.9 KB) - added by folletto 5 years ago.
Iteration 3 — Structural approach, with slimmer footprint
customizer-themeswitcher-i2-structural-screenshot.2.png (196.7 KB) - added by folletto 5 years ago.
Iteration 3 - Structural With Screenshot, slimmer approach
31289.diff (5.4 KB) - added by celloexpressions 5 years ago.
31289.2.diff (7.3 KB) - added by celloexpressions 5 years ago.
Remove previewed theme from the grid, remove redundant back arrow button.
31289-long-name.png (54.8 KB) - added by ocean90 5 years ago.
31289.3.diff (8.0 KB) - added by designsimply 5 years ago.
Adjusted to accommodate long theme names, left the rest as-is.
IMG_0798.PNG (1.2 MB) - added by ryan 5 years ago.
31289.3.diff on iPhone 6+
Screenshot_2015-03-18-15-52-09.png (653.9 KB) - added by ryan 5 years ago.
31289.3.diff on Nexus 5
31289.4.diff (8.0 KB) - added by designsimply 5 years ago.
Fixes the "Customize" button heigh problem from Ryan's iPhone 6+ screenshot.
31289-no-ellipsis.png (15.8 KB) - added by ocean90 5 years ago.
31289.patch (7.9 KB) - added by ocean90 5 years ago.
31289.2.patch (8.9 KB) - added by ocean90 5 years ago.

Change History (50)

@folletto
5 years ago

Initial status of the customizer theme switcher

@folletto
5 years ago

Customizer: Theme Switch i2 concept — Basic

@folletto
5 years ago

Customizer: Theme Switch i2 concept — Structural

@folletto
5 years ago

Customizer: Theme Switch i2 concept — Structural, with Screenshots

#1 @folletto
5 years ago

Ok, added two (and an half) concept here:

  • Basic — this is a minimal one in terms of impact. Not much clearer, but just changing the arrow to a button has a great impact on clarity, and doesn't mandate any specific direction, allowing us to do the animation we need.
  • Structural — this I feel could be way way better, because you see what changed and what toggles the change between the two screens, and also keeps the bar at the top stable. This however also requires a minor change to the "title" to keep the pieces taking less vertical space overall.

Also, a variant of Structural with screenshot. :)

Feedback? :)

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


5 years ago

#3 @celloexpressions
5 years ago

I prefer the first concept, although the button styling doesn't really fit with the Customizer. What if we just put the text "change" directly inline in the styling of the panel arrows?

The second two use too much vertical space, since most users won't need to change this frequently and it lives at the top. But I think my preference would be to use the third version for the styling in the panel, with the active theme + screenshot + Customize button highlighted above the search, and not showing the active theme below. The active theme could still link to the details view there, but that's probably unnecessary.

@celloexpressions
5 years ago

More Customizer-inspired change button on the theme heading

@folletto
5 years ago

Iteration 3 — Basic approach revised with "Change" button in style.

@folletto
5 years ago

Iteration 3 — Structural approach, with slimmer footprint

@folletto
5 years ago

Iteration 3 - Structural With Screenshot, slimmer approach

#4 @folletto
5 years ago

All good points. Gone for a quick iteration (i3) as the above, to see how they feel.

I have a slight preference for the "Structural Approach i3" without screenshots because feels cleaner and keeps the top customizer bar unchanged, while creating the toggle effect.

#5 @celloexpressions
5 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.2

[31533] is in, so now we can patch this directly in core.

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


5 years ago

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


5 years ago

#8 @celloexpressions
5 years ago

  • Keywords has-patch added; needs-patch removed
  • Version set to trunk

31289.diff seems like the most reasonable approach based on our discussion in #core-customize, see lots of screenshots there.

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


5 years ago

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


5 years ago

#11 follow-up: @johnbillion
5 years ago

  • Type changed from enhancement to task (blessed)

Does the layout handle long theme names (and long translations of "Change", "Preview", and "Previewing") ok?

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


5 years ago

@celloexpressions
5 years ago

Remove previewed theme from the grid, remove redundant back arrow button.

#13 in reply to: ↑ 11 @ocean90
5 years ago

Replying to johnbillion:

Does the layout handle long theme names (and long translations of "Change", "Preview", and "Previewing") ok?

It doesn't, see 31289-long-name.png.

#14 @celloexpressions
5 years ago

@sheri had come up with a solution for the long titles I think, want to clean it up and add it to 31289.2.diff here? I think forcing ellipsis or just cutting it off at the end of one line will be the best approach, since the button gets weird if it goes over multiple lines.

@designsimply
5 years ago

Adjusted to accommodate long theme names, left the rest as-is.

This ticket was mentioned in Slack in #feature-imageflow by boren. View the logs.


5 years ago

@ryan
5 years ago

31289.3.diff on iPhone 6+

@ryan
5 years ago

31289.3.diff on Nexus 5

#16 @ryan
5 years ago

Figuring out the Change/Customize toggle took me awhile, even though I've looked at all of the mockups on this and other tickets and knew it was in the works.

The ride is pretty rough on my iPhone 6+, with or without the patch. I did some live feedback in #core-customize. Some stuck scrolling and buttons that require multiple taps.

https://wordpress.slack.com/archives/core-customize/p1426712697000223

@designsimply
5 years ago

Fixes the "Customize" button heigh problem from Ryan's iPhone 6+ screenshot.

#17 @designsimply
5 years ago

I think this experience is improved compared to trunk and the updates here should go in with 4.2. I think 31289.4.diff is ready for commit.

#18 @ocean90
5 years ago

31289.4.diff adds ellipsis to #customize-controls h3 but I don't get these, see 31289-no-ellipsis.png. The button label is also not vertically aligned.

#19 @ocean90
5 years ago

  • Keywords needs-refresh added

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


5 years ago

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


5 years ago

#22 @DrewAPicture
5 years ago

  • Owner set to ocean90
  • Status changed from new to reviewing

Running pretty short on time at this stage in the cycle. Seems like we still need a patch refresh to get this over the finish line. Any takers?

#23 @ocean90
5 years ago

  • Keywords needs-patch added; has-patch needs-refresh removed

The current patches doesn't convinced me, basically because of a missing back button. I think the only thing we should do is the "Change" button, see customizer-themeswitcher-i3.png.

See also a comment by @helen: ticket:31791:10.

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


5 years ago

#25 @ocean90
5 years ago

#31838 was marked as a duplicate.

@ocean90
5 years ago

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


5 years ago

@ocean90
5 years ago

#27 @ocean90
5 years ago

In 31975:

Customizer Theme Switcher: Navigation streamlining.

  • Detach Themes section from other controls
  • Move to buttons to navigate back and forth
  • Change titles based on current theme status, active/previewing
  • Hide the active/previewing theme from the list of available themes

props folletto for the design concepts.
props designsimply, celloexpressions for initial patches.
props Team Gandalf.
see #31289.

#28 @ocean90
5 years ago

In 31976:

Customizer Theme Switcher: Update JavaScript template after [31975].

see #31289.

#29 @ocean90
5 years ago

  • Keywords needs-patch removed
  • Resolution set to fixed
  • Status changed from reviewing to closed

Closing as fixed for 4.2.

#30 @ocean90
5 years ago

In 32087:

Customizer Theme Switcher: Fix tabbing order if section is open.

see #31289.

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


5 years ago

Note: See TracTickets for help on using tickets.