Controles de mudança de estado: o caso infame do botão mudo

Olá a todos, meu nome é Misha Khananashvili, sou o autor do canal UXHorn e trabalho como pesquisador no Sberbank.



A tradução do artigo pela galera do NN-Group foi motivada pela necessidade de dar instruções simples e compreensíveis aos designers das equipes de produto, que podem ser consultadas se necessário. Como o artigo foi publicado outro dia, decidi traduzir e ao mesmo tempo compartilhar um material útil com todos. Obrigado a Yura Vetrov pela dica. O artigo original pode ser encontrado aqui



Spoiler: Os controles que alternam entre dois estados diferentes do sistema devem comunicar claramente aos usuários o estado atual e o estado para o qual o sistema irá se o usuário clicar nesse controle.



Em uma reunião WebEx recente com um cliente, entrei em pânico, pensando que não conseguia ligar o microfone. Tive que fazer uma apresentação de 6 horas - como vou fazer se não consigo nem ligar o som? Continuei clicando no ícone do microfone riscado, mas o microfone permaneceu riscado independentemente do que eu fizesse.



Aqui está uma captura de tela:







Painel de controle do aplicativo WebEx Desktop:

Acima - Sem som;

Inferior - estado silenciado





Em meu pânico, não notei a mudança de cor do ícone em tudo! Apesar do microfone estar cruzado em ambos os estados - descobri que a cor vermelha do ícone deveria ter sinalizado que o botão estava ativo e eu estava desabilitado.



Já vi usuários serem vítimas desse problema muitas vezes. O botão mudo é usado para alternar entre os dois estados do sistema (mudo e não mudo), mas o problema é que os usuários não podem dizer facilmente em qual estado estão e para qual estado estão fazendo a transição. (Além disso, ao contrário das práticas recomendadas de design de ícone , a implementação WebEx carece de texto etiqueta do botão mudo).

Duas informações, dois controles

Em uma situação em que os usuários podem navegar entre dois estados possíveis (vamos chamá-los de On e Off, para simplificar), existem dois bits de informação que são relevantes para o usuário e, embora relacionados, não são idênticos:

1. O estado atual do sistema - Ligado ou Desligado; no exemplo com um microfone - Mudo ou Não Mudo;
2. , — , , ( Unmute Mute).

A maneira óbvia de implementá-los é ter dois elementos de IU diferentes: um indicador de status e um botão de mudança de estado.



Por exemplo, no aplicativo Tesla, a tela Controles segue esta abordagem: você tem um indicador de status mostrando que o carro está bloqueado e um botão de desbloqueio. Clicar na luz de status não faz nada, mas clicar no controle destravará o veículo.





Tesla para iPhone:

(Esquerda) O ícone acima do botão de desbloqueio serve como um indicador de status; O botão Desbloquear é um botão de alternância de estado que indica claramente o que acontece se os usuários clicarem nele.

(Direita) O estado e o rótulo do botão mudam quando o usuário desbloqueia o veículo.

Dois estados de informação, um controle

No entanto, se você tiver um sistema com dois estados, o estado atual e o que vem a seguir, eles devem se complementar. Em outras palavras, podemos assumir que duas informações (estado e o que acontece a seguir) podem ser comunicadas usando um único controle - o botão de alternância de estado. Porque se os usuários conhecem um estado (pelo menos em teoria), eles podem inferir o resultado de um clique;



No entanto, lembre-se de que qualquer decisão que você toma exige tempo e esforço cognitivo e, geralmente, há muito pouco tempo para reagir rapidamente. Como no exemplo: tento ligar meu microfone e todos estão esperando por mim, ou me ignorando e continuando a conversa, ou seja, não tenho tempo de parar para pensar na interface ou tirar conclusões.



Às vezes, a condição pode ser facilmente identificada por outros sinais. Por exemplo, em um player de vídeo, há apenas um controle (o botão "Reproduzir") que indica o estado futuro. No entanto, existem sinais suficientes para entender que o vídeo está sendo reproduzido - o usuário pode ouvir o áudio ou ver mudanças na imagem na tela.





YouTube: o ícone de reprodução é substituído por uma pausa enquanto o vídeo é reproduzido. O ícone indica o estado em que o sistema entrará quando o botão for pressionado.



Se você precisa usar um único controle para denotar o estado e o que vem a seguir, como deve denotá-lo?



Nesta situação, duas alternativas podem ser consideradas:

1. , , , , .
   
   
   
   . , «», «» « ».
   
   
   
   , , , Tesla OBS .
   
   
   
   
   
   OBS Studio: «Start Recording» «Stop Recording» .
   
   
   
   (, ), , . , YouTube .
2. .
   
   
   
   /: , « ». , , , .
   
   
   
   
   
   
   
   Word B () (), , , . .

Vamos voltar ao exemplo WebEx. Olhando para trás, vemos que a WebEx usou um controle para indicar o estado atual e o que acontecerá a seguir, e implementou uma segunda decisão de design - sinalizando o estado ativo. Infelizmente, o vermelho como indicador ativo foi uma escolha infeliz por vários motivos:

• Vermelho é usado arbitrariamente na interface - por exemplo, o botão X (Sair) também é vermelho e isso não pode significar que está ativo. (Se o vermelho representa um estado ativo, o que a cruz vermelha significa? Que eu já saí da reunião?)
• Outra cor (azul) é usada para indicar que outros botões, como Vídeo e Bate-papo, estão ativos (ou seja, um ícone de vídeo azul indica que o vídeo está ligado).

Na ausência de um indicador claro do estado ativo, o usuário pode confiar no rótulo do botão para decidir o que está acontecendo e, com o rótulo do ícone inalterado, isso apenas causaria confusão.



A propósito, o aplicativo Phone no iPhone usa a mesma implementação, com a única diferença de que é mais consistente do que WebEx e usa um preenchimento em branco para indicar o estado ativo. Mesmo com essas configurações, é difícil determinar o estado ativo do botão.







IPhone iPhone app: O botão Mudo não muda seu ícone, mas indica um estado ativo com um preenchimento branco (à esquerda). Embora o branco seja indiscutivelmente um tom melhor do que uma cor aleatória, não é um forte indicador de um estado ativo.

Recomendações

Então, qual é a recomendação geral para botões de alternância de estado que servem como indicadores de status? A solução mais segura é usar 2 elementos de IU, um para o estado atual e outro para a ação de alternância de estado, como no exemplo do Tesla.



Se desejar, você pode combinar os dois em um controle, assim como o Zoom faz. Seu controle de mudo consiste em dois componentes separados:

1. Um rótulo de texto que indica o que acontece se o usuário clicar neste controle.
2. Ícone que indica o estado atual do sistema

Clicar em qualquer um deles mudará o estado.







No design de Zoom, o ícone representa o estado atual e o rótulo indica o que acontecerá se os usuários clicarem no botão. Clicar em um ícone ou rótulo muda o estado.



Lembre-se de que seu objetivo ao ligar / desligar é garantir que os usuários entendam rapidamente:

• Estado atual
• O que acontece se eles clicarem neste controle

Faça uma estimativa dos dois estados pelos quais o sistema passará.



É óbvio que esses são dois estados opostos?

• Caso contrário, fala a favor de um design com dois controles: um para o estado atual e outro para a ação de transição para outro estado.
• (, , ), , , .

(, , ), ?

• , , ( ) .
• , — .

( Mute)?

• , .
• , .

Agradeço o tempo e assine o canal UXHorn tg , onde posto de forma consistente os artigos mais interessantes sobre UX e pesquisas.