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
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.