Layout da interface
Atividades relacionadas (ao layout do web site)
Aspectos específicos da interface
Palheta de cores
A codificação cromática é um fator de suporte à visualização e à compreensão dos componentes da interface web, sinalizando a funcionalidade de interfaces e a resposta 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 se explicita numa 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
Exemplo 2
Exemplo 3
Exemplo 4
Exemplo 5
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 e editorial. Exemplo 3
◊ Criar identidade entre os elementos, especialmente aqueles que têm funcionalidades e enfoques editoriais relacionados.
◊ Criar identidade para áreas da arquitetura da informação, para que os usuários associem uma cor a cada uma e possam encontrá-las 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 numa 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, de forma sua função possa ser reiterada por outros elementos de acessibilidade.
De qualquer forma, para evitar problemas de usabilidade para estes usuários, a rigor as páginas devem poder ser usadas sem qualquer cor. ► 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 do 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 a sua funcionalidade e com a ação que se espera que o usuário realize.
Assuntos relacionados
► Componentes da interface web
► Palhetas de cores adaptadas para a web
► Composição e balanço visual dos assuntos em contexto
► Usabilidade - Consistência - os aplicativos devem responder à mesma ação do usuário com os mesmos resultados em qualquer momento em qualquer tela
► Acessibilidade - Apresentar soluções abrangentes - inclusão de usuários com problemas motores, visuais, cognitivos
► Acessibilidade - Uso de textos explicativos em lugares onde se utilize um layout baseado em vermelho ou verde (para usuários com dificuldades de distinguir estas cores)
► Navegação : Links
► CSS (Cascading Styles Sheets)
Mais informação sobre palheta de cores para a web
► Does color impact how users view a portal web page? de Justin W. Owens e Sav Shrestha (Usability News, acesso em 5.7.2010)
► Learning to use color on your web site, de 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
Ferramentas de palhetas e esquemas de cores
► 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)
