Usability of tabs in Ajax content boxes

I've been looking around at various implementation of these tabbed content boxes, which have become popular in the past year or so. Whether you are just toggling visibility of content or actually using Ajax to fetch the content, these tabbed boxes provide a significant advantage to users, saving them from page reloads or being directed to other pages prematurely.

Properly implemented, these widgets give users a clear idea of where they are. I'll go through some examples of good and bad designs.

Yahoo has always been a leader in usability, and here's why:


Yahoo provides three cues:

• background gradients distinguish selectable tabs from the selected tab
• the selected tab's text is bolded and changed to orange
• the background area of the selected tab and content area constitute a single, bordered field

Few users would be confused by this interface.

The New York Times implementation gets only one thing right: turning the selected tab area and the content area into a continuous bordered field.

What are the problems with it?

• the light gray, 1px borders are too thin to adequately differentiate the areas and make it clear at a glance where you are
• the text of the selected tab is indistinguishable from the text of the other tabs
• all-caps are difficult to read, whether in print or online
  

Compared to the Yahoo box, it's very difficult to tell where you are. Perhaps the New York Times tested their readership and found that they have above-average eyesight?

The following tabbed box from Salon is unclear because it violates the norm for tabs, which is for selected tabs to have the same background color as the body of the content area. If you have three or more tabs, the user has an easier time figuring out which tab is selected, because it will be different from the other ones. But when you have only two tabs, it becomes very difficult:

Can you tell which tab is selected? Most users cannot.

Another example of a tabbed box with the same problem, this one from Time.com:
There you have it. Implement something along the lines of Yahoo, and your users will make the most use of these handy widgets.

Labels: ajax, css, ia, navigation, tabs, usability, widgets