E3.07.1segmented control view switchdesign

Segments fit a few parallel, exclusive view switches

Aliases: segmented control · view switcher · exclusive segments

What it is

A segmented control lines up two to about five parallel, exclusive views or modes as tappable segments: day / week / month, list / grid, mine / all. Tapping a segment immediately replaces what is in front of you; the previous segment goes dim. It is not a form radio — radios write a field that will submit; segments write “which face we are looking at now.” It is not tabs either: tabs often carry their own scroll and more items; segments are shorter, closer to a mode switch on a tool.

Parallel means the segments are faces of one object, not successive steps. Exclusive means only one segment is lit at a time.

Why it happens

Segments share one geometric track, and the track itself says “these are values on one dimension.” People read it as a mode knob: whichever segment is thrown, the display model switches to that filter or layout. Immediate switching reinforces the reading — content follows the lit segment, and causality sits on the control, not on a submit button.

Fewness is both geometry and cognition. With few segments, labels can sit in a row and the track can be grasped as one object. Once segments become a string that must be panned, the track sense shatters and the control decays into crowded tabs or a button group: exclusion remains, but “one dimension” does not.

Where it stops holding

Field values (gender, shipping) should not be segments even when exclusive, unless changing the value must also change the view; otherwise people think the tap already submitted or already changed page. More than one dimension (time grain × object type) cannot be crammed into one segmented control; the second dimension needs its own widget. Deep navigation (three or more IA levels) flattened into segments turns hierarchy into false peers; go back to tabs or a sidebar. Keyboard use typically arrows between segments; if each segment is really a separate page, focus and history stacks will disagree.

Applying it

  • Make segments only for a few exclusive faces of one object, and let the tap change the view at once.
  • Name the dimension with a group label (“View,” “Scope”) so segment copy is not read as unrelated buttons.
  • Fields that must submit become radios or a select; many destinations become tabs or navigation.
  • How to check: hide the content, leave the segments, ask “what happens if I tap another.” If the answer is “submit / fire an action / go to the next step” rather than “see it another way,” the control type is wrong.

Related

  • Within the group: E3.07.2 More segments squeeze labels until they cannot be read · E3.07.3 Segments should not carry actions
  • Adjacent: E3.02 Radio Buttons · E5.11 Tabs · E1.14 Button Groups and Split Buttons
  • Search terms: segmented control · view switcher · mutually exclusive segments

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E3.07.1