1
Show state with more than color
Use color plus icon, label, shape, position, motion, or texture. Color alone breaks in glare, accessibility modes, and tired-human-at-EPCOT conditions.
UX fundamentals lab
Designing clear on/off states
A quick interactive guide to selected, unselected, completed, disabled, loading, and focus states — the stuff that makes an interface feel obvious instead of mysterious.
The core rules
Good state design answers one question instantly: “What is true right now?”
2
Make the action immediate
Tap → visible response. If the system needs time, show loading. If it worked, celebrate or confirm.
3
Follow conventions
Off is quiet/neutral. On is filled/active. Disabled is faded. Focus has an outline. Users should not need a legend to operate basics.
4
Use plain labels
Prefer “Completed,” “Photo taken,” or “Booboo verified” over ambiguous wording. Avoid negative labels that make people mentally reverse the meaning.
State vocabulary
A tiny visual dictionary for common UI states.
Off / incomplete
quiet, neutral
quiet, neutral
On / complete
filled, confirmed
filled, confirmed
Selected
strong highlight
strong highlight
Disabled
faded, unavailable
faded, unavailable
Focus
keyboard-visible
keyboard-visible
Toggle anatomy
Binary controls need clear current state, not just a pretty switch.
Good: position + color + label
Show Booboo markersCurrent state: Off
Try tabbing to it: the yellow ring shows keyboard focus.
Bad: ambiguous visual language
Thing modeMaybe enabled? Maybe disabled?
The control has no readable state, no focus affordance, and relies on unclear styling.
Checklist states
For field-use apps, completed items should feel earned, while incomplete items should still invite action.
Mexico
Booboo verifiedIncomplete should feel tappable and inviting, not like failure.
Norway
Booboo verifiedA completed card should have a redundant cue: badge, color, and label.
China
Booboo verifiedCompleted items can quiet down so the next action is easier to find.
Diagnose this UI
Compare a weak state treatment with a clearer one.
Weak
Japan
Morocco
France
Problem: active state is only subtle text tone. Button says “Done” but not what is done.
Clear
Japan — Booboo verified
Morocco — photo needed
France — photo needed
Better: explicit status text, icon cue, color cue, and action-specific button.
Quick test
Question: If a completed card turns green, is that enough?
Best answer: No. Green helps, but add a checkmark, stamp, label change, or other non-color cue. That makes the state survive accessibility needs, glare, and skim-reading.