Diálogo sem palavras

“Nossa linguagem em UX, por incrível que pareça, é mais da pré-escrita do que da escrita”, disse Sofia Ferrés em sua palestra Repara bem no que não digo. Sofia começou com uma jornada pela história da linguagem, que tem início há cerca de 30.000 anos com a proto-escrita, baseada em símbolos ou grafismos. Os pictogramas representavam objetos e os ideogramas, ideias. 9.000 anos atrás, os símbolos começaram a ser usados para representar sons e, há 6.000 anos, surge a escrita, marco que divide a pré-história e a história, quando povos na Mesopotâmia, China, Egito e América Central começaram a registrar a linguagem. Há 4.000 anos então, começava a ser desenvolvida na Mesopotâmia, a escrita alfabética.

“Nossa linguagem em UX, por incrível que pareça, é mais da pré-escrita do que da escrita” Sofia Ferrés
Sofia Ferrés em sua palestra "Repara bem no que não digo". (Foto: Robson Silva)

Sofia comparou as interfaces a uma série de diálogos, que podem ou não iniciar uma conversa, e esses diálogos se dão em uma linguagem que não é a que usamos quando conversamos entre nós, não é uma "linguagem verbal, semântica, toda construída e complexa. É uma linguagem bastante primitiva", disse Sofia. “Os homens das cavernas já construíam wireframes, eles já contavam coisas através de ícones e símbolos”.

"Tablet" de escrita Cuneiforme. Suméria, 2300–2100 a.C. Imagem: hiveminer.com

Os ícones são parte fundamental de muitas interfaces, sejam elas de produtos e serviços digitais, ou parte de um ambiente de informação híbrido (analógico e digital), como os ícones em um controle remoto, por exemplo. Com a disseminação dos smartphones, é cada vez maior a utilização de apps ou interfaces responsivas, o que obriga designers a usarem ícones, entre outras coisas, pelo espaço reduzido para expressarem ideias e estabelecerem diálogos.

Os ícones que compõem uma interface precisam ser esteticamente agradáveis, ter uma unidade entre eles e, efetivamente, ajudar o usuário a navegar pelo sistema da forma mais rápida e intuitiva possível.

Existem diferentes formas de se analisar e classificar os ícones. Sofia mostrou em sua palestra uma divisão que vai crescendo em abstração:

Similares: análogos em uma ação, objeto ou conceito. Encenam. Usados para ações simples e concretas. Uma seta para virar à direita em uma placa de trânsito, por exemplo.

Exemplos: exemplificam uma ação, objeto ou conceito pela parte. Simplificam. Para representações complexas. Um exemplo é o ícone de um avião representando um aeroporto.

Simbólicos: Representam uma ação, objeto ou conceito ao abstraí-los. Associam. Um adesivo colado em uma caixa mostrando uma taça quebrada representando frágil, mesmo que não haja taças nesta caixa, mas outros objetos frágeis.

Arbitrários: Relacionam imagens a ações, objetos ou conceitos por padronização. São ícones reconhecíveis por diferentes culturas mundialmente, como o símbolo usado para representar radioatividade (trifólio).

Sofia Ferrés e Ana Coli (Foto: Robson Silva)

Em artigo publicado na Smashing Magazine (Icons as part of a great user experience), Nick Babish diz que “um ícone é uma representação visual de um objeto, ação ou ideia."

"Se esse objeto, ação ou ideia não está claro para o usuário imediatamente, o ícone será reduzido a ruído visual, o que trará dificuldades para o usuário completar suas tarefas". Nick Babish

Babish então fala sobre uma divisão dos ícones em 3 categorias: universais, conflitantes e únicos:

Universais: Alguns ícones podem ser reconhecidos por usuários em todo o mundo, como por exemplo o ícone de home, busca ou carrinho de compras.

Conflitantes: É um problema que ocorre com ícones de significados contraditórios. A estrela e o coração são um exemplo. Não só as funcionalidades desses ícones variam de app para app, como elas competem entre si. Como consequência, uma interpretação precisa desses ícones torna-se difícil. Até mesmo no contexto de um app, esses ícones podem ser muito confusos quando o usuário espera uma coisa e acontece outra. Isso impede que o usuário entenda esses ícones e o desencoraja de confiar neles em experiências futuras.

Outros ícones que se enquadram nessa categoria:

Lápis: Adicionar, editar

Balão de fala: Comentar, enviar mensagens, chat

Únicos: Ícones são especialmente ruins para algo abstrato pois eles geralmente não são representações visuais muito fortes. Para descrever objetos únicos, são criados ícones únicos. Um exemplo é o ícone da Apple para seu Game Center, que é representado por 4 círculos coloridos sobrepostos, algo que não se relaciona diretamente a jogos. Outro exemplo foi quando o Google simplificou a interface do Gmail e colocou todas as funcionalidades mais importantes como ícones, recebendo perguntas dos usuários como “onde está meu calendário?". Esses ícones tendem a não ser clicados por usuários novos ao sistema, pois é uma característica da natureza humana desconfiar do desconhecido.

Na sequência do artigo, Babish traz algumas técnicas para escolher os ícones certos, lembrando que é fundamental que a interface seja testada com usuários.

1) Use legendas para trazer clareza a ícones não familiares ou abstratos

O autor diz que ícones podem economizar espaço através da redução de texto, mas isso pode custar o reconhecimento. Um ícone pode representar milhares de palavras diferentes e aí está o problema. Usuários ficam a princípio intimidados com interfaces não familiares. Eles querem saber exatamente o que irá acontecer ao tomarem uma ação em um app não familiar. Por isso os ícones têm que estabelecer uma clara expectativa para os usuários antes que ele clique em um deles.

Para Babish, uma boa experiência do usuário pode ser medida por quanto o usuário é liberado de ter que pensar, e clareza é a mais importante característica de uma boa interface. Para evitar a ambiguidade que afeta a maioria dos ícones, pode-se incluir uma legenda para clarear o entendimento de um ícone em um contexto particular, em especial aqueles designados para ações abstratas e funcionalidades complexas.

Spotify: ícones com legendas

O UserTesting fez uma série de testes comparando ícones com e sem legendas, e chegou às seguintes conclusões:

- Em 88% das vezes, os usuários puderam prever corretamente o que aconteceria quando clicavam em ícones com legendas.

- Esse número caiu para 60% para ícones sem legendas.

- Para ícones únicos no app sem legenda, usuários previram corretamente o que aconteceria em 35% das vezes.

Até mesmo para ícones universais, geralmente usar legendas é indicado.

2) Quando apenas ícones são indicados

Ao passo que usuários novos podem não identificar até mesmo ícones universais sem legendas, usuários mais experientes podem achar que legendas em todos os ícones tornam a interface mais poluída. Segundo Michael Zuschlag, o uso de ícones sem legendas pode ocorrer quando pelo menos duas dessas três condições são atendidas:

- o espaço é muito limitado para o uso de texto.

- os ícones são standard, como por exemplo os universais.

- os ícones representam objetos com fortes analogias físicas ou atributos visuais, por exemplo um retângulo vermelho para que o usuário deixe o background vermelho.

3) Cuidado com tooltips e popovers para ícones

Alguns designers usam tooltips ao invés de legendas para manter a interface limpa. Se o texto explica melhor que o ícone, é melhor usar apenas texto, e tooltips não funcionam bem em touchscreens. Outra saída é o uso de tutoriais, no entanto o usuário pode passar rápido por essas explicações além de ter esquecido o que aprendeu em sua próxima visita ao app. Como as tooltips, tutoriais não são substitutos para um design intuitivo.

4) Ícones e legendas para botões

Ícones acompanhados de legendas facilitam que a informação seja achada e escaneada desde que o texto seja colocado no lugar certo. Segundo o UX Movement, há dois fatores importantes na localização dos ícones e legendas.

- Os ícones têm que ser vistos primeiro, portanto deixe-os antes ou sobre a legenda.

- Caso haja um título e texto para a legenda, deixe o ícone alinhado com o título, e não centralizado no bloco de texto, fazendo com que o usuário veja o ícone antes de ler a legenda.

5) Ícones em tabelas de dados

Um exemplo seria uma tabela com números em colunas, e um ícone indicaria se os valores mostram algo bom, ruim ou péssimo. Don Nickel diz que ícones à esquerda do número indicam a intenção do dado, e à direita indicam a qualidade

- Ícones de status devem vir no fim da linha. Primeiramente o assunto, depois o valor associado ao assunto, depois o status do valor.

- Quando os ícones são o assunto, eles devem vir no início da linha, e o restante da informação viria depois.

6) Ícones para menus accordion

Lance Gutin conduziu um experimento com diferentes tipos de ícones (arrow down em forma de seta, sinais de mais / menos, e triângulos) e localização (à direita ou à esquerda). Obteve assim duas descobertas:

- Os dados mais importantes envolveram localização. Ao verem o ícone após a legenda, os usuários tenderam a clicar no ícone e não na legenda, e é possível que alguns acreditassem que a legenda tinha uma funcionalidade diferente.

- O menu com o sinal de mais localizado à esquerda teve 90% dos participantes prevendo que o menu mudaria.

7) Cuidado com o ícone Hambúrguer

As três linhas horizontais tornaram-se uma convenção para o botão principal de menu, principalmente para sites mobile. Jon Rundle mostra através de uma pesquisa a relação entre a interpretação deste ícone e a idade dos usuários. O ícone não é familiar para usuários mais velhos, portanto conhecer o público alvo é fundamental antes de usá-lo.

8) Desenhe ícones para o máximo reconhecimento (affordance)

Affordance, palavra sem tradução para o português, é um importante princípio da usabilidade, essencialmente significa que elementos como ícones devem ser intuitivos:

- Mantenha os ícones simples e esquemáticos: Na maioria dos casos, ícones não são o lugar para ser criativo. Se está desenhando um novo ícone, minimize os detalhes visuais e evite uma imagem muito realista, focando nas características básicas do objeto. Se tem duas opções para um ícone, escolha a mais simples.

- Escolhas ícones familiares. O entendimento de um usuário sobre um ícone baseia-se em experiências prévias, antes de escolher, pesquise os ícones mais comuns usados por competidores e plataformas da mesma área, pois esses serão mais facilmente reconhecidos por seus usuários.

- Não transfira ícones de uma plataforma para a outra. Ao construir um app para Android ou IOS, não transfira ícones de temas já construídos, sendo que ambas já têm ícones próprios para ações como buscar, salvar ou atualizar, por exemplo.

9) Tamanho

Faça os ícones com tamanho suficiente para serem clicados com facilidade em dispositivos móveis. A média recomendada para o tamanho dos ícones levando em conta o tamanho médio dos dedos de uma pessoa, é entre 7 e 10mm.

10) Teste seus ícones

Faça seus ícones reconhecíveis perguntando aos entrevistados o que eles representam.

Teste os ícones com relação à memória dos usuários, levando o mesmo grupo de entrevistados para uma segunda rodada de testes algumas semanas depois.


Em 2014, Jakob Nielsen publicou um artigo com o título “Classificação de ícones: semelhança, referência e ícones arbitrários”.

Nielsen resumiu as descobertas de testes de usabilidade realizados pelo seu time:

"Quanto menor for a distância entre o ícone a coisa que representa, mais fácil é sua compreensão, mas a padronização também facilita o entendimento". Jakob Nielsen

Segundo Nielsen, cada Visual Design é diferente e tem suas particularidades, mas algumas categorias mais amplas ajudam a mostrar que alguns ícones podem ser melhor compreendidos do que outros.

Ícones de semelhança: representação de um objeto físico, por exemplo um envelope para representar um email. O maior desafio aqui é ter um ícone que realmente se pareça com o objeto, o que não é fácil devido ao tamanho reduzido.

Ícones de referência: representação de um objeto que por referência ou analogia pode se referir ao conceito, por exemplo o ícone de um torno utilizado para representar uma funcionalidade de compressão de arquivos.

Ícones arbitrários: formas arbitrárias que apenas têm significado por convenção, por exemplo um triângulo e uma exclamação representando atenção.


Sofia então continuou sua palestra mostrando como estrutura física e interface compõem um produto, que pode ser analógico, digital, ou os dois, mostrando alguns exemplos como um smartphone ou uma cafeteira digital, e dizendo que os ícones são um dos elementos dessa conversa que se estabelece entre uma pessoa e uma máquina. Os agentes dessa conversa são:

- Comando / input / entrada / ajuste (ação do usuário, emissor). Esse comando pode ser analógico ou digital. O comando é sempre uma ação. Uma ação analógica seria girar um botão de volume de um som antigo, um comando digital é o botão lateral de um smartphone.

- Feedback / output / retorno (ação da máquina / receptor). Ao girar o botão de um forno elétrico, o feedback se dá pelo próprio comando, que pode emitir uma tensão ou um som.

- Controle (objeto / local).

- Display / Status (informação / comportamento).

- Variável analógica / digital, contínua / transiente (unidade).

- Restrição / limite / tolerância.


É preciso atenção em todas as etapas de concepção de um produto, e quanto aos ícones que ajudam a compor a interface, é importante que eles tenham unidade estética, sejam acompanhados de legendas quando necessário, e testes de usabilidade são essenciais para medir a compreensão dos usuários.

Palestra de Sofia Ferrés no WIAD 2017

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.