Usabilidoido: Menu Principal

English Website


Afinal, o que é ícone? Como criar ícones?

Saiba tudo sobre ícones

icones.png

A edição de setembro da Revista Webdesign traz uma reportagem completa sobre ícones, contando com a opinião de especialistas no assunto como Ronaldo Gazel, Mauro Pinheiro, Felipe Memória e outros. A reportagem consegue tocar em praticamente todos os principais aspectos a serem considerados na criação de ícones: padronização, ilustração, estética e etc. Abaixo publico a entrevista completa que o jornalista Luis Rocha me propôs durante a elaboração da matéria.

Como podemos definir um ícone?

A palavra ícone vem do grego eikon, que significa imagem, mas em nosso ramo essa palavra é usada para apontar um tipo específico de imagem. Quando falamos em imagem, é importante entender que a imagem é sempre uma representação de um objeto, embora tratemos a imagem do objeto como se fosse o próprio objeto. Posso apontar para a superfície de um tubo de raios catódicos (um monitor) e dizer: “essa aqui é sua pasta de documentos”, embora não haja pasta alguma ali. O objeto a que estou me referindo, em última análise, é uma área física num disco rígido que pode guardar dados. Uma pasta de papel também serve para guardar dados, logo, a imagem da pasta serve como metáfora para facilitar o entendimento do uso da área do disco rígido. O ícone é, portanto, segundo a Semiótica peirciana, uma imagem que tenha alguma relação de semelhança entre a representação e o objeto que, se for convincente, permite que usemos a representação sem tomar conhecimento do objeto.

Existe alguma diferença ou a função dos pictogramas no mundo real e dos ícones no mundo virtual são as mesmas?

Se tomarmos o virtual como o mundo abstrato da mente humana, incluindo, entre outras, o ciberespaço, ícones só existem no plano virtual. Como objetos reais, não passam de um amontoado de rabiscos ou de pontos luminosos num monitor. O ícone é sempre uma abstração, pois funciona como uma representação de um objeto outro que não a própria representação. O virtual e o ícone já existiam muito antes da Internet, portanto, nesse novo meio, continuam tendo a mesma função.

Falando especificamente da função dos ícones em interfaces digitais, você acredita que o seu objetivo esteja mais ligado à memorização de determinadas tarefas ou a estética gráfica?

Os primeiros ícones surgiram como metáforas para facilitar o entendimento do funcionamento dos sistemas, como no exemplo da pasta. A estratégia deu tão certo que as pessoas se lembravam mais da forma do ícone do que do nome do comando que ele representava. Logo, os ícones se tornaram a cara do software, desempenhando papel fundamental na formação de sua própria identidade. Foi a partir daí que o valor estético dos ícones começou a ser explorado em softwares. Por influência da linguagem visual das interfaces de softwares, as primeiras páginas Web incluíam ícones sem ganho funcional, apenas para parecer que a página era mais “interativa”. Esses ícones não tinham a função de facilitar a memorização nem o aprendizado; seu único objetivo era o ganho estético. Com o ingresso massivo de designers na criação de interfaces, o que parecia inconciliável se tornou indissociável. O Design mostrou que valor estético e valor funcional não precisavam competir entre si.

A eficiência dos ícones depende do nível de familiaridade das pessoas com as representações que se pretende passar?

Não necessariamente. Uma imagem pode ser facilmente lembrada mesmo que não faça referência direta a algum objeto que conhecemos previamente, pois nossa mente é capaz de criar inúmeras associações indiretas. É por esse motivo que uma pintura abstrata pode suscitar algum tipo de sentimento ou idéia. A eficiência do ícone está mais ligada à adequação ao contexto. Se uma interface oferece uma série de ícones abstratos que se diferenciam entre si o suficiente e fazem sentido para o contexto da interface, possivelmente, eles serão eficientes. No Brasil, os ícones usados em fornos microondas fazem referências a objetos concretos (figura de peixe para a programação “assar peixe”), enquanto que na Suécia eles são mais abstratos (duas barras paralelas para a programação “descongelar”).

Hoje, já podemos afirmar que a internet possui uma iconografia particular (por exemplo: utilizamos a imagem de uma casa para indicar a página principal de um site)?

A maioria dos ícones que encontramos com freqüência na Web tem suas origens nos softwares de desktop. A imagem da casa para indicar “home” já era usada antes da Web em apresentações multimídia feitas com o Hypercard, o avô do Director. Entretanto, a transposição deve ser feita com cuidado. Será que o usuário já viu este ícone em algum software? Se viu, será que ele entendeu? Se entendeu, será que ele vai entender se eu colocar nessa aplicação Web? Essas perguntas não podem ser respondidas com base no achismo. Melhor testar com usuários reais.

Por outro lado, o avanço da tecnologia permite que o desenvolvimento de um site possua uma série de novas funcionalidades. Por exemplo: o espaço para comentários vem se tornando uma função muito comum (e o símbolo de um balão tem sido o ícone mais utilizado para representá-lo). Diante disso, quais são as principais etapas a serem consideradas na hora de se criar um novo ícone (escolha de cores, tamanho, tipo de traço etc.)? Caso possível, poderia citar um bom exemplo nesta área?

A primeira etapa ao se criar um novo ícone é não criar um novo ícone. Para quê reinventar a roda? Se o ícone para comentários na maioria dos websites similares ao que você está trabalhando é um balão, então é melhor usar um balão também, a não ser que o objetivo seja confundir ou chamar a atenção para o próprio ícone. O contexto onde estará o ícone é que vai dizer qual será sua função principal: embelezar, agilizar, desorientar ou o que for. É preciso, entretanto, ser consistente na função dos ícones. Ícones agilizadores não devem se misturar a ícones embelezadores, do contrário, ambos perdem força. Isso acontece porque os ícones não são percebidos em separado, mas sim fazendo parte de uma série. O usuário entende a função do ícone comparando-o com os ícones e controles próximos. Por esse motivo é tão importante usar uma mesma linguagem visual (bordas, cores, perspectiva, iluminação) e figurada (objetos, atores) entre todos os ícones de uma interface. Na tela de configurações do sistema operacional BeOS R5.0.1, a inconsistência na linguagem utilizada em alguns elementos chama a atenção.

Qual é a melhor forma de testar a eficácia de um ícone na web?

A melhor forma de testar ícones é observar se eles são relevantes para os usuários. Como disse anteriormente, o usuário pode não entender o significado que o criador do ícone quis transmitir, mas se fizer algum sentido, for agradável ou fácil de memorizar, então ele pode ser considerado eficaz. Para avaliar esses aspectos com maior precisão, só colocando o ícone no contexto onde ele vai ser utilizado, ou seja, num protótipo da interface. Testar o ícone isoladamente através de métodos como o Icon Sorting, no qual o usuário combina livremente o ícone com um rótulo que descreve seu significado, é interessante para explorar diferentes possibilidades de combinação entre texto e imagem, mas não se pode confiar no resultado como uma avaliação real. O ideal é fazer um Icon Sorting antes e depois testar o protótipo da interface em situações reais.

O site GloboEsporte.com é um bom exemplo no uso de ícones, ao utilizar os escudos de times de futebol para indicar as seções específicas de cada um deles. Dentro de um site, quando se nota a necessidade de criar um ícone para que o usuário consiga realizar determinada função?

O caso do GloboEsporte.com é uma situação rara. Não é sempre que se pode contar com ícones facilmente reconhecíveis para cada categoria. O mérito da eficácia desses ícones é muito mais dos clubes que criaram escudos únicos do que da equipe do GloboEsporte.com que aproveitou a oportunidade de utilizar esses escudos como atalhos. Além do valor funcional, estes ícones também servem para aumentar a identificação do site com o torcedor, que vê o escudo do seu time na página principal do site. Entretanto, a maior sacada da equipe do GloboEsporte.com foi perceber que os usuários buscavam informações específicas sobre seus times e se beneficiariam muito de um atalho para essa função. Esse exemplo ilustra várias funções de ícones: atalho, decoração, fetiche e etc.

Quais são as vantagens (economia de espaço da interface, agilização da navegação etc.) e desvantagens (complexidade, poluição visual etc.) no uso de ícones em projetos de sites?

Cada caso é um caso. Um visual colorido proporcionado por uma série de ícones pode ser vantajoso para um website infantil e desvantajoso para um website sobre direito tributário. É claro que podemos fazer uma série de ícones monocromáticos para o website sobre direito, mas será que ainda assim não prejudicará sua imagem de seriedade? A avaliação de prós e contras da utilização de ícones deve, como todo elemento de interface, ser feita dentro do contexto.

Como os ícones podem ajudar a melhorar a usabilidade de um site?

Uma série de ícones bonitinhos pode contribuir para transmitir uma primeira impressão de facilidade de uso, ou seja, contribuir para a usabilidade percebida. Em websites que enfrentam grande concorrência e são utilizadas poucas vezes por seus usuários, a usabilidade percebida é mais importante do que a usabilidade efetiva. Para o usuário, não importa se a conclusão da tarefa vai demorar 1 minutos ou 3 minutos, importa mais que o fluxo da tarefa durante esse tempo seja agradável e sem problemas. É claro que ícones podem contribuir para a usabilidade efetiva, contribuindo para a memorização de atalhos rotineiros, mas isso só se aplica a websites de uso intensivo.

Em alguns sites, é possível reparar que os ícones possuem textos auxiliares que funcionam como legendas para explicar o significado daquele símbolo. Essa solução é aconselhável, ajuda na compreensão ou representa a falta representação de um ícone sobre a mensagem que ele pretende passar?

O rótulo serve para ensinar ao usuário o significado do ícone no contexto onde ele se encontra. Se o contexto por si só já deixa claro para que serve o ícone, o rótulo não é necessário. Quando estou escrevendo um texto e há uma série de ícones representando diferentes alinhamentos de parágrafo, não preciso de rótulos. Existe uma semelhança direta entre o ícone e a apresentação do meu texto. Agora, abaixo da imagem de uma prancheta com um documento em cima é necessário o rótulo do comando pois a semelhança é indireta. A prancheta (clipboard) é onde fica armazenado um trecho de texto pronto para ser “colado” na posição do cursor. Como o índice de uso desse ícone era muito baixo no Office 2003, a Microsoft pretende adicionar o rótulo “colar” abaixo desse ícone na próxima versão do Office.


Dicas

Siga-me no Twitter.

Autor

Frederick van Amstel - Quem? / Contato - 04/09/2006

Palavras-chave

ícones    iconografia    semiótica    

Opções



Comentários

Discussão
André Alves
04/09/06 às 20:14

Muito bom o artigo e excelente a entrevista. Acho que com todo esse material, impossível ficar na dúvida agora no uso de ícones, mas claro que cada projeto existe um estudo para sua aplicação.

Já havia lido a matéria na Revista Webdesign e gostei muito. Cheguei até a emprestar a revista para você dar uma olhada no Curso de Sábado na Eng que, por sinal, estava show de bola!

Com certeza, mais um artigo de grande valia para todos os designers.

Abraço e sucesso! =)


Discussão
Gazel
10/09/06 às 00:28

Excelente! parabéns!


Discussão
jvic
12/09/06 às 22:52

No mundo do software livre existe um projeto de especificação de como você deve criar ícones (de forma a ficarem consistentes com o resto do ambiente software livre):

http://www.tango-project.org


Discussão
marcelo
18/09/06 às 23:40

Ótima entrevista!


Discussão
Himler Strabs
21/12/06 às 09:21

Eu adorei os novos ícones do Vista, limpos, lindos. Vão pegar é claro, como tudo da Microsoft, mesmo que dê 57689 erros fatais vai pegar.


Discussão
larissa
09/01/07 às 10:35

seu site bonitinho


Discussão
José Nogueira dos Reis
31/01/07 às 08:45

Ainda não vi (li) na internete um artigo tão explicito acerca da «Semiotica».
Parabéns e um grande abraço.
JNReis


Discussão
William Silva
07/03/07 às 13:13

Olá visitem meu site, ele contem diversos icones editáveis em PNG: http://mais.elevabrasil.com


Discussão
William Silva
07/03/07 às 13:14

Olá visitem meu site, ele contem diversos icones editáveis em PNG: http://mais.elevabrasil.com


Discussão
allan
12/04/07 às 18:10

Oi td bem ! pode criar :D tem acc pass


Discussão
allan
12/04/07 às 18:11

Oi td bem ! pode criar :D tem acc pass


Discussão
Adriane
25/04/07 às 06:55

Ex ce len te.
Deus te abençôe.


Discussão
Adriane
25/04/07 às 07:28

(...) tuas n análises e considerações possuem dimensões tão profundas que me fizeram lembrar de aulas de filosofia e teologia sobre iconoclastia e iconolatria. ? !

(...) quando nós, seres humanos fomos feitos à imagem e semelhança de Deus, o Deus criador (...) chegamos aos paradoxos, no limiar da humanidade, podemos também vislumbrar as sombras do Absoluto.

Tua inteligência, teu altruísmo e sabedoria ajudam a construir um mundo melhor. Que possas prosseguir.

Transcrevo, a seguir um trecho inspirador, e no final peço licença para escrever em caixa alta como forma de demonstrar o link com a coisa:

" Ainda que eu fale as línguas dos homens e dos anjos, se nao tiver amor, serei como o bronze que soa, ou como o címbalo que retine.

Ainda que eu tenho o dom de profetizar e conheça todos os mistérios e toda a ciência, ainda que eu tenha tamanha fé ao ponto de transportar montes, se não tiver amor, nada serei.

E ainda que eu distribua todos os meus bens entre os pobres, e ainda que entregue o meu próprio corpo para ser queimado, se não tiver amor, nada disso me aproveitará.

O amor é paciente, é benigno, o amor não arde em ciúmes, não se ufana, não se ensoberbece,

não se conduz inconvenientemente, não procura os seus interesses, não se exaspera, não se ressente do mal;

nºao se alegra com a injustiça, mas regozija-se com a verdade;

tudo sofre, tudo crê, tudo espera, tudo suporta.

O amor jamais acaba; mas, havendo profecias, desaparecerão; havendo línguas, cessarão, havendo ciência, passará; Quando, porém, vier o que é perfeito, então, o que é em parte será aniquilado.
QUANDO EU ERA MENINO, FALAVA COMO MENINO, SENTIA COMO MENINO, PENSAVA COMO MENINO; QUANDO CHEGUEI A SER HOMEM, DESISTI DAS COISAS DE MENINO.

PORQUE AGORA VEMOS COMO EM ESPELHO, OBSCURAMENTE, ENTÃO VEREMOS FACE A FACE; AGORA CONHEÇO EM PARTE, ENTÃO CONHECEREI COMO TAMBÉM SOU CONHECIDO.

AGORA, POIS PERMANECEM A FÉ, A ESPERANÇA E O AMOR, ESTAS TRÊS: PORÉM O MAIOR DESTES É O AMOR. I Coríntios 13

PS. Salvo engano, o currículo do Curso Analista de Sistemas, da UNIJUI, menciona a obra de Rubem Alves, denominada Filosofia da Ciência, que tem uma abordagem boa sobre a transitoriedade, absolutos e relativos, o que é o caso.


Discussão
Luis Augusto
26/05/07 às 04:32

Como eu faço pra criar ícones??


Discussão
Hugo P. do Nascimento
15/06/07 às 14:11

ficou legal essa página!!
eu pesso que vocês vistem minha página na web e se puderem me dar dicas eu agradeço

atenciosamente: Hugo P. do Nascimento


Discussão
Bruno Kaneoya
18/07/07 às 12:02

Estou desenvolvendo ícones para um software da Intelbras e olha só onde eu vim parar. hahaha.

Bacana a entrevista.

Abraços


Discussão
Francisco Gonçalves de Oliveira
17/11/07 às 08:11

Fiquei mais sabido depois que entrei nesse site.

Parabéns


Chico


Discussão
Douglas Pinho
26/11/07 às 08:20

Bacana a reportagem... sou estudante de design gráfico e ela me ajudará a fazer um trabalho sobre ícones.


Discussão
osmar
25/12/07 às 15:56

Alguém poderia me explicar, passo a passo, como posso transformar uma imagem em um ícone? É possível? Como?


Discussão
bruna gomes freitas
16/03/08 às 13:44

mto bom mesmo art vcs parabéns site mto bem estudado


Discussão
Gustavo
26/05/08 às 18:16

Post interessante, o caso do globoesporte é um caso a parte.


Discussão
Rafael W. Conceição
06/10/08 às 21:36

exclui meeu ícone do msn como faço para criar outro
pois baixei outro msn e naaum tem como entra
pQ naum tem ícone para abri=lo
o que faço ??


Discussão
ÍCONES
09/12/08 às 13:14

No íconesbr você também pode encontrar ícones diversos com a facilidade do uso de busca. http://www.iconesbr.net


Discussão
Diego
01/03/09 às 06:09

Nem todos sao icones alguns sao simbolos mas isto e uma outra historia


Discussão
thalissa Coelho
11/06/09 às 11:33

Eu não queria saber sobre um saite ma ssobre educação artistica icones mas me ajudou a fazer o trabalho.


Discussão
graziela
18/06/09 às 12:54

eu achei quase tudo nesse site
parabens pra o google.....


Discussão
Celma Patricia
14/07/09 às 17:05

AdOrEi EsTe SiTe ObRiGaDo0o0o

PoR TuDo0o


Discussão
Francesca
04/05/10 às 15:04

http://eu gostei bastante da mtateria vcs estão de parabens


Discussão
paulo h.c.b
27/12/10 às 12:03

gostei muito desse site mas nem todos são incones, mas, ai ja e outra istoria


Discussão
gabriela m,
08/02/11 às 15:55

posso usar uma placa de sinalisacão como representante. icones


Discussão
Dayanna Batista Apolônio
18/01/13 às 10:12

vou apresentar um trabalho sobre icones, sabia que era imagens, mas ainda tinha muitas dúvidas e com essa leitura do seu texto compreendir melhor o assunto!



Retrucadas

Se você tem um blog, pode retrucar via TrackBack:
http://www.usabilidoido.com.br/cgi-bin/mt/mt-tb.cgi/505


Comente.






(aguarde que é demorado mesmo...)


Você merece.

Assine nosso conteúdo e receba novidades sem sair de casa!

Atualizado com o Movable Type.

Alguns direitos reservados por Frederick van Amstel.

Apresentação do autor | Consultoria | Portifólio | Política de Privacidade | Contato