Segmented Controls

A segmented control is a linear set of segments, each of which functions as a button for displaying a different view. A segmented control contains two or more proportionally sized segments containing titles or icons. Use a segmented control to offer choices that are closely related but mutually exclusive, such as playlists and albums.

Don’t put other focusable elements next to segmented controls. Segments become selected when focus moves to them, not when they’re clicked. Carefully consider where you position a segmented control relative to other interface elements. If other focusable elements are too close, people might accidentally focus on them when attempting to switch between segments.

Consider split views on screens that perform content filtering. It’s easy to navigate back and forth between content and filtering options on a split view. Depending on its placement, a segmented control may not be as easy to access.

Use no more than seven segments. More than about seven segments are hard to parse at a glance and are time-consuming to navigate.

Try to keep segment content size consistent. Because all segments have equal width, it doesn’t look great if content fills some segments but not others.

Avoid mixing text and images in a segmented control. Although individual segments can contain text or images, mixing the two in a single control can lead to a disconnected and confusing interface.

Position content gracefully in customized segmented controls. If you change the background appearance of a segmented control, make sure content still looks good and doesn’t appear misaligned.

For developer guidance, see UISegmentedControl.

Segment Icons

Use simple, recognizable images for segment icons. Icons with too much detail are difficult to interpret on a TV screen. Keep icons simple enough to convey meaning. When possible, use common icons that are easily recognizable and intuitive.

Segment Text

Use short, meaningful nouns as segment titles. A segment’s title clearly identifies the type of content to expect when the segment is selected. In general, titles should be nouns (such as Library or Playlists).

Use title-style capitalization. Capitalize every word of a segment’s text except articles, coordinating conjunctions, and prepositions of four or fewer letters.

Keep text short and focused. Overly long text gets truncated, making it difficult to understand.