WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 5 years ago

Last modified 5 years ago

#26899 closed enhancement (fixed)

Theme Activation Workflow with Customizer

Reported by: chipbennett Owned by: SergeyBiryukov
Milestone: 4.1 Priority: normal
Severity: normal Version: 3.4
Component: Themes Keywords:
Focuses: ui Cc:
PR Number:

Description

When activating a Theme, the user should be redirected to the Theme Customizer.

Facilitate users to configure Theme settings immediately upon Theme activation. Currently, the user is presented with the Themes UI upon activation. The most-obvious user action at this point is "Customize". (To reach the Theme settings page through the Themes UI now, the user must click "Theme Details", and then click the appropriate link/button.)

Short-circuiting this workflow would provide several advantages:

1) Immediate Theme configuration, with fewer steps
2) Further encouragement/facilitation for Theme developers to hook into the Customizer API
3) No need to know where to find the "Theme Options" link/button from the Themes UI
4) No need to know either the standard Theme settings page location (Appearance -> Subpage), or a non-standard menu page added by the Theme

An alternate proposal: Merge the "Activate" and "Live Preview" buttons for non-active Themes.

Currently, for non-active Themes, two buttons are presented, "Activate" and "Live Preview". Users may not know that "Live Preview" is actually ("Configure, Live Preview, and Activate"). With this change, the two buttons could be condensed to a single button, which leads to the Theme customizer - allowing for Theme settings configuration and live-preview before activation.

Attachments (3)

theme-twenty-ten-activated.png (89.7 KB) - added by folletto 5 years ago.
wpcom theme activation overlay
26899.png (82.1 KB) - added by celloexpressions 5 years ago.
26899.diff (2.8 KB) - added by celloexpressions 5 years ago.
Make "Live Preview" primary and "Activate" secondary.

Download all attachments as: .zip

Change History (20)

#1 @nacin
6 years ago

  • Component changed from Themes to Appearance

#2 @Frumph
6 years ago

-1 to this, having the user immediately redirected away from the theme selection page will cause confusion. Most people are at the page and want to view their site with the theme and then move on to the next one if they don't like the initial representation; they don't want to have to go back and find where they can click to activate or find a different theme.

On updates with theme activation that isn't a problem since the user already knows what they are getting into and having information redirects on the updates of the theme and important information is sometimes, often times necessary.

However, going straight to the customizer. Not a good thing.

Last edited 6 years ago by Frumph (previous) (diff)

#3 @downstairsdev
6 years ago

Hi Chip. As someone who often switches between themes when doing development work, an automatic redirect to the customizer would not be so welcome. For themes that don't offer any customizer options (beyond the defaults) I'm also not sure how much value that would offer the user.

When someone activates a new theme, this notice is displayed:
"New theme activated. Visit site"

As an alternative to your suggestion, perhaps the notice could just be updated to:
"New theme activated. Visit site. Customize site."

#4 @westonruter
5 years ago

  • Focuses ui added
  • Keywords ui-feedback needs-patch added
  • Version changed from 3.8 to 3.4

I don't think the two buttons should be condensed into one, but I do think that the "Live Preview" button should let the user know that it's not just about previewing: it's also a path through which the new theme can be configured and activated. Perhaps a tooltip is in order on the Live Preview button which explains this.

I also like the suggestion of updating the notice to include a link to the Customizer:

New theme activated. Visit site. Customize site.

#5 @F4rkie
5 years ago

Why not add the ability to just Save an unactivated theme? This way the buttons stay and don't need modifying.

#6 @folletto
5 years ago

I can give here some perspective since we have already "solved" this issue on WordPress.com. In one of the tests we conducted we noticed the issue: people activating a theme were left to themselves with no clear next step.

So we decided to test and in the end implement for everyone a small overlay that clearly states the potential next steps, and with one single next step clearly highlighted: "Customize your site".

While I think this could be even further improved, I can confirm that the solution works. ;)

Attached screenshot, but you can test it yourself of course since it's currently live. :)

@folletto
5 years ago

wpcom theme activation overlay

@celloexpressions
5 years ago

Make "Live Preview" primary and "Activate" secondary.

#7 @celloexpressions
5 years ago

  • Component changed from Customize to Themes
  • Keywords has-patch ux-feedback added; ui-feedback needs-patch removed
  • Milestone changed from Awaiting Review to 4.1

Trac-ing https://irclogs.wordpress.org/chanlog.php?channel=wordpress-dev&day=2014-10-14&sort=asc#m940085. From @johnbillion:

We should make the 'Live Preview' button the default when browsing themes, instead of 'Activate'. The customiser is killer now.
Or scrap the Activate button entirely and make people go through the customiser

Let's turn this ticket's proposal around: it really doesn't make sense to activate a theme without live-previewing/customizing it first for most users. Therefore, we should guide the user in the best/most common path to activating a theme:

  1. Select potential theme from themes.php
  2. Live Preview/Customize, including setting up widgets & menus and editing theme options
  3. Activate theme, which you've already customized and already know exactly how it looks/works on your site

All we need to do to achieve this, without running into complaints about removing the activate button for power users, is to make "Live Preview" the primary action and "Activate" secondary. We could also switch the order, although I definitely prefer the primary button on the right. The primary button implies the best option to try, and it makes sense to preview a theme before activating it live on the site. Once users click "Live Preview", the preview, configure & activate workflow is clear, so I think nudging users into this flow is enough.

#8 @folletto
5 years ago

I think your approach is sound, even more since the functional impact is zero, you're just nudging a different default.
Let's try it out and see how it feels. :)

This ticket was mentioned in IRC in #wordpress-dev by celloexpressions. View the logs.


5 years ago

#10 @obenland
5 years ago

I like it too. Should the button order be switched, so that the primary button stays first?

#11 @celloexpressions
5 years ago

  • Keywords commit added; ux-feedback removed

I actually prefer primary on the right visually, as that matches some other primary button placements, like the publish button and the Customizer save button.

#12 @SergeyBiryukov
5 years ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 29957:

Themes: Make "Live Preview" the primary action and "Activate" secondary.

props celloexpressions.
fixes #26899.

#13 follow-up: @nacin
5 years ago

Should the same thing happen on theme-install.php with "Install" and "Preview"?

#14 in reply to: ↑ 13 @SergeyBiryukov
5 years ago

  • Keywords needs-patch added; has-patch commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Replying to nacin:

Should the same thing happen on theme-install.php with "Install" and "Preview"?

Yes, makes sense.

#15 @nacin
5 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

I was only leaving a note for future consideration, not a change in 4.1. Would someone like to make a ticket? I think it would deserve a user test and some other feedback, and I'm not convinced it should actually change, either. (Previews for uninstalled themes aren't very great showcases, for one.)

#16 @iseulde
5 years ago

  • Keywords needs-patch removed
Note: See TracTickets for help on using tickets.