it-swarm-pt.com

Um botão de alternância deve mostrar seu estado atual ou o estado para o qual será alterado?

Tenho uma pergunta rápida sobre botões que alternam entre dois estados. (Pense em Reproduzir/Pausar ou Aleatório/Reprodução regular.) Como o título diz, a alternância deve mostrar seu estado atual ou o estado para o qual fará a transição?

Acho que as pessoas estão acostumadas com a convenção Play/Pause. Mas a reprodução aleatória/regular pode ser mais confusa se você mostrar o estado de transição em vez do atual. Por exemplo, o music player embutido no Xbox 360 faz o seguinte: quando está no modo aleatório, mostra o ícone para reprodução direta e vice-versa e sempre me confunde (estou no modo aleatório ou reprodução direta).

Eu vejo da seguinte maneira: Reproduzir/Pausar é mais parecido com ação do que iniciar ou pausar. Sim, nos bastidores, é uma transição de estado, mas para o usuário, há uma ação. Enquanto a reprodução aleatória/direta é uma opção e é melhor mostrar o estado atual (e possivelmente ter apenas um ícone e botão de alteração para mostrar que a opção está ativada/desativada). Pensamentos?

461
Michael Brown

Em About Face 2. (existe uma v3, mas não a tenho) Cooper e Reimann (2003, pp. 341-2) tratam esse assunto sob a título "Botões flip-flop: um idioma de seleção a evitar". Sugiro fortemente consultar este livro, pois apresentarei apenas um trecho:

Os controles do botão flip-flop são muito eficientes. Eles economizam espaço controlando duas opções mutuamente exclusivas com um único controle. O problema dos controles de flip-flop é que eles não cumprem o segundo dever de todo controle - informar o usuário sobre seu estado atual. Se o botão indicar ON quando o estado estiver desativado, não está claro qual é a configuração. Se estiver desativado quando o estado estiver desativado, onde está o botão ON? Não os use. Não nos botões e não nos menus!

Os autores (e considero isso uma autoridade sobre o assunto) apresentam duas soluções possíveis: Você deve soletrar a ação do botão como uma frase verbal (por exemplo, Alterne para o modo retrato, sacrificando um pouco do espaço economizado) ou use alguma outra técnica inteiramente ( por exemplo, dois botões de opção).

268
jensgram

Resposta Curta:

Resposta bastante tardia, mas estou surpreso que ninguém aqui apontou isso antes - é possível que uma chave de alternância mostre seu estado atual e o estado para o qual ele mudará simplesmente colocando o texto fora do botão, em vez de nele.

Real Life Switches

Resposta Longa:

Como assinala dotancohen:

O problema é que, em inglês, "on" e "off" são advérbios e adjetivos.

Os botões com texto fora do corpo usam esse fato a seu favor! Leia...


iOS On-Off Switch

Vamos nos concentrar no estado azul e dizer EM por exemplo.

iOS ON

Você pode dizer se a chave está LIGADA no momento ou se continuará se você mover/clicar/tocar no controle deslizante? O texto é óbvio? "ON" aqui é um estado (adjetivo) ou ação (verbo)? Não está claro. A cor é de alguma utilidade para ajudá-lo a decidir isso? Provavelmente, mas não certamente - os usuários do iOS podem estar habituados aos estados desse design, mas não há como dizer como os usuários que não são do iOS interpretariam isso. Para entender o que quero dizer, use este interruptor de viagem da vida real, que tem o mesmo design do interruptor do iOS - você pode ter certeza se o interruptor de viagem está atualmente ligado?

Ambiguous Trip Switch

A opção abaixo é semelhante ao design do iOS, mas muito pior ...

Ambiguous On-Off Switch

... nem está claro qual é a metade da alça do slide/clique!


Unambiguous On-Off Switch

A pergunta da citação de jensgram ...

Se o botão indicar ON quando o estado estiver desativado, não está claro qual é a configuração. Se estiver desativado quando o estado estiver desativado, onde está o botão ON?

... nunca surge aqui, já que o botão não diz ON nem OFF - apenas permanece por si só. Além disso, não há confusão sobre o contexto das palavras ON e OFF - são estados muito claros (adjetivos), pois clicar neles (no design normal) não faria nada!

Pode ser interessante notar que uma modificação nesse design permitiria que o texto do lado oposto do botão fosse tornado clicável/sensível ao toque. Nesse caso, a palavra mais próxima à alça da chave é o estado, enquanto outra é a ação, e as funções são revertidas quando a chave é alternada.

Modded On-Off Switch

Mesmo assim, a perspectiva do usuário do switch não é alterada - em nenhum momento o usuário fica confuso sobre o estado atual do switch. De fato, o design poderia ser aprimorado ainda mais para facilitar a utilização, destacando o estado atual:

Highlighted On-Off Switch


Win8 On-Off Switch

A cor do botão indica o estado atual (aceso = ON, como na vida real), e as palavras On/Off, abaixo do texto da opção, tranquilizam o usuário sobre o estado atual.

414
SNag

O que você decidir - não faça o que o Twitter faz.

Aargh don't change the button when I'm about to click it!

60
Daniel Alexiuc

O problema é que, em inglês, "on" e "off" são advérbios e adjetivos. Portanto, encontre palavras de substituição que sejam verbos ou adjetivos para rotular o botões com:

Enable / Disable
Enabled / Disabled
Start / Stop
Running / Stopped

O que outras pessoas estão dizendo

Edição muito tardia: Veja esta excelente opção que um colega meu projetou, que consegue manter a terminologia "liga/desliga", mas sem ambiguidade:

on off switch

35
dotancohen

Um compromisso razoável seria deixar o botão não destacado (talvez tenha uma cor de fundo neutra) quando estiver no estado desligado e destacá-lo (alterar a cor de fundo) quando estiver no estado ligado.

Por exemplo, olhando para esta captura de tela do aplicativo Spotify (web), você acha que a reprodução aleatória está ativada ou desativada?

Shuffle is most certainly on

26
Marks Polakovs

Acho que você acertou na sua pergunta.

Se a alternância for uma ação - Reproduzir/Pausar -, deverá mostrar o que acontecerá. Então, enquanto estiver pausado, mostrará Play e, em seguida, enquanto estiver reproduzindo Pause.

Se a alternância for uma opção - Aleatório/Linear -, ela deverá mostrar o estado atual.

Como você indica que ao usuário que um botão é uma ação e o outro é uma opção, não tenho certeza ...

25
ChrisF

Eu diria que depende do caso, como ChrisF disse, é importante ter uma distinção entre um botão de ação e um botão de estado.

Se o botão tiver texto, você poderá alterar o texto para mostrar que clicar nele fará algo (ex: "Ativar reprodução aleatória"). No entanto, no seu caso, como é apenas um ícone, eu usaria apenas um ícone de reprodução aleatória que parece ativado/desativado, dependendo do estado. Se estiver desativado, deve ficar claro para o usuário que é uma jogada direta. Você pode acender ou mostrar o botão pressionado.

Considere adicionar uma dica de ferramenta ao passar o mouse para torná-la ainda mais clara.

20
mbillard

Fico surpreso ao ver nenhuma menção à técnica usada no iOS (e em outros lugares), um botão de ação/estado combinado, onde as duas opções são visíveis, agrupadas e a ativa é claramente destacada.

Arte ASCII terrível para demonstrar:

[ ON | off ]

Airplane mode toggle on iOS

20
jezmck

Eu parava de "não usá-los".

Eu sugiro que os botões de alternância sejam aceitáveis ​​no caso em que haja um estado claro de ligado e desligado. Isso pode ocorrer, por exemplo, quando você tem uma linha de botões acinzentados que ficam coloridos quando você clica neles.

Esta é a razão pela qual a Reprodução/Pausa funciona em muitos casos. O botão play não é tanto uma alternância entre dois estados quanto uma ativação/desativação. Fica verde brilhante quando ativado (estou tocando!), Fica cinza e mostra um || quando desligado (não estou jogando!).

Os outros botões fazem o mesmo, portanto, a consistência aumenta a disponibilidade. Provavelmente também é baseado em nossas percepções históricas de um toca-fitas ou videocassete, que tinha botões pressionados (por exemplo, no estado) ou pressionados (por exemplo, estado fora) e acho que esse é um ótimo modelo mental a ser lembrado ao considerar uma alternância .

Mas, em qualquer caso em que eles não sejam simplesmente "ativados", onde você não pode substituir a alternância por uma caixa de seleção mais feia, o padrão seria "não usá-los", por todos os motivos já mencionados.

ADIÇÃO

Acabei de notar hoje que o Evernote tem uma alternância bastante eficaz. Eles adotaram a abordagem de um mouseover, que realmente funcionou muito bem. Observe que esse é outro caso de um controle de estilo ativado/desativado.

toggled off

toggled on

ADIÇÃO ADICIONAL

Encontrei essa opção interessante hoje e lembrei-me das perguntas e respostas sobre o UX. Observe como o estado é imediatamente óbvio, e o fato de que ele muda quando você o toca também é tornado óbvio pela "alça" texturizada (ou seja, disponibilidade) - só sei que quando eu agarro o botão levantado, ele muda para o lado oposto e diga o oposto do que diz agora; é como um banheiro de avião.

Para que eles possam ser bem feitos.

toggled offtoggled on

20
Kato

Já existem 18 respostas aqui; portanto, isso pode ser tarde para a festa, mas faz sentido usar caixas de seleção nessas situações. Alguns exemplos:

enter image description here

E quando selecionado:

enter image description here

Isso é semelhante à abordagem "escurecer/iluminar" que o "Curtir" do Facebook usa , mas é combinado com uma caixa de seleção para melhor visibilidade. De qualquer forma, o ponto principal é usar apenas uma palavra (ou conjunto de palavras) em vez de tentar fazer o usuário decidir entre várias palavras.

Além disso, lembre-se de evitar o uso de prefixos negativos (" Not", " Non -", " Un - = "," Dis - "," Im - "," Mis - "," Em - "," Il - "," Ir - ") caso contrário, o usuário teria que fazer um" duplo negativo " em sua mente quando ele tinha  unmarcou a caixa de seleção:

enter image description here

20
Pacerier

Eu tenho usado o botão de alternância para "Adicionar" e "remover" elementos de uma coleção usando o simples botão de alternância (um com o estado visível por vez) que apresentava os seguintes estados.

  • ADICIONAR (se o botão não tiver sido clicado)

  • REMOVER (se o botão foi clicado anteriormente e um item agora fazia parte da coleção)

Mas isso sempre me incomodou, como para um usuário iniciante (com mais de 50 anos), inicialmente era difícil entender o que aconteceu e por que o botão está pedindo para "Remover" antes mesmo de saber que esse item agora faz parte da coleção. O bit que faltava nesse caso era uma mensagem de notificação que dizia "Item adicionado com sucesso". Estou usando uma mensagem de status baseada em Javascript que aparece na parte superior da tela (usando http://Twitter.github.com/bootstrap/javascript.html#alerts ), mas desde que ela foi deslocada visualmente do elemento de interação, resolvi apenas uma parte do problema para alguns usuários.

Outra questão

Seu botão muda de "Posição" ou "Vira de lado" após cada clique. Às vezes, diz "Eu sou o botão adicionar" e algumas vezes o mesmo botão (na mesma coluna, entre outros botões), diz "Eu sou o botão remover". A mudança de cores ajuda, mas ainda existem dois papéis opostos, ocupados por um botão. NÃO SO CERTO.

Minha solução:

Minha solução para esse problema menor e bem discutido é substituir o botão de alternância por algo assim.

Botão com a legenda "Adicionar" quando não clicada Após o clique, o botão substitui-se por uma mensagem "Adicionado com sucesso" e mostra um pequeno botão 24x24 com o rótulo "X" e que permite cancelar seu último ato, que é sempre "Adicionar" . Assim, você nunca clica no botão "Remover", mas apenas "cancela" a sua "Adicionar operação" anterior. Além disso, você não precisa mostrar uma notificação separada "Adicionada com sucesso" na página. O lado negativo dessa abordagem é que você precisa de mais espaço para colocar o rótulo "Adicionado com Sucesso" e um "Botão para Cancelar", mas, na minha opinião, essa é uma das abordagens menos confusas.

enter image description here

12
Salman Ehsan

Em muitos casos, pode ser útil ou possível evitar esses botões.

Por exemplo. no caso de reprodução aleatória/aleatória: basta usar uma caixa de seleção com uma etiqueta "aleatória" ao lado e ninguém ficará confuso ...

E, no caso de um botão de reprodução/reprodução aleatória, talvez não seja necessário alterar o rótulo do botão. Você pode usar um botão "pressionado" para indicar "reprodução" e um botão "para cima" para indicar "não reprodução". Ou você pode colocar um indicador em outro lugar na interface do usuário, é claro (é isso que meu sistema estéreo faz ...).

Não é porque alguma empresa começa a usar um determinado widget que, de repente, ele deve ser usado para tudo ...

11
JanC

No Facebook, o botão Curtir é um bom exemplo para um botão de alternância.

No aplicativo Android do Facebook , o like está em um botão e fica acinzentado quando desativado e realçado em azul quando ativado. Veja as capturas de tela abaixo.

Basicamente, concordo com eles - enfatizam o positivo e não mexem com o cérebro dos usuários (alteração mínima).

Não tenho certeza se é uma boa maneira para daltônicos. Talvez eles devessem ter feito a indicação mais ousada.

enter image description hereenter image description here

No aplicativo Web do Facebook , o padrão é diferente. O texto do botão muda para indicar a ação - o que acontece ao clicar. Isso é confuso. MAS, isso faz sentido porque eles têm muito espaço e têm uma indicação separada de que um usuário gosta de uma postagem.

enter image description hereenter image description here

9
AlikElzin-kilaka

Eu recomendaria assistir ao vídeo a seguir (de 1991!), Que é seminal para o design atual da alternância do iOS, por exemplo: https://www.youtube.com/watch?v=wFWbdxicvK

E artigo correspondente: http://dl.acm.org/citation.cfm?id=143079

Aqui estão as opções que eles compararam: The toggles they compared E os resultados em preferência: Results of the preference test

7
Riche Design

Os botões rotulados (botões de alternância) geralmente são confusos ou até ambíguos, como você aponta. Em vez de,
mostra o status e a ação, assim:

Online Go offline

Portanto, temos um rótulo não clicável indicando claramente o status atual e um botão clicável para executar uma ação para alterar o status.

Se você clicar no botão "Ficar offline", o rótulo muda para "Off-line" e o botão muda para "Ficar online".

Mostrar o status atual e a ação ao mesmo tempo é a única maneira de ficar completamente claro. Os botões de opção fariam isso, mas a solução de etiqueta + botão é melhor porque oferece uma distinção visual clara entre os dois. Também é naturalmente mais compacto do que botões de opção.

Quanto às alternativas, acho que está de acordo que os botões de alternância podem ser problemáticos. Até as caixas de seleção podem ser confusas:

 Online

A caixa de seleção não está marcada, portanto, o aplicativo está offline. Mas isso não está particularmente claro. Se você olhar para ela, a primeira coisa que verá é a palavra "Online", por isso é fácil tirar a conclusão errada.

O problema é que tudo que você pode ver é um único rótulo. Você precisa pensar um pouco antes de decidir se o rótulo indica um status ou um comando. Esse problema é comum em caixas de seleção e botões, e tentar usar consistentemente adjetivos (ou verbos ou qualquer outra coisa) pode melhorar as coisas, mas não fará com que o problema desapareça.

6
Bennett McElwee

Para o exemplo Tocar/Pausar, mostraria o estado atual normalmente e o oposto ao passar o mouse (quando isso for apropriado, por exemplo, não nas telas de toque). Esse item possui 2 estados naturais e nenhum verbo unificador. On/Off, por outro lado, pode ser simplificado para Power com o estado On aceso e o estado off, bem, não.

4
Rob Allen

Eu sempre iria com estado atual. Eu acho que o idioma play/pause é a exceção ao invés da regra. Penso que reproduzir/pausar como é, é possivelmente um resquício dos dias dos antigos tapetes de fita cassete. Quando a reprodução/pausa foi combinada nos CD players, lembro-me de pensar em como isso era legal e inovador.

De qualquer forma, uma maneira de tornar óbvio que o estado atual é "selecionado" é fazer um pouco o botão brilhar um pouco, ou descrevê-lo com alguma mágica parecendo azul.

enter image description here

Azul mágico geralmente significa que algum estado está "ligado"

Portanto, o botão acima é na verdade um botão de três estados do iTunes. Ele tem 3 estados: repita, repita tudo e repita 1. É bem claro o que está acontecendo aqui no rosto do botão. A repetição 1 está ativada .

Como outro exemplo, tenho três configurações de câmeras diferentes que são alternadas por um único botão: 1 ortográfico para cima, 4 ortográfico para cima e perspectiva. Um único botão percorre esses estados 3 e eu estou mostrando o estado atual atual na face do botão.

Botões únicos para vários estados não são que são confusos quando você se acostuma. Eles são ótimos porque grupo configurações mutuamente exclusivas e salvam desordenando a interface do usuário com muitos botões distintos. De certa forma, eles são como um botão de opção compacto.

Outras opções que eu poderia pensar são:

  • Mostrar estado atual e exibir um menu para alterar o estado (mesmo se houver apenas 2 opções)

Um exemplo disso é como o Mac OS mostra o estado do seu BlueTooth ou Airport - ele ainda possui uma janela pop-up com frases completas sobre o que cada ação fará:

enter image description here

Ele mostra seu estado atual (cinza desbotado significa desativado) e mostra os próximos estados através de um menu pop-up com frases completas.

3
bobobobo

O rótulo no botão de alternância, como Reproduzir/Pausar, não deve mudar. O botão em si deve indicar visualmente que está pressionado (deixando o rótulo 'Reproduzir'). Isso elimina toda a confusão.

2
Denzo

As imagens de resposta de @ Kato do Evernote deixam claro: existe o rótulo que comunica o que é controlado pela alternância ("Salvamento automático") e a alternância, que funciona como um indicador de estado (O | I).
O problema de algumas alternâncias é tentar usar o mesmo bit para dois propósitos diferentes: comunicar o estado e comunicar a ação.
As luzes da minha casa, por exemplo, possuem uma alavanca anônima e um indicadoror brilhante, que é a própria luz (quando a lâmpada falha, geralmente não sabemos se a alavanca está na posição ligada ou desligada) .
A peça | o arranjo de pausa também possui um indicador claro, o som da própria música. A alternância cumpre uma função (controle), a música cumpre a outra (estado de comunicação).
A alternância shffle x linear controla o estado, mas não o comunica. Você precisaria pegar a caixa do CD, aguardar o término de um tema e verificar se o que inicia depois é o próximo da lista ou não (e repita para ter certeza). Mas se você acha isso um embaralhamento | opção binário não aleatória, você pode rotular após o comportamento que ele controla ("embaralhar" como um verbo) e comunicar o estado iluminando-o.
A meu ver, em qualquer caso, você precisa comunicar o estado.
Um amigo meu está furioso com o controle remoto da trava do carro. Tem um estado impresso e ele não sabe se é a ação ou o feedback.

1
Juan Lanus

Para reduzir a ambiguidade, sugiro:

  1. Use a ação como o texto do botão de alternância, não o estado.

  2. Verifique se o botão não está destacado.

  3. Destaque a ação sobre o mouse sobre/foco para enfatizar o que acontecerá.

  4. Destaque o estado atual e coloque-o ao lado do botão.

Por exemplo...

enter image description here

(outros exemplos: "ligue" + "off", "desligue" + "on")


Ou você pode usar controles deslizantes e

  1. Destaque o estado atual, que deve aparecer no controle de polegar

  2. Coloque a ação que transita o estado dentro da área vazia (não o destaque)

Por exemplo...

enter image description here

(Imagine que o controle de polegar se parece com um controle de polegar e não como um botão)


Retirado da minha resposta para a pergunta duplicada fechada com algumas melhorias.

0
Danny Varod