Not sure if the collapsible panels have a different name but I have seen them referred to as rollouts. I have used many applications that use one or the other or both, but I am wondering if there are resources that talks about the effectiveness of each and which is faster to use and more user-friendly?


enter image description here

Collapsible Panels:

enter image description here

Or both (ignore the red highlights — the screenshot was originally for a different purpose):

enter image description here


I always go by the rule Chapter is to Tab. Paragraph is to Collapsible Panel.

When you have 2 hierarchies, the broader of the two levels are tabs and the other ought to be for collapsible panels.

For complex applications, there are more than 3 levels. Whatever you do, don't implement the same UI division to the next immediate generation. This means that if level 1 is tabs, level 2( its immediate children) should not be tabs but something else. I see that the first screenshot violated this "rule". Remember the good old outline:

I. Main Point 1
   A. Section 1
   B. Section 2
II. Main Point 2
   A. Section 1
   B. Section 2
      1. Part 1
      2. Part 2

Otherwise, three levels implemented by the same UI will look like

I. Main Point 1
   I. Section 1
   II. Section 2
II. Main Point 2
   I. Section 1
   II. Section 2
      I. Part 1
      II. Part 2

You don't want this.

But what if there is only 1 level? Which one is better? Keep in mind that you can only see one tab content at any one time while you can expand/collapse multiple panels.

I have the tendency to use collapsible panels when I'm working with one entity with many properties I can categorize. For example, when working with a patient (in medical billing software), name, address, SSN, and contact info will be under one panel, and their insurance coverage will be in another panel. Medical staff often want to see all panels open most of the time and collapse them (for less content) when they're having mental fatigue.

For tabs, you must answer "yes" to the question "Can the user work in one tab without needing to see information in another tab?" A "no" means definitely don't use tabs. A "yes" means possible tabs, but you'll have to check many other things.


Both tabs and collapsible panels are ways of grouping controls. Both have advantages and disadvantages.

Advantages of tabs

  • Easy to understand, easily discoverable, widespread and thus likely to be recognized by users of other products
  • Less cluttering because only the contents of one tab is visible at any point in time, separating each group of controls visually

Advantages of collapsible panels

  • Contents of two or more groups can be visible at the same time
  • Easily customizable to meet a users needs and/or available screen space
  • Can easily be mixed with docking mechanics

In short, most novice users will have an easier time working with tabs. Less clutter means less distraction. Expert users will dislike the lack of customization and more mouse clicks involved if said controls are accessed often. This is especially true whenever the controls are only used to display a state rather than its modification: Tabs would then need mouse clicks to show different controls while collapsible panels require none at all.

This explains why collapsible panels (and dockable ones) are mostly found in products designed for expert users, such as development tools (IDEs) and high-end graphics software, and mostly used for groups of controls that are very likely to be used repeatedly and in combination.

Software designed for novice users or areas in a product that are not likely used again and again (such as program preferences) mostly use tabs.

If you have a hierarchy of grouped controls, it is usually a good idea to use different controls for each hierarchy level - so avoid tabs inside of tabs or group boxes inside of group boxes. Your first picture shows three levels of nested tabs (Guides -> Multi -> Smoke) which makes it difficult to tell which control depends on which tab selector.

  • Thanks but as someone who uses all those apps shown above for years and still do, you didn't mention that collapsible panels require alot of scrolling and hunting for parameters. Also to associate collapsible panels to high-end apps is a false assumption IMO. The first app is a very high-end state of the art software just like the other 2 shown, in fact better in a lot of ways. Just my opinion. – Joan Venge Feb 23 '14 at 22:07
  • 1
    @JoanVenge Scrolling and hunting aren't intrinsic flaws of collapsible panels. Scrolling occurs when the combined size of all expanded panels exceeds the available space. By collapsing them they can adapt to the user's needs and available screen space, something that group boxes (and tabs) can't. The hunting is caused by the design of the specific product, and might even be slightly worse with tabs, since you cannot ever "hunt" through all options without clicking a lot. Also, I wasn't questioning the quality of any of the pictured products - only pointing to a specific flaw in one of the UIs. – Hazzit Feb 24 '14 at 0:58
  • @Hazzit's assertion that collapsible panels are usually found on expert-level software doesn't mean that tabs are not found on expert-level software, btw. Hazzit is right that most consumer-level software doesn't use collapsible panels and that you'll see it more often on expert-level software. – Drew Beck Feb 24 '14 at 5:09

Based on the screenshots, I assume when you say collapsible panels you mean drop-downs or drop-lists.

Here's a research article about tabs by NNGroup: http://www.nngroup.com/articles/tabs-used-right/

Summary: 13 design guidelines for tab controls are all followed by Yahoo Finance, but usability suffers from AJAX overkill and difficult customization.

Here's a research article about drop-downs by NNGroup: http://www.nngroup.com/articles/drop-down-menus-use-sparingly/

Summary: Drop-down menus are often more trouble than they are worth and can be confusing because Web designers use them for several different purposes. Also, scrolling menus reduce usability when they prevent users from seeing all their options in a single glance.

  • Thanks, by drop downs do you mean comboboxes? Because that's what I am used to when I hear drop downs. If so, no I meant a whole set of controls that appear/disappear when you toggle the button. – Joan Venge Feb 22 '14 at 20:19
  • 1
    Yes, we are talking about the same UI control. – Chairman Meow Feb 22 '14 at 20:22
  • @JoanVenge: the red rectangle in your last image is fairly distracting, considering it's highlighting something that's unrelated to the question. – naught101 Feb 23 '14 at 3:30
  • Actually I didn't take that screenshot except the first. Should I try to find a different one? – Joan Venge Feb 23 '14 at 3:56

Collapsible panels are more valuable when combinations of settings from various panels are important.

If settings are totally orthogonal or independent - that is, the settings from one group don't affect the settings from another group - then tabs are fine (and so are any other ways of showing/hiding groups of settings).

If the settings from various groups do interact, and especially if the settings from each group affect the settings from many other groups, then collapsible panels are much better, since various combinations of groups can be shown and manipulated at the same time, according to what the user is interested.

  • Thanks but then you have to continuously scroll though which the tabs don't have that issue. But with tabs you would have to switch tabs of course. – Joan Venge Feb 23 '14 at 3:57
  • @JoanVenge: I would take my answer in combination with Michael Caruso's answer: use tabs for top-level independent super-groups of settings. Then use collapsible panels for inter-dependant groups of settings. – naught101 Feb 23 '14 at 3:58

Whether to use tabs or collapsible panels comes down to how people use your software, or how you want them to use it. If you can figure out likely workflows and you can group your functions intelligently, then you can maximize usability using a well-placed combination of tabs and collapsible panels.

Collapsible panels are great when you're able to use them to set up your interface for maximum productivity. I use them in Lightroom all the time — at different stages of processing photos I'll have different tools exposed so I don't have to wade through things I don't need to get to what I want.

The collapsible panel model breaks down when I show/hide panels a lot, though. My cognitive map of where each control is on the screen is constantly incorrect and I have to actively grok each section to figure out where the control I want is. The model works best when I have clear workflow needs that allow for certain panels to stay collapsed.

If, however, likely workflow don't follow any particular patterns (people might next need a control from a wide range of sections at any point in their workflow) then I'd recommend tabs — placement of category controls is predictable so you don't need to hunt for the control that you want each time.

In conclusion, interfaces are a land of contrasts.

  • Yeah when the number of controls are in the range of 10s of thousands then, showing them all at once doesn't work. – Joan Venge Feb 24 '14 at 6:11
  • Absolutely. The future of complex interfaces is, I think, still wide open and I haven't yet seen a compelling solutions. A set of thousands of possible controls could map really well to a voice control interface, for instance: speak the name or category of the control and that tab/panel is revealed. – Drew Beck Feb 24 '14 at 6:38
  • 1
    Actually I have seen some voice control apps for the 2nd app in those pics, and it wasn't very good. It was annoying in an office but also wasn't very accurate and you think faster than you talk. So I think controlling with thoughts would be much better IMO :) – Joan Venge Feb 24 '14 at 7:45

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.