search home list

Tabbed pane

User interface controls are grouped in a container with a paging mechanism.

Context

Operators need to review complex settings, which do not fit on a single screen.

Forces

The number of tabs is limited by screen real estate; there should not be more tabs than fit on the screen. Managing excess tabs is difficult and intransparent for the user; in such a case, information needs to be regrouped. Care should be taken on how categories are created; they should match the user’s mental model of the task.

Inexperienced users may not be familiar with the concept of tabs and take some time to learn paging in a container. I observed users treating tabs similar to command buttons, thinking they could perform actions with this type of control.

Safety-relevant functions and information may be covered by paging through a tabbed pane, therefore, it should not be used for safety-related functions.

Solution

Provide a tabbed pane presenting groups of user interface controls in a way such that only one group is visible at a time and the other groups are represented as linked headings. Clicking on one of the inactive headings hides the active group and brings the clicked group to the foreground.

Example

The example shows a dialog with an empty tabbed pane.

Usability Impact

Grouping information reduces screen clutter and puts emphasis on information meaningful in a given context.

Safety Impact

Reducing screen clutter allows operators to focus on important elements, however, this control should be used with care for safety-related functionality.

Show all articles

What do you think?