Ícones são um vocabulário, não decoração

Ícones de interface se comportam como uma língua – e os dados de compreensão são um banho de humildade. O vocabulário que os usuários reconhecem de forma confiável sem rótulo é de mais ou menos uma dúzia de símbolos: a lupa, a engrenagem, a lixeira, o mais, o X, a casa, a seta de voltar. Tudo além dessa dúzia é dialeto regional, na melhor das hipóteses, e invenção particular, na pior. As regras de ofício vêm direto daí: combine ícones com rótulos por padrão, gaste o orçamento de ícone sem texto nos universais de verdade, desenhe cada glifo dentro de uma só família sobre uma só grade, amarre uma metáfora a uma ação em todo o produto – e, quando um conceito não tiver símbolo reconhecido, use a palavra. Um rótulo não é uma falha de design. Publicar um enigma é. {.answer-block}

TL;DR

O vocabulário universal de ícones tem cerca de uma dúzia de símbolos. Buscar, configurações, excluir, adicionar, fechar, início, voltar, reproduzir – esses carregam sentido sozinhos. Quase todo o resto precisa de texto, porque os usuários adivinham de forma inconsistente ou simplesmente não adivinham.
Ícone mais rótulo é o padrão; ícone sozinho se conquista. Um ícone sem rótulo se justifica por universalidade real ou por repetição de alta frequência em espaço apertado (uma barra de ferramentas que a pessoa usa todo dia), e não por ficar bonito numa tela de apresentação.
Uma família, uma grade, uma espessura de traço. Um conjunto de ícones misturado é lido como defeito antes de o usuário conseguir dizer por quê – do mesmo jeito que um parágrafo composto em três tipografias.
Uma metáfora por ação, uma ação por metáfora. Se um lápis edita em uma tela, o lápis edita em todas; e se o lápis edita, mais nada edita.
Quando não existe símbolo, use a palavra. Conceitos abstratos – “status de sincronização”, “espaço de trabalho”, “insights” – não têm ícone que os usuários reconheçam, e inventar um fabrica um enigma onde um rótulo não teria custado nada.

Quantos ícones os usuários realmente reconhecem?

A superestimativa fundadora da iconografia é achar que imagens são uma língua universal. Um século de trabalho com pictogramas diz o contrário: símbolos se tornam universais devagar, por exposição massiva e repetida, e o conjunto que cruzou esse limiar nas interfaces é pequeno. A lupa quer dizer buscar. A engrenagem quer dizer configurações. A lixeira exclui, o mais adiciona, o X fecha, a casa leva ao início, o triângulo reproduz. Um punhado a mais – o lápis, o cadeado, o sino, a seta apontando para uma bandeja indicando download – fica logo abaixo, reconhecido pela maioria dentro do contexto.

Depois vem o abismo. O símbolo de compartilhar não é um símbolo só: a Apple desenha um retângulo com uma seta para cima, o Android desenha três pontos conectados, e nenhum dos dois é lido de forma confiável por quem vive na outra plataforma. O coração, a estrela e o marcador querem dizer todos “guarde isso, mais ou menos”, com definições que cada produto estabelece do seu jeito – favoritar, curtir, ler depois – de modo que o símbolo sozinho não consegue dizer ao usuário em que contrato ele está entrando. O menu hambúrguer ficou reconhecível por anos de onipresença e continua sendo um supressor confiável de engajamento justamente porque esconde em vez de mostrar. E além desses casos disputados começa o mar aberto: não existe símbolo reconhecido pelos usuários para “painel”, “integração”, “espaço de trabalho” nem para qualquer conceito que seu produto inventou no trimestre passado.

A pergunta honesta de planejamento para qualquer ícone não é “esse desenho expressa o conceito?” – para quem desenhou, todo desenho expressa. É “que fração das pessoas que veem isso pela primeira vez diria o que significa, sem rótulo, e todas diriam a mesma coisa?”. E essa pergunta se testa em uma tarde: mostre o glifo sozinho, sem contexto, por uns cinco segundos; pergunte “o que isso faria?”; conte como reconhecimento apenas as respostas convergentes. A régua clássica de compreensão para símbolos públicos gira em torno de dois terços de concordância, e a maioria dos ícones de interface inventados volta como uma dispersão de palpites – que é o jeito de o teste dizer para você usar a palavra. Para uma dúzia de símbolos a resposta é alta – e os testes de reconhecimento mais rigorosos argumentam que até uma dúzia é generoso. Para todo o resto, projete como se a resposta fosse baixa, porque ela é.

A regra do rótulo

A composição padrão é ícone mais rótulo de texto visível. O ícone compra reconhecimento rápido e facilidade de varredura; o rótulo carrega o sentido de verdade; juntos, atendem tanto quem usa todo dia quanto quem chegou agora. Navegação sem rótulos tem nome – “mystery meat”, carne misteriosa – e transforma uma interface em prova de memória, em que cada palpite errado custa uma ida e volta de navegação.

Ícone sozinho é um orçamento a ser gasto de propósito, e existem duas compras legítimas. Universais de verdade em posições convencionais: uma lupa no cabeçalho, um X em um painel que pode ser fechado – a própria convenção é o rótulo. Ferramentas de alta frequência em espaço apertado: uma barra de formatação usada dezenas de vezes por dia, em que os rótulos comeriam a área de trabalho e a repetição ensina o conjunto dentro da mesma sessão – sempre com nomes acessíveis e com tooltips onde existir um ponteiro. No toque não há hover, então a saída para o primeiro uso é um rótulo ou um toque longo que revele o sentido, porque “aprende-se pela repetição” descreve o décimo uso, não o primeiro.

O que nunca justifica o ícone sozinho é a estética. Uma fileira de glifos sem rótulo fica mais limpa numa imagem de portfólio porque quem olha uma imagem de portfólio não está tentando realizar nada. O usuário está. É a mesma troca examinada ao longo desta série – movimento que serve à demo em vez de servir ao usuário, campos de formulário que existem porque perguntar era fácil – acabamento para quem observa, comprado com atrito para quem participa.

Uma família, uma grade

Um conjunto de ícones é tipografia para imagens e obedece à mesma disciplina. Cada glifo de um produto sai de uma única família: uma grade (normalmente 24 px), uma espessura de traço, um tratamento de cantos, uma política única entre preenchido e contorno. Os usuários não sabem verbalizar a inconsistência dos ícones, mas registram na hora – uma lixeira preenchida e pesada ao lado de uma engrenagem de contorno finíssimo é lida como “tem alguma coisa errada com este produto”, o equivalente visual de um erro de digitação.

A disciplina tem três partes. Desenhe na grade, posicione no alvo: o glifo vive na sua grade de 24 px; a área de toque em volta dele respeita o piso da plataforma (44 pt no iOS, 48 dp no Material), exatamente como botões e campos respeitam os mínimos de alvo – um glifo pequeno tudo bem, uma área de toque do tamanho de um glifo não. Alinhe opticamente, não geometricamente: um triângulo de reprodução centralizado pela caixa delimitadora fica visivelmente descentralizado porque sua massa visual pende para a esquerda; empurrá-lo para a direita é correto do mesmo jeito que ajustes ópticos de espaçamento são corretos – o olho manda mais que a régua. Use estados, não estilos, para significar: preenchido contra contorno pode codificar selecionado contra inativo (uma convenção legítima em barras de abas), mas aí codifica só isso – não pode acumular a função de escolha decorativa em outro lugar sem corromper o sinal.

Nos meus próprios apps de iOS a família são os SF Symbols em uma única espessura, imposta na camada do design kit – os glifos são dimensionados pelos mesmos papéis tipográficos do texto, então uma importação avulsa não chega à produção sem brigar visivelmente com o sistema. Essa é a forma geral da regra: escolha uma biblioteca, use só ela e, quando faltar um glifo necessário, desenhe-o na grade da família e na espessura da família – nunca importe um intruso de um segundo conjunto só porque ele estava a uma busca de distância.

Uma metáfora por ação

Vocabulário só funciona com consistência. Se um lápis quer dizer editar na tela de perfil, o lápis quer dizer editar em todo lugar – não “escrever” em um canto e “renomear” em outro. E a correspondência é de um para um: se o lápis edita, nenhum outro símbolo edita também; uma engrenagem que abre “editar configurações” ao lado de um lápis que abre “editar detalhes” obriga o usuário a manter duas entradas para um único verbo.

A mesma consistência governa os dialetos de plataforma. No iOS, compartilhar é o retângulo com seta; no Android, o glifo dos três pontos conectados; um produto web escolhe a convenção conforme seu público e se mantém nela. Setas de voltar apontam para a esquerda em idiomas escritos da esquerda para a direita e se invertem nos escritos da direita para a esquerda – já os controles de reprodução não se invertem, porque o triângulo de reprodução é uma convenção herdada do transporte de fita, e não da direção de leitura. Isso não é curiosidade: é a diferença entre falar o dialeto do usuário e obrigar o usuário a aprender o seu.

Manter essa correspondência exige escrituração: um glossário de ícones no design system – este símbolo, este significado, em nenhum outro lugar – cobrado do mesmo jeito que tokens de espaçamento e papéis tipográficos são cobrados. Sem o glossário, cada recurso novo negocia as próprias metáforas e, três trimestres depois, o produto tem quatro setas que significam quatro coisas diferentes.

Quando a palavra vence

O movimento mais forte na iconografia, assim como o movimento mais forte no design de formulários, costuma ser apagar. Uma página de configurações não precisa de um glifo sob medida ao lado de cada linha; as linhas já estão rotuladas, e os ícones acrescentam cor enquanto diluem o sinal dos poucos símbolos que fazem trabalho de verdade. A seção de “insights” de um painel não tem símbolo – uma lâmpada? um gráfico? um brilho? – porque o conceito não tem convenção pictográfica, e qualquer candidato é um cara ou coroa que usuários diferentes resolvem de formas diferentes.

O teste é simétrico à regra do rótulo: um ícone conquista seu lugar quando reconhecer vence ler – quando o símbolo é resolvido mais rápido que a palavra dele, o que é verdade justamente para a dúzia universal e para ferramentas de alta frequência já aprendidas. Em todo o resto, a palavra não é o plano B. Ela é o design.

Perguntas frequentes

Ícones de interface devem sempre ter rótulos?

Por padrão, sim. Ícones sem rótulo se justificam em dois casos: símbolos realmente universais em posições convencionais (uma lupa em um cabeçalho de busca, um X em um painel que pode ser fechado) e ferramentas de alta frequência cujo sentido a repetição ensina rápido – sempre com nomes acessíveis presentes e com tooltips para quem usa ponteiro. Em todo o resto, ícone mais rótulo atende tanto quem chega quanto quem volta.

Quantos ícones os usuários reconhecem sem rótulo?

Cerca de uma dúzia de forma confiável: buscar, configurações, excluir, adicionar, fechar, início, voltar, reproduzir, além de alguns quase universais como o lápis e o cadeado. Fora desse conjunto, o reconhecimento despenca e varia por plataforma – só compartilhar já tem convenções incompatíveis entre Apple e Android – então trate qualquer ícone fora do núcleo como algo que precisa de texto.

Uma interface pode misturar ícones de bibliotecas diferentes?

Não – o conjunto de ícones de um produto deve vir de uma única família, com uma grade, uma espessura de traço e um tratamento de cantos. Famílias misturadas são lidas como inconsistência visual que os usuários percebem na hora, mesmo sem saber nomear. Quando faltar um glifo necessário, desenhe-o seguindo as especificações da família em vez de importar de uma segunda biblioteca.

Quando um design deve usar um rótulo de texto em vez de um ícone?

Sempre que o conceito não tiver um símbolo amplamente reconhecido – o que cobre a maioria dos conceitos abstratos de produto, como espaços de trabalho, integrações ou insights. Um ícone conquista seu lugar quando reconhecer vence ler; se o usuário precisasse aprender ou adivinhar o símbolo, a palavra é mais rápida, mais clara e não é uma falha de design.