5

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

Collapsable Nav Scrollable Nav


Specific case: I have a project for an Analytics Dashboard that utilizes a vertical navigation. In most1 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.

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

Desktop view of actual project navigation (Figure C):

Actual Project Screen grab of full navigation

  • 1
    As you've pointed out, the correct answer is 'it depends'. So, with that in mind - and considering Stack Exchange is designed around practical, answerable questions based on actual problems that you face -, what situation do YOU have at the moment? We can advise you what route to take in that situation but as-is it's a bit broad and could lead to loads of individual suggestions for particular situations rather than one answer solving the problem. – JonW Jan 17 at 12:34
  • 1
    Updated Question. – darcher Jan 17 at 17:12
  • Are your users primarily accessing this interface via desktop or mobile? – ke11en Jan 17 at 18:00
  • <0.03% of mobile users (assuming less in landscape view) growth is expected here. ...That said, it's likely, even probable, this includes test case pollution and that number is even smaller, though I'm uncertain; large majority are desktop viewers. – darcher Jan 17 at 18:28
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.

enter image description here

  • @darcher, i'm curious where your team landed on this. – ke11en Jan 24 at 15:54
  • 1
    We went with expand/collapse, it still has the scrollability, but there is a "expand/collapse all" toggle, which is stored via localstorage, for users that prefer it expanded. – darcher Jan 28 at 14:18
0

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/ enter image description here

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.