Stacked Tabs

Also known as: Side Tabs, Vertical Tabs, Finger Tabs, Selection-Dependent Inputs
Tags: forms, navigation

Stacked tabs separates content into different panes, and the panes can be viewed one at a time. This pattern can also be used to show selection-dependent inputs on a form (show initial questions in tabs, and reveal follow-up questions on the right of the these options depending on the choice).

Select type of feedback

GetSatisfaction.com uses stacked tabs instead of just radio buttons to identify the type of message the user has. Based on the selection, form fields always stay the same, but the descriptions and guidance texts change.

What Problem Does The Pattern Solve?

You need to find a way to show selection-dependent inputs or provide a way for the user to navigate through one ore more stacked panes of content without refreshing the page.

When to Use It?

  • You want to show follow-up questions based on users’ initial question.
  • There are several sections of content (2-8), but not enough space to show everything at the same time.
  • You want to allow users to switch between different sections without going to a different page.

How to Use It?

  • Stack tabs vertically to the left of the content they will control.
  • Clearly indicate which tab is currently selected, and visually connect the follow-up questions/content to the tab it is associated.
  • Make the first tab selected by default.
  • If questions are mutually exclusive, consider including radio buttons in front of the tabs to make it more obvious that they really are mutually exclusive options.
  • Don’t refresh the entire page when the user moves between tabs, just the stacked tabs-module.
  • Selecting a tab should not affect other parts of the page.

Why to Use It?

  • Especially with forms, hiding irrelevant options/content until users need them makes the form more clear and simple, making completing it quicker and easier.
  • Structuring the content into meaningful chunks makes the content faster to understand for the user.
  • Tabs are familiar to most of the people; they know how tabs work.
  • Usability tests have shown that compared to horizontal tabs, stacked tabs perform better.
  • Tabs provide navigation. They provide the ability to navigate alternate content views.

Accessibility

  • Allow the user to navigate across the tabs in a logical order with the Tab key.
  • A focused tab can be selected with the Enter key.
  • Indicate the active tab (pane) by one of these alternative means (in addition to visual indication):
    • Include a TITLE attribute with the word “active” into the link that was just activated.
    • Include an invisible graphic with an ALT attribute and a word “active” into the link.
    • Attach an ALT attribute with the word “active” to graphic that indicates active link.

Sources

The pattern is inspired by Luke Wroblewski’s article “Selection-Dependent Inputs” and Yahoo’s Module Tabs-pattern.

External Links

Code Examples

No code examples yet

Where Is It Used? (5 examples)

Comments

There are no comments posted yet. Be the first one!