File Under: Visual Design

Get Your Tabbed Design Right

Tab DesignSince the time Amazon made a tabbed interface popular, web designers have been talking about the design pattern. Are tabs good? Are they bad? How do you make them?

Amazon has since removed tabs from their site, but it’s still a useful metaphor when done right. So what’s right and wrong? The Usability Post shares 5 tips for tabbed navigation:

  1. Connect the active tab to the content
  2. Make other tabs a different color
  3. Change the font color on the active tab
  4. Have the link area span the whole size of the tab
  5. Make sure the landing page has its own active tab

Each step is illustrated with the right and wrong way, and explained. That’s helpful. Now you can include tabs on your website without the wrath of the entire design community (you’ll never avoid all the wrath, no matter what you do). Just don’t look like Amazon in 2000:

Lots of Amazon tabs

If you’d like to implement tabs and don’t know how to do them, you can’t miss with this classic A List Apart tutorial.

See also: