Vertical navigation UX - Scroll or collapse

Question

Which is preferred?

• Toggleable Expansion (Figure A) - 2nd level only visible if initiated by user (e.g. accordion or expand/collapse)
• Scrollable (Figure B) - 2nd-level always visible, scrolls if overflows

Assuming "depends" is a given, what are cases which one would be preferred over the other. Are there any alternatives to this style of vertical navigation where horizontal navigation is not an option (space is already utilized for another purpose).

A: Toggleable/Collapsable   B: Scrollable/Uncollapse-able

---

Specific case: I have a project for an Analytics Dashboard that utilizes a vertical navigation. In most¹ cases the items will all be visible "above the fold," the exception being mobile users in landscape view (spacial/size reductions occur based on resolution). This may change, though not in the near future. Our UX team has split into two camps: camp A claims "dropdown's are a best practice and will account for future changes" where B prefers "scrollable for the small % where items would overflow, to reduce clicks and user's searching for content".

Seemed like a good topic to get additional input on.

Additional note: This is a toggleable sidenav, it is hidden initially and slides into view from left to right when menu icon/button is interacted with, this is the same from desktop to mobile.

¹ <0.03% of mobile users (assuming less in landscape view) growth is expected here.

Desktop view of actual project navigation (Figure C):

Answer 1

So essentially the question at hand is whether to use accordion menus in your side nav, I think. The answer depends on how your menus are used. This NN article is excellently helpful in helping to answer when to use accordions to organize complex content and when to show all sub sections.

https://www.nngroup.com/articles/accordions-complex-content/

Your side nav is long and complex enough, there's enough information being displayed, to warrant and justify the use of accordion menus. Looking at your screenshot, there's a lot of information there for your users to digest. According to the NN group, there are several advantages to using accordion menus to organize complex information:

• You're allowing users to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore. Giving people control is #3 on the list of the top heuristics for usable design.
• Collapsing the page minimizes scrolling.
• The headings serve as a mini-IA of the page. This allows users to form a mental model of the information available.
• Hiding (some of) the content can make the web page appear less daunting.
• Accordions can be a better alternative to within-page links, which are problematic because they break people’s mental model for hypertext links. People expect clicking a link will load a new page. Without proper cues people are confused about where they are on the site.

However, there are also several major usability issues with accordian menus.

"While accordions sound ideal for presenting complex content, like with many other widgets and implementations, they are not a one-size-fits-all solution. There are major downsides to accordions.

Forcing people to click on headings one at a time to display full content can be cumbersome, especially if there are many topics on the list that individuals care about. If people need to open the majority of subtopics to have their questions answered or to get the full story then an accordion is not the way to go. In this situation, it’s better to expose all the content at once. It is easier to scroll down the page than to decide which heading to click on. (Every single decision, no matter how minor or how easy, adds cognitive load.) The experience feels less fragmented with fewer attention switches."

Accordians also increase interaction cost by requiring additional clicks, and hiding content behind navigation diminishes people’s awareness of it.

So how do your users interact with your side nav?

Since this is an Analytics Dashboard, I'm going to infer that your dealing with repeat users, power users even, who will become very familiar with the interface. Do they click through each of the different sections and sub-sections to look through the data? Sure. But if they're spending even a little bit of time on each page then your menu isn't going to feel cumbersome to have to expand when drilling down. And your product requiring user familiarity (like all reporting dashboards) likely decreases the impact of hiding content behind those clicks.

So in my mind, you're left weighing the cost of the extra clicks to all of the benefits. You'll have a less daunting menu which the user has control over. Your headings and sub-headings serve as a mini-IA allowing users to form a mental model of the information, and you're implementing a cleaner more organized design. In your particular case i would join the group that is voting for accordions.

Also, for what it's worth, Google Analytics uses accordions in their side nav.

Answer 2

For the subcategories, it is better to use collapsable items because it is important to display all the categories first so the user can scan easily the navigation. If the expanded section, you can use scroll if you have a lot of subcategories. Example: https://material.io/develop/web/