UI Controls Dictionary > Tabs
Tabs can be a smart way to break up content into sections, but its use is a double-edged sword.
On the one hand, it focuses attention on a subset of content to make the page easier to take in. On the other hand, it buries other content, making users guess where it is, or if it even exists. It is an example of the Master/Detail screen pattern.
In "About Face 3: The Essentials of Interaction Design", Alan Cooper says "navigation is excise" - meaning that any time a user is required to jump from one page to another, it adds a cognitive cost to their experience. The authors write: "the work that users are forced to do to get around in software and on Web sites is seldom aligned with their needs, goals, and desires" and urge designers to minimize the amount of navigation required.
Tabs are one of the most popular navigation patterns (along with menu bars and vertical navigation). The biggest advantage of tabs is that they are familiar and often persistent, so that even when a user has navigated around in a site or application, they don't feel lost.
There are a few considerations to keep in mind when using tabs, however. Such as:
Tabs should have two primary states: selected and non-selected. A hover state can also be used to invite action, similar to a button. As shown above, the selected tab should be visually distinct from the non-selected tabs, with the selected tab more prominent (higher contrast) than the others. Bold text can be used to emphasize the selected tab.
Here are some common tab variations.
Tabs often have borders around the content area they refer to, but they aren't required.