Should an opened sub-menu collapse when the user opens other sub-menu?

Question

Take for example Google Material design website, that has big sub-menus in the sidebar's menu.

The sub menus are closed on page load.

Material design
Motion
Style
Layout
...

Clicking on a menu title expands its sub-menu

Material design
    Introduction
    Environment
    Material properties
    Elevation and shadows
    What's new
Motion
Style
Layout
...

When clicking on a different menu title, should the opened sub-menu collapse or not?

Option A:

Material design
Motion
Style
    Color
    Icons
    Imagery
    Typography
    Writing
Layout
...

Option B:

Material design
    Introduction
    Environment
    Material properties
    Elevation and shadows
    What's new
Motion
Style
    Color
    Icons
    Imagery
    Typography
    Writing
Layout
...

In Option A (which might animate) the user's cursor would be over some different element after the sub-menu collapses (not good). Displays the menu in a cleaner way, without the need to scroll.

Option B does not trigger undesired actions (Option A somehow triggers an action). The user might have to scroll to see the just-opened sub-menu. The user might have to close the opened sub-menu to see clearly what he just opened.

What is the user's expectation, which option facilitates user's task?

---

Edit:

On a side note I just read this on Navigation patterns - expanding navigation drawer:

Selecting a collapsed section expands that level in-line, hiding all levels outside of it.

This looks like Option A. However this is not applied in the same website, that applies Option B.

Answer 1

When user triggers an action, let it happen. Don't initiate another action simultaneously unless it behaves like toggle/switch.

Explanation: Here user clicks on one of the categories (Material design, Motion, ...). It leads to the sense that user wants to explore more about that category. It does NOT mean that he/she wants to close currently opened categories. So, it is better to keep open.

But wait! My answer is not option B (as mentioned in the question) as it has got some issues.

We see long list of links under components, patterns which requires more scrolls to switch across the categories. But It does not hurt me much.

What hurts me more is this:

Even I'm UX designer, I feel confused where to search do/don't of navigation in material design.
I ask myself "Is it under Component or Pattern?"

The problem with categories is category itself. Since categories are set by someone else, It takes time to set in user's mind. I think the navigation here should work like table of contents of a book.

So, It is better to keep all open always.

In short, I prefer option B rather than option A. Also I believe option B can be more effective.

Answer 2

Yes! it should close. Unless there is direct relation between the submenu items like if user would like to compare or interchange elements(i.e. they're customizable) or you can drag and drop things etc.

There are n number of reasons for Submenus to close, like

1. It will take up less space. (Less chances of getting into scrolling issue)
2. Less chances of user getting lost within so many options (Less cognitive load)
3. Less number of steps for user to get back to initial state (i.e. to close all opened menus)
4. Would be even more difficult if there are 2 or more levels inside a menu (not recommended anyway- Point 4)
5. Hard to have flexibility with text copy (lengthy text) given less space.

and many more...

And as far as user's expectations are concerned, as most of the Submenus at present collapse automatically as soon as one clicks the other, users have formed a mental model of the same. They would expect the submenu to close in almost all cases.

Also, this question was asked earlier as - Should previously opened submenu collapse automatically upon opening a new sibling?

Answer 3

What you are describing on Option A is an accordion menu. It is a valid widget interaction in our widget toolbox, which is ideal in certain situations (as described by @Harshit Choudhary)

https://developer.yahoo.com/ypatterns/navigation/accordion.html

An accordion (or accordion menu) is a grouped set of collapsible panels that provides access to a large number of links or other selectable items in a constrained space.

Each inlaid panel may be individually expanded (usually leaving the rest collapsed), generally by hovering on or clicking the title of (or an expand/collapse element on) the specific panel, to display a single subset of the options.

http://ui-patterns.com/patterns/AccordionMenu

Usage

• Use when you want the benefits of a normal sidebar menu, but do not have the space to list all options.
• Use when there are more than 2 main sections on a website each with 2 or more subsections.
• Use when you have less than 10 main sections.
• Use when you only have two levels to show in the main navigation.

Your Option B will potentially force users to scroll just to see all the open menu groups, and if so would degrade the user experience, so this is all depended on the quantity of menu groups and sub menu items.

You will need to make sure the menu group labels are clear and explicit because these are the only wayfaring cues to the user. One of the challenges for an accordion menu is the sub menu items are hidden so a user needs to make an educated guess about where to find something.

Answer 4

Yes and no, but in this specific case it should close.

Other answers have argued from a standpoint of user expectations, but I'd say it really comes down to what affordances the user should be presented with, and what decision making the context of two opened menus helps.

In this case you have a linear documentation with different sections, the submenus working as direct links to subsections. While a user might jump from one subsection straight to another subsection, there isn't a case for having to see both subsections at the same time in order to perform a decision and jump within this linear hierarchy.

Opposed to this example, imagine a sidebar menu with submenus of different types of filters on an e-commerce website. In that case, it is clearly a benefit to have both submenus open to manipulate, for example, filters for price, and another for delivery times. The context of both submenus affect the main information and decisions the user makes, so any opened menu should remain open when an additional submenu is required for decision making.

Answer 5

Make it Simple

Just collapse the menu whenever the user clicks or taps an area outside the menu.

(the same as happens in any other application).

This is generally how users expect menu UI to happen - there shouldn't be a need to artificially leave a menu open after focus has left it.

Answer 6

It is not necessary. In fact user will remain the feeling of knowledge of own location of the menu remain visible.

When we hide something from a user, we take away the awareness of the hidden material.

The exception we be a menu with a lot of content disturbing users attention.