O pessoal da área de 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?

Como citado, um ponto recorrente de discussão é a importância (ou não) de ícones virem acompanhados de labels (rótulos).

Exemplo de ícones com 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 e Zoltan Kollin fornecem algumas pesquisas interessantes que desmistificam que ícones melhoram a usabilidade, enquanto Min Ming Lo argumenta com foco no problema que o ícone de compartilhamento, em particular, enfrenta.

Na verdade, o debate transcende ícones de UI, impactando a marca, em geral. Pegando como exemplo o rebrand do ícone do app da Uber:

Ícone Uber: antigo e novo

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.

Logos Flipbook, Medium, Facebook, Vine e Primer

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 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.

Semiótica: sinal é significante + significado

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 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 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.

Exemplo de tela do jogo dos ícones.

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.

O jogo ainda está no ar. Para jogar, acesse 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):

Mas ninguém foi capaz de identificar mais de 14 ícones, muito menos todos os 19.

Resultado do jogo dos ícones

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 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.

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

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.