Nav Unification - determine best UX route for managing menu section open/closed state.

[getdave]

Following discussions, the definition of this Issue has changed. The question now is:

Which UX approach for managing menu section open/closed states most closely matches WPAdmin whilst still providing an acceptable user experience (given that Calypso is a single page application which does not have full page refreshes to mask UX issues and therefore cannot be a 1:1 match with WPAdmin).

For a full discussion around this see here.

---

Old Issue Description (ignore)

We can't toggle the sections open/closed. I think this is due to the top-level items now having a dual function of:

1. Navigating to a route.
2. Toggling the menu section.

[getdave]

Hi @sfougnier. Looks like we have an Issue whereby you can no longer toggle (expand/collapse) individual sections because clicking the top-level item causes you to navigate to the section it represents.

We cannot simply remove the navigation functionality from the top-level because some Plugins register menu items which rely on this behaviour.

Is there a way we can think of to solve this situation or do we just accept it as part of the new experience?

[frontdevde]

Reposting PR comment here for input:

General question on this: Does this behavior need a fix or is it a "feature"? I know the current navigation in Calypso allows for toggling the sidebar. That said from what I can tell it is currently not possible to toggle sidebar menu sections in wp-admin right now? In terms of unifying the experience, do we prefer the toggle? If so would we want to introduce it to wp-admin as well? Personally, I like the ability to toggle the sidebar items.

[ghost]

I don't think we should deviate from the existing pattern established in wp-admin, wherein it's not possible to collapse a menu item when you've selected and are viewing a corresponding screen. I'm not sure adding that functionality would be intuitive enough in the wp-admin UI, whereas in Calypso we have icons to indicate collapsibility. With that said, I'd be curious whether there's any data to support going one way or the other, but I know we are trying to stick to core functionality as much as possible and I wonder if this is something to be explored in a later version.

We also have collapsibility for the entire sidebar bar, which is obviously no substitute, but I wonder if adding even more collapsible items without looking at how it impacts the larger picture is right at this point.

@lcollette @davemart-in what do you think?

[davemart-in]

I don't think we should deviate from the existing pattern established in wp-admin

+1 from me. The primary goal of this unification project is to align with WP core so that we are no longer forking the navigation experience on Calypso screens.

[getdave]

Thanks for your feedback @sfougnier and @davemart-in. Much appreciated.

I should probably be clear that if we don't do this then once you open a section you can never close it again without reloading the Calypso UI (hard refresh your browser). That causes two problems:

1. The navigation becomes very very tall.
2. The navigation quickly becomes very overwhelming (this is a common user frustration with the existing menus as it is!).

What I'm suggesting is that we need to allow this toggle functionality to provide a better user experience. Granted it deviates from WPAdmin a little, but it will never be 1:1 because WPAdmin is not a single page application - it has full page reloads to mask all of these little UX issues.

If you recall, when you navigate to a new section, WPAdmin closes all other sections other than the "current" one. However, WPAdmin "benefits" from a full page refresh between each navigation which masks what would otherwise be pretty janky user experience (ie: items closing and opening causing the nav to jump around underneath your cursor).

I appreciate we're trying to align with Core and I'm trying to consider that at all times. However, I'm not sure forcing users to have all sections remain open once they have been navigated to (ie: not allowing the user to close) is going to provide a nice UX.

Perhaps some good old user testing and feedback will solve this conundrum for us? Personally, I don't think the experience is good enough as it is.

That said, I'm happy to leave it as it is if y'all feel otherwise.

Thanks again.

[davemart-in]

As always, I very much appreciate your attention to detail @getdave!

There are probably a half dozen improvements that I'd love to make to the wp-admin left nav design:

• I like this idea of yours
• I'd love to get rid of that little inverted triangle at the far end of the current nav item
• I'd love to update the icons to something more modern
• I'd love to introduce better top level categories like we have on Calypso now
• I'd love to experiment with combining everything under Design, Tools, and Manage into a single destination with a customer home like landing page screen when you click into it (thus reducing the number of links on the primary nav)
• I'd love to increase the width of the left nav slightly

But if we make any of these changes on Calypso screens, we're going to have to make the same changes to wp-admin screens. Rather than proceeding to fork the experience with any of these changes on WP.com, my proposal is that we A) get the v1 nav unification launched and then B) push for these changes in WP core, at which point we could adopt them on both wp-admin and Calypso screens without forking anything.

[getdave]

Thanks @davemart-in. I completely understand what you are saying.

I want to be clear that I'm definitely not attempting to argue against your core rationale here. I accept we need to launch an MVP for the unified navigation that mirrors WPAdmin as closely as possible. I also understand we cannot change the way WPAdmin navigation works at this stage.

What I'm attempting (poorly) to communicate is that the navigation we are creating in Calypso may look like WPAdmin, but it is fundamentally different because it resides within a single page application which does not reload. Therefore, when the unified navigation is displayed in a Calypso context there are new and additional UI considerations that we need to be aware of that do not apply to WPAdmin.

I'm suggesting we need to consider/address some of these issues in the Calypso version of the unified navigation in order to avoid providing a poorer user experience than what we have in either:

• WPAdmin core.
• The existing Calypso navigation.

To return to this specific example about menu expanded/collapsed state toggling. I have recorded x2 screencaptures to better illustrate how a lack of menu toggling causes a poor user experience on the unified navigation on Calypso which is not present on WPAdmin.

Both the screenshots below are taken on the current master branch:

Calypso

• There are no full page refreshes on navigating to a new section. This means we need to manually manage the UX of the navigation's visual state without the masking effect of the page reload.
• Navigating between sections leaves previous sections expanded.
• The menu gets taller as more sections are navigated to (and remain expanded).
• Some menu items disappear "off screen" when expanded due to lack of vertical screen real estate.
• The menu becomes increasingly overwhelming as you navigate due to the sheer visual weight of the expanded menu items being displayed.

Note: please ignore the "jumping" of the navigation as we click around. This is due to perf issues related to the "Notices and Nudges" which I'm addressing elsewhere.

WPAdmin

Now let's compare this with what we have in WPAdmin:

• Each click on a menu item causes a full page refresh in the browser. This masks a number of UX issues.
• Each navigation leaves only the current section expanded. The previous sections all close.
• All menu items remain "on screen".
• The level of overwhelm is keep to a minimum due to the auto-collapsing behaviour.

Our options

We need to decide on one of the following mechanics for the Calypso version of the unified navigation

1. Auto collapsing

On navigating new items are auto expanded and previous menu items are automatically collapsed

Pros

• Closely mirrors WPAdmin mechanic - albeit without the full page refresh to mask the associated UX issues.
• Reduces nav overwhelm due to menu items being auto-collapsed when not in use.

Cons

• Auto-collapsing menu items may cause the navigation to shift/jump underneath your cursor. This is poor UX. (note: this is not a problem on WPAdmin because the full page reload masks this).

2. Remain expanded (current behaviour of prototype)

On navigating, menu items are expanded and remain open indefinitely. There is no way to toggle menu items closed once you have navigated to a section.

Pros

• Avoids navigation jumping underneath cursor (see "Cons" in #1 above).
• User not required to manage navigation expanded/collapsed state.

Cons

• Navigation becomes overwhelming very quickly.
• Doesn't exactly mirror WPAdmin because previous sections remain open.
• User has no control of toggle status of menu items. Powerless!
• Some menu items may go "off screen" when other menu items are expanded.

3. Expanded with toggle controls

On navigating, menu items are expanded and remain open. However, a toggle mechanic is provided to allow the user to manually collapse/expand menu sections at will.

Pros

As per #2 above but with the addition of:

• User has a measure of control of toggle status of menu items.
• User can choose to reduce nav overwhelm by collapsing unused sections.

Cons

As per #3 above, but with the addition of:

• User has to manually think about managing the toggle status of the menu. Possibly too great a burden on the user?
• There is no current visual indicator to distinguish between clicking on a top level menu item to navigate or to toggle. In code we cannot know what the user intends so we must do both. This could become confusing.

---

I appreciate this might seem like me repeating myself, but I felt it was important to be completely clear on the issues and how they stack up against each other.

Again, I'll restate that I'm not suggesting we intentionally deviate the unified nav between Calypso and WPAdmin. I just want to ensure we address the inherent UX issues we will introduce if we follow WPAdmin mechanics to the letter.

[davemart-in]

I appreciate seeing this thorough breakdown of our options. It's very helpful. Thanks @getdave!

From my perspective, we have 3 equally bad cons amongst these three proposed solutions.

Auto-collapsing menu items may cause the navigation to shift/jump underneath your cursor. This is poor UX.

You're right, having the nav shift after you click a menu item is definitely not ideal.

Some menu items may go "off screen" when other menu items are expanded.

This is not a great experience either and you're right, it doesn't match what we have in wp-admin.

There is no current visual indicator to distinguish between clicking on a top level menu item to navigate or to toggle. In code we cannot know what the user intends so we must do both. This could become confusing.

I see this as a blocker.

The category headers in Calypso work because they aren't linked:

If these Calypso category headers were also linked and each time you clicked them you toggled the category and navigated to a different page I think it would lead to an unexpected experience for most people.

None of these stand out as excellent solutions from my perspective.

A Fourth option:

One possible fourth option might be to simply never expand the sections when on Calypso screens. So if you click "Posts" it would highlight in blue, but not expand. You'd then have to navigate to sub pages through the pop out menu exclusively.

Accessibility-wise we're still good because tabbing through the wp-admin menu cycles through the sub-menu options as well:

@getdave and @sfougnier curious to hear your thoughts.

[rickybanister]

Is it possible to implement option 1—auto collapsing 'quickly' so that we can play with it?

I'm not entirely sure that our single page app behavior will feel that different from the full page refresh behavior of wp-admin. I'd love to play with that before deciding it's bad UX. Any awkwardness might perhaps be improved with a subtle, almost imperceptible animation within the sidebar.

[cpapazoglou]

Can we maybe collapse (with an animation) the inactive section when the mouse is out of the sidebar area?
This will result in collapsed inactive sections and the User still being able to click a submenu of the active section easil

[davemart-in]

Any awkwardness might perhaps be improved with a subtle, almost imperceptible animation within the sidebar.

I suspect if you:

A) Open a section lower in the nav and then
B) Open a section higher in the nav

this will be true. But if you:

A) Open a section higher in the nav and then
B) Open a section lower in the nav

The section header you were hovering over will almost certainly slide up out of the way of your cursor (equal in height to the height of the section which closes above).

Can we maybe collapse (with an animation) the inactive section when the mouse is out of the sidebar area?

I like this creative solution better if it's technically doable.

[ghost]

Is it possible to implement option 1—auto collapsing 'quickly' so that we can play with it?

+1 to this. In theory, option 1 sounds like the best of the routes but I think it would be good to be able to play with it.

One possible fourth option might be to simply never expand the sections when on Calypso screens. So if you click "Posts" it would highlight in blue, but not expand. You'd then have to navigate to sub pages through the pop out menu exclusively.

Not sure about this option, it seems to counter the goal of the project in that it will create a noticeable deviation in Calypso from the wp-admin experience. I'm also not so sure from a user experience perspective about the idea of not being able to see what subpage you've selected when looking at the sidebar. Although it might be hard to make that call without seeing it in action.

[lcollette]

Thanks, @getdave, for so clearly articulating and illustrating the poor user experience in the current state! I appreciate your thoughtfulness and consideration for our users.

I agree with @sfougnier and @rickybanister that option 1, in theory, seems most promising. I think it's important that we prototype our potential options and validate assumptions before we move forward with a direction. There's a solution to be found if we iterate!

[getdave]

Thanks @sfougnier @davemart-in @lcollette @rickybanister @cpapazoglou for your input here. I'm going to spin up option 1 for you all to play with. I'll then try implementing @cpapazoglou's suggestion, namely:

Can we maybe collapse (with an animation) the inactive section when the mouse is out of the sidebar area?
This will result in collapsed inactive sections and the User still being able to click a submenu of the active section easil

[davemart-in]

Perfect. Thanks @getdave!

[getdave]

There are now two PRs with opposing approaches:

1. Enable toggling (open/closed) of individual sidebar menu sections
2. Auto-collapse all sections on new menu item click

I'd now greatly appreciate guidance from Design on which route feels most appropriate in the context of the wider discussion which I outliend above (ie: Calypso !== WPAdmin).

Note that #2 doesn't yet implement @cpapazoglou's suggestion for animation. As this is additional work I won't implement this until we are clear we want to further pursue the "auto collapsing" route.

[ghost]

My vote is for the 2nd approach: Auto-collapse all sections on new menu item click

• Auto-collapsing feels like the most expected behavior when I click through to other pages.
• The auto-collapse interaction mirrors the current behavior in Core, following the project goals more closely.
• I don't know that the ability to toggle menu items open/closed is as intuitive since we don't have iconography that indicates that functionality here.

What do you think @lcollette @rickybanister ?

[rickybanister]

Yup, agreed, I commented on that PR and also had a question about why the sidebar nudge flashes on every page update—if we could stabilize that flash the sidebar will feel less glitchy and the interactions will be improved.

[davemart-in]

also had a question about why the sidebar nudge flashes on every page update—if we could stabilize that flash the sidebar will feel less glitchy and the interactions will be improved.

100%. @getdave can we just account for the height of the nudge whether it shows or not? Meaning, show a blank space of like 40px if there is no nudge? That way there is no need to slide everything down when the nudge loads.

[getdave]

Just to note that the jumping of nudges and notices is a separate problem that I'm addressing elsewhere in other PRs. Unfortunately, it's much more complex than a placeholder (good suggestion, but I tried that and it didn't work!) but it is doable.

I promise the jumpiness due to the Notices and Nudges will be resolved! 😄

[getdave]

Thank you to everyone for their time and patience with this. The auto-collapse solution I've just merged is a lot better than what we had in master plus it aligns as closely as possible with WPAdmin.

I'm not saying it's perfect and if, once we sort out the jumping caused by Notices/Nudges we feel there's room for improvement, let's circle back and make some enhancements.

[davemart-in]

Sounds great. Thanks for trying out a couple of different options @getdave!