O botão de alternância deve mostrar seu estado atual ou o estado para o qual mudará? (2010)
Controles de alternância ambíguos — como botões de mute, ícones de shuffle ou indicadores de trava em carros — muitas vezes deixam os usuários sem saber se um símbolo mostra o estado atual ou o que acontecerá ao tocar. Os comentaristas argumentam que os controles devem indicar claramente tanto o estado quanto a ação, frequentemente separando o indicador de status (por exemplo, uma luz ou rótulo) do controle em si, ou usando caixas de seleção e botões de rádio simples e baseados em texto em vez de toggles espertos apenas com ícones. Muitos culpam tendências de design flat, com pouco espaço, “dribbblizadas” por sacrificar a clareza, e observam que essa ambiguidade se torna especialmente problemática em contextos de alto risco, como microfones, telemedicina ou direção.
Consenso Geral sobre a Semântica de Toggles
- Muitos defendem que um toggle deve mostrar o estado atual, não a ação, para que a interface possa ser examinada rapidamente para ver “o que é verdadeiro agora”.
- Outros insistem que um botão é fundamentalmente um controle de ação e deve dizer o que acontecerá se for pressionado (“Mudo”, “Desativar som”), com o estado mostrado em outro lugar.
- Vários observam que isso é um falso dilema: bons designs mostram tanto o estado quanto o possível próximo estado (por exemplo, switches com rótulo duplo, seta indicando a transição).
Caixas de Seleção, Botões de Rádio e Switches Rotulados
- Caixas de seleção e botões de rádio são amplamente elogiados por serem inequívocos, especialmente com rótulos claros como “Mic on / Mic off” ou “Muted / Unmuted.”
- Alguns lamentam que o mobile e o flat design os tenham afastado, apesar de serem facilmente estilizáveis em visuais modernos.
- Toggles com rótulo duplo (por exemplo, “On [—●] Off”) são repetidamente sugeridos como o padrão mais claro.
Ícones, Linguagem e Ambiguidade
- Toggles apenas com ícones (microfone, câmera, avião, energia, shuffle) são uma grande fonte de confusão, especialmente quando a diferenciação depende apenas de pequenas mudanças de cor.
- A sobreposição em inglês entre verbo/adjetivo (por exemplo, “Open”) torna os rótulos ambíguos; comentaristas observam que isso é menos problemático em alguns outros idiomas.
- Conceitos negativos como “Mute” e “Airplane mode” invertem as expectativas: “On” pode significar “som desligado” ou “wifi desligado.”
Metáforas Físicas e Skeuomorphism
- Muitos preferem imitar interruptores físicos: posição, estado “pressionado” e luzes indicadoras sinalizam claramente o estado.
- Play/pause é destacado como um caso especial em que o feedback do ambiente (áudio/vídeo reproduzindo) compensa a ambiguidade do ícone.
- Alguns pedem para aprender com controles de aviação/industriais, onde consistência e indicadores separados são críticos para a segurança.
Operações Assíncronas e Indicadores Separados
- Combinar controle e status em um único elemento falha quando as ações são atrasadas ou podem falhar (rede, hardware, dispositivos remotos).
- Padrão sugerido: botão para comando + luz/rótulo distinto para o estado real, possivelmente com feedback intermediário de “pendente”.
Casos Problemáticos do Mundo Real e Restrições
- Exemplos citados como confusos: mute no Microsoft Teams e Discord, travas e porta-malas da Tesla, shuffle do Spotify, modo avião do Kindle, várias UIs de carros e hardware.
- Alguns suspeitam de dark patterns em alternâncias de assinatura/cancelamento de assinatura e caixas de seleção de consentimento por e-mail.
- Outros apontam limites de espaço no mobile e tamanho da área de toque como restrições reais, mas argumentam que isso não desculpa ambiguidade ou má acessibilidade.