O que os usuários lembram mais, posição ou cor dos elementos?


11

Eu tenho um menu de navegação com alguns botões, que se parece um pouco com isso (NOTA: Cada botão tem um ícone distinto que o diferencia dos demais, não os adicionei à maquete, mas eles são semelhantes aos ícones do Wins8):

insira a descrição da imagem aqui

Alguns usuários relataram clicar acidentalmente em Assinar em vez de Enviar, algo que é apenas inadmissível. Agora estou pensando em maneiras de diferenciar mais os botões. Uma opção é mover o sinal para a direita. O outro (provavelmente adicionando ao movê-lo) para mudar sua cor:

insira a descrição da imagem aqui

A posição é suficientemente diferenciada? Ou devo considerar usar cores também? Adicionar uma nova cor a esta navegação tem algum impacto na paleta geral e na aparência, por isso tem um preço que eu teria que pagar.


2
Eu não chamaria isso de 'fora de tópico', mas isso pode fazer mais sentido migrar para o UX.
DA01 28/01

@ DA01 Sim, eu estava considerando. A parte colorida das coisas me fez pensar, e finalmente pensei: pode pertencer a ambas? Não me importo de migrá-lo!
Yisela 28/01

Alguns de seus usuários terão daltonismo azul / amarelo. Verifique se essas cores são distintas para eles!
Kevlam

@keshlam Definitely! Eu tenho um aplicativo daltônico na barra de tarefas para tentar as paletas :)
Yisela

Eu diria que não. Cheiro é mais memorável :)
Scott

Respostas:


5

Também não ajuda o fato de você estar trabalhando com três palavras de quatro letras que começam com a letra 'S'. :)

A cor é um indicador imediato de que algo está diferente. No seu primeiro exemplo, você realmente não tem idéia do que qualquer um desses botões faz, a menos que você tome um tempo para prestar atenção e lê-los; de relance, eles são muito diferentes para diferenciar. Um paradigma que usamos onde trabalho é que tornamos nossa ação primária uma cor separada de qualquer ação menos importante ou menos permanente / finalizadora.

Mas a cor não é necessariamente o que faz ou que quebra. Outra estratégia válida seria associar um ícone a cada botão (não apenas aos dois últimos). Dessa forma, você está criando outra diferença facilmente distinguível nos elementos.

Quanto à sua pergunta real, se a posição é suficiente diferenciação, acho que certamente ajuda porque o padrão dos botões é quebrado pelos dois menores, o que o força a realmente observar as diferenças nos botões, em vez de ignorá-las. A cor adicionada apenas ajuda a acentuar isso ainda mais, e pessoalmente, se possível, eu adicionaria a cor também, pois isso ajudará na prova futura caso mais opções sejam adicionadas mais tarde e o botão possa ser perdido com mais frequência novamente. Embora, desde que seja difícil mudar a cor, eu ache que o novo posicionamento seja suficiente.

No entanto, o que eu acho provavelmente é muito menos relevante do que o que seus usuários pensam ou fazem, e se você tiver os recursos, eu tentaria vários projetos e testaria com os usuários para ver qual eles preferiam e por quais razões.


Obrigado! Apenas uma observação: os botões têm ícones bastante distintos, não posso divulgar as capturas de tela reais e não as adicionei aos modelos ... mas as pessoas as confundem!
Yisela 28/01

Imaginei que eles não eram fiéis à vida, embora eu não pudesse deduzir se eles tinham ou não ícones, obrigado por esclarecer isso.
Hanna

6

Coisas que podem ser usadas para diferenciar botões:

  • os rótulos (obviamente)
  • cor
  • Tamanho
  • ordem
  • localização
  • proximidade
  • forma / estilo

Quanto mais danos não intencionais uma ação puder causar, maior será a probabilidade de você escolher mais do que apenas uma dessas opções acima.

Não conhecendo o fluxo do usuário para esses comandos, não sei se sua sugestão é suficiente, mas é definitivamente uma melhoria em relação à anterior, agora que você moveu a ação 'uh oh', envie-a para longe das outras duas.

Talvez eu fosse um passo além e usasse uma diferenciação criteriosa de proximidade. Talvez algo tão drástico como este:

--------  --------
| SAVE |  | SIGN |                                               DELIVER -->
--------  --------   

Eu usei vários diferenciais aqui ... proximidade, estilo / tipo de botão e renomeei 'enviar' para 'entregar' (veja abaixo).

Um outro desafio que você parece ter é um enorme caso de aliteração. Isso pode levar um pouco de criatividade para superar isso. Por exemplo, você provavelmente nunca deseja ter dois botões lado a lado com os rótulos "excluir" e "entregar" :)


3

Concordo com Johannes e DA01, ambos levantaram os pontos que eu gostaria com relação a posicionamento, aliteração etc.

Mas o que eu gostaria de acrescentar.

Com os ícones de sinal já salvos e enviados, o reposicionamento sozinho do botão enviar deve ser suficiente. Eu sugeriria não mudar a cor, pois não há necessidade e também é um pouco mais drástica para os usuários (não me interpretem mal, eu sei que eles poderiam lidar, mas acho que não é necessário).

Se os símbolos são reconhecíveis o suficiente para as pessoas, a separação do botão de envio deve ser suficiente.

Se seus ícones são menos reconhecíveis imediatamente, ou seja, você talvez possua um disco ou usb em vez do disquete tradicional para o ícone de salvar, sugiro que mude a cor conforme sugerido, as pessoas entendem que verde significa ir embora.

Espero que os usuários acabem felizes;)


1

O que os usuários lembram mais, posição ou cor dos elementos?

Não apresentarei sugestões concretas, mas um breve comentário sobre a manchete: é altamente individual. Assim como algumas pessoas dizem "entendi o que você quer dizer" e outras dizem "eu ouvi você" ou algo parecido. Algumas pessoas estão sintonizadas com o visual, outras estão mais sintonizadas com o som.

Algumas pessoas estão mais sintonizadas com a forma, outras com cores. Assim como você precisa satisfazer os daltônicos, é necessário levar em consideração que nem todas as pessoas vêem as formas e cores como suas principais pistas para a navegação (algumas pessoas identificam uma árvore, um animal, uma casa por forma ou cor; outras identifique um carro que passa pelo som em vez de forma e / ou cor, etc.).

Nesse caso, é claro que existe um equilíbrio entre os dois (seria divertido descobrir de que tipo os usuários cometem erros no botão errado. Pode haver um padrão lá. Além disso, acho que usuários com excelentes habilidades em computadores serão mais rápidos em assumindo onde encontrar o botão certo.).

Como você não pode mostrar os botões reais com os ícones, fica difícil sugerir. Uma maneira simples poderia ser simplesmente aumentar a distância até a "saída", como sugere o @ DA01. Mais ou menos como o MailApp:

insira a descrição da imagem aqui

Apenas um pensamento.


Editar

Uma experiência divertida é apresentar a um punhado de pessoas uma maquete primitiva (quanto mais simples, melhor: desenhos, post-its na parede, esboço de flip-over, quadro branco etc.) com botões colocados, mas não marcados e identificados. Em seguida, pergunte às pessoas o que elas esperam que os botões anônimos façam. Às vezes, isso pode trazer resultados informativos e muito interessantes.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.