Ícones

Símbolos gráficos pequenos que representam ação, objeto ou ideia e aceleram o reconhecimento.

Hard

O que é

Ícones são gráficos simbólicos pequenos, usados na interface pra representar função, objeto ou conceito, e que dão reconhecimento rápido cortando a dependência de texto. A engrenagem entende-se como configurações e a lupa como busca. Eles poupam espaço e melhoram a varredura, sobretudo no mobile.

Uma dúvida comum é se o ícone substitui o texto. Ele acelera o reconhecimento, mas pode ser ambíguo quando aparece sozinho, porque uma seta pode significar avançar, voltar ou baixar dependendo do contexto. Por isso o ícone mais crítico costuma pedir um rótulo de texto junto, pelo menos pra quem chega novo.

A escalabilidade também conta bastante. O ícone precisa ser legível em vários tamanhos, do botão pequeno no celular até o dashboard grande, e por isso o vetor, no formato SVG, é o preferido, já que escala sem perder qualidade. E mesmo um ícone consagrado pode ser mal lido, então um teste rápido, em que a pessoa explica o que acha que aquele ícone significa, revela se ele de fato comunica.

Em uma frase

Esse ícone tá ambíguo, vamos parear com um rótulo pra ação crítica não depender de adivinhação.

A pergunta que ele responde

Esse ícone sozinho comunica a ação ou eu preciso colocar um rótulo junto?

Quando usar

Ajuda em navegação, ação e reforço de hierarquia, sobretudo onde o espaço é mais apertado.

Como não usar

O cuidado é não confiar num ícone solto pra uma ação importante, porque sem rótulo a pessoa pode ler o símbolo de um jeito que você não esperava.

Na prática

Pense num app em que o time pareia cada ícone crítico com um rótulo curto. Depois faz um teste com cinco pessoas pra ver se cada símbolo é lido do jeito que se pretende.

Não confunda com

Vale separar ícone de iconografia. O ícone é o símbolo individual, enquanto a iconografia é o sistema inteiro, com estilo e regras. Um carrinho é um ícone, mas o conjunto dele com outros e suas regras é o que chamamos de iconografia.

D

Em inglês

Icons

Pronúncia

n/a

Também chamado de

ícones, símbolos de interface

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre ícones e rótulos