Os 5 ícones universalmente compreendidos (e por que tudo o resto precisa de um rótulo)

Peça a uma sala de designers que nomeiem os ícones com os quais se sentiriam confortáveis em usar sem rótulos de texto, e você receberá vinte listas diferentes. Peça aos usuários o que esses mesmos ícones significam, e você receberá duzentas respostas diferentes. A lacuna entre o que os designers assumem como universal e o que os usuários realmente entendem é um dos erros mais caros na navegação de ecommerce.

A verdade, apoiada por anos de pesquisa do Nielsen Norman Group, Apple, Google e grandes empresas de testes A/B, é muito mais restrita do que a maioria das pessoas pensa. Apenas um pequeno punhado de ícones pode ser usado sozinho sem criar confusão. Tudo o resto precisa de um rótulo.

Os cinco universais

Os ícones que realmente funcionam sem texto são aqueles que foram padronizados em plataformas por décadas e têm implementações quase idênticas em praticamente todos os principais aplicativos que os usuários encontram. A lista é curta.

1. Home (ícone de casa)

O ícone de casa significa “vá para a página inicial” há tanto tempo que seu significado está incorporado às expectativas dos usuários. Todo navegador, todo sistema operacional móvel e praticamente todo aplicativo usa a mesma metáfora visual. As taxas de reconhecimento do ícone home excedem 95% na maioria dos testes de usuários.

Dito isto, o ícone de home é um tanto redundante em ecommerce. A maioria dos temas Shopify já usa o logotipo da loja como um link para a página inicial, que serve a mesma função e reforça a identidade da marca. Se você tiver tanto um logotipo quanto um ícone de home, está dedicando dois espaços de navegação para a mesma ação.

2. Search (lupa)

A lupa é um dos ícones mais testados na web. Sua taxa de reconhecimento é consistentemente acima de 90%, e os usuários tocam nela sem hesitação. Este ícone tem a vantagem de ser visualmente descritivo—uma lupa parece uma ferramenta para encontrar coisas—e tem sido usada em sistemas operacionais de desktop desde os anos 1980.

Em ecommerce, a busca é crítica. O ícone de lupa pode ser usado com segurança sozinho em um cabeçalho móvel ou barra de abas, embora adicionar a palavra “Search” abaixo ainda produza um pequeno mas mensurável aumento no engajamento. Até ícones universais recebem mais cliques quando rotulados.

3. Carrinho de compras ou sacola

Décadas de compras online tornaram o ícone de carrinho inconfundível. Seja um carrinho de supermercado ou uma bolsa de varejo, os usuários sabem que significa “ver itens que pretendo comprar”. O ícone normalmente inclui um distintivo mostrando o número de itens, o que adiciona clareza funcional.

Testes do Baymard Institute mostram que o reconhecimento do ícone de carrinho em contextos de ecommerce está acima de 95%. Diferentemente de alguns outros ícones, o ícone de carrinho não está sobrecarregado com significados alternativos—significa uma coisa, e esse significado é estável entre plataformas.

4. Menu (ícone de hambúrguer)

O ícone de três linhas do hambúrguer tornou-se o símbolo padrão para “abrir o menu” em dispositivos móveis. Seu reconhecimento cresceu substancialmente na última década quando o design mobile-first se tornou padrão. Críticas iniciais do ícone hambúrguer—particularmente um famoso teste de 2014 mostrando que a palavra “MENU” superava o ícone—foram amplamente resolvidas à medida que os usuários se adaptaram ao padrão.

Dito isto, combinar o ícone hambúrguer com a palavra “Menu” ainda supera o ícone sozinho. Testes do Nielsen Norman Group em centenas de milhares de sessões encontraram um aumento de 20% no engajamento do menu quando o ícone foi emparelhado com texto. O ícone é compreendido, mas o rótulo remove o último bit de hesitação.

5. Close (ícone X)

O ícone X para fechar janelas, diálogos e sobreposições é universalmente compreendido. Tem sido uma parte padrão das interfaces gráficas de usuário desde os primeiros sistemas operacionais de desktop. O reconhecimento é próximo a 100%, e os usuários não hesitam quando o veem.

O ícone X é um dos poucos casos em que um rótulo realmente prejudicaria a usabilidade. Adicionar a palavra “Close” ao lado de um X cria redundância sem adicionar clareza, e ocupa espaço que é frequentemente muito limitado em um cabeçalho modal.

Por que tudo o resto falha sem um rótulo

Uma vez que você sai desses cinco ícones, as taxas de reconhecimento caem drasticamente. A razão é a inconsistência entre plataformas. O mesmo símbolo visual significa coisas diferentes em contextos diferentes, e os usuários não têm como saber qual significado se aplica à sua loja, a menos que você diga a eles.

O ícone de coração é um exemplo perfeito. No Instagram, significa “curtir”. No Pinterest, significa “salvar”. Em muitos sites de ecommerce, significa “adicionar à lista de desejos”. Em aplicativos de saúde, representa dados de saúde ou favoritos. Quando um usuário encontra um ícone de coração em sua loja pela primeira vez, está adivinhando. Pesquisa do Nielsen Norman Group descobriu que ícones de coração não rotulados foram interpretados mal por mais de 40% dos usuários em contextos de ecommerce.

O ícone de estrela tem o mesmo problema. Pode significar classificações, favoritos, recursos premium ou itens em destaque, dependendo do aplicativo. Sem um rótulo, os usuários têm que decifrá-lo a partir do contexto, o que introduz fricção.

O ícone de pessoa ou usuário pode parecer óbvio—representa “conta” ou “perfil”, certo? Exceto que em alguns sites significa “login”, em outros significa “atendimento ao cliente” e em outros abre um dropdown com múltiplas ações relacionadas à conta. Estudos de reconhecimento mostram que apenas cerca de 60% dos usuários identificam corretamente o ícone de pessoa como “conta” no primeiro encontro.

Ícones de grade, tag, filtro e marcador sofrem com ambiguidade severa. Uma grade pode significar “visualizar como grade”, “categorias”, “coleções” ou “todos os produtos”. Uma tag pode significar “itens à venda”, “rótulos” ou “organizar”. Um ícone de filtro é um pouco melhor, mas ainda é reconhecido apenas por cerca de 70% dos usuários sem um rótulo.

O padrão é claro: ícones que têm um significado estável em todas as principais plataformas podem funcionar sozinhos. Ícones que significam coisas diferentes em diferentes aplicativos não podem.

Os dados de reconhecimento

O Nielsen Norman Group realizou múltiplas rodadas de testes de usabilidade de ícones na última década. Seus achados são consistentes. Em um estudo amplamente citado, eles testaram 75 ícones diferentes usados em sites de ecommerce e conteúdo. Apenas seis ícones tiveram taxas de reconhecimento acima de 80%. O restante caiu em um intervalo onde 40% a 70% dos usuários identificaram incorretamente o ícone ou o ignoraram completamente porque tinham dúvidas.

A pesquisa interna da Apple, que informa suas Diretrizes de Interface Humana, as levou a recomendar explicitamente rótulos de texto em todos os itens de barra de abas. Sua diretriz afirma: “Se você remover os rótulos da sua barra de abas, certifique-se de que os ícones são claros e fáceis de entender.” Mas vai além: “Geralmente é melhor incluir rótulos porque ajudam os usuários a entender o propósito de cada aba à primeira vista.”

As diretrizes Material Design do Google são ainda mais diretas. A diretriz para navegação inferior especifica: “Rótulos de texto devem ser usados para todos os destinos. Destinos sem rótulos de texto não se comunicam claramente o suficiente por conta própria.” Eles testaram barras de navegação apenas com ícones e descobriram que adicionar rótulos de texto melhorou as taxas de sucesso de navegação em 18%.

Isto não é teórico. Quando grandes plataformas com bilhões de usuários e recursos quase infinitos para testes dizem que rótulos de texto são obrigatórios, é porque seus dados mostraram que ícones não rotulados prejudicam a usabilidade.

Quando ícones universais ainda se beneficiam de rótulos

Até os cinco ícones universais funcionam melhor com rótulos em muitos contextos. A diferença é menor do que com ícones ambíguos, mas é mensurável.

Testes do Blend Commerce em lojas Shopify descobriram que uma barra de abas móvel com ícones e rótulos de texto produziu 10% mais taxa de conversão do que a mesma barra de abas apenas com ícones—mesmo que os ícones usados fossem do conjunto universal (home, search, coleções representadas por uma grade, carrinho, conta).

Por que adicionar um rótulo a um ícone de lupa aumentaria o engajamento? Duas razões. Primeiro, o rótulo fornece confirmação. Um usuário vê o ícone, o reconhece, e o rótulo confirma que está correto antes de tocar. Esse instante de confiança remove micro-fricção. Segundo, o rótulo cria um alvo de toque maior e mais indulgente, o que melhora a usabilidade em telas pequenas.

O aprendizado prático: ícones universais podem ser usados sozinhos quando o espaço é genuinamente limitado, mas adicionar rótulos curtos é o padrão melhor.

Onde isso deixa sua navegação

Se você está construindo ou auditando navegação para uma loja Shopify, aqui está o framework de decisão:

Ícones seguros para usar sozinhos:

• Search (lupa)
• Carrinho ou sacola
• Close (X)
• Home (se não redundante com logotipo)
• Menu (hambúrguer)

Ícones que precisam de rótulos:

• Tudo o resto. Coleções, conta, lista de desejos, favoritos, filtro, ordenação, compartilhar, configurações, notificações, chat e qualquer ícone específico de categoria que você está considerando.

Melhor prática: Até os ícones universais devem ter rótulos em navegação persistente como uma barra de abas móvel. O custo de espaço é mínimo—uma ou duas palavras abaixo de cada ícone—e o ganho de usabilidade é real.

Se sua navegação atualmente usa botões apenas com ícones para algo diferente de search, carrinho ou close, execute um teste simples. Adicione rótulos de texto e meça o engajamento. Ferramentas como Navi+ facilitam alternar rótulos ligados e desligados, para que você possa testar ambas as versões sem reconstruir seu tema. Os dados quase sempre favorecerão a versão rotulada.

This article is part of the larger guide on Icons vs text in navigation: when to use which (and when to use both).