Design Guidelines: Tabs
In a series of Design Guidelines I will start by looking at tabs.
Tabs are one of the few elements found in real life that has enjoyed significant success on line. Amazon set the standard for years, until recently their product range became too big to fit into one simple row of tabs.
When using tabs in your web application keep the following in mind:
- Limit amount of tabs. Absolute maximum should be 7.
- In linear navigation (set-up process, registration) don’t use tabs.
- Keep the real life metaphor of tabs in mind when designing them.
- Steer away from more than one set of tabs. If needed, ensure that set 2 (child) has a distinct visual difference from set 1(parent). Avoid a 3rd set of tabs.
- Keep it short. The number of words on a tab should be less than two.
- Current(selected) tabs should looks visually different.
- Don’t mix horizontal and vertical tabs. This creates confusion.
Notes:
Because your have so little space available on a tab it can be hard to choose the right word description on a tab. It might worth it to look at some other way of navigation.
Amazon tab usage:
![]()
Yahoo tab usage:
![]()
Hopefully these come in handy, feel free to add more guidelines in the comments.
Fredrik Wärnsberg Says:
I have to disagree with you on the multiple level of tabs point, digg.com is a great example of how it can work with some good design.
I can’t believe the Amazon.com designer didn’t re-label the “See All 40 Product Categories” to just “All Categories”.
Peter Says:
Thanks for the comment Frederik. Yes, have to agree with you that Digg.com did a decent job of using multiple level tabs but on the other hand, their typical user doesn’t fit the profile of someone who might not know how two sets of tabs work.
Harry Says:
Indeed the typical digg user is an advanced internet user who knows how to browse the web. what happens though when my “knows shit about tabs” brother browses digg?
peterpixel writings » Blog Archive » Design Guidelines: Breadcrumbs Says:
[...] If you found this post to be informative you could also take a look a the following posts: Design Guidelines: Drop Down Menu’s Design Guidelines: Tabs [...]