2

I'm designing for an enterprise-level software. The software is a repository for different departments to store their files. The content types are Dashboard and Reports but inherently both of them are PDF files. (I know this is confusing, but sometimes you have to work with what you inherit.)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

EDIT

Thank you for the responses. I can see an agreement in the suggestions to reduce the cognitive overload by keeping only one accordion open at a time. However, what happens when there long list of accordion blades? It works alright for the first blade but I'm unsure how the 8th blade will function? Hide the top blades?

mockup

download bmml source

What should be the interaction? User clicks on 4, should the one on top hide or show below?

I'm more interested in the reasoning behind the interaction.

4
  • when you say blades, are you talking about the items, sub-items or both?
    – Devin
    Jul 29, 2016 at 1:40
  • @Devin I'm talking about items. The accordian blades that open and close to show the items inside them. In this case the highlighted one.
    – Nodnin
    Jul 29, 2016 at 15:30
  • 1
    OK, then the same answer applies, at least for consistency: all blades have to be visible at all times since they're the taxonomies users need to see for reference. HOWEVER, if you need to scroll vertically in order to see all taxonomies, then it's possible accordions aren't your best choice for such IA, and a collapsible menu bar is a better fit
    – Devin
    Jul 29, 2016 at 17:42
  • I agree that a accordian might not bethe best choice in this situation. HOwever, this is what the deisgn library contains and we need to comply to that. Basically the rule will stand that only one accordian is open at both the times. and then the list will be scrollable.
    – Nodnin
    Jul 29, 2016 at 18:37

2 Answers 2

4

The best practice is to HIDE the currently open level once you click on another accordion tab. The reasoning is quite simple:

  • Reduce cognitive load: suppose you have catA-->item1,item2,item3,item(n) open and then you click catB-->item1,item2,item3,item(n). If you keep catA open, then you're forcing your user to discriminate between the items of different categories, adding a lot of friction and confusion, specially if user opens more than one tab.
  • Avoid scrolling: the main reason for accordions is to save space in an otherwise long list of items/content. If you keep the tabs open, you'll be forcing the user to scroll down, making the whole accordion purpose useless

Be aware that if the list is not enough to overflow the boundaries of the screen, it's better to keep all items at sight, unless you need to hide them because of the first reason above: to reduce cognitve load

A caveat

There's a possible scenario when you may want to keep more than one tab open at the same time: when the user's workflow shows they constantly jump between items of different tabs. While this could be avoided with proper Information Architecture, it's true that sometimes you can't avoid it (like when you inherit an existing system, just as you said) .

In this case, I suggest to have a clearly labeled checkbox where users may choose to keep tabs open. Some sites do this at tab level, as in CatA-->checkbox,CatB-->checkbox,CatC-->checkbox but in my opinion it's better to go for an "all or nothing approach" and have only one checkbox. If checked, then multiple tabs can be opened at once.

1
  • Thank you for your response. I've updated the question a bit
    – Nodnin
    Jul 28, 2016 at 20:14
1

If:

  1. there is any reason the user might need to compare the contents of two accordion areas, or any other reason they'd have need to see more than one at a time, and
  2. the quantity of content within each accordion block is small enough that there is enough room to usefully open more than one section,

then it is reasonable to allow multiple accordion sections to be open simultaneously.

In all other cases, opening one accordion section should collapse other sections.

(You could maaaaybe fudge the second point by making each accordion section overflow:scroll above 50% viewport height. The first point is the more important one.)

(In response to the question update: a large number of accordion sections suggests more strongly that only one should be open at a time: the space taken up by the extra headings make it even less likely that there will be enough room on screen for useful comparisons between two open accordion sections.)

1
  • Thank you for your response. I've updated the question a bit
    – Nodnin
    Jul 28, 2016 at 20:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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