O USO DAS CORES NO DESENVOLVIMENTO
DE WEBSITES COM FOCO EM USABILIDADE
Profa. Adriana Morais da SILVA: [email protected]
Centro Universitário Nossa Senhora do Patrocínio - Ceunsp
Prof. Ricardo Roberto LEME: [email protected]
Centro Universitário Nossa Senhora do Patrocínio - Ceunsp
Resumo:
A usabilidade tem componentes múltiplos e por isso há a
necessidade de se definir os seus atributos.
Com base nestes atributos, algumas orientações são pertinentes
para que a técnica de desenvolvimento com foco em
usabilidade, seja alcançada. Para se construir interfaces dentro
dos padrões de usabilidade um dos enfoques é o
enfoque
Artístico, 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. Introdução
Damasceno (2005) relata que desde primórdios da
humanidade, a cor vem sendo utilizada como elemento de
sinalização. 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 cérebro 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 consideração para isso alguns
aspectos relevantes sobre o uso das cores.
Para Farina, Perez e Bastos (2006), a cor é tão
importante que pode ser utilizada também como transmissora
de informações e como um código que, após ter sido aprendido,
pode ser entendido por todas as pessoas. Para qualquer pessoa a
cor não pode ser desvinculada de uma estreita relação com os
sentimentos.
Essa importância
estudos
que
pode ser evidenciada através de
demonstram
que
os
indivíduos
julgam
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. Além disso, quando
se trabalha com cores
deve-se levar em consideração o
mecanismo fisiológico da visão que
está associado a um
mecanismo de equilíbrio das cores que procurar neutralizar um
forte estímulo visual de uma cor com uma impressão de sua cor
complementar.
Busca-se então com este estudo das cores, demonstrar
algumas técnicas de aplicação que favorecem a usabilidade do
Site.
2. Teoria das Cores e Percepção das Cores
Segundo Damasceno (2005) a cor vem perdendo ao
longo dos anos os mitos que possuía desde a antiguidade. Este
fato deve-se a grandes gênios que passaram a utilizar a cor em
suas obras após pesquisas de seus efeitos de iluminação e
impacto sobre as obras.
utilizam
com
frequência
Atualmente os Web designers a
como
elemento
diferencial
e
harmonioso em seus trabalhos.
Para Damasceno (2005) é necessário então que o Web
designer, antes de escolher as cores para a composição do
layout, deve ter em mente dois pontos fundamentais:
 O tipo de empresa para a qual está construindo o
Web site.
 O público-alvo que esta empresa pretende atingir.
Já na visão de Marmion (2005), ao definir a cor ou as
cores básicas do Website, deve-se levar mais do que dois pontos
fundamentais. Na visão do autor, deve haver uma preocupação
com relação:
 Ao assunto: neste sentido deve-se levantar qual o
foco principal do Website, trata-se de um site de
diversão ou um site para operadores da bolsa de
valores.
 A plateia: deve-se buscar homogeneizar as
informações, detectando se a maioria é do sexo
feminino ou masculino.
importante,
pois
o
A idade é algo
desenvolvimento
deve
contemplar características daquela faixa etária.
Deve-se também identificar quando a plateia é
totalmente heterogênea como nos casos de
usuários de home banks.
 o ambiente: o ambiente físico no qual os usuários
estão inseridos pode levá-los a algum tipo de
estresse. O tipo de luminosidade do ambiente
pode ser elevada ou baixa.
Além desses pontos especiais, o Web Designer precisa
lembrar que a cor, relaciona-se diretamente aos sentimentos
humanos e, por isso, também influi fisicamente no organismo,
conforme provaram diversos estudos científicos.
Na visão de Damasceno (2005), as cores podem agradar
ou desagradar o usuário e, por isso, cores escuras devem ser
evitadas, pois dificultam a leitura. A autora recomenda a
utilização de cores mais claras em grandes áreas, para que se
tenha um trabalho harmonioso escolhendo ainda combinações
adequadas à empresa e às exigências do mercado atual. Para a
autora, algumas recomendações devem ser seguidas, são elas:
Cuidado redobrado com as cores roxo e preto: ambas as
cores causam fadiga aos olhos do usuário, além de sugerir
amadorismo dificultando a leitura.
Evite misturar dois tons quentes ou dois tons muito
luminosos em áreas maiores: observa-se que esta combinação
tende também a ferir a vista.
Evite combinar apenas preto e cinza: esta combinação
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 limão): deve-se analisar cuidadosamente esta aplicação que
pode até mesmo favorecer o layout quando bem aplicada.
O rosa deve ser utilizado restritamente para sites
femininos: neste sentido a análise do público alvo é
imprescindível.
Cores muitos escuras ofuscam a leitura de textos: isto
acontece mesmo quando os textos estão em cores claras.
3. As cores e os sentimentos
Para Marmion (2005), é extremamente importante
compreender
os
significados
das
cores
para
definir
adequadamente as características de nossas aplicações.
Neste sentido Farina, Perez e Bastos (2006), elencam
características relacionadas aos sentimentos de algumas cores
que devem ser observadas para o desenvolvimento com foco em
usuários que podem ser observadas no quadro abaixo. Ao se
projetar as interfaces, uma análise primordial deve ser feita onde
a pergunta chave deve ser: O que pretendo transmitir ao utilizar
determinada cor?
Tabela 1.0 – Relação 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 funções especificas. Desta forma
quando pensamos em uma página Web, estas também passam a
ser um ambiente de interação e desta forma as funções devem
ser previamente analisadas.
Um ambiente pintado de branco cria um clima tranquilo,
porém, torna-se monótono e hostil, levando à dispersão. É
aconselhável a utilização de outras cores para quebrar a
monotonia compondo assim um layout mais interessante.
Não se aconselha a colorir um ambiente na cor preta,
pois significa escuridão e depressão. Expressa um sentimento
universal de agressividade, sinalizando sensações de distância e
isolamento. Já o vermelho pode ser usado em ambientes que
requeiram um clima de excitação. O vermelho deve aparecer em
áreas de pequenas extensões. Em exageros pode estimular
reações agressivas e irritantes.
Por ser uma cor alegre o amarelo é indicado para todos
os ambientes em que o objetivo é comunicação e reflexão. O
amarelo eleva o poder de criatividade, ativa o raciocínio e
estimula a memória.
Considerada a cor da harmonia, o verde é a cor que
menos causa fadiga visual, pois é o equilíbrio entre o calor e o
movimento do amarelo e a estática e a frieza do azul. Estimula o
silêncio e pode ajudar a amenizar o estresse.
Rocha e Baranauskas (2005) acreditam no poder do
cinza combinado em vários tons, podendo-se assim compor um
ambiente bonito e elegante.
O azul pode ser usado em superfícies maiores não se
tornando cansativo. Aconselha-se a utilização de outras cores
para evitar um clima de tristeza e monotonia. O azul tem ainda
ação terapêutica.
O Violeta e o roxo levam a dispersão, porém estimulam a
intuição e a espiritualidade influenciando diretamente nas
emoções e humores.
Para Rocha e Baranauskas (2005), a cor bege é uma cor
bastante versátil e pode ser utilizada para qualquer público-alvo
e por isso recomenda-se a sua utilização sem restrições.
Para Marmion (2005), é extremamente importante
compreender
os
significados
das
cores
para
definir
adequadamente as características de nossas aplicações. Trata-se
da análise proposta por Damasceno (2005) em que o tipo de
empresa para a qual está construindo o Website deve ser objeto
de estudo.
4 . Percepção das Cores pelos usuários
Segundo afirmações de Borges e Souza (2002), as
imagens são formadas no cérebro através da retina. A retina é
uma área sensível a luz que possuí cones e bastonetes que são
células foto receptoras.
Os cones são os responsáveis pela
percepção de cores enquanto os bastonetes identificam a
presença ou ausência de luz.
Existem três 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 músculos que
fazem com que o cristalino seja modificado focando sobre a
retina a imagem do objeto visualizado.
A acomodação e
convergência do cristalino estão relacionadas à cor que se
visualiza, visto que as ondas verde, azul e vermelha convergem
à diferentes distâncias da retina.
Somente ondas verdes são capazes de serem enviadas
diretamente para a retina sem que haja a convergência do
cristalino e por esse motivo não causa fadiga visual. Já as ondas
vermelhas, também chamadas de ondas longas convergem além
da superfície da retina, e desta forma para focalizar objetos
avermelhados o cristalino deve tornar-se mais convexo, como se
o objeto estivesse próximo do observador.
Ao contrário para focalizar objetos azuis, o cristalino fica
menos convexo e mais relaxado, como se o objeto estivesse
distante.
Isto resulta em uma acomodação O resultado da
visualização das cores é uma acomodação sofrida pelo
mecanismo de visão 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 visão de Borges e Souza (2002), quando
expomos os usuários a áreas extensas e de cores fortes podemos
levar os usuários 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 interrupção 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 médias (verdes) e curtas (azuis) estão respondendo
normalmente para a luz branca.
Este mecanismo fisiológico da visão parece estar
associado a um mecanismo de equilíbrio das cores que procurar
neutralizar um forte estímulo visual de uma cor com uma
impressão de sua cor complementar. Por este motivo, cores com
fortes e com alto contraste que podem produzir afterimages
devem ser evitadas.
4.1 . Diferenças na visualização das cores entre indivíduos
Para Borges e Souza (2002), as cores não são percebidas
por todas as pessoas da mesma forma.
Dados revelam que 8% dos homens europeus e norteamericanos têm algum tipo de deficiência visual para cor. O tipo
mais comum de deficiência de cor é o dicromatismo, onde a
pessoa não percebe uma das três cores. Existe também um
efeito um efeito denominado contraste simultâneo, na qual a
percepção da cor de um objeto pode variar em função 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 influência de outros objetos na cena.
Uma ferramenta que poderia ser utilizada para projetar
interfaces de cores pensando nas diferenças de visão entre
indivíduos está disponível no site www.universodacor.com.br.
Figura 1.0 – Deficiências Visuais na percepção das cores.
Fonte: www.universodacor.com.br
Na figura 4.0, pode-se observar uma lista com os
principais distúrbios na visão. O desenvolvedor Web poderá
então escolher as cores que utilizará e perceber como esta cor é
percebida pelo grupo de usuários portador daquela deficiência.
5 . Harmonia das Cores
Para Borges e Souza (2002), trabalhar o conceito de
harmonia das cores pode facilitar a projeção de interfaces
através de combinações de cores que agradem o usuário final.
Neste contexto de harmonias é utilizado um círculo cromático
desenvolvimento inicialmente por Guilherme Ostwald1 onde
cores frias e quentes se combinam.
As harmonias podem ser facilmente identificadas
também no site www.universodacor.com.br, local este em que
um sistema facilita a composição dentro de algumas harmonias
possíveis, sendo elas:
Harmonia Monocromática: onde se utiliza apenas uma
cor e suas variantes em tons claros e escuros.
Harmonia Análoga: utiliza-se uma cor do círculo
cromático e uma ou mais cores vizinhas.
Harmonia de Contraste: escolhe-se uma cor do círculo
cromático e a cor oposta do círculo.
Harmonia Tetra: Nesta harmonia, quatro cores se
combinam a fim de conferir uma mistura inovadora.
Harmonia Tríade: Nesta harmonia compõem-se a
combinação através da junção das cores que correspondem a um
triângulo. Um exemplo pode ser observado na figura 5.0.
1
Guilherme Ostwald – professor da Universidade de Leipzig e ganhador do
prêmio Nobel
Figura 2.0 – Harmonia Tríade
Fonte: www.universodacor.com.br
6. Princípios de Projetos de Cores
Segundo Borges e Souza (2002) uma boa orientação
para projetar
interfaces baseadas em cores seria seguir as
recomendações citadas pela ISO (ISO (International Standards
Organization).
Neste
sentido,
alguns
princípios
são
citados
e
evidenciados na sequência.
6.1 Organização da Cor
Quanto ao princípio da Organização da Cor, recomendase:
Utilizar uma única cor para criar uma coesão visual entre
itens relacionados, e usar uma cor padrão para telas de
monitores, para documentação e para materiais de treinamento.
Em geral, cores similares implicam numa relação entre
objetos. O usuário pode sentir o relacionamento ou não entre
objetos, pela cor entre espaços e no tempo através da sequência
de imagens. Use cores de fundo similares ou iguais para áreas
corelatadas.
Uma vez estabelecidas às codificações de cores, estas
devem ser mantidas em todas as interfaces gráficas e matérias
relacionados.
Para tanto há a necessidade da utilização de
Pantones para a padronização das cores.
Figura 3.0 – Exemplo de Website onde se aplicou o Princípio de
Organização das Cores
Fonte: www.cocacola.com.br
6.3 Economia da Cor
Um dos princípios da simplicidade das cores sugere que
se usem no máximo três cores, onde seu significado deve ser
lembrado.
A cor deve ser utilizada para destacar a informação
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 utilização de um forte contraste na
saturação e na luminosidade, para chamar a atenção do usuário
sobre uma informação crítica. O uso de cores brilhantes é
recomendado para sinais de alerta ou perigo, bem como para
fixar a atenção sobre um ponto.
Na página abaixo o vermelho altamente saturado torna-se
muito mais eficaz para chamar a atenção do que qualquer outra
cor. Neste exemplo a cor esta falando por si só.
Figura 7.0 – Exemplo de Página onde se aplicou o Princípio de
Ênfase das Cores
Fonte: www.nippon-maquinas.com.br
4. CONCLUSÃO
Mesmo sabendo que o desenvolvimento de Websites
sob a ótica da usabilidade vai além da projeção de interfaces
com boa aparência, transcendendo o design gráfico, fica
evidente que o estudo do uso das cores na interface continuam
influenciando positivamente na aceitação do Web Sites pelos
usuários, garantindo-se assim uma navegação prazerosa.
Vale ressaltar que diante do caráter dinâmico e veloz que
a internet apresenta, os projetos precisam ser revistos de tempos
em tempos para se adaptarem às exigências emergentes dos
usuários de Internet, do mercado de trabalho e da atualização de
tecnologias que possam aperfeiçoar o desenvolvimento dos
Websites.
REFERÊNCIAS
BORGES, Roberto Cabral de Mello; SOUZA, Helena Saint P.
V. Comunicação Homem-Máquina. Disponível em:
<http://www.inf.ufrgs.br/~cabral/ Apostila.IHC.doc>. Acesso
em: 5 de novembro de 2009.
DAMASCENO, Anielle. Webdesign: teoria e prática.
Florianópolis: Visual Books, 2003.
FARINA, Modesto; PEREZ, Clotilde; BASTOS, Dorinho.
Psicodinâmica das Cores em Comunicação. Rio de Janeiro:
Edgard Blucher, 2006.
MARMION, Jorge. A utilização de cor no mecanismo de
interação com o usuário. Disponível em:
<http://www.ibrau.com.br/artigoutilizacaodecor.html>. Acesso
em: 27 de janeiro de 2010.
MARTINEZ, Maria Laura. Um método de webdesign baseado
na usabilidade. 2002. Tese (Doutorado em Engenharia de
Sistemas Eletrônicos) – Programa e Pós-Graduação em
Engenharia de Sistemas Eletrônicos, USP, São Paulo.
ROCHA, Heloisa Vieira da; BARANAUSKAS, Cecília C.
Design e avaliação 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.