42

What is difference between accordions and tabs from the UX point of view?

This is repost from this thread on SO: https://stackoverflow.com/questions/5690589/difference-between-accordion-and-tabs

(I know accordions are usually vertical, while tabs horizontal, but I could imagine both of them in opposite orientations)

Right now it feels like accordion is better suitable for touchscreen-devices.

4 Answers 4

26

Good question!

  1. Tabs have unlimited height and they can span a number of screens, while an accordion must fit on one screen. It's not a technical limitation, of course, but it would be a terrible idea to make an accordion that expands away out of my field of view, because then I'd have to scroll down to click the next "bar", just to have it expand up and then scroll back up in order to view it.
  2. Tabs can have different sizes (I think it's bad practice - unless they're so large that you don't notice them having different size - but they can), and accordion elements are bound to the same size. You could potentially make an accordion that changes it size for different elements, but I think such people should be flogged (edit: ok, unless it's done really well).
  3. With tabs, your means of navigation are located very closely to each other and they always stay on the same spot. You can go through them quickly. With accordions, every time you click, you change the locations of the navigation triggers and you move them way to the other side of the control.

EDIT

4 - Accordions are more "experiential" - you can animate the transition between the slides easily, it's fun and it makes sense. Animated transition between tabs is very rare, it's never done with "traditional tabs" - the ones with the actual tab label at the top - and it's usually just images replacing each other, not the cool slide effect you get with accordions.

5 - You can trigger accordions with mouseover. You don't do that with tabs.

6 - As a result of the mouseover option, an accordion can be a means of navigation by itself (reveal with mouseover, then click to navigate), while tabs almost always display content.

7 - With accordions, you can display some of the content from each element in the default state, and you can make sure that some content is always visible. With tabs, just the label for each slide is always visible.

The accordion on this site demonstrates many of these points - examine its behavior and see how you can't do any of it with tabs.

4
  • Thx for answer, sounds like accordions are meaningful only for mobile-devices (or anywhere, where width is limited), right? Apr 17, 2011 at 18:50
  • @Kamil, no, I wouldn't say that. Accordions are "sexier", they are often used on corporate websites, they're great for showing off stuff like selling points. If you want your homepage to feature 5 banners for the 5 primary strengths of your company, you'll often stick them in an accordion. They're also often used on desktop apps - look at the left panel of the Skype settings dialog. BTW, they succeeded in making an accordion that does change its size and it looks good, so that's a caveat for what I said about the flogging. I also added some more points to the answer. Apr 18, 2011 at 4:57
  • I agree about sexiness, I also agree that they can be used for hover-menus, but for my specific use-case tabs are IMHO better choice (I have multiple sections through which I need to be able navigate quickly), thx for replying, will remember your points! Apr 18, 2011 at 9:42
  • 1
    Vitaly's answer is already quite sophisticated. I just want to add this: Accordion: You can keep more than one element open. This can be an advantage when you have expert-users that want to keep certain elements open and don't mind to scroll.
    – Andreas
    Jan 22, 2012 at 18:43
8

Accordions

What Problem Does This Solve?

When there are too many items to fit into a limited space or when the number of items, if displayed all at once, would overwhelm the user, then the question is how to give the user access to all of the items in digestible chunks and without requiring scrolling, which can remove the user from the context or page position they may prefer.

When to Use This Pattern

Use when the number of options is large, the space is constrained, and the list of items can be logically grouped into smaller, roughly equal sized chunks.

What's the Solution?

Present a two-tiered set of options.

  1. The top level is categories or groupings.
  2. The secondary level is the list of options that fall into each group.

Accordions are typically styled as a stack of collapsible panels (and not with the look of hierarchical trees) with the top-level category items used as labels. The category labels may function as full-width handles or may be provided with a consistent expand/collapse icon. An accordion may have one panel open by default on initial display.

Why Use This Pattern?

The primary reason to use an accordion element is to compress a large amount of options into a limited space.

Navigation Tabs

What Problem Does This Solve?

The user needs to navigate through a site to locate content and features and have clear indication of their current location in the site.

When to Use This Pattern

  • There are 3 - 10 category titles.
  • The category titles are relatively short and predictable.
  • The number of categories is not likely to change often.
  • The entire width of the page is needed for content. An alternative approach is to use a left bar navigation
  • The categories belong to a single site.
  • You need to represent the highest level navigation options on a site.
  • You need to indicate the user's current location in the set of available options. 8.You need to change the entire page and not a sub-section of content within the page.
  • You need a way to control the highest level of navigation.

Why Use This Pattern?

  • Tabs provide context. They offer the ability to give visual indication of a user's location within a body of information.

  • Tabs build on a real world metaphor. The selected state is reinforced with the file folder tab metaphor of a folder physically in front of the others in the set.

  • Tabs provide navigation. They provide the ability to navigate the site.

All the information is taken from https://developer.yahoo.com/ypatterns/. I'd advice you to study proven UI pattern libraries in case you want to explore or understand more. But they are not dogma.

3

Tabs give a clear indication that it contains some data, but an Accordion (especially the very styled ones) will look like a piece of information or decorating text or something...some user may not even click at the accordion to know if its contains something.

Reference: Self experience as user & web designer.

1

The main difference between Tabs and Accordions are defined by their interaction and display characteristics, since they are both essentially containers that allow people to organize and access a large amount of content. Unlike trees and maps they do not have a deeper level of organization and hierarchy (unless you order them or group them within other containers).

Interaction: Tabs generally have a faster transition compared to Accordions that are usually animated.

Position: Tabs labels are not affected by interactions, whereas an expanded accordion causes some of the labels to move on the screen

Display: Tabs can only show contents from one tab at a time, whereas Accordions can be configured to show more than one open sections

Depending on the way users look at and interaction with the information, you can use either tabs or accordions to help present content in the optimal manner to the users.

Your Answer

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

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