Page indicator

Page indicators answer two questions in about twenty pixels: how many screens are there, and which one is this. They belong under anything you move through sideways by swiping, which is why they are inseparable from onboarding flows, image galleries, and home screens. The dots are small because the answer is small. Nobody needs to know that screen three is called “Notifications” while looking at screen two; they need to know there are five and that three is coming.

The pattern has a hard ceiling. Somewhere around seven or eight dots people stop counting and start guessing, and past that the row either overflows or shrinks into a smear. The usual repairs are a numeric counter (“4 of 26”), a thumbnail strip, or a scrolling window of dots that shows a few neighbours at a time. If the pages have names worth reading, the dots were the wrong component from the start and tabs are the right one.

Dots are also controls, not decoration. Apple’s page control has always been tappable, and on the web the same expectation holds: each dot should carry the name of the page it goes to (“Page 3 of 5”), the current one should be marked with aria-current, and the state has to survive black and white, which means the active dot changes size or fill and not just tint. A nine pixel circle is a cruel target on its own, so give each one a padded hit area of its own without letting that padding change what the row looks like.

Two neighbours use the same picture for a different job. A step indicator also draws a row of small marks, but its stages are ordered, named, and cannot be visited out of turn: it reports progress, while a page indicator reports position among peers. Pagination, meanwhile, numbers pages of a list and is navigated by clicking those numbers, where dots assume the real gesture is a swipe and the dots are just the readout.