Also knows as: Side Tabs, Vertical Tabs, Finger tabs, Selection-Dependent Inputs
What
Use stacked tabs to show initial questions, and reveal follow-up questions on the right of the these options depending on the choice.
Example image
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.
Use when
- 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.
Why
- 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 has shown that compared to horizontal tabs, stacked tabs perform better.
How it works
- Stack tabs vertically
- 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.
History
This pattern was created by Janne Lammi. It is inspired by Luke Wroblewski’s article “Selection-Dependent Inputs” and Yahoo’s Module Tabs-pattern.
Pattern Gallery
Show Your Pattern Examples Here!
Add your examples to this pattern by adding them to flickr.com group UIPatternFactory.com and tagging with this tag:
More photos in Flickr group "UIPatternFactory.com" tagged with stacked-tabs
wallpapers are absolutely nice
i just love it
thank you sir
seo
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.