it-swarm-pt.tech

Qual é a cor certa para um botão de pausa?

Temos um aplicativo com um cronômetro embutido. Se o cronômetro estiver funcionando, o botão de pausa é exibido e, se estiver parado, o botão de reprodução é exibido. Atualmente, o cronômetro em si e o botão estão em cores neutras.

Seria ótimo se a cor do botão reproduzir/pausar pudesse ajudar o usuário a usar o cronômetro com mais eficiência.

O plano de fundo precisa permanecer neutro por motivos técnicos; portanto, a única opção de design que temos é colorir o botão. Eu li o discussão sobre a seção do botão reproduzir e pausar e faz todo o sentido, mas novamente razões técnicas me impedem de ter dois botões. Então, é um botão em um fundo cinza.

O cronômetro de execução com o botão de pausa deve ser verde ou vermelho?

Um botão verde de parada seria um ótimo indicador de que o cronômetro está funcionando, mas seria estranho pressionar um botão verde para parar alguma coisa. Um botão vermelho de parada seria um ótimo indicador de que este é um botão PARAR, mas o cronômetro em execução sempre mostraria o botão vermelho, o que é meio estranho.

17
Sandra

A resposta de ChrisF é muito correta - verifique se as cores não são a única indicação! Supondo que você já esteja cuidando disso:

Se a escolha for estrita entre verde e vermelho - vá para vermelho.

O botão é uma ação, não um indicador. Se fosse um indicador, você talvez o desejasse verde (para mostrar que está "ok" ou em execução), mas ao lidar com ações - vermelho significa "parar" (e "pausar" é uma espécie de "parar").

Além disso - você não precisa de mais indicações de que o cronômetro está funcionando - você vê os números reais mudarem!

BTW - se você tiver apenas um botão, depois de pressionar "pausar", o que o botão "se tornará"? Pressioná-lo novamente será retomado ou interrompido?

9
Dan Barak

Lembre-se de que uma proporção significativa da sua base de usuários será daltônica em vermelho/verde; portanto, ter um botão que muda de cor de vermelho para verde não os ajudará.

Seria melhor mudar o ícone. Eu usaria o padrão > para começar, || para pausa e [] (quadrado) para parar se você precisar dessa opção.

Isso significa que, quando parado, o botão mostrará > significa "clique para iniciar". Ao executar o botão mostraria || significa "clique para pausar".

8
ChrisF

Uma opção que pode funcionar é tornar o botão colorido enquanto o relógio está funcionando e neutro quando não está. Em vez de exibir> e ||, você pode fazer com que pareça um botão físico com um LED incorporado que acende quando o relógio está correndo. Pontos de bônus se você puder fazer com que o botão pareça pressionado quando o cronômetro estiver "ligado".

Picture of a toaster oven with a button that has a blue light and remains depressed when on

Eu esperava que você pudesse usar uma luz vermelha para indicar estado (o relógio está correndo) ou ação (parar o relógio) - evitando a combinação de duas funções mencionada por Jim Jarrett na reprodução/pausa pergunta e Dan Barak aqui. Mas, de acordo com uma pesquisa rápida dos aparelhos e eletrônicos da minha casa, o vermelho nunca é usado para indicar "ligado". (Com uma exceção notável: o forno.) A maioria usa luzes azuis, outras usam verde. Alguns usam o vermelho para indicar desativado (mas me encontre no escuro) .

Portanto, não acho que seja uma ideia particularmente boa. (Gosto mais da resposta de Dan.) Mas vou publicá-la de qualquer maneira, porque às vezes podemos aprender tanto com idéias que não funcionam como as que funcionam.

6
Patrick McElhaney

Eu acho que a cor não é uma opção. Se você usar cores diferentes das cores da interface do usuário, será uma distração. Sugiro concentrar a atenção do usuário em INFORMAÇÕES (hora) e usar a posição diferente para controles de comando. Por exemplo, eu sei que o botão Iniciar/Continuar estará no centro da área de trabalho e Pausará na parte inferior (1). Então vejo o tempo que gastei para alguma tarefa. Se eu quiser parar meu cronômetro, encontrarei meu botão de parada na parte inferior (2). Então, vejo que meu cronômetro está inativo (a etiqueta de tempo está inativa) e encontrarei o botão Continuar no mesmo local que o inicial (3).

stopwatch in action

Além disso, para evitar o "clique duplo" (que pode ser causado por atrasos na execução e assim por diante ...), é um bom hábito colocar controles de ação exclusivos exclusivos nos diferentes locais.

3
igor

A iconografia de reproduzir e pausar parece mais relacionada a vídeo e áudio do que a execução de um timer.

Um botão com o texto "Iniciar" seria fácil de entender. Ao pressionar este botão Iniciar, você precisará de ações para o usuário pausar e parar - se é para ser um cronômetro.

Em cores, sugiro verde para início, cinza para pausa e vermelho para parada - uma tonalidade monocromática pode ser aplicada para garantir que o contraste não seja grande demais.

2
Tor Løvskogen Bollingmo

Voltando ao problema inicial, você considerou que alguns usuários verão seu botão como um indicador do estado atual?

No meu MP3 player, a tela mostra a reprodução (>) quando estiver sendo reproduzido e faça uma pausa (||) quando está em pausa. Meu gravador de vídeo VHS, DVD player e decodificador também fazem isso.

O que você está enfrentando é um problema bem conhecido com os controles "alternar" - o Hall da vergonha da interface do usuário costumava ter bons comentários sobre isso. Essencialmente, você não pode prever se os usuários interpretarão o botão como estado disponível ou estado atual .

Eu sugiro o seguinte:

Mostre dois botões em seu cronômetro, reproduza e faça uma pausa: >||

Quando o cronômetro está em execução:

  • Desativar reprodução e remover cores
  • Ativar Pausa, pinte de amarelo/laranja

Quando o cronômetro está parado

  • Ative a reprodução e pinte de verde
  • Desative a pausa e remova a coloração
2
Bevan

Não é ótimo como passamos de dispositivos com botões de parada, pausa e reprodução para uma alternância?

As cores desviam o foco de outras tarefas; portanto, se o objetivo do cronômetro é que apenas alguns usuários o usem, ou que sejam apenas para uso ocasional, evite a distração das cores.

1
JeromeR

Eu vi o vermelho para parar em um aplicativo de entrada de tempo. Pode haver vários cronômetros listados em uma tabela, mas apenas um pode estar em execução por vez. Ter o cronômetro ativo com um botão de parada vermelho ajuda o usuário a encontrá-lo na lista.

Eu acho que no faturamento por hora, pressionar 'parar' no seu timer é uma coisa perigosa;)

0
JeffO