Vertical Module Tabs

Also known as: Side Tabs, Vertical Tabs, Finger Tabs, Selection-Dependent Inputs, Stacked Tabs

Tags: forms, navigation

Vertical Module 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).

GetSatisfaction uses vertical 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.

GetSatisfaction uses vertical 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 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.

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, vertical 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.

Useful linksUseful links icon

Example images (5 examples)

Comments

  • Andy @ sales++ online sales development (www) Oct. 4, 2010 17:01

    Really nice designs, would like to see an example from Apple on here.

    iWorks has some nice elements that would fit here.

    Thanks

  • Amit (www) July 21, 2011 09:59

    I think its helpful for me.....

    Thank

  • Justin Nguyen (www) Aug. 11, 2011 14:38

    I like the simple interface of dropbox. Thank for sharing.

  • Roy M J (www) Jan. 13, 2012 10:39

    Really great article.. Thanks for sharing this... Ive tried implementing this and i was at sixes and sevens regarding the design part and how this should be..