Usability of nested accordions

Question

I have seen some interface designs that nest accordions that show/hide information at more than one level of hierarchy.

The example show also uses both vertical and horizontal hierarchies to add further complexity to the navigation and interaction of information.

I was wondering if this is a common practice for certain types of websites or design patterns, or if it should be avoided because my instinct is that there are some usability issues with multiple levels of show/hide.

For example, if you were to implement a Show All/Hide All functionality, wouldn't it be rather confusing with all the different moving parts for the user to absorb?

Answer 1

I have not seen this pattern employed exactly as you describe. My relevant experience in information-rich webapps stems from enterprise health-monitoring and deployment software, which has a deep navigation hierarchy.

In my opinion, the left-navigation and the main content should not both employ accordions. Left hand navigation is typically vertical, and as you mention, the content area typically dominates the remaining horizontal real-estate.

For that reason, I would suggest something like this:

Answer 2

This is a kind of 2D tree view control and is very rare in use. I have seen such kind of thing using icons instead of labels and that gave a bit better look than this one.

In my opinion, it is better to display the sub-options at a separate place instead of growing the tree.

Answer 3

I haven’t seen this type of control before, but I imagine it would work. All if the information Architecture is logical to the user and the implementation work as expected.

This probably derives from the need to navigate information dense web applications where you need some way to hide things that doesn’t belong to content, such as navigation. It could also be that the development began with a mobile first approach, which later on was implemented on a web page with more space. Rather than applying conventional web navigation, it looks like it was decided to stick with consistency across channels. That is not all a bad thing, because you don’t add to users cognitive load and they feel “at home” with a consistent navigation interface.

Beware that this post is only a personal reflection of the control mentioned in the question. I have found no records of this navigation item before, but it looks promising.