Which UI is more user-friendly and effective: Tabs or Collapsible Panels?

Question

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?

Tabs:

Collapsible Panels:

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

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.