Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Using colors in Web applications: a study ofprojects developed in the lato sensu course ofSoftware Development for the Web
Abstract: One of the key elements of interfaces is the color. The color is an information element that with other elements can make up the
visual language. The color theory applied to Web interfaces aims at improving the use ofsystems in order to increase the users’ response time,
prevent frustration and avoid the navigation waiver. The purpose of this study is to present some solutions found in the literature on the
application of colors in Web designs and compare them with the projects developed in UFSCar lato sensu post-graduate course of Software
Development for the Web.
Figura 1. Círculo Cromático com nomes das cores e suas representações em RGB
(adaptado de Farina et al., 2006 e Silveira, 2011)
A Figura 1 apresenta um círculo cromático que utiliza • Temperatura das cores é a capacidade que as cores têm de
como referência as cores-luz, pois são as adotadas no HTML parecer quentes ou frias.
– sigla para Linguagem de Marcação de Hiper-Texto – para a As escolhas de cores para projetos Web podem se basear
definição de cores nas páginas Web utilizando o modelo RGB em uma metodologia de aplicação de cores através do círculo
(vermelho-verde-azul) em uma variação de 0 a 255 para cada cromático. Combinações básicas são feitas a partir de uma cor
cor primária. e suas variações até o cinza ou a combinação com uma cor
Outras características próprias das cores são reunidas por neutra, como marrom, que está fora do círculo de cores e
Kulpa et al. (2010) e podem ser definidas como parâmetros tenha luminosidade diferente. Combinações entre cores
básicos da cor: complementares ou opostas são comumente utilizadas em
• Matiz ou tom é a variedade do comprimento de onda da tons quebrados, onde a variação das cores passa por diferentes
luz direta ou indireta; saturações, ou em tons puros. Outros esquemas que
• Valor, luminosidade ou brilho indica o índice de funcionam bem para mais de duas cores são a utilização, ao
luminosidade da cor, o quanto a cor se aproxima do branco invés da cor complementar, de duas cores análogas
ou do preto; equidistantes da complementar, a combinação de cores
• Croma ou saturação refere-se à saturação percebida como análogas ou em esquema de tríades (Figura 2) (Dias et al.,
intensidade da cor, o grau de pureza desta até o cinza; 2013).
• Contraste ocorre quando diferenças podem ser percebidas
entre tons.
Marrom: Uma cor sóbria e acolhedora por lembrar madeira possíveis soluções para os problemas encontrados, por
e que passa robustez. A predileção por essa cor é escassa, mas exemplo: o uso de cores diferentes e contrastantes nos textos
tem boas possibilidades de equilíbrio com outras cores. e fundo dos menus de navegação; e a mudança da cor de
Branco: É a soma de todas as cores. Indica neutralidade, fundo ao passar o ponteio do mouse sobre um link. A
pureza, vida quando associada à alimentação (leite), limpeza, conclusão foi que as cores são o elemento visual que mais
castidade, liberdade e criatividade. Pode significar o início ou influencia na usabilidade e que o uso adequado pode auxiliar
o fim dependendo da cultura. positivamente na usabilidade de interfaces Web por
Preto: Transmite refinamento, elegância, poder e deficientes visuais.
sofisticação, ainda que também represente o mal, a morte, a A forma pensada por Barbosa et al. (2009) para utilizar as
escuridão e o mistério. Deve ser evitado o excesso, pois tende cores em sua “Proposta de Modelo de Interface Interoperável
a gerar frustração. Apesar de ser expressivo é angustiante ao para Web, TV Digital e Dispositivos Móveis” foi atribuir uma
mesmo tempo. cor para cada opção de navegabilidade com o intuito de tornar
Cinza: Pode ser obtida pela mistura do branco com o preto. a interface mais intuitiva e facilitar a memorização dos
É uma cor neutra e também o conjunto de todos os comandos pelos usuários. Algumas opções adotadas foram:
cumprimentos de onda. Associa-se com o esquecimento e a botões coloridos verdes para acesso ao índice, vermelhos para
velhice. Também pode comunicar sentimentos de tristeza, atividades a serem realizadas, azuis para fórum e amarelos
dúvida e melancolia, ainda que transmita igualmente para quiz.
quietude. Esta é uma cor que se adapta a tudo. Para identificar as cores que desenvolvedores de websites e
usuários acham atraentes e determinar se alguma cor favorece
III. TRABALHOS RELACIONADOS a navegação e os processos cognitivos dos visitantes dos
Os trabalhos envolvendo o uso de cores em projetos Web websites, Bonnardel et al. (2011) fizeram dois experimentos.
encontrados na literatura dão ênfase às reações esperadas dos No primeiro desenvolveram uma homepage com conteúdo
usuários quando interagem com as interfaces. informativo sobre os cursos e atividade de lazer de uma
No estudo desenvolvido por Dias et al. (2010) utilizou-se universidade francesa e expuseram os participantes a 23
um padrão que visa manter o entusiasmo e o engajamento dos versões diferentes da homepage, dessas 18 de cores
aprendizes de um ambiente educacional colaborativo na Web. diferentes, uma branca, uma preta e três tons de cinza. Cada
Através da observação de um ambiente de ensino onde se participante deveria avaliar as versões e pontuá-las numa
utilizou o software Contexteller, adaptado para utilizar duas escala de sete valores entre “não gostou” e “gostou muito”. O
interfaces, uma cinza e outra colorida, cada uma para grupos resultado indica que as cores preferidas foram, em ordem
diferentes, chegou-se a conclusão que a interface colorida decrescente, azul, laranja, cinza, magenta e verde, sendo as
atraiu mais a atenção e ajudou na motivação dos duas últimas praticamente empatadas (Figura 3).
participantes. No segundo estudo, Bonnardel et al. (2011) utilizaram o
Em outro trabalho, Kulpa et al. (2010) propuseram um resultado do primeiro para verificar o impacto das três cores
modelo de cores para auxiliar pessoas de baixa visão a preferidas nas buscas por informação e na memorização
utilizarem interfaces computacionais. Foi observada, numa destas pelos usuários participantes. Além das cores outra
primeira etapa, a utilização de três websites pelos variável foi introduzida, o conteúdo poderia ser linear ou não
colaboradores e a partir dessas observações foram linear (lista não ordenada). O resultado mostrou que os
identificadas as dificuldades encontradas e os pontos participantes demoram mais para encontrar as informações
positivos da usabilidade desses sistemas computacionais. Em nas versões com texto linear e na versão laranja; e também
uma segunda etapa, foi desenvolvido um website de teste que os participantes conseguiram mais informações com a
com combinações de cores diferentes onde foram aplicados versão azul que com a cinza.
Os critérios elencados por este trabalho são três: semelhantes de modo a facilitar a memorização do
Critério A – Legibilidade do Conteúdo: Aplicar contraste funcionamento do sistema pelo usuário. Alguns significados
de cores adequado à legibilidade do conteúdo composto por das cores culturalmente difundidos podem ser utilizados,
texto longo. Kulpa et al. (2010) relacionam melhores como demonstrado por Barbosa et al. (2009), na Seção 3 deste
combinações para este critério (Tabela 1). trabalho, para facilitar o entendimento do sistema pelo
Critério B – Destaque de Pontos de Interesse: Utilização de usuário.
cores para diferenciar conteúdos e facilitar seu A Tabela 1 apresenta boas opções de contraste a serem
reconhecimento quando os usuários voltarem à página. Pode aplicadas em várias partes de uma página Web. As duas
ser interessante destacar palavras-chave no conteúdo e realçar colunas da esquerda, agrupadas em “Cores em contraste”,
títulos e informações importantes ou elementos do layout, exibem os nomes das cores utilizadas e sua aparência. As
como a área de preenchimento de nome de usuário e senha ou colunas à direita sob o título “Elementos de Interface”
caixa de notícias. Cores estimulam sentimentos nos usuários e indicam em quais elementos o respectivo contraste é mais
isso pode ser aproveitado na associação de sentimentos com o indicado. Além disso, as aplicações de contraste foram
conteúdo para uma conexão mais forte (UXMovement, subdivididas de acordo com um contexto específico.
2013). Um exemplo de utilização da Tabela 1 é procurar qual o
Critério C – Identificação de Ícones e Links: Tornar os contraste indicado para o “menu principal” (segundo
ícones e links de navegação (por exemplo, botões para voltar elemento de interface) que seja “mais eficiente para leitura”
à página anterior ou avançar para próximo passo quando em (terceira subdivisão) e assim encontrar fundo azul escuro e
processos multietapas) facilmente identificáveis, para isso quatro opções de cores para as letras.
pode-se utilizar cores diferentes para cada ação ou ações
Tabela 1. Contraste entre texto e fundo para melhor legibilidade (adaptado de Kulpa et al., 2010)
Também como parte da metodologia de avaliação, um seguintes opções: Amor, Alegria, Paz (tranquilidade), Tristeza,
questionário foi enviado aos alunos das turmas ingressantes Esperança, Espiritualidade e Tédio (monotonia).
em 2010, 2011 e 2012 a fim de compreender suas escolhas A Figura 4 mostra o formulário criado no Google Docs
sobre o uso das cores em seus projetos. O questionário contendo o questionário3 .
enviado contém as perguntas: “Quais foram as razões que O endereço eletrônico para acesso ao questionário foi
levaram seu grupo a escolher as cores utilizadas no seu encaminhado por e-mail aos alunos pela secretaria de pós-
projeto?” e “Você acha que a cor predominante na interface graduação lato sensu e ficou disponível para preenchimento
está associada com qual desses sentimentos?”. A segunda por um período de 14 dias.
pergunta deve ser respondida selecionando-se uma das
Figura 5. Número de projetos para cada razão citada pelos desenvolvedores participantes do
questionário
Como se pode ver na Figura 5 a maioria dos branco, cinza claro e azul claro.
desenvolvedores respondeu que sua equipe utilizou as cores As opções de resposta colocadas na segunda questão foram
do logo da UFSCar – laranja, preto e cinza – para ligar sua elencadas na forma como é apresentado na Tabela 3. Tais
identidade visual com a instituição. Outras razões muito associações entre cores e sentimentos estimulados servem
representativas foram proporcionar ao usuário uma interface como referência para a avaliação das respostas dos
de fácil leitura e que causasse menos cansaço visual, o que participantes.
levou muitos projetos a optarem por cores claras como
Tabela 3. Associação entre sentimentos e cores planejada pelo desenvolvedor
A análise dos sistemas segundo a teoria das cores passa a VI. RECOMENDAÇÕES DE USO DE CORES EM PROJETOS WEB
ser mais complexa quando não há apenas uma cor A partir da determinação das cores predominantes nas
predominante, pois as combinações de cores podem combinar interfaces dos projetos torna-se possível comparar as escolhas
também as sensações estimuladas ou provocar uma emoção dos desenvolvedores com os sentimentos aflorados nas
oposta àquela esperada. pessoas segundo a literatura e aplicar os critérios selecionados
A conclusão que se tem analisando os resultados neste trabalho para verificar seu enquadramento nessas
combinados das duas questões é que os desenvolvedores do métricas.
curso de Desenvolvimento de Software para a Web optam Nesta seção são destacadas algumas características que
primeiramente em manter a identidade visual da instituição, foram consideradas como boa utilização de cores em cada
utilizando a cor laranja, mas esforçam-se em criar uma projeto.
interface que ofereça um ambiente de trabalho agradável que Na Figura 6, à esquerda, pode ser visto o uso da cor azul
evite a frustação do usuário ao utilizar o sistema. como pano de fundo da aplicação em um padrão de tons
Outras observações críticas referentes à utilização de cores diferentes. Gera uma sensação de profundidade e ao mesmo
nos projetos do curso podem ser vistas na próxima seção. tempo não tira a atenção do conteúdo principal.
Essas análises não tem intenção de julgar o certo e errado ou A escolha do preto como cor predominante, visto no
depreciar os projetos desenvolvidos pelos alunos, mas propor projeto à direita da Figura 6, a princípio aparenta elegante,
uma discussão sobre a importância do treinamento dos mas tende a provocar uma sensação negativa com o uso
desenvolvedores de sistemas para a Web na área da Teoria das contínuo, segundo observações de Kulpa et al. (2010). Os
Cores juntamente com disciplinas de criação e avaliação de textos em branco sobre preto são uma boa opção de contraste
interfaces visuais e IHC. que facilita a legibilidade (Figura 6).
informações sobre a utilização dos sistemas, para verificar se HELLER, Eva. Psicologia das Cores, A. 1. ed. Gustavo Gili,
as emoções esperadas pelos desenvolvedores são as mesmas 2007. 310 p.
relatadas pelos usuários. Trabalhos futuros podem explorar KULPA, Cinthia C.; TEIXEIRA, F. G.; SILVA, R. P.. Um
estes tópicos para dar continuidade ao estudo. Modelo de Cores na Usabilidade das Interfaces
Computacionais para os Deficientes de Baixa Visão.
REFERÊNCIAS Design & Tecnologia, Porto Alegre, v. 1, n. 1, p. 66-78,
AMANTINI, Suzy N. S. R.; UENO, Thaís R.; CARVALHO, 2010. Disponível em:
Rodrigo F. de; SILVA, José C. P. da. Ergonomia, cores e <http://www.pgdesign.ufrgs.br/designetecnologia/index.p
Web-sites. In: VII Congresso Latino Americano de hp/det/article/viewFile/8/7>. Acesso em: 21 out. 2013.
Ergonomia, 2002, Recife. LEITE, Jair C.; SOUZA, Clarisse S de. Uma linguagem de
BONNARDEL, Nathalie; PIOLAT, Annie; BIGOT, Ludovic especificação para a engenharia semiótica de interfaces de
Le. The impact of colour on Website appeal and users’ usuário. In: IHC, 1999, Campinas. Disponível em:
cognitive processes. Displays, v. 32, ed. 2, abr. 2011, p. <http://www.unicamp.br/~ihc99/Ihc99/AtasIHC99/art23.p
69–80. Disponível em: df>. Acesso em: 21 out. 2013.
<http://dx.doi.org/10.1016/j.displa.2010.12.002>. Acesso PEDROSA, Taís M. C.; TOUTAIN, Lídia B. O Uso de Cores
em: 21 out. 2013. como Informação em Interfaces Digitais. In: VI Cinform,
BARBOSA, Maria L. K.; ROESLER, Valter; REATEGUI, 2005, Salvador. Disponível em:
Eliseo. Uma Proposta De Modelo De Interface <http://vanessaromankiv.googlecode.com/svn/trunk/Mater
Interoperável Para Web, Tv Digital E Dispositivos iais%20IHC/Cores%20e%20Interface/cores%20e%20inte
Móveis. Revista Renote. Porto Alegre, v. 7, n. 1, 2009. rface.pdf>. Acesso em: 21 out. 2013.
Disponível em: PONTE, Rafael; Não existe segredo: desenvolvedores e
<http://seer.ufrgs.br/renote/article/view/14028/7918>. designers precisam colaborar entre si. 2009. Disponível
Acesso em: 21 out. 2013. em: <
DIAS, Ana. L.; SILVA, Marcos A. R.; ANACLETO, Junia C.; http://www.rponte.com.br/2009/02/18/desenvolvedores-e-
SILVEIRA, Luciana M.; PENTEADO, Rosângela A. D. A designers-precisam-colaborar-entre-si/>. Acesso em: 21
Case Study that shows the importance of color in Web out. 2013.
collaborative educational environment. In: Internation SIBAGRAPHICS. The Meaning of Colours. Disponível em:
Conference on Computer Supported Education (CSEDU <http://www.sibagraphics. com/colour.php>. Acesso em:
2010), 2010, Valencia. Disponível em: 21 out. 2013.
<http://www.labes.icmc.usp.br/~anadias/Docs/CSEDU10_ SILVEIRA, Luciana M.. Introdução à Teoria da Cor. 1. ed.
artigo.pdf>. Acesso em: 21 out. 2013. Curitiba, UTFPR, 2011. 193 p.
FARINA, Modesto; PEREZ, Clotilde; BASTOS, Dorinho. UXMOVEMENT. How to Increase Content Findability on
Psicodinâmica das cores em comunicação. 5. ed. São Your Web Page. Disponível em:
Paulo, Edgard Blücher, 2006. 189 p. <http://uxmovement.com/content/how-to-increase-
GUIMARÃES, Luciano. A Cor como Informação. 3. ed. São content-findability-on-your-Web-page/>. Acesso em: 21
Paulo, Annablume, 2004. 147 p. out. 2013.