Layout da interface

Aspectos específicos da interface

Palheta de cores

Atualizado em 8.9.2014

A codificação cromática é um fator de suporte à visualização e à compreensão dos componentes das mídias digitais, sinalizando funcionalidades e as respostas dos usuários. Sua conceituação se subordina diretamente à estrutura comercial e editorial do produto.

A codificação de cores de um trabalho gráfico pode se explicitar em uma palheta, à qual se relacionam os elementos de layout definidos no projeto.Exemplo

A aplicação adequada da palheta facilita o uso da interface, mantém o senso de unidade editorial e funcional entre as páginas e cria empatia afetiva com os usuários.


Exemplo 1

Ilustração do conceito:  Museus da cidade de Colônia, Alemanha, utilizam cores diferentes para identificar as informações de cada umIlustração do conceito:  Museus da cidade de Colônia, Alemanha, utilizam cores diferentes para identificar as informações de cada um

Exemplo 2

Ilustração do conceito:  Site com base na sinalização funcional cromáticaIlustração do conceito:  Site com base na sinalização funcional cromáticaIlustração do conceito:  Site com base na sinalização funcional cromática

Exemplo 3

Ilustração do conceito:  Museus da cidade de Colônia, Alemanha, utilizam cores diferentes para identificar as informações de cada um

Exemplo 4

Ilustração do conceito:  Museus da cidade de Colônia, Alemanha, utilizam cores diferentes para identificar as informações de cada um

Exemplo 5

Ilustração do conceito:  Museus da cidade de Colônia, Alemanha, utilizam cores diferentes para identificar as informações de cada umIlustração do conceito:  Museus da cidade de Colônia, Alemanha, utilizam cores diferentes para identificar as informações de cada um Ilustração do conceito:  Museus da cidade de Colônia, Alemanha, utilizam cores diferentes para identificar as informações de cada um Ilustração do conceito:  Museus da cidade de Colônia, Alemanha, utilizam cores diferentes para identificar as informações de cada umIlustração do conceito:  Museus da cidade de Colônia, Alemanha, utilizam cores diferentes para identificar as informações de cada um
A relação funcional pode ser sinalizada facilmente com o uso de famílias de cores. A semelhança de tons em elementos com funções semelhantes cria associações imediatas sobre seu modo de uso (mais do que a proximidade espacial ou seu agrupamento em uma área delimitada). Exemplo 1.

Se a palheta tiver muitas cores, é importante estabelecer as cores dominantes e as suas relações com as outras. Exemplo 2

As cores da palheta são usadas para:

Reforçar a aderência do layout ao conceito comercial, editorial e funcional. Exemplo 3

Criar identidade entre os elementos, especialmente os que têm funcionalidades e enfoques relacionados.

Criar identidade para áreas da arquitetura da informação, para que os usuários associem uma cor a cada uma e as encontrem facilmente. Exemplo 5

Distinguir itens com funcionalidade ou conteúdo diferentes. Exemplo 5

Conduzir a ação do usuário (em elementos de navegação e de ação).

Manter o contraste entre as cores de fundo e a cor dos textos. A legibilidade dos textos fica difícil e cansativa quando o contraste entre texto e fundo é insuficiente (as formas das letras ficam indefinidas).

Muitos especialistas afirmam que fundo branco com letras pretas é uma combinação que garante máximo contraste e legibilidade. No entanto, o oftalmologista Leôncio Queiroz Neto, do Instituto Penido Burnier em Campinas, depois de pesquisar 620 usuários de computador afirma justamente o contrário: a cor branca em tela é prejudicial à visão, especialmente para usuários idosos.

O uso exagerado de meios-tons e nuances também grande esforço visual, para o discernimento das diferenças. O ideal é que os sites, programas e emails tenham fundos em tons pastéis, mais reflexivas e sobre os quais é mais fácil de enxergar. (O Globo, Info Etc., 19.3.2007)

A criação de sites e seleção cromática

Apesar de facilitar a sinalização dos elementos (links, textos, botões, setas), o uso de cores não é, em si suficiente para explicar suas funcionalidades.

Mesmo quando uma cor é utilizada para prover informação de uso (como o vermelho de um botão, para enfatizar a importância de uma funcionalidade), os elementos devem ser acompanhados de um rótulo que reafirme o conceito associado ao elemento.

Além disso, a localização do elemento é reconhecida como um fator que atrai mais os movimentos dos olhos dos usuários do que a cor. Outros fatores importantes são o tamanho e o movimento. (1)

O vermelho e o verde são cores que muitos usuários não distinguem e seu uso em elementos críticos de uso e na identificação de conteúdo pode confundir o usuário.

As soluções cromáticas devem ser redundantes em relação à composição espacial e ao tamanho dos elementos, para que sua função possa ser reiterada por outros fatores de acesso.

De qualquer forma, para evitar problemas de usabilidade para estes usuários, a rigor as páginas devem poder ser usadas sem qualquer cor. Muitos designers desenham a interface em preto e branco e só acrescentam a cor no final, para valorizar a hierarquia entre os elementos. Exemplo

O uso de CSS para configurar as características de links e outros elementos da interface ajuda às pessoas com deficiência visual, pois permite que estes substituam as configurações do projeto por suas próprias configurações.

Padrões ou texturas no fundo afetam a legibilidade dos textos e devem ser utilizados com cuidado e critérios bem claros para o usuário. Exemplo

Também o emprego de muitas cores diferentes pode afetar a compreensão do conteúdo pelo usuário, criando um conjunto visualmente saturado.

A consulta a uma roda de cores ajuda a seleção de agrupamentos de cores, especialmente das que se posicionam próximas umas das outras.

A aplicação de cores localizadas em lados opostos do gráfico - as chamadas "cores complementares" – pode dificultar a leitura ou a discriminação de elementos. (ver exemplo de roda de cores em ColorWise)

O uso de cores deve ser testado com usuários tanto durante o projeto do aplicativo quanto depois de seu lançamento. Em alguns casos, as regras sobre a consistência da aplicação das cores a cada elemento podem ser colocadas em xeque pela observação direta do uso.

Há casos em que a cor do carrinho de compras pode variar em cada etapa do processo de finalização das compras, outros em que botões com uma certa função devem ter completamente diferente das utilizadas na palheta geral. Estes critérios devem ser avaliados a cada caso, de acordo com sua funcionalidade e com a ação que se espera que o usuário realize.

Palhetas de cores para a web

Quando a web se disseminou, a partir de 1994, os monitores dos computadores tinham recursos limitados e mostravam poucas cores. Os desenvolvedores, para garantir a homogeneidade das cores utilizadas em seus projetos, precisavam recorrer a palhetas comuns a diversas plataformas para assegurar a consistência dos layouts e de seus elementos.

Os navegadores trabalhavam com as palhetas dos sistemas operacionais dos computadores PCs, Macs, Unix. As cores das imagens (vetoriais especialmente) se adaptavam a estas palhetas.

Hoje os computadores dispõem de mais memória, processadores mais rápidos e potentes e os monitores não apresentam as mesmas restrições de cores. A necessidade de uso das palhetas comuns a todas as plataformas diminuiu.

No entanto, com o aumento do acesso à web pelos dispositivos móveis, com monitores menos potentes, muitos desenvolvedores ainda utilizam a palheta de cores "web-safe" como referência para a escolha de cores básicas.

Embora diferentes entre si, as palhetas compatíveis com a web usam 216 cores comuns, sendo 40 para o sistema operacional. A palheta de 216 cores tem 6 vermelhos, 6 verdes e 6 azuis.

Os valores hexadecimais destas cores sempre incluem os valores 00, 33, 66, CC e FF. Qualquer combinação destes valores cria cores compatíveis com todas as plataformas. 16 destas cores estão listadas nas especificações da HTML 4.01, com nomes que podem ser utilizados ao invés das combinações de valores (black, silver, gray etc. - ver a lista completa em http://www.morecrayons.com/).

Ilustração do conceito:  Valores hexadecimais

O sistema de cores hexadecimais usa números de 0 a 9 e letras de a a f em qualquer combinação de seis dígitos, começando pelo símbolo "#". As diversas combinações representam as cores do sistema de luz, vermelho, verde e azul. Exemplo: #ffcc99 (ff representa a intensidade do vermelho, cc representa a intensidade do verde e 99 representa a intensidade do azul).

O valor FF significa saturação máxima (em #ffcc99, há máxima saturação de vermelho). O valor 0 significa saturação de 0. Todos os valores intermediários representam diferentes valores de saturação e brilho.

Como os monitores atuais processam cores a 32 bits, a palheta web-compatível é menos utilizada, mas garante a consistência das tonalidades entre sistemas operacionais e browsers em elementos em que a precisão é necessária, como marcas e logotipos.

Atualmente é mais utilizada a palheta do cubo com 16-por-16-por-16cores, combinando os valores 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, aa, bb, cc, dd ee e ff e gerando uma gama de cores compatíveis com monitores que suportam de milhares a milhões de cores.



Assuntos relacionados
Elementos da interface web
Usabilidade – Consistência
Acessibilidade – Soluções abrangentes
Acessibilidade – Textos explicativos em layout baseado em vermelho ou verde
Navegação : Links

Mais informação sobre palheta de cores para a web
Does color impact how users view a portal web page? Justin W. Owens e Sav Shrestha (Usability News, acesso em 5.7.2010)
Learning to use color on your website, Ron Wilder (Creativepro, acesso em 22.6.2010)
In these striking examples, you'll see how color affects the mood of a piece, and how it interacts with other elements of the designs (Creativepro, acesso em 26.11.2009)
A utilização de cor no mecanismo de interação com o usuário (Instituto Brasileiro de Amigabilidade e Usabilidade, acesso em 10.1.2009)
Color contrast analyser – programa shareware para avaliação do contraste entre combinações de cores e verificação da sua visibilidade. Projeto baseado em algoritmos sugeridos pelo W3C
CSS colors (valores de cores hexadecimais)

Mais sobre o assunto (links externos)
How to spin the colour wheel, by Turner, Malevich and more, Louise Cohen (Tate Modern, acesso em 2.8.14)

Ferramentas de palhetas e esquemas de cores
Adobe Kuler, (acesso em 8.9.2014)
HexColorTool, ferramenta online que escurece ou clareia cores hexadecimais (acesso em 1.5.2013)
Color wheel
Find the paletes you like (acesso em 18.2.2012)
Ultimate CSS Gradient Generator (acesso em 6.1.2012)
Colorschemedesigner.com (acesso em 7.1.2010)
Visibone, cria palhetas de cores pela combinação por proximidade de tons da roda de cores (acesso em 15.1.2006)
ColorSuckr, ferramenta online que gera esquemas de cores a partir de fotos (acesso em 3.11.2009)
Colr, site para criar relacionamentos entre cores e imagens (acesso em 15.1.2006)
Color Scheme Generator – programa para a criação de palhetas a partir de roda de cores
Thecolorlovers – opções de palhetas e ferramentas para criação de esquemas de cores
Dreamstime – links para sites com palhetas de cores, entre outros recursos (acesso em 6.5.2006)

Avellar e Duarte no Twitter Avellar e Duarte no Facebook Feeds da Avellar e Duarte Avellar e Duarte no Delicious