A utilização de cor no mecanismo de interação com o usuário

Jorge Marmion


Os termos "amigabilidade" e "usabilidade" designam certas características da interface entre um ser humano (ou usuário) e um aparelho qualquer (telefone, DVD, controle remoto, console de um carro, computador, câmera fotográfica, caixa eletrônico, etc.).

Estas características, na comunicação de um sistema qualquer com ou usuário, são altamente desejáveis (diríamos, até, que imprescindíveis):

  • o sistema é fácil de aprender a usar
  • o sistema é fácil de reaprender (não há perda substancial do conhecimento do sistema após um breve período de inatividade, e é fácil lembrar as principais características do sistema após um longo período de inatividade)
  • o sistema convida à exploração de suas facilidades
  • o usuário consegue identificar facilmente quais funções do sistema devem ser utilizadas em quaisquer (ou pelo menos na maioria das) circunstâncias
  • a interface do sistema é intuitiva, adaptada ao modelo cognitivo do usuário ("parece familiar")
  • o tempo de resposta do sistema adequa-se à expectativa do usuário
  • o sistema minimiza a probabilidade de erro
  • o sistema minimiza as conseqüências de um erro, e possibilita reverter as conseqüências de uma ação errada
  • o sistema transmite ao usuário sensação de segurança

Uma aplicação com um alto grau de usabilidade, é "bonita"?

Não necessariamente, até pelo fato que ou adjetivo "bonito" tem significado divergentes em diferentes culturas. Mas sem dúvida uma aplicação esteticamente agradável torna o primeiro contato do usuário aplicação mais fácil, e provavelmente contribua para que a tarefa seja realizada com maior prazer. Mas estética SEM usabilidade certamente é insuficiente: a frustração gerada pela dificuldade na utilização do sistema contribuirá para uma avaliação geral negativa.

Veja, por exemplo, o mecanismo de interação com o usuário do Google, ou site de busca mais utilizado da internet. A página é muito simples, espartana, sem nenhum elemento gráfico de destaque, menos ainda animações. As cores, fora as do logotipo, são básicas. Não há qualquer impacto visual ao abrir o site. Mas qualquer usuário, após acessar ou site, mesmo que não tenha experiência prévia na sua utilização, consegue saber rapidamente como utilizar a pesquisa, e obtém ou resultado em poucos segundos. Muito provavelmente na próxima oportunidade que o usuário for realizar uma pesquisa, a efetue através do Google. O site do Google é, provavelmente, uma mas maiores vitrines de usuabilidade no mundo.

Google conta com uma grande vantagem: só responde a um estímulo, satisfeito com uma única transação. Geralmente as aplicações que nós desenvolvemos são bem mais complexas, com dezenas ou talvez centenas de transações. Como podemos aumentar a usabilidade transacional e proporcionar ao usuário uma experiência mais positiva? Este é o assunto deste artigo.

A cor

A cor nada mais é que a percepção, por células especializadas da retina, de una determinada longitude de onda da radiação eletromagnética. A retina possui dois tipos de células: os cones (responsáveis pela percepção da cor) e bastonetes (que não distinguem cor, e são responsáveis pela visão noturna). Os cones especializam-se na captação de una determinada faixa de longitudes de onda: azul, vermelho ou verde.

Quando um fóton excita a retina, os cones respondem dentro de sua faixa de sensibilidade à intensidade da excitação. Esta informação é enviada ao cérebro através do nervo óptico, decodificada e transformada em una percepção específica.

A importância da cor

Segundo ou Instituto de Pesquisa da Cor (Institute for Color Research) há estudos que revelam que "os seres humanos julgam subconscientemente una pessoa, um ambiente ou um item nos primeiros 90 segundos, e nesse lapso de tempo entre 62% e 90%do julgamento é baseado unicamente na cor".

É extremamente importante compreender os fundamentos da cor para definir adequadamente as características de nossas aplicações.

Características da cor

O contraste mede a separação entre valores de um determinado matiz

O brilho mede a quantidade de cor branca adicionada à cor

A saturação mede a quantidade de uma determinada cor presente na mistura. Observa as variações de saturação nas cores primárias:

Sem saturação / Totalmente saturado

Ao definir as cores a serem utilizadas em nossa transação devemos considerar:

  • a resposta emocional à cor;
  • deficiências na percepção das cores por um segmento significativo da platéia.

Representação

A primeira representação do espectro foi proposta por Sir Isaac Newton, que combinou as cores em um círculo.

Posteriormente surgiram muitas variantes, pero neste trabalho vamos a usar esta versão simplificada.

A resposta emocional à cor

A resposta emocional à cor é função do contexto cultural do usuário. Em culturas ocidentais há una certa correlação entre cor e resposta emocional:

Vermelho: perigo, alerta, quente, excitante, paixão, sexo
Azul: masculino, frio, calmo, confiável, estável
Branco: pureza, honestidade, frio
Pastel: feminino, sensibilidade, delicadeza, cálido
Laranja: emocional, positivo, jovem
Negro: densidade, seriedade, morte, autoridade, poder, estabilidade
Rosado: feminino, cálido, jovem
Verde: natureza, conforto, positivo (esperança)

Deficiências na percepção da cor

As estatísticas variam, mas entre 8% e 20% da população sofre algum tipo de deficiência na percepção da cor, devido a anomalias na codificação dos genes responsáveis pelos fotopigmentos nos cones (localizados no cromossomo X). Como conseqüência, essas pessoas percebem as cores, mas em determinados comprimentos de onda sua percepção é alterada (ou até, em casos extremos, não percebem nenhuma cor). A forma mais comum de deficiência é a "verde-vermelho", assim chamada não necessariamente pelas falhas na percepção destas cores mas pela sua causa, defeitos na pigmentação dos cones responsáveis pela percepção desses comprimentos de onda.

Esta deficiência atinge, principalmente, a população masculina, por possuir somente um cromossomo X. Já nas mulheres é necessário que ambos cromossomos X estejam defeituosos para serem afetadas, o que reduz a incidência neste grupo. Deficiências nos cones com pigmentação azul são pouco freqüentes, e estão geralmente associadas a distúrbios mais sérios na visão.

Seja qual for a estatística correta, o fato é que é provável que uma percentagem significativa de sua audiência possua algum tipo de deficiência na percepção da cor. Cores que para você poderiam ser contrastantes, para determinadas pessoas podem fundir-se, perdendo totalmente o efeito desejado.

Definição da cor de fundo da transação ou do sítio

Segundo a teoria de detecção de sinais ("Signal detection theory", um modelo estatístico elaborado na década de 50) ou cérebro humano interpreta e organiza a informação que recebe em forma ótima quando n ou campo visual há um número mínimo de cores e formas: quanto menos "ruído", mais claro é o "sinal".

Ao definir a cor ou as cores básicas de transação ou do sítio devemos levar em conta os seguintes fatores:

  • o assunto: é um sítio de diversão? Ou una transação para operadores da bolsa de valores?
  • a platéia: Há algum fator de homogeinização? Sexo (maioria homens, ou mulheres), idade (sítio para a terceira idade, ou para jovens procurando diversão noturna), experiência (transação para os compradores de una empresa) ou algum outro fator? Ou os usuários formam una platéia altamente heterogênea? (usuários de um sistema de caixa eletrônico de um banco, por exemplo)
  • o ambiente: qual é ou grau de estresse ao qual; os operadores do sistema estão submetidos? (elevado, como em um sistema de controle de tráfego aéreo, ou baixo, um usuário procurando em sua residência opções de restaurantes para o final de semana). Qual é a luminosidade do ambiente? (elevada, como em una competição olímpica ao ar livre, ou baixa, como em um centro de controle de tráfego aéreo).

Vejamos, rapidamente, alguns exemplos:

Site Disney / Site Black Sabbath

A cor básica de fundo (o Matiz) da página inicial de sítio Disney é azul, uma cor que além de transmitir confiança, calma e estabilidade é perfeitamente visível para a grande maioria da população. Note que apesar do impacto visual não há muitas cores: fora o azul básico, utilizaram-se o verde, branco e laranja (todas cores positivas, emocionais). O negro foi abolido da página. As áreas com menor saturação da cor básica estão nas esquinas.

Por outro lado, o sítio do grupo de rock Black Sabbath é basicamente negro (uma cor presente no nome do grupo). Combina perfeitamente com o grupo, que em seus shows costuma realizar atos de magia negra. As letras em vermelho sangue são também adequadas, considerando o tema do sítio. Note que, novamente, há poucas cores.

Site Avon / Site PaoMusic

O sítio de Avon (esquerda) é adequado ao consumidor principal: a mulher. Cores suaves, femininas, esteticamente limpo.

Por outro lado, ou sítio da direita (patrocínio musical de una rede de supermercados) é vibrante, jovem, e provoca um impacto estético no internauta. O assunto é identificável rapidamente: é, obviamente, um sítio dedicado à música. Mas o conjunto -alaranjado- dá a idéia de juventude, vibração, dinâmica. Pense agora nesta combinação de cores para um sítio de tango, ou de música clássica: é totalmente inadequada.

Observe, agora, duas versões diferentes de um mesmo sítio:

Site lancome, Versão 2002 / Site lancome, Versão 2002

A versão da esquerda é suave, delicada, de uma feminilidade pouco agressiva. Já a foto da versão à direita modificou substancialmente a mensagem: a feminilidade é muito mas agressiva, las cores fortes, vibrantes. Até o vermelho (associado a paixão, sexo, amor), que não estava presente em nenhum dos seus matizes na versão anterior. Observe como a foto da esquerda é parte do conjunto;não cria um desvio de atenção. Já a foto da direita provoca tanto impacto que é quase impossível observar o todo sem deixar de notar a foto, que surtirá um impacto muito maior no leitor. Observe também como foi modificado também o alinhamento do texto.

Levando em conta a fisiologia do mecanismo de percepção da cor, o contexto cultural e outros fatores, podemos estabelecer as seguintes orientações:

  • Utilize a menor quantidade possível de cores para o fundo de seu sítio ou transação
  • Se for utilizar mais de uma cor, utilize cores próximas do espectro, que não criem contraste (fator de distração)
  • A percepção da cor é afetada pela luminosidade do ambiente. Considere as fontes de iluminação -naturais e artificiais- do local.
  • Si o fundo é una imagem, considere que durante o tempo de carga elementos frontais ("foreground") podem não ser visíveis por falta de contraste.

Seleção das cores para as transações

A seleção de cores para as transações é função da cor de fundo escolhida.

  • A sensibilidade ocular depende da longitude de onda, e alcança sua magnitude na faixa dos 560 nm:
  • Para serem percebidas, as cores nos extremos da faixa visível (azul e vermelho) devem ser mais intensas que as da faixa central (amarelos e verdes).
  • O texto deve ter o máximo contraste possível com ou fundo escolhido. A opção texto negro sobre fundo branco é a mais efetiva.
  • No utilize, simultaneamente, cores do extremo do espectro visível já que ou lente ocular tem de readaptar-se continuamente, provocando fadiga visual.
  • Um bom contraste se obtém entre cores escuras da metade inferior do círculo e cores claras da metade superior .
  • Vejamos, por exemplo, um texto em azul com fundo amarelo:
  • Vamos a escurecer o azul (diminuindo a saturação) e esclarecer o amarelo (adicionando branco):
  • Não utilize simultaneamente cores adjacentes no círculo, já que não apresentam contraste adequado. Observe, por exemplo, a combinação de Vermelho com Laranja:
  • Evite utilizar simultaneamente cores claras (saturadas) da metade inferior do círculo com cores escuras da metade superior do círculo.
  • Evite cores adjacentes cujo matiz difira somente no azul. Como o azul não contribui para ou contraste, as bordas tendem a ser difusas.
  • Ao redor do nervo óptico, no centro da retina, não há cones azuis. Evite, portanto, utilizar o azul puro (#0000FF) para texto, líneas muito finas ou figuras pequenas, já que são difíceis de ver.
  • Se o contexto cultural e temático é adequado, o azul é uma excelente cor de fundo, especialmente em telas de computador, já que contribui a tornar as líneas de rasterização mais difusas.

Usabilidade e Design

Seguir à risca as recomendações acima não garante um design atraente; sempre há um espaço enorme para.a criatividade artística.


Gostaríamos de ouvir sua opinião sobre este artigo.

Conteúdo

Utlilidade


Entre em contato com o(a) autor(a) deste artigo

Convide um amigo ou colega para ler este artigo

Imprima este artigo


Topo da página

(c) 2003-2006 IBRAU - Instituto Brasileiro de Amigabilidade e Usabilidade. Todos os direitos reservados.

(c) 2006 IBRAU - Instituto Brasileiro de Amigabilidade e Usabilidade. Todos os direitos reservados.

Fale com o(a) colunista.

Você gostou do artigo Análise da usabilidade de uma aplica o de registro de sorteio?

A seguir os dados são opcionais

Deseja enviar uma mensagem a Jorge Marmion?

Seu nome:

E-mail

A produção do site não comercializará o endereço de e-mail acima, nem enviará correspondência indesejada

Preencha os dados abaixo e enviaremos à pessoa que você indicar um e-mail convidando-a a visitar o site e ler este artigo.

Seus dados:

Seu nome:

E-mail

Os dados da(s) pessoa(s) que você quer convidar:

Seu nome:

E-mail

Caso deseje convidar mais de uma pessoa, digite os endereços de e-mail separados por vírgula, sem espaços em branco
(exemplo: joão@uol.com.br,pedro@aol.com)

Caso deseje, envie uma mensagem junto com o convite

A produção do site não comercializará nenhum dos endereços de e-mail acima informados nem enviará correspondência indesejada aos mesmos.