Site Editor Navigation Panel - Button to close panel is not clear.

[Addison-Stavlo]

What problem does this address?

In the site editor we can open the Navigation Panel through the template dropdown button:

From here, it is unclear how to then close this sidebar:

If a new user has first opened this panel by the template dropdown, the interaction with the "W" icon as a toggle for it is genuinely unclear. This results in frustration as the user is unable to close the panel.

This confusion and feeling of being 'trapped' with the panel open is further exacerbated by two other behaviors:

• The panel does not close when an item is selected (changing this being tried here -Site Editor: Always use full screen mode #29489 )
• There is no 'esc' shortcut to close the panel while focused. (opened separate issue Site Editor Navigation Panel - Allow 'esc' to close the panel. #29530 )

What is your proposed solution?

Update the "W" icon to animate to an "X" or other close icon when the panel is open.

[mtias]

I wouldn't change the main icon which has the site identity. Maybe we can add the drawer icon somewhere at the top to collapse.

[jasmussen]

We could add a close button:

[annezazu]

This came up as part of the third call for testing for the FSE Outreach program in feedback from @paaljoachim:

I expected when clicking outside of the Navigation Toggle would close it. Or perhaps having an X in the top right of the toggle to close it. Or to click the TT1 theme name might close the toggle. Looking at how for instance closing the settings sidebar in the post editor is done today by clicking the settings gear or the X. I had to click around. I happen to click the blue Add block icon to have the Navigation toggle close.

Edited this comment to add additional feedback from @getdave in the same call for testing:

Selecting a template doesn’t auto-close the Navigation Toggle. Feels like we need to make it clear how to toggle the Navigation Toggle closed without relying on folks knowing that the “W” is the toggle. I shouldn’t have had to “discover” this through trial and error. https://d.pr/i/hEAYpB/7FhGkMMM46

I personally really like the simple close button @jasmussen suggests but wonder if it's visible enough.

[paaljoachim]

Hey @annezazu and @jasmussen

As a user I have seen the X over and over again in the Settings panel, and having the X as Joen suggests in the above comment would be very helpful. It is an intuitive way to close a panel.
I think we should go with the X and try it out and see how it feels.

Btw
I noticed now that I had to click the W again to close the Navigation Panel.

[getdave]

I personally really like the simple close button @jasmussen suggests but wonder if it's visible enough.

💯 this is a quick fix and would be a big win for UX.

[carolinan]

This feedback was received during a contributor day at Yoast on April 9:

I’m not sure how I can exit the Site Editor. The W menu opens the templates sidebar, that usually takes me out to the admin. There’s no clear Exit option otherwise. Ah, I clicked backwards a few times at the top of the W menu and then there’s the option to go to the Dashboard I guess.

[getdave]

@jasmussen I've created a proof of concept PR. Implementation will need improving but it should give us a sense of how this interaction might feel. Let me know if you'd like me to iterate.

[mtias]

I agree we need some work here, but I don't want to rush the "x" which is not in itself entirely clear: would it close the editor? Collapse the sidebar? It's ambiguous given the current state of the IA in the sidebar. We need to devote some attention to the top area of the sidebar before proceeding with changes.

[getdave]

Ok I'll leave this for now then. I'm hopeful we look to address this soon because the site icon is, IMHO, very much unclear as a toggle UX.

I agree we need some work here, but I don't want to rush the "x" which is not in itself entirely clear:

Just noting that we are already using x as a "close" UX in the list view panel.

[youknowriad]

I'm going to close this issue now that we have "browse mode" which is a bit different in the sense that it's in "view" mode by default and you can now click the "canvas" to enter "edit" mode