WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 2 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 (4)

customizer-back-redesign-thin-i1.png (33.8 KB) - added by folletto 23 months ago.
Customizer Back Redesign - 'Thin' i1
customizer-back-redesign-xswap-i1.png (35.9 KB) - added by folletto 23 months ago.
Customizer Back Redesign - 'X-Swap' i1
Customizer-sticky-close-button.png (903.7 KB) - added by paaljoachim 2 months ago.
Customizer sticky shows close button.
Customizer-sticky-back-button.jpg (170.8 KB) - added by paaljoachim 2 months ago.
Customizer sticky show back button.

Download all attachments as: .zip

Change History (37)

#1 @SergeyBiryukov
2 years ago

  • Keywords needs-screenshots added

#2 @DragonFlyEye
2 years 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
2 years ago

  • Keywords has-screenshots added; needs-screenshots removed

#4 @westonruter
2 years 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
2 years 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
2 years 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
23 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 23 months ago by bluestan (previous) (diff)

#8 @celloexpressions
23 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
23 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
23 months ago

Customizer Back Redesign - 'Thin' i1

@folletto
23 months ago

Customizer Back Redesign - 'X-Swap' i1

#10 @folletto
23 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
23 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
21 months ago

  • Milestone changed from 4.5 to Future Release

Punting to next release per discussion with @westonruter

#13 @westonruter
19 months ago

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

#14 @celloexpressions
19 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
19 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
16 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
15 months ago

Perhaps duplicated by #34343.

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


15 months ago

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


14 months ago

#20 @paaljoachim
14 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.


14 months ago

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


14 months ago

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


14 months ago

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


14 months ago

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

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

#26 @westonruter
13 months ago

In 38853:

Customize: Add sticky headers for panels and sections.

Includes autoprefixing of CSS.

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

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


2 months ago

#28 @celloexpressions
2 months ago

  • Keywords close added

Now that panel headers are sticky, there is a reasonably-accessible back button in most cases that likely negates the benefits of putting a back button back over the close button. I suggest closing this ticket unless anyone still feels that adding another button would be helpful.

#29 follow-up: @folletto
2 months ago

Now that panel headers are sticky, there is a reasonably-accessible back button in most cases that likely negates the benefits of putting a back button back over the close button. I suggest closing this ticket unless anyone still feels that adding another button would be helpful.

I don't think it negates the benefits. As I mentioned above, the "sticky" option (ideally, paired with a slimmed header, not the full height header) was meant to be a simple one to address the issue at hand, but the "x-swap" design seems a more effective solution if it works as it would reduce complexity as well as some of the confusion.

From the discussion above it also seem that 4 people agreed in going for the "x-swap" approach.

Would be possible to test a patch with the "x-swap" design and see how it performs?

@paaljoachim
2 months ago

Customizer sticky shows close button.

@paaljoachim
2 months ago

Customizer sticky show back button.

#30 @paaljoachim
2 months ago

I just added a Featured Section that shows the sticky close button.

https://core.trac.wordpress.org/raw-attachment/ticket/35186/Customizer-sticky-close-button.png

As the user scrolls the back arrow is hidden and the close button and saved button row becomes a sticky. It is very easy for a user to click the close button when they are finished with specific panels. It would be good to swap the close button to a back button on sticky (when the back button becomes hidden.)

Here is an example with a back button and the description.
https://core.trac.wordpress.org/raw-attachment/ticket/35186/Customizer-sticky-back-button.jpg

#31 @westonruter
2 months ago

  • Keywords close removed

#32 in reply to: ↑ 29 @melchoyce
2 months ago

Replying to folletto:

...the "x-swap" design seems a more effective solution if it works as it would reduce complexity as well as some of the confusion.

From the discussion above it also seem that 4 people agreed in going for the "x-swap" approach.

Would be possible to test a patch with the "x-swap" design and see how it performs?

I'm a little skeptical (mostly because we tried this in an experiment .com and I ended up exiting the Customizer a lot by accident) but I'm always up for us testing a patch and seeing how it works, if someone has the time 👍

#33 @folletto
2 months ago

I think it's skepticism well placed. I'm not 100% sure, but I think the issue happened because before we didn't have a warning when one tried to leave. Now we have it, that's why I'm hopeful that it should work this time. :)

Note: See TracTickets for help on using tickets.