Yaso.in

Tradução livre do post da InfoQ “Colors and the UI”: – mal pelo inglês meio prejudicado, mas o post vale.

Como o nome sugere, GUIs (Grafical User Interfaces) apresentam-se graficamente. A interação humano-computador é muito baseada em ver, procurar e interagir com elementos de interfaces gráficas. Cor é a característica principal de qualquer cena visual, não apenas em telas de computador, mas em qualquer situação em que vemos alguma coisa. Porque a maior parte das coisas que vemos e interagimos todos os dias é colorida, temos familiaridade com cores – talvez tanto que nem pensemos muito sobre isso. Por outro lado, nos sentimos incomodados quando precisamos ler um label cinza-escuro em um botão preto. Cores podem potencializar ou destruir a experiêcia do usuário. Este artigo vai introduzir o conceito de experiência de uso e jogar luz sobre alguns aspectos de cor e percepção e também vai dar algumas dicas sobre o uso de cor em GUIs.

Experiência do usuário

Experiência do usuário é um conceito holístico. Boa usabilidade implica que produtos interativos permitem que usuários cumpram com eficiência suas tarefas. Guidelines conhecidas podem ser encontradas nas Heurísticas de Nielsen[2] ou lidas na ISO 9241-110[1].

O laço emocional que une usuários e um sistema que eles estão interagindo é importante. Os usuários amam o sistema? Odeiam? Pensam que o sistema é moderno? Sentem orgulho quando interagem com ele? Embora o apelo não possa ser definido dentro da usabilidade, é de suma importância para o sucesso de um produto porque sistemas que atendem a ele são mais desejados e divertidos, o que aumenta seu valor.

Cores e a interface gráfica

Cor é a sensação que surge quando a luz de ondas entre 360nm e 720 nm atingem nossos olhos, e são então processadas pelo nosso sistema visual [3]. Nossos olhos possuem 3 tipos de receptores. São conhecidos como L-, M- e S-cones.Como se pode ver na figura 1, uma luz com comprimento de onda de 530nmatinge mais o cone M, o cone L suavemente e o cone apenas um pouco. A cor percebida assim seria verde.

Em telas de computador as cores são definidas pelo modelo RGB de cor (r para RED – vermelho, G para GREEN – verde, e B para BLUE – azul). Essas 3 cores são chamadas primárias e correspondem aos comprimentos de onda aos quais os três cones são mais receptivos. Cores primárias não podem ser geradas pela mistura de outras cores. No entato, misturando cores primárias, todas as outras cores são geradas. Cada pixel numa tela mostra uma cor gerada pela mistura de um tipo de vermelho, um tipo de azul e um tipo de verde.

Contraste de cores

Tipicamente, um objeto colorido em uma interface gráfico não é mostrado sozinho, mais é adjacente ou está próximo à um outro objeto de cor ou área, o que cria efeitos de contraste, entre outros. Sem contraste suficiente, não poderíamos distinguir partes diferentes na tela. Aí está uma boa razão para aplicações como o MS Word, Powerpoint, Excel, Outlook, etc serem baseados em PRETO como default para cor da fonte e background branco – o que propicia o máximo de contraste com a melhor legibilidade.

Contraste de cor pode ser usado para atrair a atenção visual dos usuários para elementos mais relevantes em uma interface gráfica. Contraste de cor também impulsiona o apelo de uma interface gráfica.

Efeitos de contraste também podem ser arrasadores para uma interface. Em geral, qualquer região no campo visual tende a induzir sua cor complementar nas áreas vizinhas. Por exemplo um quadrado cinza vai parecer esverdeado quando rodeado por vermelho, e avermelhado quando cercadp por verde. Este efeito também é conhecido como contraste de cor simultâneo [4]. Em interfaces isso pode, às vezes, provocar efeitos indesejados, como o mesmo botão parecer diferente por causa da cor do background ser diferente.

Outro problema de contraste é aberração cromática [5]. Lentes como as de nossos olhos curvam o comprimento de ondas em quantidades desiguais. O efeito disso é que diferentes estímulos de cor não são projetados na mesma área da retina – um efeito que se percebe melhor em combinações de violeta e vermelho, como também azul e vermelho (fig 2), porque o comprimento de onda do violeta e do azul estão em um final do espectro enquanto o comprimento do vermelho está em outro.

Consequentemente, o texto na figura 2 parece borrado. POr causa disso, contrastes entre vermelhos e violetas ou azuis devem ser evitados em interfacesa. Apesar disso, esse tipo de combinação é muito comum. A Figura abaixo (3) mostra combinações de background e foreground que fornecem bons contrastes.

Fig. 3: Combinações de cores que possibilitam bons contrastes

Deficiências de cor

Cegueira é a incapacidade de perceber algumas ou todas cores. Na maioria dos casos as pessoas não são incapazes de perceber todas as cores, mas sim apenas algumas [3]. Deficiências de cor ocorrem quando um tipo de cone está faltando ou tem algum defeito. A tabela 1 mostra a distribuição da incidência de cor quando cada coneé afetado. 80 em cada 1000 homens e 4 em cada 1000 mulheres tem algum tipo de deficiência de cor.

Cores e apelovisual

Cores são importantes para aumentar o apelo visual de um software. Significados são associados às cores (tabela 2). Essas associações podem ser levadas em conta quando se desenha uma iterface. Por exemplo, pode fazer sentido que uma interface para uma clínica seja branca, enquanto essa cor for associada à limpeza. Outro exemplo de interface que utiliza associação de cores com seus significados é o site das nações unidas, onde prevalece o azul, que remete à paz.

Vermelho – quente, parada, agressividade, erro, calor, fogo

Violeta – mulher, fofo

Laranjado – calor, criatividade

Amarelo – alegria, ensolarado, devagar, cuidado

Marrom – calor, queda, sujeira

Verde – inveja, novo, fertilidade, bucólico

Azul – água, pacífico, homem

Roxo – real

Branco – virgem, limpo, inocente, frio

Preto – mau, fantasmagórico, morte, medo

Cinza – céu escuro, velho, depressivo

Estes estereótipos são dependentes e variam de cultura para cultura.

Interfaces gráficas que utilizam bem o apelo possuem esquemas de cores que são coordenados e harmoniosos. Criar esquemas de cores não é uma tarefa fácil porque existem muitos fatores a considerar, incluindo a marca associada ao projeto, cujo valor precisa ser comunicado sem deixar de associar-se a cores que podem ser inseridas para provocação. É necessário cuidado também com questões ergonônicas (como é o caso do contraste).

Existem várias maneiras de criar esquemas de cor sem a ajuda de um designer gráfico. [10]. Por exemplo, pode se pegar cores que estão lado-a-lado em um círculo de cor de 12 partes (fig 4). Ou pode-se selecionar cores que são diretamente o oposto uma a outra no círculo (cores complementares)

Fig. 4: Color scheme based on analogous colors (after [10]).

Links e bibliografia

[1] ISO 9241-110 (2006). Ergonomics of human-system interaction – Part 110: Dialog principles. Berlin: Beuth.

[2] Nielsen, J. ().Nielsen, J. (1994). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods. New York City: John Wiley & Sons.

[3] Wyszecki, G, Stiles, W.S. (1982). Color science. 2nd edition. New York City: John Wiley & Sons.

[4] Gleitman, H. (1991). Psychology. 3rd Edition. New York City: W.W. Norton & Company.

Tagged: colors, cores, GUIs, human-computer