New styles for tabs, and the power of pattern libraries

Last summer we added introduced a CMS template that allowed content regions to have tabbed navigation. While the functionality this provides is incredibly useful in simplifying navigation, there were a few shortcomings to how it looked:

For a start there isn't much of a visual connection between the row of tabs and the content that corresponds to them - it's just "underneath". There's also only a very subtle difference in colour between the tabs and the background block, so they can easily blend into one on bright screens, or for people with sight problems.

And to be frank, they just didn't look very much like tabs!

So, how to fix them? When it comes to what to do with design decisions like these, there are a few options:

1. Come up with a completely new idea yourself.
   
2. Trawl through a bunch of sites that are doing something similar, picking out what works and what doesn't.
3. Consult a pattern library.

Pattern libraries to the rescue

A pattern library is a huge time (and sanity) saver when it comes to doing pretty much anything on the web that someone else has already tackled before.

To quote the Yahoo! Design Pattern Library, a pattern is:

"an optimal solution to a common problem within a specific context. "

Or in plain English - a way to avoid reinventing the wheel by using a tried and tested solution instead.

There are patterns for just about everything, covering navigation, layout, rich interaction, selection, etc. So whether you need to create a date picking widget or a breadcrumb trail, there'll probably be a pattern for it which describes:

• The problem it solves.
• When (and importantly when not) to use it.
• Why you should use it.
  
• What the solution is.

So in the case of tabs, the problem is that:

"The user needs to navigate through one or more stacked panes of content without refreshing the page. "

The pattern definition will also take you through why the solution works - in the case of tabs, one reason is the strong metaphor to tabs on file folders.

The solution then takes you through different aspects in more detail. For example, the way to solve the lack of visual connection is to "visually bound" the tabs and the corresponding content (put them in a box).

The finished product

Here's how it looks now:


(The rounded corners are a CSS3 bonus, it's still boring old boxes for Internet Explorer users I'm afraid!)