WordPress.org

Make WordPress Core

Opened 16 months ago

Last modified 6 months ago

#35186 new enhancement

Put the Customizer "back" button next to the "Close" button

Reported by: DragonFlyEye Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 4.4
Component: Customize Keywords: has-screenshots needs-patch
Focuses: ui, javascript, administration Cc:

Description

Seems like a pretty small thing. The "Back" button that takes you to the top of the Customizer menu scrolls out of view but the "Close" button does not. If we put the Back button next to the Close button, it would be slightly less confusing.

Attachments (2)

customizer-back-redesign-thin-i1.png (33.8 KB) - added by folletto 16 months ago.
Customizer Back Redesign - 'Thin' i1
customizer-back-redesign-xswap-i1.png (35.9 KB) - added by folletto 16 months ago.
Customizer Back Redesign - 'X-Swap' i1

Download all attachments as: .zip

Change History (28)

#1 @SergeyBiryukov
16 months ago

  • Keywords needs-screenshots added

#2 @DragonFlyEye
16 months ago

Notice how, when I scroll down a bit, the back button scrolls past the top of the screen. As the Customizer gets more heavily used, it is inevitable that this will be a more common problem.

http://holisticnetworking.net/allsorts/customize-back-button.png
http://holisticnetworking.net/allsorts/customize-back-button-gone.png

#3 @DrewAPicture
16 months ago

  • Keywords has-screenshots added; needs-screenshots removed

#4 @westonruter
16 months ago

  • Focuses javascript added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.5

I agree. When inside of a panel or section, the back button could slide out from under the Close button to reveal itself. This button would change the current expanded section, or it there is no expanded section, it should collapse the current expanded panel. For example, the logic that clicking the button invokes could include:

var wasCollapsed = false;
api.section.each( function( section ) {
    if ( section.expanded() ) {
        wasCollapsed = true;
        section.collapse();
    }
} );
if ( ! wasCollapsed ) {
    api.panel.each( function( panel ) {
        if ( panel.expanded() ) {
            panel.collapse();
        }
    } );
}

#5 @celloexpressions
16 months ago

We should of course also keep in mind that the back button was originally on top of the close button, but was moved to the unified section/panel headers for clarity. We should probably keep that one if we add a conditional back button, but need to be careful about taking up too much space in the top bar with translations if we add another back button next to the close button.

#6 @DragonFlyEye
16 months ago

Space is important. But put me down for basic usability as a primary motivator. Could the icons and buttons maybe be made smaller? And eliminate the text, so that translation is taken off the table (I think?) as a mitigating factor?

#7 @bluestan
16 months ago

Could we just stick the panel/section header area on top when scrolling down? So we can click the back button without scrolling up, and also know which section/panel we are editing.

https://i.gyazo.com/06ee3adb1450a6133b8902da0a321a84.png

Last edited 16 months ago by bluestan (previous) (diff)

#8 @celloexpressions
16 months ago

I like the idea of sticking the header a bit better than adding another close button. But vertical space is a concern - there would need to be a min-height at least. @folletto may have thoughts too, since he did a lot of the UX work for the headers/sliding panels navigation.

#9 @folletto
16 months ago

Thanks for pinging me. I think that both the issue of the ticket and the concern about a too-high header are valid. The current design was formed when this wasn't a constraint, but it's totally correct that in the future it will be more and more relevant.

We might revert to one of the original ideas, which now gains favor I think, which is to have the × convert to ← when the user is down one level. I'm concerned about the user getting out of the customizer just by repeadetly tapping back, but might me marginal. If possible, we can give it a try and see how it behaves.

@folletto
16 months ago

Customizer Back Redesign - 'Thin' i1

@folletto
16 months ago

Customizer Back Redesign - 'X-Swap' i1

#10 @folletto
16 months ago

I made two quick concepts:

  • 'Thin' will mean sticking the bar at the top, making that just slimmer. A very basic approach.
  • 'X-Swap' breaks a bit the separation of concerns in terms of hierarchy, but I feel could work really well.

#11 @melchoyce
16 months ago

customizer-back-redesign-xswap-i1.png feels like a good approach — I think we should test it out and see how it works in practice.

#12 @chriscct7
14 months ago

  • Milestone changed from 4.5 to Future Release

Punting to next release per discussion with @westonruter

#13 @westonruter
13 months ago

See related #22237 (Add keyboard shortcuts for collapse/expand, panel-back, and close to the Customizer)

#14 @celloexpressions
12 months ago

Noting that the x-swap UI was used previously, but we moved away from it for a reason that I don't remember. #31336 should have that discussion somewhere.

#15 @folletto
12 months ago

I can't find the previous mention, but if I recall correctly we preferred the current choice because:

  1. It was a smaller change from the UI we had at the time, there were already lots of changes happening
  2. Users might click a few times on "back" and end up triggering the close by error.

I think we already show a popup message to "navigate away" if one tries to close the customizer when there are unsaved changes. That is already enough to avoid the frustration, it's just a bit annoying since it's a popup, but we can then improve that with a custom UI later.

#16 @lgedeon
10 months ago

I concur that the popup message is sufficient to prevent hitting back one-time-too-many.

Removing the "You are customizing" / "customizing" text is a nice to have and will likely be the route used in Customize Posts plugin, but for core it is probably fine to just change x to < and let the rest scroll away.

#17 @westonruter
9 months ago

Perhaps duplicated by #34343.

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


8 months ago

This ticket was mentioned in Slack in #design by celloexpressions. View the logs.


8 months ago

#20 @paaljoachim
8 months ago

I really like the wireframes from @folletto.
A back button and a preview button next to it looks real nice.

One would easily toggle between edit and preview mode.

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


7 months ago

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


7 months ago

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


7 months ago

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


7 months ago

#25 in reply to: ↑ description @ctienshi
7 months ago

Can i know whether a patch is available for this ticket?

#26 @westonruter
6 months ago

In 38853:

Customize: Add sticky headers for panels and sections.

Includes autoprefixing of CSS.

Props delawski, celloexpressions.
See #35186.
Fixes #34343.

Note: See TracTickets for help on using tickets.