28 :: cones, quando usar?

Como a iconografia pode melhorar a experincia de navegao em um site

Trnsito intenso na Rua So Clemente, uma das principais vias de acesso do bairro de Botafogo, no Rio de Janeiro. O sinal (ou semforo) fechado uma tima oportunidade para que uma me, segurando sua pequena filha no colo, possa passar uma lio valiosa: a imagem de uma mo aberta, em vermelho, representa o momento em que devemos esperar o trfego fluir; j a de homem caminhando, em verde, a indicao para que possamos atravessar, enquanto os carros esperam a passagem dos pedestres. A didtica materna vivenciada acima demonstra um exemplo de como os pictogramas, smbolos grficos utilizados geralmente em locais pblicos, servem como importantes ferramentas para a transmisso de orientaes, cujo objetivo seja o cumprimento de determinadas tarefas. impossvel olharmos para alguma coisa e no percebermos, ainda que de modo inconsciente, algumas propriedades dela. Por propriedades, entendam-se valores lgicos e semiticos dos mais diversos tipos, que permitem ao nosso ser a categorizao da coisa observada em uma escala de valores, que se comporta como o raio de uma circunferncia, que vai da periferia (memria mais distante) at o centro (memria atual, o agora do ser). Um cone a palavra usada para designar formas (de todos os gneros) que suporte uma composio espec ca de valores que as torna muito especiais - e, ainda mais importante - que transforma o cone em um meme coletivo, um DNA de memria que compartilhado e propagado em um grupo de pessoas, arma Ronaldo Gazel, diretor de arte na BHTEC e:house.

cones, quando usar? :: 29

Os cones so parte fundamental do mecanismo de interao dos usurios com os computadores, indicando zonas de acionamento de comandos ou ainda simplesmente reforando visualmente alguma informao que o sistema apresenta (Mauro Pinheiro)
No mundo virtual, este conceito vem sendo utilizado como apoio para que os usurios possam obter a melhor experincia durante o perodo de navegao. Especificamente nos sistemas computadorizados, a partir da introduo da manipulao direta das interfaces grficas com o uso do mouse, os cones so parte fundamental do mecaMeme
Unidade de informao que se multiplica de crebro em crebro ou entre locais onde a informao armazenada (como livros) e outros locais de armazenamento ou crebros. Os memes podem ser idias ou partes de idias, lnguas, sons, desenhos, capacidades, valores estticos e morais, ou qualquer outra coisa que possa ser aprendida facilmente e transmitida enquanto unidade autnoma. Fonte: Wikipdia (http://pt.wikipedia.org/wiki/Meme)

nismo de interao dos usurios com os computadores, indicando zonas de acionamento de comandos ou ainda simplesmente reforando visualmente alguma informao que o sistema apresenta, explica Mauro Pinheiro, professor assistente do departamento de Desenho Industrial da Universidade Federal do Esprito Santo (UFES). A funo dos cones na web Mas como definir a funo principal dos cones, quando pensamos na memorizao de determinadas tarefas e na esttica grca das interfaces digitais? Os primeiros cones surgiram como metforas para facilitar o entendimento do funcionamento dos sistemas. A estratgia deu to 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, desem-

30 :: cones, quando usar?

Com o ingresso massivo de designers na criao de interfaces, o que parecia inconcilivel se tornou indissocivel. O design mostrou que valor esttico e valor funcional no precisavam competir entre si (Frederick van Amstel)
penhando papel fundamental na formao de sua prpria identidade. Foi a partir da que o valor esttico dos cones comeou a ser explorado em softwares, argumenta Frederick van Amstel, professor do curso de Tecnologia em Web Design do Opet (PR) e professor convidado da graduao em Design da Unisul (SC). Segundo Amstel, influenciada pela linguagem visual das interfaces de softwares, o processo de criao das primeiras pginas web utilizou cones sem ganho funcional, como se isso fosse representar a construo de um ambiente mais interativo. Para que esse quadro fosse revertido, o design foi fundamental para que ocorresse uma mudana de valores. Esses cones no tinham a funo de facilitar a memorizao e nem o aprendizado: seu nico objetivo era o ganho esttico. Com o ingresso massivo de designers na criao de interfaces, o que parecia inconcilivel se tornou indissocivel. O design mostrou que valor esttico e valor funcional no precisavam competir entre si. Dessa forma, os cones vo atingir sua plenitude dentro de um site caso ajudem os usurios na tarefa de se atingir o objetivo final durante o perodo de navegao. claro que uma iconografia com bom acabamento, harmoniosa e consistente agrega valor esttico ao projeto grfico. Assim como todos os outros elementos grficos tambm tm este papel. Mas seu principal objetivo est em guiar o usurio na busca pela informao, ajudando na memorizao de caminhos e tornando o meio digital mais amigvel, diz Melissa de Toledo, diretora de arte da Sirius Interativa. Portanto, no caia na armadilha de agregar cones em seu site apenas como um esmero grfico. o que Ronaldo Gazel classifica como uso de cones bonitinhos, mas ordinrios. Eles so belos e animados, porm nem sempre divertidos e interessantes, ou capazes de substituir uma palavra, algo concreto, sem cair no clich, por mais que eles se esforcem. Um exemplo rpido: a famosa cartinha na seo contatos: a carta, sozinha, no gera valor positivo (talvez nostlgico), e um texto falando contato j diz o suficiente. Os dois, juntos, formam o imbrglio, alerta. Web j possui uma iconografia prpria? Afirmar que a internet j assumiu um padro no uso de cones talvez seja uma atitude precipitada diante de um universo ainda to recente no cotidiano das pessoas. At porque a utilizao deste recurso parece ter sofrido forte influncia da rea de software. A maioria dos cones que encontramos com freqncia na web tem suas origens nos softwares de desktop. A imagem da casa para indicar home j era usada antes da web em apresentaes multimdia feitas com o Hypercard, o av do Director, diz Frederick van Amstel. Esse paralelo sistema operacional-web funciona muito bem. Quer dizer, sempre que pudermos replicar linguagens e funcionalidades dos sistemas operacionais mais populares, maiores as chances de facilitar a aprendizagem e compreenso daquilo que estamos projetando. Usar um cone + em um menu, por exemplo, nos lembra o funcionamento de abrir e fechar pastas do Windows Explorer. O ideal sempre usar comportamentos que os usurios estejam esperando, aponta Felipe Memria, designer de interface da Globo.com e professor da PUC-Rio. Se no original, podemos considerar a particularidade como uma definio mais plausvel? Sim, mas isso no significa que a iconografia para web esteja definida, j que a internet jovem e seus padres continuam em desenvolvimento, afirma Dirceu Veiga, criador do WebIcones.com.br, site brasileiro especializado em cones para web e software. A iconografia deve estar de acordo com o projeto grfico de cada site. Por exemplo: a criada para o site do governo de So Paulo (saiba mais, na pgina 35) no poderia ser a mesma de um site para crianas ou para o pblico jovem, acrescenta Melissa, da Sirius. Outra linha de pensamento parte do princpio que a

cones, quando usar? :: 31

na busca por talentos :: 31

(cone) seu principal objetivo est em guiar o usurio na busca pela informao, ajudando na memorizao de caminhos e tornando o meio digital mais amigvel (Melissa Toledo)
iconografia na web ainda vive em cima da popularidade dos smbolos usados atualmente nos sites. Um bom exemplo, segundo Maria de Lourdes, diretora de comunidades de prtica e tecnologia web da Sociedade Brasileira de Gesto do Conhecimento (SBGC), est no trabalho realizado pela designer Ro London, que coletou os 300 cones (www.intersmash.com/300images) mais interessantes e usados em sites por ela pesquisados. Assim como a casa, temos uma srie de outros cones populares na web: carta para e-mail, lupa para busca, ponto de interrogao para ajuda, impressora para verso para impresso, cadeado para segurana, carrinho de compras para sites de comrcio eletrnico, seta para a esquerda para a ao de voltar e x para ao de fechar, enumera Memria. Seja como for, o especialista aponta que o surgimento de padres ser benfico para que os cones sejam mais facilmente assimilados pelos usurios. Imaginem se cada aeroporto do mundo tivesse um sistema de pictogramas independente. O que seria dos turistas? No toa que existe um padro internacional seguido por todos os aeroportos. Para quem lembra so aqueles mesmos pictogramas usados no jogo Banco Imobilirio. Seria bom se na web fosse assim. por essas e outras que digo que sinalizao tem tudo a ver com interface web. Os pictogramas usados pelos automveis tambm seguem o mesmo padro em todo o mundo. Quando estamos sem combustvel o que que acende? O smbolo da bomba de gasolina, certo? Em todos os carros que j vimos, no ? Por que ser?, argumenta. Quando atingiremos este estgio? S o tempo dir. A casinha, para home, um bom exemplo de cone universalizado pelo uso. Digamos que apenas o tempo vai dizer se ela vai resistir, at (por exemplo) haver uma troca de paradigmas tal que substitua o conceito de home por outro, como hiperespao(?) ou algo assim. A arroba, por exemplo, agentou um bom tempo, mas como ela era um dos pouqussimos registros grficos relacionados ao universo da internet, ento foi absurdamente utilizada, das mais diversas formas - at que no resistiu, exemplifica Ronaldo Gazel.

32 :: cones, quando usar?

A primeira etapa continua sendo a mesma de qualquer pea de comunicao e design: a denio do pblico-alvo (Dirceu Veiga)
Criao de cones: fique de olho no pblico-alvo O avano da tecnologia tem permitido que o desenvolvimento de um site possua uma srie de novas funcionalidades. Por exemplo: o espao para comentrios vem se tornando uma funo muito comum e o smbolo de um balo tem sido o cone mais utilizado para representlo. Recentemente, estamos acompanhando tambm um grande movimento para a padronizao do cone de RSS (mais uma vez, influenciado por um software, o Firefox) e a popularizao do cone de link externo (seta na diagonal vazando de um quadrado), cita Felipe Memria. Assim, dentre as etapas que envolvero a criao de um novo cone, a principal delas est no estudo do pblico-alvo. A primeira continua sendo a mesma de qualquer pea de comunicao e design: a definio do pblico-alvo. A partir desse ponto se escolhem as cores, formatos, tamanhos e metforas, aponta Dirceu. Acho que o mais importante dar bastante ateno ao pblicoalvo. Desta forma, fatores como idade e deficincias visuais devem ser levados em considerao. No meio digital, contraste de cores e luminosidade podem ficar bastante comprometidos de acordo com diferentes tipos e tamanhos de monitores e resolues de tela. E o papel principal de um cone transmitir a mensagem com bastante clareza. Um bom contraste e um trao que no gere ambigidade na interpretao do smbolo ou rudo visual tambm so importantes, complementa Melissa. Ainda sobre a escolha das cores e dos formatos, preciso entender como a forma e o significado podem afetar o resultado final de um cone. A forma engloba os conceitos grficos, como trao e cores. Se vamos usar uma forma mais retangular ou orgnica, cores vivas, preto-e-branco, fundos e uma srie de outros fatores ajudam a manter a identidade de toda uma famlia de cones, mesmo tratando, s vezes, de assuntos to diferentes. Em termos de significado, devemos tomar muito cuidado com as metforas. Nunca podemos nos fechar na hora de criar

um cone e contar que o usurio final entender nossa mensagem. Devemos ter muito claro quem estar visualizando essa informao, orienta Mrcio Ismail, diretor de criao da Publicidade Interativa. Para evitar que isso acontea, a recomendao fazer uma pesquisa do termo/ao a ser traduzido como cone. Muitos j tm uma simbologia bem aceita, como o globo terrestre para designar a web e o envelope para e-mail. Nestes casos, o melhor manter o mesmo conceito para no correr o risco de no se fazer entendido. Para aes pouco popularizadas na internet, o ideal simplificar partindo de metforas genricas e fugir das especficas. Por exemplo, um cone de produto para um site ou software de uma loja de ferramentas: mais interessante usar uma caixa de papelo (representando a forma mais comum de entrega de produtos) do que fazer um cone de um produto especfico, como um alicate, cita Dirceu. Alm disso, ele ressalta a importncia dos detalhes tcnicos dentro deste processo. Quanto aos tamanhos, cones em tamanhos menores que 32x32 pixels do uma viso esttica melhor. Os tamanhos mais comuns na web so 32x32, 24x24 e 16x16 pixels. Um recurso que pede moderao em seu uso Como vimos, as etapas que envolvem a criao de cones devem ser cercada de cuidados. A equipe da Globo. com a prova viva desse cenrio. A experincia prtica deles est presente no site GloboEsporte.com, que possui, em sua interface grfica, uma rea com os escudos de times de futebol para indicar as sees especficas de cada um deles (Tudo sobre o seu time). Esse elemento repetido em todas as pginas de futebol nacional. Considero esse um uso atpico e excepcional de iconografia. No GloboEsporte.com funciona porque os escudos dos clubes so muito conhecidos, principalmente por seus torcedores. Ainda assim, tomamos o cuidado para fazer com que seus nomes aparecessem no estado de mouse over e criamos uma pgina principal de times no menu, com a listagem por ordem alfabtica, explica Felipe Memria. Para quem achou a ao de extremo zelo, sua eficcia transparece no depoimento de quem j visitou o site.

cones, quando usar? :: 33

Quando a iconograa se tornar familiar para o usurio, ela pode potencializar a experincia de uso de um site, agilizando a navegao e tornando-a mais prazerosa (Felipe Memria)
Ele excelente para quem entende de futebol. Eu, provavelmente, teria dificuldades para identificar os times do Nordeste, por exemplo. Mas os designers resolveram meu problema: colocaram tarjas indicativas ou legendas com os nomes dos times, revela Maria de Lourdes, da SBGC. A maior sacada da equipe do GloboEsporte.com foi perceber que os usurios buscavam informaes especficas sobre seus times e se beneficiariam muito de um atalho para essa funo. Esse exemplo ilustra vrias funes de cones: atalho, decorao, fetiche etc., diz Frederick. Ou seja, a lio que fica : use o recurso com moderao. No mesmo GloboEsporte.com, por exemplo, no poderamos ter usado esse conceito em um Tudo sobre as equipes na pgina de Frmula 1. Carrinhos coloridos ou smbolos das escuderias seriam incompreensveis para a grande maioria das pessoas. So imagens que esto longe de ter a mesma popularidade dos escudos dos clubes. As pessoas simplesmente no conhecem. Neste caso, ao invs de agilizar a navegao, estaramos criando uma barreira para os usurios, esclarece Memria. Testando a eficcia e o papel cones na usabilidade do site Para garantir o uso correto de cones dentro da estrutura de um site, ser preciso testar sua eficcia com quem realmente vai usufruir as suas funcionalidades. Vox populi, vox dei. A melhor maneira de se testar qualquer coisa colocar na boca do povo. Isso inclui todas as formas de pesquisa, seja ela completa e baseada nos modelos em voga atualmente, ou uma de pequeno porte, feita com os membros de uma equipe, conta Ronaldo Gazel. Segundo Frederick van Amstel, para que a avaliao seja feita com maior preciso, ser preciso colocar os cones no contexto onde eles sero utilizados. Ou seja, num prottipo da interface. Test-lo isoladamente, atravs de mtodos como o Icon Sorting (http://tinyurl.com/nmmtg),

no qual o usurio combina livremente o cone com um rtulo que descreve seu significado, interessante para explorar diferentes possibilidades de combinao entre texto e imagem, mas no se pode confiar no resultado como uma avaliao real. O ideal fazer um Icon Sorting antes e depois testar o prottipo da interface em situaes reais. Falando em metodologias, o eBay, um dos maiores sites de compras e vendas on-line do mundo, realizou uma minuciosa etapa de testes para medir a eficcia dos cones inseridos em suas pginas. Recentemente, li uma pesquisa publicada, em 2004, por funcionrios do eBay. O artigo falava sobre a metodologia de testes utilizada para que eles avaliassem a crescente quantidade de cones na interface do site. Foram 17 pessoas participando do experimento, em duas etapas de testes. O comportamento das pessoas durante o processo, aliado ao feedback verbal, gerou concluses relevantes para a empresa. Ao final do estudo, concluram que mais de trs cones associados a determinado nome de usurio era o mximo tolerado pelas pessoas. A partir dos dados gerados pela pesquisa foi criado um manual para que os cones fossem sempre consistentes visualmente, na forma de interao e no posicionamento por todo o site, aponta Felipe Memria. Outro aspecto testar os detalhes tcnicos que envolvem os cones. importante tambm ter certeza de que o tamanho e as cores so adequados para o pblico e test-lo em diferentes monitores e resolues. Alm disso, utilize um software (Colour Contrast Analyser) que analisa contraste, alerta Melissa Toledo. Tudo isso para que os cones possam ajudar a aperfeioar a usabilidade de um site. Ela melhorada a partir do momento em que um sistema iconogrfico fcil de aprender, de ser recordado, eficiente na utilizao e, alm de tudo, agradvel. Quando a iconografia se tornar familiar para o usurio, ela pode potencializar a experincia de uso de um site, agilizando a navegao e tornando-a mais prazerosa, finaliza Memria.

34 :: cones, quando usar?

A biblioteca da iconografia
- Artigos
Apple human interface guidelines: icons
Apple (http://tinyurl.com/rw9l4)

Teste de cones
Usabilidoido (http://tinyurl.com/nmmtg)

Elementos de semitica aplicados ao design

Autor: Lucy Niemeyer (http://tinyurl.com/or3sb)

Fontes: Dirceu Veiga, Mauro Pinheiro, Revista Webdesign

Gestalt do objeto: sistema de leitura visual da forma

Autor: Joo Gomes Filho (http://tinyurl.com/ru7uv)

Creating Windows XP icons

Microsoft (http://tinyurl.com/5d77)

- Sites
www.bauhaus.de http://feedicons.com www.guiborchert.com/gworka/index.html www.guidebookgallery.org/icons/components www.iconfactory.com www.iconfish.com www.iconshock.com www.iconwerk.de www.interfacelift.com http://pages.ebay.com/help/myebay/ myebay-icons.html www.plugmasters.com.br/bancodeicones www.webicones.com.br www.kare.com www.khm.de/~timot/PageElephant.html Symbol source book: an authoritative guide to international graphic symbols
Autor: Henry Dreyfuss (http://tinyurl.com/m4m49)

How to create Vista Icons

Axialis Software (http://tinyurl.com/orbcj)

Handbook of pictorial symbols

Autores: Rudolf Modley, William Myers e Diana Comer (http://tinyurl.com/pgxxk)

Icon analysis: evaluating low spatial frequency compositions

Boxes and Arrows (http://tinyurl.com/p8ur3)

Idea index: graphic effects and typographic treatments

Autor: Jim Krause (http://tinyurl.com/oyjb6)

cones, grandes aliados do projetista

IBRAU (http://tinyurl.com/lguj7)

Livro do cone
Autor: William Horton (http://tinyurl.com/q8hhp)

International picture language: psyche miniatures / general series

Imaginary Museum (http://tinyurl.com/oj4zs)

Look of the century: design icons of the 20th century

Autor: Michael Tambini (http://tinyurl.com/ncn5u)

Learning to love the pixel: exploring the craft of icon design

Boxes and Arrows (http://tinyurl.com/qto4a)

Material type icons task force

Dartmouth (http://tinyurl.com/lahve)

Fontes: Dirceu Veiga, Felipe Memria, Melissa Toledo, Revista Webdesign

ICONS: Signs (http://tinyurl.com/q3w2u)

Editora Taschen

Pelos poderes do cone

Usabilidoido (http://tinyurl.com/p2z6a)

Sinais e smbolos: desenho, projeto e

- Livros
1000 Symbols: what shapes mean in art and myth
Autores: Rowena Shepherd e Rupert Shepherd (http://tinyurl.com/ltfaz)

significado
Autor: Adrian Frutiger (http://tinyurl.com/mbvsy)

Processo de criao de cones

Usabilidoido (http://tinyurl.com/njyhk)

Fontes: Frederick van Amstel, Maria de Lourdes, Mauro Pinheiro, Melissa Toledo

Pixelart 2D e 3D
Armando Fontes (http://tinyurl.com/qdags)

Designing interfaces: patterns for effective interaction design

Autora: Jenifer Tidwell (http://tinyurl.com/oypbw)

- Revista
Newwebpick - edio Asia Special
www.newwebpick.com

Designing pictorial symbols

Autor: Nigel Holmes (http://tinyurl.com/r2t7s)

Fonte: Ronaldo Gazel Designing visual interfaces: communication oriented techniques

Autores: Kevin Mullet e Darrell Sano (http://tinyurl. com/qsjh3)

design/web/design: 2
Autor: Luli Radfahrer (http://tinyurl.com/mt9zf)

cones, quando usar? :: 35

Um exemplo de padronizao no uso de cones na web

Bate-papo: Mrcio Ismail, na poca, diretor de arte do projeto

A Sirius Interativa desenvolveu recentemente um guia de padronizao visual (http://tinyurl.com/r2o5f) para os sites do Governo do Estado de So Paulo. Nesta entrevista, vamos saber os principais detalhes este projeto. Wd :: Como surgiu a oportunidade de criar um guia de padronizao visual dos sites do Governo do Estado de So Paulo? Mrcio :: O governo tinha uma preocupao muito grande com sua presena na internet, alm de querer comunicar de forma clara todas as suas qualidades. A Sirius Interativa foi procurada para iniciar a definio de uma nova cara para o portal do governo, alm de servir de guia para os outros sites e futuras atualizaes. Wd :: Por que vocs decidiram criar uma padronizao para o uso de cones? Mrcio :: impressionante a dimenso que o portal atinge. As reas, servios e produtos que esto nele, ou so derivados, so enormes. Claro que existem casos especficos que seguem uma linha visual prpria, mas, no geral, era muito importante definirmos um conjunto de regras mnimas para que os cones criados seguissem o mesmo caminho. Wd :: Que tipo de estudos vocs fizeram para definir os padres de cones? Mrcio :: Estudamos, principalmente, as necessidades do portal atual e das possveis utilizaes dessa iconografia. Tentamos ao mximo fugir de metforas distantes do motivo final, para evitarmos algum tipo de rudo e seguimos a linha grfica do portal. Trabalhamos sempre com o entendimento seguro da imagem. Nada de cones de difcil entendimento. Num portal assim estamos falando praticamente com todo o tipo de usurio. Wd :: O avano da tecnologia permite que o desenvolvimento de um site possua uma srie de novas funcionalidades. Diante disso, como vocs planejaram esta questo na padronizao visual dos sites do Governo do Estado de SP? Mrcio :: Demos as diretrizes bsicas para que daqui para frente sejam criados novos cones. Com o tempo vo surgir novas demandas e o objetivo que seja criado um banco de cones para ser usado nos sites e projetos ligados ao portal. O mais importante nessa hora conseguir manter que o mesmo cone seja utilizado sempre para a mesma funo.