Layout da interface
Atividades relacionadas (ao layout do web site)
Aspectos específicos da interface web
Palheta de cores
Importante método para sinalizar a funcionalidade de interfaces e gerar resposta dos usuários, a codificação cromática é um fator de suporte à visualização e à compreensão dos componentes da interface web. Sua conceituação se subordina diretamente à estrutura editorial do site.
■ 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, funcional) entre as páginas e cria empatia afetiva com os usuários.
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 o seu modo de uso (mais do que a proximidade espacial entre os elementos ou o seu agrupamento numa área delimitada). ►> Exemplos
■ As cores da palheta são usadas para:
◊ Reforçar a aderência do layout ao conceito editorial. ► Exemplo
◊ Criar identidade entre os elementos, especialmente aqueles com funcionalidades e enfoques editoriais relacionados. ► Exemplo
◊ Distinguir itens com funcionalidade ou conteúdo diferentes. ► Exemplos
◊ Conduzir a ação do usuário (em elementos de navegação e de ação). ► Exemplo
◊ 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 uma pesquisa com 620 usuários de computador afirma justamente o contrário: a cor branca numa tela é prejudicial à visão, especialmente dos usuários idosos. O uso exagerado de meios-tons e nuances também exige grande esforço visual, para o discernimento das diferenças. O ideal é que os sites, programas e emails tenham 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 mesmo, suficiente para sinalizar funcionalidades.
Quando as cores são utilizadas para prover informação de uso (como o vermelho de um botão para reforçar a importância de sua funcionalidade, por exemplo), os elementos devem ser acompanhados de um rótulo que reafirme o conceito associado ao elemento.
Se a palheta contiver muitas cores, é importante estabelecer as cores dominantes e as suas relações com as outras. ► Exemplo
■ Vermelho e 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.
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 exaustivamente com usuários tanto durante o projeto do web site 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 o assunto (links externos)
► Color contrast analyser - programa shareware para avaliação do contraste entre combinações de cores e verificação da sua visibilidade. Seu projeto é baseado em algoritmos sugeridos pelo World Wide web Consortium (W3C)
► Around the color wheel, artigo de Dmitry Kirsanov, sobre a roda de cores e suas aplicações em design
► Visibone, ajuda a criar palhetas de cores através da combinação por proximidade de diversos tons da roda de cores (acesso em 15.1.2006)
► Colr, um 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 da roda de cores
► Thecolorlovers - apresenta muitas opções de palhetas e ferramentas para criação de esquemas de cores
► Dreamstime - links para sites geradores de palhetas de cores, entre outros recursos (acesso em 6.5.2006)
► The websafe and reallysafe palettes (HTML Goodies, acesso em 17.11.2007)