Vertical Tabs

Problem

A lot of settings are presented on a form, and the user does not need to see all options all the time.

Solution

Group subsets of the settings together and put them into Vertical tabs (see image). One vertical tab shows one section of settings in its header. Even if the tab is not active the actual settings in it are shown in a smaller and lighter font.
Is used as a replacement pattern for Collapsible fieldsets in some cases.

Use When

There is a series of settings groups of at least three or four. These settings groups do not contain too many settings and can be presented together taking up not too much vertical space when they are open.
Also do not use it when there would be too many vertical tabs, as this does not help scannability and loses the feel of a "cockpit" where you got all controls at hand.
Vertical tabs were intoduced to improve the Node Form. The node form settings for Publishing Options, Revision etc. lend themselves very well to this pattern.

A typical example, where vertical tabs should not be used, is the comment settings form on the node type form (click thumbnail for larger image) because this subgroup has too many settings and takes up too much space.

Vertical tabs should not be nested, since the interface gets cluttered by doing so and the aim of improving scannability and handling of subtabs is lost. (insert image for nested vertical tabs)

Rationale

Alternatives

Todo

Vertical tabs #323112: Vertical Tabs Assigned to: Bojhan address the problems of many fieldsets one after the other. It stacks them on top and has nice summaries too. See issue for screenshots.