O USO DAS CORES NO DESENVOLVIMENTO DE WEBSITES COM FOCO EM USABILIDADE

Profa. Adriana Morais da SILVA: adriana@adrianamorais.pro.br Centro Universitrio Nossa Senhora do Patrocnio - Ceunsp Prof. Ricardo Roberto LEME: ricardo.leme@gmail.com Centro Universitrio Nossa Senhora do Patrocnio - Ceunsp

Resumo: A usabilidade tem componentes mltiplos e por isso h a necessidade de se definir os seus atributos. Com base nestes atributos, algumas orientaes so pertinentes para que a tcnica de desenvolvimento com foco em usabilidade, seja alcanada. Para se construir interfaces dentro dos padres de usabilidade um dos enfoques o enfoque Artstico, em que o designer deve expressar seu trabalho de forma criativa e harmoniosa, sendo que neste enfoque a cor ganha destaque especial. Palavras-chave: interface, usabilidade, cores.

ABSTRACT

Usability has multiple components and therefore there is a need to define their attributes. Based on these attributes, some guidelines are relevant to the technical development with a focus on usability is achieved. To build interfaces within the standards of usability of the approaches is the Artistic approach, in which the designer should express his work in a creative and harmonious, and this approach is highlighted especially the color.

Keywords: interface, usability, colors

1. Introduo

Damasceno (2005) relata que desde primrdios da humanidade, a cor vem sendo utilizada como elemento de sinalizao. Quando relacionada cultura de cada sociedade do planeta, uma mesma cor tende a adquirir diversos significados. Estudos revelam que o modo como a cor chega aos nossos olhos, inevitavelmente, faz com que o crebro ainda perceba significados inconscientes que ela muitas vezes transmite. Dessa forma a cor deve ser utilizada pelos Web Designers que buscam o desenvolvimento com foco em usabilidade, levando-se em considerao para isso alguns aspectos relevantes sobre o uso das cores. Para Farina, Perez e Bastos (2006), a cor to importante que pode ser utilizada tambm como transmissora de informaes e como um cdigo que, aps ter sido aprendido, pode ser entendido por todas as pessoas. Para qualquer pessoa a cor no pode ser desvinculada de uma estreita relao com os sentimentos. Essa importncia estudos que pode ser evidenciada atravs de que os indivduos julgam

demonstram

subconscientemente as pessoas, um ambiente ou um item nos primeiros 90 segundos, e nesse lapso de tempo entre 62% e 90% do julgamento baseado unicamente na cor. Alm disso, quando se trabalha com cores deve-se levar em considerao o

mecanismo fisiolgico da viso que

est associado a um

mecanismo de equilbrio das cores que procurar neutralizar um forte estmulo visual de uma cor com uma impresso de sua cor complementar. Busca-se ento com este estudo das cores, demonstrar algumas tcnicas de aplicao que favorecem a usabilidade do Site. 2. Teoria das Cores e Percepo das Cores Segundo Damasceno (2005) a cor vem perdendo ao longo dos anos os mitos que possua desde a antiguidade. Este fato deve-se a grandes gnios que passaram a utilizar a cor em suas obras aps pesquisas de seus efeitos de iluminao e impacto sobre as obras. utilizam com frequncia Atualmente os Web designers a como elemento diferencial e

harmonioso em seus trabalhos. Para Damasceno (2005) necessrio ento que o Web designer, antes de escolher as cores para a composio do layout, deve ter em mente dois pontos fundamentais: O tipo de empresa para a qual est construindo o Web site. O pblico-alvo que esta empresa pretende atingir. J na viso de Marmion (2005), ao definir a cor ou as cores bsicas do Website, deve-se levar mais do que dois pontos

fundamentais. Na viso do autor, deve haver uma preocupao com relao: Ao assunto: neste sentido deve-se levantar qual o foco principal do Website, trata-se de um site de diverso ou um site para operadores da bolsa de valores. A plateia: deve-se buscar homogeneizar as informaes, detectando se a maioria do sexo feminino ou masculino. importante, pois o A idade algo deve

desenvolvimento

contemplar caractersticas daquela faixa etria. Deve-se tambm identificar quando a plateia totalmente heterognea como nos casos de usurios de home banks. o ambiente: o ambiente fsico no qual os usurios esto inseridos pode lev-los a algum tipo de estresse. O tipo de luminosidade do ambiente pode ser elevada ou baixa. Alm desses pontos especiais, o Web Designer precisa lembrar que a cor, relaciona-se diretamente aos sentimentos humanos e, por isso, tambm influi fisicamente no organismo, conforme provaram diversos estudos cientficos. Na viso de Damasceno (2005), as cores podem agradar ou desagradar o usurio e, por isso, cores escuras devem ser

evitadas, pois dificultam a leitura. A autora recomenda a utilizao de cores mais claras em grandes reas, para que se tenha um trabalho harmonioso escolhendo ainda combinaes adequadas empresa e s exigncias do mercado atual. Para a autora, algumas recomendaes devem ser seguidas, so elas: Cuidado redobrado com as cores roxo e preto: ambas as cores causam fadiga aos olhos do usurio, alm de sugerir amadorismo dificultando a leitura. Evite misturar dois tons quentes ou dois tons muito luminosos em reas maiores: observa-se que esta combinao tende tambm a ferir a vista. Evite combinar apenas preto e cinza: esta combinao demonstra monotonia e por isso sugere-se uma cor mais alegre para quebrar este efeito. Cuido extremo com alguns tons de verde (verde bandeira e limo): deve-se analisar cuidadosamente esta aplicao que pode at mesmo favorecer o layout quando bem aplicada. O rosa deve ser utilizado restritamente para sites femininos: neste sentido a anlise do pblico alvo imprescindvel. Cores muitos escuras ofuscam a leitura de textos: isto acontece mesmo quando os textos esto em cores claras.

3. As cores e os sentimentos Para Marmion (2005), extremamente importante compreender os significados das cores para definir

adequadamente as caractersticas de nossas aplicaes. Neste sentido Farina, Perez e Bastos (2006), elencam caractersticas relacionadas aos sentimentos de algumas cores que devem ser observadas para o desenvolvimento com foco em usurios que podem ser observadas no quadro abaixo. Ao se projetar as interfaces, uma anlise primordial deve ser feita onde a pergunta chave deve ser: O que pretendo transmitir ao utilizar determinada cor? Tabela 1.0 Relao de Cores com Sentimento

Fonte: Tabela elaborada a partir dos dados constantes em Farina, Perez e Bastos (2006) Segundo Farina, Perez e Bastos (2006) as cores quando aplicadas em ambientes tem funes especificas. Desta forma quando pensamos em uma pgina Web, estas tambm passam a ser um ambiente de interao e desta forma as funes devem ser previamente analisadas. Um ambiente pintado de branco cria um clima tranquilo, porm, torna-se montono e hostil, levando disperso. aconselhvel a utilizao de outras cores para quebrar a monotonia compondo assim um layout mais interessante. No se aconselha a colorir um ambiente na cor preta, pois significa escurido e depresso. Expressa um sentimento

universal de agressividade, sinalizando sensaes de distncia e isolamento. J o vermelho pode ser usado em ambientes que requeiram um clima de excitao. O vermelho deve aparecer em reas de pequenas extenses. Em exageros pode estimular reaes agressivas e irritantes. Por ser uma cor alegre o amarelo indicado para todos os ambientes em que o objetivo comunicao e reflexo. O amarelo eleva o poder de criatividade, ativa o raciocnio e estimula a memria. Considerada a cor da harmonia, o verde a cor que menos causa fadiga visual, pois o equilbrio entre o calor e o movimento do amarelo e a esttica e a frieza do azul. Estimula o silncio e pode ajudar a amenizar o estresse. Rocha e Baranauskas (2005) acreditam no poder do cinza combinado em vrios tons, podendo-se assim compor um ambiente bonito e elegante. O azul pode ser usado em superfcies maiores no se tornando cansativo. Aconselha-se a utilizao de outras cores para evitar um clima de tristeza e monotonia. O azul tem ainda ao teraputica. O Violeta e o roxo levam a disperso, porm estimulam a intuio e a espiritualidade influenciando diretamente nas emoes e humores.

Para Rocha e Baranauskas (2005), a cor bege uma cor bastante verstil e pode ser utilizada para qualquer pblico-alvo e por isso recomenda-se a sua utilizao sem restries. Para Marmion (2005), extremamente importante compreender os significados das cores para definir

adequadamente as caractersticas de nossas aplicaes. Trata-se da anlise proposta por Damasceno (2005) em que o tipo de empresa para a qual est construindo o Website deve ser objeto de estudo. 4 . Percepo das Cores pelos usurios Segundo afirmaes de Borges e Souza (2002), as imagens so formadas no crebro atravs da retina. A retina uma rea sensvel a luz que possu cones e bastonetes que so clulas foto receptoras. Os cones so os responsveis pela

percepo de cores enquanto os bastonetes identificam a presena ou ausncia de luz. Existem trs tipos de cones no olho e cada tipo capaz de distinguir uma cor: vermelho, verde e azul. A quantidade de cones varia para cada cor. O olho possu pequenos msculos que fazem com que o cristalino seja modificado focando sobre a retina a imagem do objeto visualizado. A acomodao e

convergncia do cristalino esto relacionadas cor que se visualiza, visto que as ondas verde, azul e vermelha convergem diferentes distncias da retina.

Somente ondas verdes so capazes de serem enviadas diretamente para a retina sem que haja a convergncia do cristalino e por esse motivo no causa fadiga visual. J as ondas vermelhas, tambm chamadas de ondas longas convergem alm da superfcie da retina, e desta forma para focalizar objetos avermelhados o cristalino deve tornar-se mais convexo, como se o objeto estivesse prximo do observador. Ao contrrio para focalizar objetos azuis, o cristalino fica menos convexo e mais relaxado, como se o objeto estivesse distante. Isto resulta em uma acomodao O resultado da

visualizao das cores uma acomodao sofrida pelo mecanismo de viso constante sempre que se tenta visualizar cores diferentes o que comprova o fato de que cores muito intensas na interface podem causar fadiga visual. Ainda na viso de Borges e Souza (2002), quando expomos os usurios a reas extensas e de cores fortes podemos levar os usurios a um efeito chamado afterimages. Este efeito ocorre, pois o olho exposto 30 segundos fixamente para uma rea preenchida com uma nica cor, e a seguir mudando-se o foco para uma folha de papel branco; nela se formar uma imagem semelhante em forma, mas nas cores complementares da figura original. A interrupo do movimento dos olhos pode reduzir temporariamente a sensibilidade dos cones produzindo imagens posteriores (afterimages). Isto pode ser facilmente

experimentado observando-se por 30 segundos fixamente para uma rea preenchida com uma nica cor, e a seguir mudando-se o foco para uma folha de papel branco; nela se formar uma imagem semelhante em forma, mas nas cores complementares da figura original. Uma rea vermelha poder ser observada na cor azul porque foi suprimida temporariamente a resposta dos cones para ondas longas (vermelho) e apenas os cones para ondas mdias (verdes) e curtas (azuis) esto respondendo normalmente para a luz branca. Este mecanismo fisiolgico da viso parece estar associado a um mecanismo de equilbrio das cores que procurar neutralizar um forte estmulo visual de uma cor com uma impresso de sua cor complementar. Por este motivo, cores com fortes e com alto contraste que podem produzir afterimages devem ser evitadas.

4.1 . Diferenas na visualizao das cores entre indivduos Para Borges e Souza (2002), as cores no so percebidas por todas as pessoas da mesma forma. Dados revelam que 8% dos homens europeus e norteamericanos tm algum tipo de deficincia visual para cor. O tipo mais comum de deficincia de cor o dicromatismo, onde a pessoa no percebe uma das trs cores. Existe tambm um

efeito um efeito denominado contraste simultneo, na qual a percepo da cor de um objeto pode variar em funo da cor dos demais objetos da cena e da cor de fundo. Desta forma objetos da mesma cor podem parecer de cores diferentes, ou vice-versa, pela influncia de outros objetos na cena. Uma ferramenta que poderia ser utilizada para projetar interfaces de cores pensando nas diferenas de viso entre indivduos est disponvel no site www.universodacor.com.br.

Figura 1.0 Deficincias Visuais na percepo das cores. Fonte: www.universodacor.com.br Na figura 4.0, pode-se observar uma lista com os principais distrbios na viso. O desenvolvedor Web poder ento escolher as cores que utilizar e perceber como esta cor percebida pelo grupo de usurios portador daquela deficincia.

5 . Harmonia das Cores Para Borges e Souza (2002), trabalhar o conceito de harmonia das cores pode facilitar a projeo de interfaces atravs de combinaes de cores que agradem o usurio final. Neste contexto de harmonias utilizado um crculo cromtico

desenvolvimento inicialmente por Guilherme Ostwald1 onde cores frias e quentes se combinam. As harmonias podem ser facilmente identificadas tambm no site www.universodacor.com.br, local este em que um sistema facilita a composio dentro de algumas harmonias possveis, sendo elas: Harmonia Monocromtica: onde se utiliza apenas uma cor e suas variantes em tons claros e escuros. Harmonia Anloga: utiliza-se uma cor do crculo cromtico e uma ou mais cores vizinhas. Harmonia de Contraste: escolhe-se uma cor do crculo cromtico e a cor oposta do crculo. Harmonia Tetra: Nesta harmonia, quatro cores se combinam a fim de conferir uma mistura inovadora. Harmonia Trade: Nesta harmonia compem-se a combinao atravs da juno das cores que correspondem a um tringulo. Um exemplo pode ser observado na figura 5.0.

Guilherme Ostwald professor da Universidade de Leipzig e ganhador do prmio Nobel

Figura 2.0 Harmonia Trade Fonte: www.universodacor.com.br

6. Princpios de Projetos de Cores Segundo Borges e Souza (2002) uma boa orientao para projetar interfaces baseadas em cores seria seguir as

recomendaes citadas pela ISO (ISO (International Standards Organization). Neste sentido, alguns princpios so citados e

evidenciados na sequncia. 6.1 Organizao da Cor Quanto ao princpio da Organizao da Cor, recomendase:

Utilizar uma nica cor para criar uma coeso visual entre itens relacionados, e usar uma cor padro para telas de monitores, para documentao e para materiais de treinamento. Em geral, cores similares implicam numa relao entre objetos. O usurio pode sentir o relacionamento ou no entre objetos, pela cor entre espaos e no tempo atravs da sequncia de imagens. Use cores de fundo similares ou iguais para reas corelatadas. Uma vez estabelecidas s codificaes de cores, estas devem ser mantidas em todas as interfaces grficas e matrias relacionados. Para tanto h a necessidade da utilizao de

Pantones para a padronizao das cores.

Figura 3.0 Exemplo de Website onde se aplicou o Princpio de Organizao das Cores Fonte: www.cocacola.com.br

6.3 Economia da Cor Um dos princpios da simplicidade das cores sugere que se usem no mximo trs cores, onde seu significado deve ser lembrado. A cor deve ser utilizada para destacar a informao preto-e-branco, desta forma recomenda-se que primeiro projete a tela para trabalhar em preto-e-branco. 6.4 nfase das Cores Recomenda-se a utilizao de um forte contraste na saturao e na luminosidade, para chamar a ateno do usurio sobre uma informao crtica. O uso de cores brilhantes recomendado para sinais de alerta ou perigo, bem como para fixar a ateno sobre um ponto. Na pgina abaixo o vermelho altamente saturado torna-se muito mais eficaz para chamar a ateno do que qualquer outra cor. Neste exemplo a cor esta falando por si s.

Figura 7.0 Exemplo de Pgina onde se aplicou o Princpio de nfase das Cores Fonte: www.nippon-maquinas.com.br

4. CONCLUSO Mesmo sabendo que o desenvolvimento de Websites sob a tica da usabilidade vai alm da projeo de interfaces com boa aparncia, transcendendo o design grfico, fica evidente que o estudo do uso das cores na interface continuam influenciando positivamente na aceitao do Web Sites pelos usurios, garantindo-se assim uma navegao prazerosa. Vale ressaltar que diante do carter dinmico e veloz que a internet apresenta, os projetos precisam ser revistos de tempos em tempos para se adaptarem s exigncias emergentes dos usurios de Internet, do mercado de trabalho e da atualizao de tecnologias que possam aperfeioar o desenvolvimento dos Websites.

REFERNCIAS BORGES, Roberto Cabral de Mello; SOUZA, Helena Saint P. V. Comunicao Homem-Mquina. Disponvel em: <http://www.inf.ufrgs.br/~cabral/ Apostila.IHC.doc>. Acesso em: 5 de novembro de 2009. DAMASCENO, Anielle. Webdesign: teoria e prtica. Florianpolis: Visual Books, 2003. FARINA, Modesto; PEREZ, Clotilde; BASTOS, Dorinho. Psicodinmica das Cores em Comunicao. Rio de Janeiro: Edgard Blucher, 2006. MARMION, Jorge. A utilizao de cor no mecanismo de interao com o usurio. Disponvel em: <http://www.ibrau.com.br/artigoutilizacaodecor.html>. Acesso em: 27 de janeiro de 2010. MARTINEZ, Maria Laura. Um mtodo de webdesign baseado na usabilidade. 2002. Tese (Doutorado em Engenharia de Sistemas Eletrnicos) Programa e Ps-Graduao em Engenharia de Sistemas Eletrnicos, USP, So Paulo. ROCHA, Heloisa Vieira da; BARANAUSKAS, Ceclia C. Design e avaliao das interfaces humano-computador. Campinas: NIED/UNICAMP, 2003. <http://www.universodacor.com.br>.Acesso em: 11 de novembro de 2009. <http://www.coca-cola.com.br>.Acesso em: 8 de dezembro de 2009. <http://www.nippon-maquinas.com.br>.Acesso em: 8 de dezembro de 2009.