As a guidance how many levels should an accordion have ?
I have an issue of working on a site that currently does as deep as four levels. resulting in inconsistent interaction styles with each accordion item.
Thoughts ?
-
A couple questions: Is this accordion being used as a primary navigation? What is the default state(open/close) of the accordion?Are the inner-most levels accessible any other way(are they listed on the parent page)?– MarkCommented Jan 25, 2017 at 16:25
-
The accordion is being used to display content. I.e. Part 1, Part 2 ...... Part 9 of an article teaching people about issues concerning running a business.– Dominic FrancisCommented Jan 25, 2017 at 16:57
Add a comment
|
1 Answer
Only one. Nested accordions have an incredible amount of friction and are very difficult to use for people, specially when they're not aware that there are other levels inside the tabs. But even then, expanding/collapsing behaviors will result in users losing track of where they are, what did they click and how to get back to previous steps in the flow. In short, everything will be extremely confusing and annoying.
If you're going to use steps, maybe you should consider to use a stepper, or just plain text with no additional UI. If needed, you can use links and anchors. Very simple and basic, but it works
You can read more about when to use (and when NOT to use) accordions at NNG
-
1NNG was on my list of examples. Loving the example of the stepper in both its horizontal and vertical forms to represent progress and the appearance of more content. Commented Jan 26, 2017 at 9:39
-
1I'll never forget the first time I saw an accordion widget in the mid-1990s, in Microsoft's new mail client (then called Exchange, before it became Outlook). It was rolled out to our office PCs overnight, and next morning, literally nobody could find their Inbox because it was hidden somewhere in the accordion sidebar, and support was inundated. I've hated them ever since ;)– calum_bCommented Jan 26, 2017 at 16:10