Práticas recomendadas de usabilidade e design de ícones

Publicados: 2022-03-11

Imagine-se dirigindo para o trabalho - tocando podcast favorito, caneca de viagem na mão e nada além de estradas limpas à frente. Um motorista cauteloso, você olha para baixo e percebe uma luz desconhecida brilhando no painel.

Usabilidade de ícones confusos para o sistema de gerenciamento de pressão dos pneus — O ícone do Sistema de Gerenciamento de Pressão dos Pneus (TPMS) é uma seção transversal inchada que mal se assemelha a um pneu.

Algo como uma mistura entre uma tomada de luz e um caldeirão de bruxas borbulhante, a pequena luz parece importante, mas você não tem certeza do que significa. Uma olhada nos medidores não revela nada de anormal, e o veículo parece estar funcionando bem, então você decide lidar com isso depois do trabalho.

Mais tarde naquela noite, seu dia de trabalho terminado e jantar no horizonte, você se aproxima do seu veículo no estacionamento do escritório e – “Você deve estar BRINCANDO COMIGO!”

O pneu do lado do motorista dianteiro está plano como uma panqueca. Se você soubesse que o pequeno ícone de antes era um aviso do sistema de gerenciamento de pressão dos pneus do seu veículo, você teria resolvido o problema e evitado sofrimento desnecessário.

Os ícones devem fornecer clareza

O mundo dos produtos físicos e digitais está inundado de ícones e por um bom motivo: as imagens transmitem significado com uma velocidade inigualável pelas palavras. De fato, os neurocientistas do MIT descobriram que o cérebro humano pode processar uma imagem em apenas 13 milissegundos.

Infelizmente, há momentos em que os ícones que encontramos são mal elaborados, deixando-nos perplexos e frustrados. Quando projetados com cuidado, no entanto, os ícones melhoram a usabilidade reduzindo a ambiguidade e comunicando a funcionalidade.

O objetivo final da usabilidade e design de ícones é aprimorar a experiência do usuário, não confundi-la. Mas como isso se parece e como os designers de interface do usuário podem garantir que os ícones que eles criam sejam facilmente entendidos?

O design habilidoso do ícone melhora a usabilidade do produto

Ícones são abstrações. Eles simplificam objetos, ideias e comandos em símbolos gráficos que podem ser rapidamente identificados pelo olho humano. Então, o que torna os ícones úteis e como eles devem fazer o usuário se sentir?

Os ícones são fáceis de ver e usar.

Como se sente: “Isso foi fácil. Olhei para a tela e rapidamente encontrei o ícone que eu precisava. Cliquei e funcionou como esperado.”

Ícones adicionam coesão à experiência dentro de um produto.

Como é: “Esses símbolos claramente significam algo e me ajudam a navegar e operar este produto.”

Design de ícone universal para usabilidade de ícone de aprimoramento de segurança — O ícone chinês para “Segurança” é instantaneamente reconhecível para falantes não nativos graças ao seu chapéu, uniforme e postura autoritários. (Símbolos de Informação Pública da China)

Os ícones funcionam como pistas de contexto transcultural.

Como se sente: “Não conheço o idioma, mas sei o que esse símbolo significa”.

Os ícones aprimoram e ampliam as habilidades de narrativa visual de uma marca.

Como se sente: “Esta marca é pessoal, mas profissional. Eles se preocupam em ser úteis até nos mínimos detalhes.”

O design de ícones crípticos torna os produtos dolorosos de usar

Quando o design de ícones é pouco pensado ou conjuntos de ícones são montados às pressas como uma reflexão tardia no desenvolvimento de um produto, surgem complicações e levam a uma experiência ruim do produto, usuários ofendidos e uma marca manchada.

O que são ícones enigmáticos e como eles fazem os usuários se sentirem?

Os ícones crípticos estão mal associados à sua funcionalidade real.

Como se sente: “Espere, eu pensei que aquele ícone faria algo diferente. O que acabou de acontecer?"

Significado do design do ícone de captura de tela do Snapchat — Esses ícones do Snapchat permitem que os usuários saibam quando foram feitas capturas de tela de snaps e bate-papos. Infelizmente, o gráfico é uma representação pobre de uma captura de tela, e as três variações de cores criam confusão.

Um conjunto de ícones enigmáticos fornece várias opções que parecem muito relacionadas.

Como é: “Qual desses ícones faz o que eu quero?”

Ícones enigmáticos são culturalmente confusos.

Como se sente: “Uau! Eu nunca clicaria em algo tão escandaloso.”

Ícones enigmáticos afastam os usuários da experiência pretendida.

Como se sente: “Achei que este aplicativo me ajudaria a orçar meu dinheiro, mas esses ícones parecem bobos. Este produto é adequado para mim?”

10 Princípios Orientadores para Design de Ícones de Classe Mundial

Agora que entendemos a usabilidade dos ícones e como os ícones podem melhorar ou prejudicar a usabilidade do produto, vamos examinar um conjunto de princípios orientadores que os designers de ícones podem usar para praticamente qualquer projeto de design de ícones.

Trabalhe duro para entender os recursos aos quais os ícones serão associados. Se você não entende, não adivinhe. Perguntar.
Evite projetar um ícone de cada vez. Em vez disso, aproxime os conjuntos de ícones como um todo. Pergunte a si mesmo: "O conjunto é coeso? Existem ícones com duplo sentido ou associações confusas? O conjunto é uma boa representação da marca?"
Ignore o computador e comece a criar ícones com esboços simples.

Esboços em miniatura desenhados à mão são uma maneira eficaz de explorar vários conceitos de design de ícones e capturar ideias rapidamente.
Não reinvente a roda. Aponte para símbolos universalmente compreendidos e não tenha medo de utilizar conjuntos de ícones existentes que são amplamente usados e disponíveis em sites como o Font Awesome.
Ao usar conjuntos de ícones de ações, sinta-se à vontade para personalizar o alinhamento da marca ou adicionar caracteres, mas não sacrifique a clareza.
Use rótulos de texto onde apropriado para aumentar a usabilidade do ícone. O texto por si só é um alvo difícil de clicar ou tocar, mas quando combinado com ícones, ajuda os usuários a eliminar dúvidas e evitar má interpretação simbólica.
Não sacrifique a facilidade de uso pelo design de colírio para os olhos.
Considere como os ícones se encaixam na hierarquia de design de uma interface e não se esqueça de que tamanhos de tela diferentes podem afetar a visibilidade do ícone devido ao dimensionamento.

Observe a proeminência visual do ícone "Pesquisar" na interface móvel em oposição à versão para desktop. O tamanho real entre as versões muda muito pouco, mas a interface móvel tem menos espaço para que o ícone se destaque.
Lembre-se da regra dos 5 segundos. Ao criar conceitos de ícones, tente pensar em associações simbólicas em 5 segundos. Caso contrário, a conexão entre palavra, ação e símbolo pode ser fraca.
Teste ícones com pessoas reais. Eles são reconhecíveis? São memoráveis? Se não, continue trabalhando.

Conclusão

Vivemos em um mundo saturado de informações visuais. Muitas vezes fazemos várias escolhas em questão de momentos. “Para onde vamos? Como vamos chegar lá? O que faremos quando chegarmos?” Os ícones nos ajudam a eliminar a desordem e a decidir rapidamente o que é importante. Eles nos mantêm engajados com os produtos que usamos todos os dias e, quando funcionam bem, promovem a satisfação da marca.

Design coeso do conjunto de ícones do Google Docs — A interface do usuário do Google Docs tem uma combinação equilibrada de ícones e rótulos de texto fáceis de entender que aprimoram a usabilidade e melhoram a experiência geral do produto.

Infelizmente, os ícones ficam aquém de seu potencial com muita frequência. Ícones mal projetados impedem a usabilidade do produto, incomodam os usuários e prejudicam a fidelidade à marca. Para designers de produtos e equipes de design, esta é uma grande oportunidade perdida.

Quando os ícones melhoram a experiência do usuário em vez de confundi-la, eles atingem o objetivo principal de qualquer empreendimento de design; melhoram a qualidade de vida. Lembre-se, ícones são abstrações, não reflexões tardias. Eles se destinam a relacionar a complexidade de forma rápida e transparente, sem pausa do usuário. Isso não é pouca coisa para o designer, mas é possível com um planejamento cuidadoso, um processo metódico e testes de usuário centrados no ser humano.

•••