O botão de alternância deve mostrar o estado atual ou o estado para o qual vai mudar? (2010)

O botão de alternância deve mostrar o estado atual ou o estado para o qual vai mudar?

• O botão de alternância também deve servir para informar ao usuário o estado atual.
• Quando um botão de alternância está no estado "ligado", exibir "desligado" pode causar confusão.
• Deve-se evitar o uso de controles do tipo flip-flop em botões ou menus.

O interruptor de alternância pode mostrar tanto o estado atual quanto o estado para o qual vai mudar

• Há uma forma de mostrar tanto o estado atual quanto o estado para o qual vai mudar colocando texto fora do botão.
• Por exemplo, no design do switch do iOS, o estado "ligado" é mostrado em azul, enquanto "desligado" não é.
• O design do switch do OS X não é ambíguo, e o usuário consegue entender claramente o estado atual.

Deve-se evitar o uso do botão de alternância do Twitter

• O botão de alternância do Twitter fornece informações ao passar o mouse, mas pode causar confusão em telas sensíveis ao toque.

Em inglês, "on" e "off" podem ser tanto advérbios quanto adjetivos

• É melhor fornecer rótulos claros usando verbos ou adjetivos no botão.
• Ex.: "ativar/desativar", "iniciar/parar"

É importante distinguir entre estado e ação

• Quando a alternância representa uma ação (por exemplo, reproduzir/pausar), ela deve mostrar a ação que ocorrerá ao clicar.
• Quando a alternância representa uma opção (por exemplo, aleatório/reprodução normal), ela deve mostrar o estado atual.

Pode-se considerar o uso de caixas de seleção

• Se a mudança de estado puder ser resumida como uma pergunta de "sim/não", usar uma caixa de seleção pode ser apropriado.

Em vez de um botão de alternância, use uma forma de mostrar tanto o estado quanto a ação

• No estado desativado, o botão não é destacado; no estado ativado, ele é destacado para indicar o estado.

Pode-se considerar não usar um botão de alternância

• Por exemplo, no caso de aleatório/reprodução normal, pode-se usar uma caixa de seleção com o rótulo "Aleatório".

O botão "Curtir" do Facebook é um bom exemplo de botão de alternância

• No app Android do Facebook, o botão "Curtir" aparece em cinza quando está desativado e em azul quando está ativado.

Mostrar tanto o estado atual quanto a ação é o mais claro

• É recomendável fornecer juntos o rótulo do estado desativado e um botão clicável que permita mudar para o estado ativado.

Opinião do GN⁺:

• O design de botões de alternância pode ter grande impacto na experiência do usuário, e é importante deixar claros tanto o estado atual quanto o estado para o qual vai mudar.
• O design do switch do OS X é um bom exemplo de como permitir que o usuário entenda intuitivamente o estado atual sem causar confusão.
• Este texto pode ajudar desenvolvedores de software a criar uma experiência de usuário melhor ao fornecer elementos importantes a considerar ao projetar interfaces de usuário.

[GN⁺]

Comentários do Hacker News

• Confusão com o botão de mudo no Microsoft Teams

  • No app do Teams, o botão de mudo mostra um microfone riscado, indicando que o microfone está desligado quando o mudo está ativado.
  • Em apps de telefone, o mesmo ícone indica que não está no mudo, e a mudança para um estado com fundo preenchido mostra o estado de mudo.
  • Não há problema em o botão mostrar o estado atual, mas é preciso saber como ele vai parecer quando o estado mudar.
  • Essa confusão pode ser um problema que surge no design de "flat UI", em que os elementos visuais precisam ser entendidos sem referências do mundo real.

• Problemas de consistência nos botões de alternância da UI dos carros da Tesla

  • Os botões do sistema HVAC reagem de forma diferente dependendo do toque e da duração.
  • Ao dirigir, quando só dá para olhar rapidamente para a tela, pequenos erros de toque podem causar ações indesejadas.
  • A UI de conexão Bluetooth da Tesla tem um design muito confuso, o que se torna ainda mais problemático durante a direção.

• Mecanismo de feedback de estado dos botões de pressão da NASA

  • Quando o interruptor está desligado, todas as luzes ficam apagadas; ao pressioná-lo, uma luz amarela acende; e, quando o dispositivo desejado realmente liga, a luz amarela apaga e a luz verde acende.
  • Isso fornece confirmação tanto do ato de pressionar o interruptor quanto da operação real.

• Lamento pelo desaparecimento das caixas de seleção

  • As caixas de seleção eram perfeitas e sem ambiguidade, mas os designers de smartphones não gostavam delas.

• Design confuso da UI da tela do painel da Tesla

  • Um rótulo escrito "Open" deixa claro que aquela parte está aberta, mas o usuário não tem como saber que na verdade aquilo é um botão para abrir o componente.

• Problemas dos botões de alternância e formas de resolvê-los

  • Botões de alternância podem gerar confusão porque incorporam ao mesmo tempo o estado do sistema e a ação de mudar esse estado.
  • Um "ON" que mostra o estado atual pode, na prática, significar a ação de mudar para "OFF".
  • A solução é separar estado e ação: usar um rótulo fora do botão ou manter o ícone e mudar outras propriedades do botão.

• O problema da assincronia nos botões de alternância

  • Ao pressionar o botão, o estado do sistema pode não mudar imediatamente, então pode ser necessário pressioná-lo várias vezes para garantir a mudança para o estado desejado.
  • Se houver botões separados para cada estado, pressionar várias vezes não causa problema.

• Vantagens do design de alternância deslizante da Apple

  • A alternância deslizante da Apple mostra com clareza tanto o estado atual quanto o estado para o qual vai mudar.
  • Recursos ativados são distinguidos por fundo azul, e recursos desativados por fundo cinza.

• Necessidade de indicar claramente o estado atual e o estado para o qual o botão vai mudar

  • Deve ficar claro qual é o estado atual e para qual estado ele mudará ao alternar.
  • O botão de reproduzir/pausar segue precedentes físicos, e como fica claro se a mídia está tocando ou não, o usuário entende mesmo que o ícone não mude.
  • Alterar ligeiramente a cor do botão de alternância não ajuda; é preciso um rótulo.