Should toggle button show its current state or the state to which it'll change? (2010)

Original Article ↗ Hacker News Discussion ↗

Ambiguous toggle controls—like mute buttons, shuffle icons, or car lock indicators—often leave users unsure whether a symbol shows the current state or what will happen if they tap it. Commenters argue that controls should clearly indicate both state and action, often by separating the status indicator (e.g., a light or label) from the control itself, or by using simple, text-based checkboxes and radio buttons instead of clever icon-only toggles. Many blame flat, space-constrained, “dribbblized” design trends for sacrificing clarity, and note that this ambiguity becomes especially problematic in high-stakes contexts like microphones, telehealth, or driving.

General Consensus on Toggle Semantics

  • Many argue a toggle should show the current state, not the action, so the UI can be scanned for “what is true right now.”
  • Others insist a button is fundamentally an action control and should say what will happen if pressed (“Mute”, “Unmute”), with state shown elsewhere.
  • Several note this is a false dichotomy: good designs show both state and possible next state (e.g., dual‑label switches, arrow indicating transition).

Checkboxes, Radio Buttons, and Labeled Switches

  • Checkboxes and radio buttons are widely praised as unambiguous, especially with clear labels like “Mic on / Mic off” or “Muted / Unmuted.”
  • Some lament that mobile and flat design pushed them out, despite them being easily stylable into modern visuals.
  • Dual‑label toggles (e.g., “On [—●] Off”) are repeatedly suggested as the clearest pattern.

Icons, Language, and Ambiguity

  • Icon‑only toggles (mic, camera, airplane, power, shuffle) are a major source of confusion, especially when differentiation relies only on slight color shifts.
  • English overlap of verb/adjective (e.g., “Open”) makes labels ambiguous; commenters note this is less of an issue in some other languages.
  • Negative concepts like “Mute” and “Airplane mode” invert expectations: “On” may mean “sound off” or “wifi off.”

Physical Metaphors and Skeuomorphism

  • Many favor mimicking physical switches: position, “pressed” state, and indicator lights clearly signal state.
  • Play/pause is highlighted as a special case where environment feedback (audio/video playing) compensates for icon ambiguity.
  • Some call for learning from aviation/industrial controls, where consistency and separate indicators are safety‑critical.

Async Operations and Separate Indicators

  • Combining control and status in one element fails when actions are delayed or can fail (network, hardware, remote devices).
  • Suggested pattern: button for command + distinct light/label for actual state, possibly with intermediate “pending” feedback.

Real‑World Problem Cases and Constraints

  • Examples called out as confusing: Microsoft Teams and Discord mute, Tesla locks and trunks, Spotify shuffle, Kindle airplane mode, various car and hardware UIs.
  • Some suspect dark patterns in subscription/unsubscribe toggles and email consent checkboxes.
  • Others point to mobile space limits and tap‑target size as real constraints, but argue this doesn’t excuse ambiguity or poor accessibility.