Iconografia. Bom ou mal? Como sempre, depende

Kayla J Heffernan Blocked Desbloquear Seguir Seguindo 7 de janeiro

Ícones estão por toda parte. Baixe um dos milhares de kits de ícones vetoriais gratuitos da Internet ™ e comece a jogar pixels na forma de hambúrgueres, kebabs e lupas sobre suas pranchetas e você terá um design. Mas você parou para pensar quando usar um ícone e quando não usar um? Quando usar o ícone?

Esta peça compartilha algumas reflexões, e algumas pesquisas, da equipe do SEEK UX sobre iconografia, que esperamos que torne você um pouco mais consciente das complexidades de UX por trás dessas pequenas obras de arte de 8 bits.

Ícones como elementos estáticos

Os ícones estáticos são aqueles usados como elementos decorativos, para comunicar uma informação discreta ou para ajudar na localização. Como tudo, eles podem ser bons e ruins.

Ícones são bons

Ícones bem projetados e facilmente reconhecíveis podem comunicar rapidamente as informações que um usuário pode estar procurando – por exemplo, digitalizar uma página de resultados de pesquisa para hotéis que têm WiFi ou o número de quartos em uma propriedade. Vemos isso no simbolismo dos estacionamentos acessíveis, dos sinais de banheiros e do símbolo universal do veneno.

Realestate.com.au ícones para o número de quartos, banheiros e espaços de estacionamento para uma listagem de propriedades

Os ícones economizam espaço e reduzem a carga cognitiva, eliminando a necessidade de reler a mesma informação contra todas as listas, reduzindo o atrito.

Design REA sem ícones aumenta a fricção

Os ícones podem melhorar a aparência de uma interface, adicionando um apelo visual que é conhecido por melhorar a percepção (UX) e a usabilidade de um produto. Isso é conhecido como o efeito Estética-Usabilidade e você pode ler sobre isso aqui (NN / G) .

Quando os ícones são emparelhados com texto, pode melhorar a acessibilidade, fornecendo um mecanismo alternativo para transmitir informações – texto com uma pista visual – o que é bom para indivíduos com problemas cognitivos, baixa visão que não conseguem ver o ícone corretamente etc.

O ícone de bate-papo do NAB é claro

Os ícones também podem ajudar as pessoas que falam (ou lêem) a linguagem da interface como uma linguagem não primária (ou não) a navegar. Talvez eu não consiga ler o texto na interface, mas os ícones podem me ajudar a entender como navegar ou como encontrar o que estou procurando. Isso também é verdade no mundo real e é por isso que padronizamos ícones para banheiros, aeroportos, elevadores etc.

Apesar do meu pobre catalão, consegui lavar as minhas roupas em Barcelona graças aos ícones

Ícones são ruins

Ícones mal concebidos podem causar confusão quando não sabemos o que eles estão tentando representar para nós, especialmente quando eles não são acompanhados de texto ou de uma dica de ferramenta.

Sem o texto, uma flor representa "spa e centro de bem-estar"?

Ícones por causa de ícones fornecem pouco valor e adicionam ruído à interface.

No design à esquerda, os ícones não adicionam nenhum valor, então os removemos e reduzimos o ruído.

Ícones sem texto alternativo são confusos para os usuários do leitor de tela. Particularmente, se apenas ler algo como 'Star' em vez de 'Save Job'. Os rótulos de texto ajudam a reduzir essa confusão também para os usuários com visão.

Ícones são subjetivos. O mesmo ícone pode significar coisas diferentes em sites diferentes (por exemplo, uma estrela para 'salvar' e uma estrela para 'classificação'). O mesmo ícone pode significar coisas diferentes em contextos diferentes (por exemplo, um erro para compartilhamento, resposta, encaminhamento, próximo). Os ícones podem ser indecifráveis.

O que todos os diferentes ícones de lavanderia significam? Fonte

A finalidade dos ícones pode ser confusa

Isto é um ícone estático ou um elemento interativo? Às vezes, os ícones são clicáveis e realizam uma ação, o que pode ser especialmente confuso quando elementos clicáveis estão diretamente próximos a elementos não clicáveis e em design plano.

A estrela é mais grossa, então eu sei que é clicável – mas o usuário médio? Ele é separado dos outros ícones que não são de ação. Isso significa que é clicável para o usuário médio?

Precisamos ter certeza de que é óbvio que esse elemento é clicável, o que chamamos de affordance – particularmente quando é apenas um ícone sem texto.

Ícones como elementos interativos

Visto um item que você deseja encontrar facilmente em um aplicativo ou site? Basta acertar o ícone do dandy 'save'! Mas o que, exatamente, é um ícone de salvamento?

Qual ícone, quando?

Costumava ser um ícone de um disco na era do skeuomorfismo – onde um objeto em software era representado com sua contraparte do mundo real, neste caso um disquete ?. O disquete nunca recebeu uma atualização quando passamos de discos para CDs para USBs e para a nuvem, mas seu significado ainda é conhecido. Você provavelmente já ouviu a história folclórica da criança que disse “Uau, alguém 3-D imprimiu o ícone Salvar!” Ao ver um disquete IRL de 3 ½ polegadas.

Você ainda verá isso nos produtos do Microsoft Office hoje.

Microsoft Salvar ícone

Para colocar de lado uma propriedade no Airbnb, clique no coração ??

Airbnb Salvar uma propriedade

Eu amo este lugar, talvez eu fique aqui!

Embora talvez eu não ame este lugar, talvez seja apenas algo que eu quero deixar de lado para depois avaliar mais, pois pode atender às minhas necessidades como um viajante. O Airbnb provavelmente escolheu isso já que o ícone da estrela já é usado para avaliações, e talvez nós desejemos distanciar o 'amor' do salvamento, particularmente em casos onde não é algo que um usuário gosta de fazer (algo que é uma necessidade, não um feriado divertido ).

Produtos como o Twitter borram essa linha – eu poderia estar usando o coração como validação social (como o Instagram e o Facebook) ou eu poderia usá-lo para salvá-lo para recuperar mais tarde. Não querer usar um coração é especialmente verdadeiro quando já significa outra coisa, um tipo de reação ou algo semelhante, como no Instagram e no Facebook, que voltaram ao design skeuomorphic e decidiram usar um marcador para representar 'salvar' ?. Encontre o seu lugar com um objeto físico como você fez em um livro (ou faça no seu Kindle).

Marcador médio de uma história para mais tarde

Que tal uma estrela? I Se eu 'estrela' algo para salvar, isso significa que é o meu favorito ? Se um usuário voltar e vir que um item em uma listagem tem uma estrela, isso significa que estamos recomendando isso para eles como uma boa correspondência? Ou eles salvaram?

Star uma mensagem no Slack

A Amazon evitou todos esses problemas, simplesmente por ter um botão com o texto 'Add to List', sans icon.

Amazon – Adicionar à lista

Ícones com texto e capacidade financeira apropriada têm ações muito claras e são mais utilizáveis. Também torna as ações muito mais acessíveis para aqueles que usam leitores de tela, pessoas com baixa cognição, etc.

Etiquetas adicionam contexto a ícones

Compreensão dos ícones

Além das ações do ícone serem confusas, existem poucos ícones que são universalmente entendidos.

Na SEEK, realizamos uma pesquisa sobre a compreensão da iconografia.

Primeiro perguntamos aos participantes que ícone eles esperariam clicar para colocar um trabalho de lado para depois (evitamos a palavra "salvar", pois não queríamos prepará-los). Esta foi uma resposta de texto livre, onde eles poderiam explicar o símbolo que eles esperariam ver.

Imagine que existe um ícone (um símbolo ou uma imagem) escondido pelo quadrado preto na imagem acima, e este ícone é o que você clicaria para deixar o trabalho de lado para mais tarde. Qual símbolo ou imagem você esperaria?

A resposta mais popular foi:

  1. Um ícone de estrela (24%)
  2. "Salvar" como uma resposta genérica (15%) *
  3. Disquete (11%)
  4. Arquivo / arquivo (6%)

* Não está claro o que os entrevistados quiseram dizer com “salvar”, como muitos não elaboraram. Alguns escreveram respostas como “O ícone de salvamento do disquete” ou “o ícone de salvar, isto é, o disquete”, no entanto, não está claro se todos os entrevistados “salvos” quiseram dizer isso.

Uma estrela também é usada no site do SEEK, então é possível que isso seja distorcido para os respondentes, respondendo o que eles sabem que está por trás do quadrado preto.

Fizemos a mesma pergunta como uma enquete no Twitter, com 4 opções, e a maioria respondeu que o melhor disquete significa salvar!

Pesquisa no Twitter – qual ícone significa salvar?

Um disquete ainda pode ser universalmente entendido, mas como designers não queremos que a tecnologia antiga atravesse nossas interfaces, então nos mudamos para uma estrela ou um coração. Precisamos de um ícone? Por que não apenas um botão "Salvar"?

Em seguida, mostramos aos participantes 4 ícones isolados da interface e sem rótulos, e perguntamos quais palavras, frases ou ações associavam ao ícone.

Quais palavras, frases ou ações você associa a esse ícone?

Nenhum dos ícones foi universalmente entendido e está aberto a interpretações com base nas experiências anteriores dos participantes e na tecnologia-savvy. Isso sugere que manter o rótulo próximo aos ícones aumentará a facilidade de uso e a facilidade de uso. Ele também segue as diretrizes de acessibilidade, onde não devemos apenas confiar em pistas visuais para descrever uma ação – contexto + dicas visuais = utilizáveis

Os entrevistados ecoaram esse sentimento em suas respostas de texto:

“A maioria das coisas online me confunde, por que todas as coisas não podem usar as mesmas formas para fazer a mesma coisa?”

“Os ícones podem ser um pouco confusos, pois são bastante subjetivos para o usuário e a situação em que são usados”

“Eu gosto de manter as coisas simples – procurar trabalho é suficientemente estressante sem ter um site complicado para navegar no processo”

O ícone de favoritos era o mais provável para os participantes afirmarem que não sabiam o que faziam, no entanto, muitos entenderam que deixariam o trabalho de lado para mais tarde. Alguns pensaram que significava que o trabalho / empresa era premiado ou um bom jogo para eles. No geral, foi interpretado como significando:

  • Bookmark (38%)
  • Não sei / não tenho certeza (11%)
  • Economize (11%)
  • Bandeira (9%)

O ícone do Coração foi associado ao amor e ao reconhecimento de postagens de mídia social (conhecimento prévio do Instagram ou Twitter). Os entrevistados que estavam familiarizados com o SEEK e responderam a ele foram usados para as Pesquisas Guardadas, no entanto, os entrevistados em geral não associaram isso fortemente ao deixar de lado algo para mais tarde, mais com emoções positivas (Amor, felicidade). O ícone do coração foi entendido como:

  • Amor (54%)
  • Gostar (35%)
  • Favorito (21%)

Alguns realmente não gostaram da idéia de um coração sendo usado:

“Amor, não aplicável para publicidade de emprego”

A estrela foi entendida para marcar algo para mais tarde ou tão importante. No entanto, também foi pensado para ser um indicador de que um trabalho foi um bom jogo para eles, ou a classificação da empresa. A estrela foi vista como:

  • Favorito (37%)
  • Economize (20%)
  • Estrela (17%)
  • Importante (10%)
  • Classificação (8%)

A flecha de compartilhamento foi esmagadoramente mal interpretada para significar "avançar" para "próximo", no entanto, foi mostrado fora de contexto:

  • Avançar (ou encaminhar um email?), Próximo ou para a próxima página (81%)
  • Respondendo a um email (10%)
  • Compartilhar (8%)

Conhecimento prévio influencia a compreensão

Como qualquer coisa que projetamos, precisamos testar o entendimento de nossos ícones sem os usuários-alvo. Um triângulo para uma pessoa pode ser apenas um triângulo, mas para um físico ou matemático pode ficar claro que significa "mudança".

Uma vez ganhei um jogo de Pictionary com o rabisco abaixo em 3 segundos. O que isto significa? Para você, provavelmente nada. Mas para mim e meu parceiro do Pictionary, é o meu poodle Penny. Nossa competição não foi feliz.

Isso significa Penny para você?

Contexto importa

Uma flecha ao lado de outra flecha voltada para o outro lado provavelmente significa 'próxima', ao passo que se fosse ao lado de um coração, pode ficar claro que significa 'compartilhar'. Teste ícones no contexto.

Se você gosta, então você deve colocar uma etiqueta nele.

Se você quiser que a maioria dos usuários consiga entender o que os ícones fazem, use rótulos. O User Testing descobriu que os usuários conseguiram prever corretamente o que aconteceria quando eles tocassem em um ícone com um rótulo 88% do tempo. Para ícones sem rótulos, esse número caiu para 60%. Para ícones não marcados sob medida isso caiu para apenas 34% do tempo. Leia mais sobre a pesquisa deles aqui.

TL; DR- Devo usar ícones? Quais ícones?

Depende.

Pergunte a si mesmo, usando ícones aqui:

  • Ajudar o usuário a encontrar o que está procurando?
  • Reduzir a carga cognitiva?
  • Adicione ao apelo visual do produto?

É o ícone escolhido:

  • Compreensível para os usuários, no contexto dado? Foi testado com o grupo alvo para compreensão?
  • Claramente clicável?
  • Acompanhado de texto para aumentar a usabilidade e a compreensibilidade?

Se você respondeu sim ao acima, provavelmente você pode usar um ícone.

Não use ícones quando eles:

  • Parecem não fornecer nenhum valor;
  • Desorganizar a interface;
  • Estão abertos a interpretação.