# Ícones precisam de labels?
> Por que ícones precisam de labels em interfaces. Melhore drasticamente acessibilidade e usabilidade com texto descritivo em UI. Implemente agora!
URL: https://dpw.dev/ui-ux/icones-precisam-de-labels/
Publicado em: 2017-01-23
Categoria: ui-ux
Tags: analise, planejamento
Autor: Tárcio Zemel
O pessoal da área de [UX](/categoria/ux) se encontra constantemente numa posição em que deve explicar/demonstrar conceitos da área para um cliente, um colega, o chefe ou amigo. E um dos temas que sempre entram em voga é: **ícones precisam de labels ou não**?
> Artigo baseado em [Do Icons Need Labels?](https://uxdesign.cc/do-icons-need-labels-6cb4f4282c00#.vpow438sv).
Como citado, um ponto recorrente de discussão é a importância (ou não) de **ícones virem acompanhados de labels** (rótulos).
Geralmente, é argumentado:
> As pessoas estão familiarizadas com o ícone. Eles o vêem o tempo todo e, portanto, o significado está enraizado em suas memórias.
E, certamente, já houve e ainda haverá muito debate sobre o assunto. [Zoltán Gócza](https://medium.com/u/50ff111f4fe3) e [Zoltan Kollin](https://medium.com/u/f65d13a73151) fornecem algumas [pesquisas interessantes que desmistificam que ícones melhoram a usabilidade](http://uxmyths.com/post/715009009/myth-icons-enhance-usability), enquanto [Min Ming Lo](https://medium.com/u/451c256ccdf1) [argumenta com foco no problema que o ícone de compartilhamento, em particular, enfrenta](https://bold.pixelapse.com/minming/share-the-icon-no-one-agrees-on).
Na verdade, o debate transcende ícones de UI, impactando a marca, em geral. Pegando como exemplo o rebrand do ícone do app da Uber:
O design antigo da Uber seguiu a convenção do Vale do Silício de usar a primeira letra da marca como ícone. Neste caso, o rótulo foi idealizado/feito com um único caractere. Uma forma segura de reforçar a marca em todos os momentos.
Mas, seguindo o rebrand, o ícone -- talvez na tentativa de apelar mais à emoção -- perdeu algo de seu significado. O label foi completamente removido, seu propósito não é mais explícito, as pessoas são forçadas a tentar interpretar seu significado.
Flipbook, Medium, Facebook, Vine e Primer, todos são feitos com a primeira letra da marca/produto no design do logo.
É claro que, como toda mudança, ao longo do tempo as pessoas se adaptam e se familiarizam com o novo _status quo_. Mas o problema realmente desaparece?
Voltando aos **ícones de UI** em geral, uma boa UX pode ser definida de muitas maneiras; uma medida possível é a capacidade de reduzir o esforço das pessoas de pensar. O [Nielsen Norman Group](https://www.nngroup.com/) define isso como **O Custo de Interação**.
> O custo de interação é a soma dos esforços -- mentais e físicos -- que os usuários devem implementar na interação com um site para atingir seus objetivos.
Um fator importante que contribui para o esforço mental é a capacidade de determinar o significado. Na teoria semiótica, isso é chamado de _Sinal_.
O **Sinal** é composto por 2 partes: o **Significante** e o **Significado**. Por exemplo, imagine uma porta de loja que tem um cartaz vermelho escrito "Fechado". Este é o Significante, é algo tangível que existe no mundo real. Neste caso, o Significado seria que a loja está fechada para negócios; o Significado é abstrato, conceitual, um pensamento. Ambos os elementos compõem o Sinal e, juntos, criam **significado** que pode ser interpretado pelas pessoas.
O Significante é muitas vezes composto de uma série de componentes. O cartaz "Fechado" se beneficiou da psicologia da cor e do contexto, tanto quanto da comunicação escrita (o label). Um Significante forte fará uso de tantos componentes quanto possível a fim de reduzir o custo de interação e criar uma experiência que não demande esforços. Removendo um desses componentes, o Significante fica enfraquecido e o Significado se torna desfocado. Mas...
> Os usuários estão familiarizados com o ícone. Eles o veem todo o tempo e, portanto, o significado está enraizado em suas memórias.
Este é o argumento. Mas quão verdadeira é sua premissa?
## O jogo dos ícones
[Steve McCarthy](https://uxdesign.cc/@MotionBrother) queria testar essa teoria e criei um jogo baseado na seguinte hipótese: ao remover os labels de ícones comuns e familiares, as pessoas teriam dificuldade em combiná-las com seus respectivos significados.
[O jogo](http://www.motionbrothers.co.uk/signified/) era simples. Ícones eram mostrados para as pessoas e, em seguida, 4 opções de label, das quais apenas 1 era a resposta correta. Havia 19 ícones no total e todos os ícones eram de aplicativos iOS populares -- a maioria da lista "Top 20" na App Store ou de aplicativos que já vêm com o iOS.
Tela com exemplo de questões do jogo.
Estava-se bastante consciente de que mostrar os ícones fora do contexto do aplicativo em si seria uma vantagem injusta. Mas o jogo também era de múltipla escolha, e, certamente, se esses ícones estivessem arraigados nas memórias das pessoas, fazer a correta associação deveria ser fácil.
> **Dica:** O jogo ainda está no ar. Para jogar, acesse [http://www.motionbrothers.co.uk/signified/](http://www.motionbrothers.co.uk/signified/).
### Resultados do jogo dos ícones
Os resultados foram reveladores. Das 144 pessoas que jogaram o jogo (no momento da escrita das conclusões):
- 61,81% conseguiram identificar entre 4 e 7 ícones
- 22,92% conseguiram entre 8 e 13
Mas ninguém foi capaz de identificar mais de 14 ícones, muito menos todos os 19.
Mas 19 é um número grande de ícones para lembrar, certo? Bem, o app do Facebook para iOS sozinho tem pelo menos 19 ícones em sua interface (no momento da publicação dos resultados do jogo).
### Na prática
Infelizmente, apesar de todos os melhores esforços e boas intenções, o jogo não tem qualquer caráter científico. No entanto, ajuda a demonstrar um ponto para um cliente, colega ou amigo de uma forma que instantaneamente se possa compreender. Eles próprios podem jogar o jogo e compreender rapidamente a **importância e a relevância da orientação de UX** que está sendo oferecida. Demonstração de conceitos é talvez a ferramenta mais importante no cinto de utilidades de ferramentas de UX.
De qualquer maneira, oportunidades reais de orientação/consultoria para clientes em relação a melhorar a UX começam a se apresentar. Por exemplo, um dos clientes de Steve McCarthy decidiu adicionar a etiqueta "Menu" abaixo do ícone de hambúrguer na versão móvel do site -- o que, atualmente, é uma tendência reforçada por estudos de Usabilidade e UX. Essa pequena alteração resultou em um aumento de 42,09% na atividade de clique no ícone. Ao simplesmente adicionar um label ao ícone, parece que ele se tornou mais visível para as pessoas.
## O futuro dos labels
Relembrando mais uma vez o argumento:
> As pessoas estão familiarizadas com o ícone. Eles o vêem o tempo todo e, portanto, o significado está enraizado em suas memórias.
Na verdade, há alguma verdade nessa afirmação. Sim, os dados mostram que labels melhoram a experiência para a maioria das pessoas ao reforçar o Sinal. Mas o que os dados não podem levar em conta é o nível de especialização de uma pessoa isoladamente.
Por exemplo, a "Pessoa A" usa um aplicativo 4 vezes ao dia e tem feito isso durante boa parte de um ano; eles se tornar familiares a ela e a pessoa está acostumada a como esses aplicativos funcionam em todos os sentidos. A "Pessoa B" baixou o aplicativo pela primeira vez; ela nunca vira sua UI antes. A "Pessoa A" tem um nível de especialização muito maior do que a "Pessoa B".
A teoria da [Usabilidade](/tag/usabilidade/) diz que a melhor maneira de projetar ícones para a "Pessoa A" e para a "Pessoa B" seria incluir labels, ou seja,projetar para o menor denominador comum. Mas certamente o objetivo final de UX é projetar para as necessidades individuais das pessoas. Só então é possível conseguir uma experiência verdadeiramente personalizada. Entra em cena a [Redução Progressiva](/ux/reducao-progressiva-decaimento-experiencia/).
O conceito de **Redução Progressiva** é bastante simples: à medida que uma pessoa se torna mais familiarizada com uma interface, tem menos necessidade de sinalização. Da mesma forma que na primeira visita a uma loja de departamentos talvez precisemos consultar sua planta baixa, mas, com o tempo e depois de repetidas visitas, a necessidade de orientação por sinais é cada vez menor. Aprendemos rapidamente que a loja de gravatas fica no último piso na parte traseira e que a loja de calçados femininos fica no térreo.
Quando aplicada a um produto digital, Redução Progressiva pode ajudar a remover labels que não são mais necessários quando a pessoa sabe o que o botão faz. Isso permite que o projeto seja visualmente mais _clean_ e permite à pessoa se concentrar em tarefas mais relevantes e condizentes a seu _nível de especialização_ naquele produto em especial.
Veja este exemplo de como o aplicativo do Medium poderia usar a Redução Progressiva para remover rótulos de ícones comumente usados depois que a pessoa usa o app durante algum tempo:
Sugestão de Redução progressiva no app do Medium.
## Afinal, ícones precisam de labels ou não?
Nos últimos anos, os vários estudos da área de UX têm feito com que o desenvolvimento de web/apps/produtos digitais sejam **fortemente focados em design adaptativo e responsivo**, garantindo que as pessoas tenham acesso a conteúdos em vários dispositivos. Agora, é preciso pegar o que esta abordagem de design iniciou e começar a aplicá-la à forma como as pessoas se orientam e acessam conteúdo.
O primeiro passo é entender a importância e a força dos Sinais que são criados. Só então será possível considerar a otimização e personalização de experiências; **só então será possível começar a remoção dos labels dos ícones**.
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml
