Tab Views

A tab view presents multiple mutually exclusive panes of content in the same area. A tab view includes a tabbed control (which is similar in appearance to a segmented control) and a content area. Each segment of a tabbed control is known as a tab, and clicking a tab displays its corresponding pane in the content area. Although the amount of content can vary from pane to pane, switching tabs doesn’t change the overall size of the tab view or its parent window.

The tabbed control can be positioned on any side of the content area—top, bottom, left, or right. The control can also be hidden entirely; this is sometimes appropriate when panes are switched programmatically.

Top tabs

Bottom tabs

Left tabs

Right tabs

When the tabbed control is hidden, the content area can be borderless, bezeled, or bordered with a line. A borderless view can be solid or transparent.

Tabless

Tabless bezeled

Tabless bordered

Use a tab view to present closely related peer areas of content. The typical appearance of a tab view provides a strong visual indication of enclosure. People expect each tab to display content that is in some way similar or related to the content in the other tabs.

Provide between two and six tabs in a tab view. Having more than six tabs can be overwhelming and create layout issues. If you have more than six tabs, investigate other ways to factor your information hierarchy.

Make sure the controls within a pane only affect content in the same pane. Panes are mutually exclusive and should be fully self-contained.

In general, inset a tab view by leaving a margin of window-body area on all sides of a tab view. This layout looks good and leaves room for additional controls that can affect the window itself (or other tabs). For example, the lock button in Date & Time preferences is outside of the tab view because it applies to all tabs. It is possible to extend a tab view to meet the window edges, but this is unusual.

Provide a label for each tab that describes the contents of its pane. A good label helps the user predict the contents of a pane before clicking its tab. In general, use nouns or very short noun phrases for tab labels. A verb or short verb phrase may make sense in some contexts. Tab labels should use title-style capitalization.

Avoid using a pop-up button as a tab-switcher. A tab view is more efficient because it requires a single click to make a selection, while a pop-up button requires two. A tab view also presents all choices onscreen at once, while a pop-up button must be clicked to see its choices.

For developer guidance, see NSTabView.