Não tá fácil entender o ícone, mas tá fácil de entender o símbolo

Ícones e símbolos estão sendo muito utilizados pelos designers com o objetivo de melhorar a comunicação com o usuário em um sistema web, aplicativo ou site.
Temos muitos ícones sendo criados que estão se transformando em símbolos, por exemplo, o menu hambúrguer. Se o seu público alvo for mais jovem o menu hambúrguer é um símbolo, caso contrário ele tem a definição de um ícone, portando ele está se transformando em um símbolo.

Nesse momento você deve estar se perguntando: qual é a diferença de ícone e símbolo? Para entender a diferença, vamos dar uma olhada no básico de semiótica. O nome é complicado mas é uma ciência prática que foi muito bem estruturada por Charles Sanders Peirce, deixando-a bem mais simples de entender.

O que é semiótica?

Semiótica é uma ciência que estuda todos os fenômenos culturais por trás de um signo (significação), ou seja, quando vamos criar um ícone ou símbolo em um projeto, é importante pensar em quais fenômenos culturais o usuário vivenciou ou está vivenciando. Parar pra pensar nisso antes de criar um signo, tornará a construção de um ícone ou símbolo mais efetiva pro usuário. Outra vantagem, é que quando escolhemos uma determinada forma pra se comunicar com o usuário e sabemos quais foram os motivos, fica ainda mais fácil pra realizar e mensurar, um ou mais testes com o usuário, com finalidade de verificar se tivemos sucesso ou o que devemos melhorar no signo que construímos.

Pra facilitar o entendimento e um signo, Peirce criou três tipos de signos:

  • Índice
  • Ícone
  • Símbolo

O que é Índice?

Índice, é um pequena parte de um todo e essa parte tem que ser identificada pela experiência subjetiva ou herança cultural que foi adquirida pelo usuário anteriormente ao seu produto. Por exemplo, imagine que você esta andando pela rua e no asfalto tem uma marca de pneus, possivelmente você acredita que algum carro, freou ou arrancou de uma forma brusca naquele local. Isso quer dizer que tiramos conclusões com base na marca de pneu no asfalto, que é o nosso índice (causa).
Um exemplo bacana dentro do mundo web: quando vemos um texto azul sublinhado dentro de um paragrafo, já tiramos a conclusão de que é um link, porque já vimos esse comportamento em muitos sites. Mas não temos nenhuma forma de associação com o mundo real de que um texto azul sublinhado pode ser um link. Só tiramos essa conclusão por uma “herança cultural” que aprendemos por navegar na web.

Qual a diferença entre Ícone e Símbolo?

Ícone é um signo que detém um relação de proximidade palpável ou emotiva para representar um objeto. Dessa forma o ícone não é o objeto, ele é algo próximo do objeto seja por forma emotiva ou palpável. Por exemplo o site Vivi LeDish tem um menu bem interessante baseado em ícones e símbolos:

Screen Shot 2016-03-16 at 6.14.47 PM

Se pegarmos o ícone que contém o texto Vivi’s Cookbook (livro de receitas da Vivi) e retirarmos o texto deixando apenas o ícone:
mix-enjoy-both
Olhando o ícone sem o texto ainda parece um livro de receita. Mas te lembra outra coisa sem ser o livro de receita da Vivi?
Pra mim parece também um calendário ou um caderno de desenho. Ou seja ícone é um signo que precisa de um apoio de texto pra explicar do que se trata.

Símbolo é a representação de um objeto. Ele não precisa de qualquer apoio de texto para que o usuário consiga entender do que se trata determinado signo. Por exemplo, se pegarmos o símbolo da casa e tirar o texto Home:
home-both
Quando você olha pro símbolo sem o apoio de texto, você consegue pensar em algo diferente do que Home (casa)? Se não, esta casa tem a definição de um símbolo. 🙂

Mas por que tirar o texto né? Na minha opinião prefiro um símbolo com texto, só retiro o texto se ele for uma distração para o usuário.

Como analisar seus ícones e símbolos?

No meu dia a dia quando vou analisar ícones e símbolos, pego todos os ícones e símbolos e retiro o texto de apoio. Depois, olho um por um e escrevo o que cada signo representa pra mim (nesse momento entro no modelo mental do usuário, minha experiências não podem afetar a análise). Faço isso para treinar minha análise mas esse processo é muito sujeito a falhas.

Recomendo você retirar todos os apoios de texto dos seus ícones e símbolos e pedir para no mínimo 5 usuários de seus produtos escreverem o que cada signo representa para eles. Dessa forma você conseguirá avaliar de forma efetiva se construiu bons símbolos e ícones.

Construir bons ícones e símbolos?

Antes eu só procurava boas referências de ícones e símbolos e com base nelas passava a construir os ícones. Acho que em muitos casos é um bom caminho, mas eu fiquei muito deslumbrado com a forma que o Google fez os ícones e símbolos do material design.

Espero que o post te ajude a criar e analisar seus ícones e símbolos e me conte como é o seu processo de criação e análise dos seus. 🙂

3 Comentários

  1. Alberione 21/04/2016 at 11:14 #

    Show!!!!

  2. wilson prata 22/04/2016 at 10:25 #

    Importante observar que ícones e símbolos não são características imanentes das formas de representação utilizadas, sua caracterização depende menos de suas propriedades intrínsecas e muito mais da sua relação com outros signos. Sendo que o significado encontra-se sempre em aberto. Você pontua bem sua visão dos ícones/símbolos, mas eles podem “diferir” radicalmente para outros sujeitos com outros repertórios de experiência diferente do seu, pois as relações de diferença entre os signos vão ser estruturadas de maneira diferente. Cabe ao designer tentar, sempre que possível, identificar se ocorrem diferenças significativas entre quem projeta/produz e quem vai usar determinada solução, enfim, reconhecer e delimitar, dentro do possível, o arbitrário do signo.

  3. Flávio Brognara 05/10/2016 at 18:11 #

    Ótimo artigo!!! Vou colocar em prática 🙂

    E fiquei impressionado com esse crafting do google =D

Deixe uma resposta