Tabs & Segmented Controls
Support keeps sending customers a link to a setting. The link keeps landing them on the wrong tab, because the tab is not in the address, so the page always opens on the first one.
Tabs or toggles? Decide with confidence after one short listen on the go.
Listen to the full Tabs & Segmented Controls course on DesignPath
Every one of those customers now has to find the right tab themselves, from a link that was supposed to take them there. Support has started including a sentence of instructions with the link.
A tab makes one promise: what is behind it is an alternative to what is behind the others, and you can pick any of them. Nearly every problem with the pattern is something put behind a tab that broke that promise.
Anatomy of a Tab Set
A tab set looks like a row of words and a box underneath. There are five parts, and the one that causes the most support tickets is not on the screen at all.
The Parts
Five, and the last two are usually inherited rather than designed.
The strip, which is the row itself and the boundary of the whole control. The tabs in it, each one a label. The selected indicator, meaning whatever marks the current tab beyond color. The panel below, holding the content of the selected tab. And the overflow treatment, for when the tabs stop fitting, which is either scrolling, wrapping or a more control.
Three States per Tab
Each tab is in one of three states, and design files routinely show two.
Selected, meaning this is the panel you are looking at. Unselected, meaning available. And focused, meaning a keyboard has landed on it, which is a different thing from being selected and has to look different. Each tab is also a target, so WCAG 2.5.8 asks for at least 24 by 24 CSS pixels, which a row of short words rarely reaches without padding. A tab that is focused but not yet selected is the state that makes arrow-key navigation legible, and it is the one that gets left out.
The Part That Is Not on Screen
The selected tab is a piece of state, and state that is worth linking to belongs in the address.
A tab set with no representation in the URL cannot be sent to somebody, cannot be bookmarked, and resets to the first tab on every refresh. That produces the support ticket: a link sent to a customer that lands on the wrong tab, every time, for everybody. Back Button covers the general rule about state in the address, and a tab set is the clearest small case of it.
The One Promise
Everything the strip does rests on a single claim.
Each tab holds something that stands as an alternative to the rest, and any one of them can be read first. That claim is what makes a strip scannable, what makes the order meaningful, and what makes a sequence dressed as tabs go wrong. Article 3 tests the claim, and article 6 collects the cases where somebody broke it.
Pro tip: Open a tab set in your product, switch to the third tab, and copy the address. Paste it into a private window. Landing on the first tab is the single most common defect in this pattern and it takes fifteen seconds to prove.