Did You Pick the Right Control: Radio, Checkbox, Toggle & Dropdown
The first four lessons covered flow and states. This one drills into the smallest UI parts. Controls are the shared language between user and product — pick wrong, and users click once more and guess once more. Selection rules fit in four sentences. AI doesn't know them; you gatekeep.
Ask AI for a form and controls are usually grabbed at random: three options stuffed into a dropdown, radio vs checkbox by mood, plus a popup for every action. Each flaw alone is small — stacked in one form, users pay extra effort every step.
| Typical bug | On the scene | Extra cost users pay |
|---|---|---|
| Three options still in a dropdown | Only three invoice types, buried under "Please select" | One extra click before options appear; can't compare side by side |
| Radio vs checkbox by chance | Mutually exclusive options get checkboxes; multi-select gets radios | Contradictory data, or can't multi-select — users hit the wall once |
| Everything pops a dialog | Save success pops one; switching tabs pops another | Every dialog is an interrupt — hands on page, mind yanked away |
Cooper walks these parts one by one in About Face 4 Chapter 21 — rules clear enough to memorize. This lesson: memorize the rules, drill with match-ups, then paste the rules into a prompt.
Chapter 21 draws a sharp line among choice controls. Radio buttons take their name from old car radios: press one station key and the previous pops up — eyes stay on the road. Mutually exclusive, must pick one: that's their turf. Four rules map to four controls — face first, then rules.
Alan Cooper, About Face 4 Chapter 21: every control has a job — make one do another's work and users relearn.
Rules memorized — now feel them. Six scenes from real forms: pick the best of four controls for each. Wrong picks get corrections; keep going until right.
Among four controls, dropdown is the one AI abuses most — worth its own ledger. Chapter 21 on list controls names the birth defect: initial state shows only the last pick; other options stay invisible. Invisible options mean no comparison and no estimate of how long this step takes. Same food-delivery checkout below — tap the one you'd use.
The flat plan quietly uses one more move: "Send now" as default. Visible options plus a sensible default — most users clear this step in a second. That's last chapter's error-prevention trio "default as safety net" at the control layer.
Chapter 21 situates dialogs with a kitchen metaphor: the app is the kitchen, the dialog is the pantry — it advances the plot but can't star. Primary interaction stays in the main window; dialogs hold what's outside the main flow: dangerous, rare, or needing one topic gathered in one place. An easy-to-miss detail: functional dialog titles use verbs so users see what they're confirming at a glance.
AI's habit is the opposite: success pops, tips pop, confirms pop. Five scenes below — judge one by one whether it should pop.
Rules in your head don't help — write them into the brief for AI. First a cheat sheet, then one-click copy the constraint line below; paste it at the end of any form-UI prompt.
| Control | When to use | AI's common misuse |
|---|---|---|
| Radio button | Mutually exclusive, must pick one, options fit one screen | Gives dropdown or checkbox where radio belongs |
| Checkbox | Multi-select, or a single check/unchecked mark | Gives checkbox to mutually exclusive options → contradictory data |
| Toggle | Binary settings that take effect immediately | Used on fields that submit with a form |
| Dropdown | Options overflow one screen — compromise when space runs out | Hides three–five options too, adding a free click |
| Dialog | Outside main flow: dangerous, rare, gather one topic | Success tips and routine confirms also pop — everything pops |
Chapter 21 also names a control to avoid: the state-toggle button. The music player's merged Play/Pause is the poster child — triangle showing, you tap, music starts, icon becomes two bars. Where does Cooper say the bug sits?
Four rules: mutually exclusive pick-one → radio; multi-select → checkbox; instant effect → toggle; overflow one screen → then dropdown (Cooper, About Face 4 Chapter 21).
Dropdown is a compromise: it starts showing one item; looking costs a click. Three–five options: lay flat first with a sensible default — most users clear in a second.
Dialogs interrupt: primary interaction in the main window; popups only hold outside-flow danger, rarity, or gathered topics; success uses non-modal light feedback; functional dialog titles use verbs.
Write the rules for AI: paste the cheat-sheet constraints into the prompt and controls stop relying on dice rolls. Controls speaking right isn't enough — copy must speak human too. Next lesson: how the UI talks.
Source: Original to Xiaoshan Academy's Interaction Engineering series; some interaction principles adapted from About Face 4: The Essentials of Interaction Design.