Ícones: Por que sua linha de ícones personalizados confunde os visitantes e como escolher aqueles que eles entendem

Você lançou sua página de destino. A navegação tem uma linha de ícones fofinhos customizados. Os visitantes piscam, não conseguem dizer o que significam, e rolam passado seus recursos sem clicar em nada.

Ícones são abreviação. Quando funcionam, os visitantes entendem um recurso sem ler. Quando não funcionam, viram "navegação de carne misteriosa", uma parede de decoração que ninguém decodifica. Este guia cobre como fazer os seus realmente comunicarem.

O que um ícone realmente é

Ícones são substitutos visuais para ações, objetos ou conceitos. Dependem de reconhecimento sobre recall, uma lupa diz aos visitantes "busca" mais rápido que a palavra faz.

Às vezes ícones substituem texto (nav móvel). Às vezes eles apoiam (um botão de salvar com um ícone de disco). Qualquer forma, o objetivo é baixar o custo de entender.

"O sistema deveria falar a linguagem dos usuários, com palavras, frases e conceitos familiares ao usuário, em vez de termos orientados ao sistema." , Jakob Nielsen

Um ícone apenas funciona se fala a linguagem visual existente do visitante. Uma lata de lixo significa deletar. Uma casa significa home. Uma lâmpada não significa busca, não importa o quanto você acha que está sendo inteligente.

Por que a escolha de ícone importa

Ícones afetam tanto a rapidez com que os visitantes se movem quanto se confiam em seu produto.

1. Velocidade. Uma linha de ícones lê mais rápido que uma linha de palavras.
2. Espaço. Um ícone de 24px faz o trabalho de 100px de texto. Crítico no móvel.
3. Universal. Ícones de "Home" e "Configurações" funcionam entre linguagens e regiões.

Quando ícones falham, os visitantes hesitam. Hesitação mata conversão, eles não conseguem encontrar o carrinho, não conseguem dizer salvar de arquivo, não confiam na página o suficiente para digitar um cartão de crédito.

Como usar ícones que realmente comunicam

Cinco regras cobrem a maioria dos casos.

1. Não iconize tudo

Ícones competem por atenção. Use-os para navegação e ações primárias, não em cada rótulo e ponto de bala. Ruído visual faz as coisas importantes se misturarem.

2. Escolha metáforas familiares

Pule inteligente pelo bem de inteligente.

• Faça isto: Lupa para busca, envelope para email, carrinho para checkout.
• Não faça: Um glifo abstrato customizado para "busca" porque quer ser diferente. Se os visitantes têm que adivinhar, você já perdeu.

3. Faça-os legível

Ícones deveriam ser nítidos e legíveis em cada tela.

• Tamanho: Comece de uma grade de 24px para legibilidade.
• Peso: Linhas muito finas desaparecem em fundos de baixo contraste.
• Referência: Veja Regras de Legibilidade para garantir que seus visuais atendem padrões de acessibilidade.

4. Use um estilo visual único

Misturar conjuntos de ícones é a forma mais rápida de parecer amador.

• Uma biblioteca de ícone. Tudo preenchido ou tudo delineado.
• Mesma largura de traço, mesmo raio de canto, mesma escala.

5. Adicione rótulos quando em dúvida

Ícones universais podem ficar sozinhos. Qualquer outra coisa precisa de um rótulo ou tooltip.

• Faça isto: Emparelhe ícones com texto em navegação e botões que não são óbvios.
• Tooltips: Para desktop onde ícones ficam sozinhos, adicione um rótulo de hover.

Maneiras comuns de quebrar isso

Carne misteriosa

• O erro: Ícones customizados sem rótulos que ninguém entende.
• O conserto: O teste de 2 segundos. Se um visitante não consegue adivinhar o trabalho do ícone em 2 segundos, adicione um rótulo.

Estilos mistos

• O erro: Ícone desenhado à mão ao lado de um ícone flat ao lado de uma ilustração 3D.
• O conserto: Use uma única biblioteca, Lucide, Material Icons, Phosphor, e fique com ela.

Áreas de toque muito pequenas

• O erro: Um ícone de 24px é também a área de toque. Polegares erram.
• O conserto: O ícone pode ser 24px, mas a área tocável deveria ser 44x44px.

Como produtos reais fazem isso

Google Drive

Google Drive usa metáforas do mundo real, pasta, lápis, lixo, que visitantes entendem desde a era do desktop. Sem necessidade de onboarding.

WhatsApp

WhatsApp usa iconografia para velocidade. Câmera, telefone, mic, clipe de papel, tudo instantaneamente legível. Os checkmarks azuis para read receipts usam mudanças de cor para comunicar status sem precisar de uma palavra.

Princípios relacionados

Ícones conectam com o resto da UI. Estes moldam como o seu se sente:

Regras de Legibilidade

Como tamanho e peso ícones para que fiquem nítidos em cada tela.

Recursos e leitura adicional

Material Design Icons

Conjunto de ícone abrangente do Google projetado para legibilidade e clareza.

Flaticon

O maior banco de dados do mundo de ícones gratuitos customizáveis.

Lucide Icons

Ícones bonitos e consistentes. O conjunto primário usado em muitos sistemas de design modernos.

Perguntas frequentes