2

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 ?

2
  • 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)?
    – Mark
    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. Jan 25, 2017 at 16:57

1 Answer 1

3

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

2
  • 1
    NNG 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. Jan 26, 2017 at 9:39
  • 1
    I'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_b
    Jan 26, 2017 at 16:10

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.