it-swarm-pt.tech

Quando usar ícones vs. ícones com texto vs. apenas links de texto?

Existem regras sobre quando usar ícones x ícones com texto x apenas links de texto em um aplicativo Web?

Por exemplo:

disk icon

vs.

disk icon salvar

vs.

salvar


Pergunta extra: É disk icon salvar -ou- salvar disk icon preferível?

172
jmb

Os ícones são notoriamente ineficazes como rótulos, sendo muito difícil de interpretar corretamente sem treinamento ou experiência. Na maioria das situações, os usuários aprendem melhor as interpretações corretas apenas com texto do que apenas com ícones. Ver: Wiedenbeck, S (1999). O uso de ícones e etiquetas em um programa de aplicação para o usuário final: um estudo empírico de aprendizado e retenção. Behavior & Information Technology, 18 (2), p.

Os ícones são especialmente ruins para qualquer coisa abstrata, como Fatura ou Lance, pois as coisas abstratas geralmente não têm uma imagem visual forte (tanto a Fatura quanto a Bid podem ser representadas como documentos em papel, mas como você as distinguiria)? Da mesma forma, os ícones são particularmente ruins para ações (por exemplo, Salvar, Publicar); é difícil mostrar claramente um processo com uma foto. Sim, os ícones são usados ​​o tempo todo nas barras de ferramentas para ações, mas as barras de ferramentas foram projetadas para especialistas e, no entanto, os usuários são frequentemente confundidos com eles (em média, os usuários conhecem apenas seis itens da barra de ferramentas do Word depois de usar regularmente o Word por dois anos ).

Os ícones podem economizar espaço sobre o texto, mas ao preço do reconhecimento. Para ícones pequenos, como 16 x 16 pixels, é muito difícil para os usuários reconhecerem o que eles deveriam ser uma imagem, muito menos o que a imagem deveria representar. Um usuário que eu conheço achou que o ícone "disco" para salvar era uma imagem de uma TV. (Ela tinha idade suficiente para saber o que era um disquete.) Eu pessoalmente uso o Word há anos, pensando que o ícone Rastrear alterações era uma espécie de Rosetta Stone estilizada. Usuários experientes acham mais fácil confiar na posição física memorizada dos controles da barra de ferramentas em vez dos rótulos dos ícones para escolher um controle. Ícones maiores (por exemplo, pelo menos 32 por 32 pixels) podem ajudar no reconhecimento, mas ocupam tanto espaço que é melhor usar o espaço para um rótulo de texto claro. Se o espaço for limitado, é melhor usar texto abreviado do que ícones.

É extraordinariamente difícil acertar os ícones. Não tente desenvolver um novo ícone sem iterações extensas de teste do usuário. Mesmo assim, você pode falhar. Os designers da Microsoft tentaram de tudo para criar ícones interpretáveis ​​para a barra de ferramentas do Outlook antes de desistir e usar etiquetas de texto nos controles de teclas.

Os rótulos dos ícones também dificultam o suporte técnico (por exemplo, "Clique na folha amarela com uma marca de seleção azul" e "Clique em 'Aceitar'").

Como regra geral, apenas os ícones devem ser permitidos quando pelo menos duas das três condições a seguir se aplicarem:

  1. O espaço é muito limitado (ou seja, pequeno demais para o texto).

  2. Os ícones são padronizados (por exemplo, a imagem do disquete para salvar)

  3. O ícone representa um objeto com um forte atributo físico analógico ou visual (por exemplo, um ícone de impressora para acessar os atributos da impressora ou um retângulo vermelho para definir o fundo da página em vermelho).

As dicas de ferramentas são necessárias para ícones quando usadas sozinhas, mas são um substituto inadequado para os rótulos de texto. Seus usuários não precisam usar seu aplicativo procurando por coisas. O fato de os rótulos de texto nunca precisarem de dicas gráficas é uma boa pista de que o texto é melhor que os ícones.

Se o espaço permitir, os ícones combinados com o texto são os melhores. (Acho que houve pesquisas mostrando isso no final dos anos 80, mas não consigo encontrá-lo.) O uso seletivo de ícones com texto faz com que certos itens se destaquem mais ou acrescentem interesse visual. Isso também pode melhorar a digitalização dos itens, mas bons rótulos de texto também podem fazer isso. Sabe-se que os usuários pensam subjetivamente que um aplicativo é mais fácil se ele tiver ícones, mesmo quando na verdade não melhora o desempenho (ver Wiedenbeck, 1999 citado acima), então esse é outro motivo para combinar ícones e texto.

Normalmente, vejo o ícone acima ou à esquerda do rótulo do texto. Não acho que seja necessariamente inerentemente melhor do que as alternativas, mas é uma convenção que você também deve seguir se tiver controles próximos um do outro para que o usuário possa contar com a experiência para saber qual rótulo de texto combina com qual ícone.

232
Michael Zuschlag

Do grupo Neilson/Norman nos ícones :

Resumo : a compreensão de um ícone por um usuário é baseada na experiência anterior. Devido à ausência de um uso padrão para a maioria dos ícones, são necessários rótulos de texto para comunicar o significado e reduzir a ambiguidade.

Os ícones precisam de um rótulo de texto

Para ajudar a superar a ambiguidade que quase todos os ícones enfrentam, um rótulo de texto deve estar presente ao lado de um ícone para esclarecer seu significado nesse contexto específico. (E mesmo que você esteja usando um ícone padrão, geralmente é mais seguro incluir um rótulo, especialmente se você o tiver alterado ligeiramente para corresponder às suas preferências ou restrições estéticas.)

Os rótulos dos ícones devem estar visíveis o tempo todo, sem nenhuma interação do usuário. Para ícones de navegação, os rótulos são particularmente críticos. Não confie no cursor do mouse para revelar rótulos de texto: ele não apenas aumenta o custo de interação , mas também falha na tradução dos dispositivos de toque.

O site sabilidade.gov usa ícones de navegação para Métodos, Modelos e Documentos e Diretrizes em todas as páginas do site [ exemplo com texto & sem texto ]. Se eu pedisse a cada pessoa que estava lendo este artigo que me enviasse um ícone que representasse Métodos, tenho certeza de que receberia uma grande variedade de designs. Como declaramos como parte de nossas diretrizes de design para a usabilidade da página inicial anos atrás, “se você achar que precisa pensar em criar um ícone para navegação, é provável que não seja facilmente reconhecível ou intuitivo para usuários ". Embora a versão móvel do site reconheça que os rótulos de texto precisam acompanhar os ícones para dar algum significado, a versão para desktop oculta esses rótulos até que o usuário curioso decida passar o mouse sobre eles. Fixar esses itens de navegação no lado esquerdo da página para permanecerem disponíveis para os usuários quando rolarem indica que a organização acredita que eles são importantes e úteis. No entanto, remover esses ícones de rótulos de texto os torna completamente sem sentido e é contraproducente ao objetivo de fornecer acesso fácil ao conteúdo.

18
KyleMit

Segundo uma pesquisa citada por Don Norman, apenas os ícones funcionam menos bem. O texto solo funciona melhor que os ícones. E texto + ícones funciona melhor.

8
Hisham

Além das respostas acima, tenho um ponto a fazer.

Que tipo de site é esse?

Se o site for usado com pouca frequência, você precisará rotular seus ícones. Ou então, novos usuários podem achar a interface do usuário complicada.

Se o site for usado frequentemente, como o Gmail, bons ícones com dicas de ferramentas bem posicionadas são melhores do que usar uma abordagem somente de texto ou apenas ícone. Tenho certeza de que o Google passou por essa pergunta, porque no passado eles costumavam usar botões somente de texto, mas agora usam ícones + dicas de ferramentas no Gmail. Essa nova abordagem fornece uma interface limpa sem sacrificar a usabilidade. Até o Photoshop e o Notepad ++ usam uma abordagem semelhante.

7
jackandjill

Deixe o usuário escolher, padronizando para Ambos.

Texto + Ícone ajuda o usuário iniciante a aprender os ícones; mas como ele usa mais o aplicativo, o usuário se acostuma com o ícone e não precisa mais do texto. Depois de aprender o significado dos ícones, ele prefere um espaço de trabalho maior do que o texto redundante.

5
Lie Ryan

Primeiramente, quando você projetará uma interface de usuário, deverá considerar os princípios de usabilidade (consistência, disponibilidade, etc.). O preço é um dos principais conceitos e significa que sua interface deve ser intuitiva. Por exemplo, seus ícones devem estar relacionados ao significado da ação a seguir, como no exemplo citado acima para Michael icon. Alguns ícones também são padronizados e você pode reutilizar o significado. O ponto é que, se você usar apenas ícones para barras de ferramentas, etc., precisará usar a dica de ferramenta, caso o ícone não seja bom o suficiente para expressar o significado, mas se seus ícones forem permissivos o suficiente, eles não precisarão de um rótulo e a dica de ferramenta pode ser suficiente.

De qualquer forma, é difícil criar ícones, especialmente quando o sistema é para um sistema específico e você precisa criar ícones. Nesse caso, você pode propor alguns projetos e avaliá-lo com os usuários. Pode ser útil saber o que o usuário pensa sobre o seu sistema, interfaces visuais e ícones. Além disso, você pode fazer um teste memorável um dia após o teste real, tentando avaliar se os usuários podem se lembrar dos seus ícones, do significado ou dos seus ícones ou das áreas possíveis onde eles podem encontrar a ação que você está solicitando. Também um questionário pode ajudar se você tiver mais de um design para ícones.

Por outro lado, se você precisar colocar o rótulo, acho melhor o rótulo abaixo do ícone: [icon] [label]

Lembre-se de que “uma oferta é um aspecto de um objeto que torna óbvio como o objeto deve ser usado. Nos monitores da interface do usuário, os recursos que criam recursos geralmente são visuais. Rosson, M.B. & Carroll, J.M. (2002) Usabilidade Engenharia, Morgan Kaufmann.

Ou talvez se você tiver tempo ... você pode ler este: www.cs.swan.ac.uk/~csharold/cv/files/Affordance.pdf

Se durante o processo de design você tiver considerado a disponibilidade, talvez os rótulos não sejam necessários e você apenas use a dica de ferramenta, caso contrário, poderá considerar os rótulos abaixo dos ícones e avaliar ou propor mais designs a serem avaliados pelos usuários (não tantos) ser colegas no início até a versão que poderia ser testada com usuários finais.

5
user1982

Na tendência atual O sistema deve falar o idioma do usuário, com palavras, frases e conceitos familiares ao usuário, em vez de termos orientados ao sistema. Siga as convenções do mundo real, fazendo as informações aparecerem em uma ordem natural e lógica. e quando você usa o inglês, mantenha sempre as letras no lado direito. porque obviamente os ícones serão a atração principal. Portanto, os usuários podem ignorar as letras na frente.

por exemplo, iTunes - Organizado como uma biblioteca que contém sua biblioteca de mídia: músicas, filmes, shows, álbuns de áudio. Abaixo da Biblioteca, está a Loja, onde você pode comprar mais mídia para colocar na sua Biblioteca.

enter image description here

e para as tendências recentes como design de paletes do Google e os blocos 2D do Windows sugerem ícones. mas é melhor ter ícones com um dica de ferramenta para passar o mouse rapidamente. boa sorte.

4
Miller

Depois de ler todas as perguntas e concordar com tudo, gostaria de adicionar um ponto de vista extra.

Antes de decidir mostrar ícones, não mostrar ícones, adicionar texto ao redor do texto, não adicionar nenhum texto, você deve responder a algumas perguntas:

  • Onde você pretende adicionar os ícones?
  • Por que você precisa de ícones?
  • Quem usará esses ícones?
  • Qual o conhecimento sobre os ícones/conteúdo/ação dos usuários?
  • É comum usar ícones para isso?
  • Você facilitará a interação do usuário?

E para responder a estas perguntas você deve considerar alguns pontos:

  • As pessoas usam o smartphone todos os dias, todas as vezes e os ícones mais famosos como Facebook, Youtube, Google, What's App, Instagram e outros precisam mostrar um rótulo para garantir que as pessoas saibam.

enter image description here

  • O Word/Google Docs está usando ícones com sucesso sem texto, porque são iguais há anos e todos já sabem o que é, mas mesmo assim, ao passar o mouse, eles mostram um texto para explicar o ícone.

enter image description here

  • Diferentes regiões geográficas podem entender seu ícone de maneira diferente. Por exemplo, no Reino Unido, é mais comum usar a cesta no comércio eletrônico e, no caso contrário, nos EUA é o carrinho. Está acontecendo por causa da influência do idioma regional.

  • Ícones complexos podem interromper sua conversão devido a mal-entendidos.

enter image description here

E você pode dar uma olhada em uma boa comparação que peguei emprestada de Smashing Magazine .

enter image description here

Considerando todas as respostas, usarei texto com um ícone em 90% dos casos e a posição do texto depende do seu conceito de design e se é fácil para o usuário conectá-las.

E como eu sempre digo nos meus comentários, nada aqui é absolutamente verdade, você deve testar e comparar com SEUS usuários no SEU site/aplicativo.

2
Rafael Perozin

Isso vai depender dos usuários. Do ponto de vista da usabilidade, ter ícone e texto fornece melhores resultados porque isso segue o reconhecimento sobre a recuperação, desde que os ícones sejam aceitos por uma população razoável. Ter apenas o ícone é aplicável a glifos simbólicos - aqueles que são compreensíveis globalmente. Somente o texto é mais apropriado quando os itens são arbitrários e não possuem glifos reconhecíveis para representá-los. Para esses itens, ter apenas texto talvez seja o melhor. No entanto, a nomenclatura usada deve ser testada para uso apropriado.

2
Kernan Kobaya