Did You Pick the Right Control: Radio, Checkbox, Toggle & Dropdown
Mutually exclusive pick-one uses a radio button; multi-select uses checkboxes; instant effect uses a toggle; dropdown only when options overflow one screen. Six match-up scenes plus a cheat sheet you paste into prompts
THE QUESTION THIS PAGE ANSWERS
ANSWER FIRSTDid You Pick the Right Control: Radio, Checkbox, Toggle & Dropdown?
Mutually exclusive pick-one uses a radio button; multi-select uses checkboxes; instant effect uses a toggle; dropdown only when options overflow one screen. Six match-up scenes plus a cheat sheet you paste into prompts
Turn taste into a behavior the product can repeat. The useful outcome is not a nice opinion. It is a visible rule, a small example, and a way to tell when the experience falls below the bar.
Capture one before-and-after example that shows the quality bar without extra explanation.
Polish that improves the surface while leaving the user's uncertainty untouched.
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.
Turn the feeling in “When AI picks controls, it rolls dice” into a judgment
“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.” points out that AI has lowered the bar for making something usable. The skill readers need is noticing what is wrong and turning that feeling into an actionable requirement.
Watch the user's next action, not just the surface
Turn “Cooper walks these parts one by one in About Face 4 Chapter 21 — rules clear enough to memorize.” into observable questions: does the user know what happened, what to do next, and how to recover from an empty or failed state? Does the hierarchy make the important information visible first?
Pretty is not the same as usable
Apply “Write the rules for AI: paste the cheat-sheet constraints into the prompt and controls stop relying on dice rolls.” to a second screen or flow. Record one moment of hesitation and the user action after the change; observable behavior is stronger evidence than polish alone.
From “When AI picks controls, it rolls dice” to “Four rules: each control to its home”
“When AI picks controls, it rolls dice” grounds the problem in “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, use…”. “Four rules: each control to its home” then moves it toward “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…”. Together, they show that the lesson is not just a conclusion to remember, but a claim with conditions.
Carry the judgment into the next situation
For experience work, turn abstract impressions into user actions: did the person understand the state, find the next step, recover from an error, and want to continue?
- “When AI picks controls, it rolls dice”: 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, use…
- “Four rules: each control to its home”: 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…
- “The closing point”: AI's habit is the opposite: success pops, tips pop, confirms pop. Five scenes below — judge one by one whether it should pop
The final “The closing point” brings the discussion to “AI's habit is the opposite: success pops, tips pop, confirms pop. Five scenes below — judge one by one whether it should pop ”. The useful thing to carry forward is knowing which judgments must be revisited when input, scale, or risk changes.
I turned one judgment from this article into a small experiment I could run today. Knowing what to observe next is more useful than simply remembering the conclusion.
After reading this, I first looked for the conditions behind the idea instead of copying the method into a project. That order made the later trade-offs much clearer.
When this judgment reaches real work, which constraint should be added first? I am curious which step matters most between reading and the first practical attempt.
No discussion on this article yet.