controls - accordions vs tabs

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.

Answer

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.