Tabbed content vs Scrollable list

Question

Let's say I have a web content builder and I am adding a tab element with multiple tabs. This can be also accordion element, or any kind of web element with multiple child elements.

Is it a better solution to have tabs on top, where you can add a content of that child element in it

Or is it better to have the child elements in a list, where you have scroll bar, and you can scroll down?

What is a better UX solution?

Answer 1

You want to know whether to use a tab set or an accordion. Both are forms of progressive disclosure—that is, they reveal more content as needed.

The answer is "it depends." It depends on how much of your audience needs to see the content, and how often. And it depends on how much content you'll be putting on each tab—especially whether the users will be scrolling the tab set off the screen as they read the content. Because, yes, sometimes the content on tabs does scroll. For better or worse, here's an example.

Isaacs and Walendowski wrote about Frequency-Commonality in their book, Designing From Both Sides of the Screen. They explain that content or controls that are used Frequently by Many users should have a visual presence on the screen. Tasks that are Frequent by Few, Occasional by Many, or Occasional by Few can be hidden, to they only appear in context. ("Frequent" means "almost every time" they start the application.)

If many of the readers frequently need most of the content (as opposed to infrequently needing most of the content), and if your intent is that they read through the content continuously, then try the accordion.

A few more tips:

• Make sure you use subheadings so readers can scan, skim, and skip the bits they don't think they need.
• Make sure the collapsing/expanding behaviour of the accordion sections is clear. Provide affordance. According to the currently popular Modernist school of thought that we see in Android, Windows Metro, and to some extent iPhone GUI, make the content the interface. So the headings can be the links that collapse and expand. Glyphs help signal the progressive-disclosure behaviour, as well.

I hope that helps you decide.

In addition to the above, the answer was edited to include information about device dimensions.

Either to Use Tabbed Contents or Scrollable list, it depends upon the following parameters:

• Devices on which the data is going to be presented ( <768 or > 768).
• Available space on the device

Devices < 768: If the data is going to be presented on smart devices that are < 768 (width) than it’s recommended to use collapse able lists (accordions). Or you can use tabs if the number of tabs is <= 3

Devices > 768

If the data is going to be presented on the devices that are > 768 (width) than it’s recommended to use tabs with scroll-able contents to save parent container room. You can read my blog post related to it for detailed study