The Tao of Tabs

Please use tabs in your designs. Tabs are a very conventional navigation technique, and are fast becoming a staple of the non-web app experience. I bet your browser has them. In fact, if it doesn’t you should immediately stop reading and go get firefox. IE6 is the bane of my and every other designers’ existance, and should be burned with fire.

Back to tabs. Everyone is using tabs these days, and for good reason. They are one of the most intuitive interface elements, and they’re easy to do. Even the new Microsoft Word 2007 uses tabs for its user interface, and they poured thousands of dollars into usability testing and revamped an already well-understood and canonical interface to implement them. How’s that for an endorsement?

Rules for Tabs

In his article Tabs, Used Right, usability maven Jakob Nielsen outlines 13 rules for proper tabs. I, however, happen to think that some of these rules are a bit draconian, and others are a bit obvious, so I’ve come up with 4 simpler ones.

1. The scope of the tabs’ influence must be clearly delineated. If the tabs change only the left column, the left column should be in a little box with tabs on top.

2. The current or active tab must be connected to the content, and have a higher visual weight than the inactive tabs (higher contrast, brighter saturation, etc.)

3. The labels for each tab must be sufficiently short.

4. The tabs must stay on one line, as long as the text is at a reasonable size. Don’t cheat and make the text smaller — make fewer tabs required instead.

As long as you keep this in mind, you can’t screw things up too badly.

Resources

I was planning to do a roundup here, but it turns out that Smashing Magazine has me beat. Go there if you need some tab help. And, if that’s not enough for you, here are 10 more for AJAX applications specifically.

I recommend avoiding Javascript as far as is possible for your tabs, as I do for all applications. You’ll probably be able to do everything with css except in the case of IE6, and I think people using IE6 with javascript disabled are too far-gone to be helped.

Leave a Reply

  • I promise I'll be nice to your email address