O papel da cor na UX

Publicados: 2022-03-11

Compreender a psicologia das cores é um aspecto fundamental para criar uma paleta de cores que funcione bem no design digital. Embora a cor às vezes seja considerada uma escolha puramente estética por alguns designers, é, na verdade, um componente-chave do impacto psicológico de um design nos usuários e, como tal, no UX.

Uma paleta de cores bem pensada pode elevar um design de “bom” para “ótimo”, enquanto uma paleta de cores medíocre ou ruim pode prejudicar a experiência geral de um usuário e até interferir em sua capacidade de usar um site ou aplicativo.

Embora a teoria das cores em geral seja um assunto complexo, e o uso de cores no design de UX abrange muito mais do que apenas criar uma paleta com boa aparência (como acessibilidade e os efeitos psicológicos de até mesmo tons diferentes dentro do mesmo tom); os designers podem incorporar gradualmente um melhor uso da cor em seus projetos sem precisar repensar todo o processo. Uma vez que um designer tenha coberto o básico, uma das partes mais gratificantes da teoria das cores é aprender a incorporar cores mais inesperadas em seus designs.

O Barclays usa um esquema de cores de site muito específico — Embora um pouco usada em demasia, uma paleta de cores cinza/branco/azul é muito eficaz para sites financeiros porque o azul é mais frequentemente associado à lealdade e confiança na psicologia das cores.

A psicologia da cor

A teoria da cor e os efeitos psicológicos que a cor pode ter nos usuários é um tópico complexo e muitas vezes subjetivo. Mas há certos aspectos que podem ser abordados em um nível mais universal.

Coisas como os significados comuns das cores principais (primária, secundária e terciária), paletas de cores tradicionais e variações culturais nos significados das cores são bastante diretas. Os designers podem facilmente aprender esses conceitos básicos e aplicá-los ao seu trabalho. Mas há pontos mais delicados a serem aprendidos quando se trata de usar cores no design de UX .

A psicologia das cores é um aspecto complexo da teoria das cores — Os significados básicos das cores podem ser fáceis de aprender e lembrar, embora significados mais sutis também possam ser bem utilizados no design digital. (Projeto Vandelay)

O impacto emocional das cores da interface não deve ser negligenciado. E enquanto algumas cores são “universais” no design de UX (como preto, branco e cinza, pelo menos uma das quais é usada em praticamente todos os bons designs por aí), as cores com as quais elas são combinadas podem ter um enorme impacto na percepção de um usuário.

Claro, a maneira como a cor é usada também pode ter um impacto dramático em como ela é percebida. Por exemplo, o azul usado como cor primária em um design moderno e minimalista terá uma sensação muito diferente do mesmo azul usado como cor de destaque em um design corporativo mais complexo.

Zutano usa um esquema de cores do site cinza e vermelho.

O P&N Bank usa uma paleta de cores vermelha brilhante da interface do usuário — Diferenças sutis nos esquemas de cores do site têm um grande impacto nas emoções que o site evoca. Zutano e P&N Bank usam tons de vermelho e branco, mas seus sites têm impactos emocionais totalmente diferentes.

Diferenças culturais na cor

Uma questão que os designers tendem a ignorar são as diferenças culturais que podem existir em torno de cores diferentes. Por exemplo, em muitas culturas ocidentais, o branco está associado a coisas como pureza, inocência e esperança. Mas em partes da Ásia, o branco está associado à morte, luto e má sorte.

Algumas cores geralmente têm conotações positivas, independentemente da cultura (como o laranja), enquanto outras, como o branco, variam muito entre os diferentes países. Isso certamente pode complicar a vida de um designer ao tentar criar um design que atraia o maior público possível.

É importante que os designers analisem as implicações culturais de suas paletas de cores com base no público-alvo do produto ou site. Se um produto for destinado a um público mundial, certifique-se de equilibrar as cores e as imagens usadas para evitar conotações culturais negativas. Se um produto visa principalmente apenas uma cultura específica, os designers podem prestar menos atenção às implicações que a paleta escolhida pode ter em outras culturas.

A psicologia das cores varia ao redor do mundo, baseada principalmente em associações culturais — As cores podem ter significados totalmente diferentes em várias culturas ao redor do mundo. (A informação é bonita)

Procura-se designers de UX freelancers em tempo integral nos EUA

Combinando as cores do UX com a marca

Os valores da marca devem desempenhar um papel fundamental na criação de uma paleta de cores. Mas eles não são o único fator importante. As normas da indústria também são fundamentais, assim como as cores já utilizadas pelos concorrentes. Usar uma paleta de cores quase idêntica à principal concorrência de uma marca é uma ótima maneira de gerar confusão e garantir que a marca não se destaque.

Concedido, há exceções a isso. Tomemos, por exemplo, McDonald's e Wendy's. Ambos são restaurantes de fast food que estão em concorrência direta entre si. E ambos usam uma paleta de cores vermelha e amarela. No entanto, olhando para seus logotipos, o logotipo de Wendy é principalmente vermelho com detalhes em amarelo, enquanto o McDonald's é o oposto. Suas embalagens também usam essas cores de maneiras diferentes, diferenciando ainda mais as marcas. Por isso, nenhum deles seria facilmente confundido com o outro, mesmo que os logotipos e outras marcas de identificação fossem retirados de suas embalagens.

As paletas de cores da interface do usuário inesperadas podem ajudar muito a diferenciar uma marca de seus concorrentes — Vermelho é a cor do perigo e da paixão, mas também da excitação, o que pode explicar por que a Virgin Atlantic o usa para sua marca (junto com o roxo, que implica luxo).

O primeiro passo para criar uma paleta de cores de marca que suporte os valores da marca é entender o significado das várias cores e como torná-las mais claras/brilhantes/mais escuras/mais opacas/etc. pode afetá-los. Aqui está um detalhamento básico do que as cores diferentes significam:

Vermelho – Vermelho é a cor do perigo e da paixão, assim como da excitação. É uma cor muito forte e pode provocar fortes reações nas pessoas. Clareá-lo para rosa o torna mais feminino e romântico, enquanto escurecer o tom para marrom o torna mais suave e tradicional.
Laranja — O laranja é uma cor muito criativa que também está associada à aventura e à juventude. É muito enérgico também. Por causa dos fortes laços da laranja com o estilo dos anos 70, ela também pode evocar uma sensação retrô.
Amarelo – Amarelo é feliz, otimista e alegre. É popular em designs para crianças e adultos. Tons mais pastel são frequentemente usados como uma cor de bebê neutra em termos de gênero, enquanto os amarelos mais brilhantes são populares em designs criativos. Tons mais escuros de amarelo se transformam em ouro, que está associado à riqueza e ao sucesso.
Verde — Verde tem associações variadas. Por um lado, provoca sentimentos de riqueza e tradição (principalmente tons mais escuros), enquanto por outro está fortemente associado ao ambientalismo e à natureza. Os verdes-limão são frequentemente associados à renovação e ao crescimento.
Azul – O azul é mais frequentemente associado à lealdade e confiança. Azuis mais claros podem estar associados à comunicação, enquanto azuis mais opacos e escuros podem estar associados à tristeza e à depressão. O azul é a cor mais universalmente apreciada no mundo, o que pode explicar por que tantas empresas optam por tons de azul para sua marca.
Roxo — Roxo é outro tom com significados variados. Há muito tempo é associado à realeza e à riqueza (uma vez que o corante roxo era raro em muitas civilizações antigas, era reservado para a realeza). Mas também está associado ao mistério e à espiritualidade. O roxo também pode evocar a criatividade.
Preto — Preto implica sofisticação e luxo. No entanto, também pode estar ligado à tristeza e à negatividade. Dependendo das outras cores UX usadas ao lado do preto, pode parecer moderno ou tradicional, formal ou casual.
Branco – O branco está ligado à pureza, inocência e positividade. O branco também é muito popular em designs minimalistas, devido à sua neutralidade e simplicidade. Assim como o preto, o branco assume facilmente as características de outras cores com as quais é usado.
Cinza — Cinza tem significados variados, dependendo do contexto. Pode ser conservador e sofisticado ou sombrio e sem graça. Pode ser sem emoção ou temperamental. Também pode ser associado com tristeza e tristeza.
Marrom – Marrom (que na verdade é um tom escuro de laranja) está associado a ser realista e aterrado. Também está associado à natureza e até mesmo ao aconchego. E, claro, pode estar associado a ser sujo ou sujo.

Conhecer esses significados básicos de cores dá aos designers uma base sólida para construir paletas de cores para qualquer marca ou produto.

A teoria das cores, no entanto, é parte ciência e parte arte. Só porque uma cor é geralmente associada a um sentimento ou humor específico, não significa que ela não possa ser percebida de outras maneiras, combinando-a com cores diferentes, alterando a tonalidade exata ou variando como ela é usada entre outros elementos de design.

Explorar a psicologia de cores estabelecida é uma maneira sólida de aprimorar o UX — Este conceito de aplicativo de rega de plantas usa um belo tom de verde para sua cor primária, com detalhes em azul, amarelo e vermelho usados de maneiras que farão sentido para os usuários. (por Amy Holley Hirst)

Usando cores UX não convencionais

O uso não convencional de cores UX é uma ótima maneira de diferenciar uma marca. E embora seja preciso mais sutileza do que simplesmente combinar cores antigas que um designer deseja combinar, não é tão difícil aprender a usar cores inesperadas em designs de UX.

As cores de destaque são o lugar mais fácil para começar quando se trata de adicionar cores não convencionais em um design. Por exemplo, um site de escritório de advocacia pode usar uma paleta de cores tradicional de azul marinho e cinza. Mas adicione alguns detalhes em verde limão e, de repente, o design se diferencia do mar de outros escritórios de advocacia com sites em azul marinho e cinza. Ou veja este exemplo de Hogan Lovells, que usa uma paleta de cores branca, cinza e verde limão para criar um site moderno que definitivamente se destaca de outros sites do setor jurídico. Atrairia um público mais jovem e moderno do que o seu site legal médio.

Um esquema de cores de site inesperado — Hogan Lovells cria um design moderno com uma paleta de cores muito fresca.

Berdan Real Estate é outro site que usa uma paleta de cores inesperada. O site imobiliário usa tons de amarelo e pêssego, ambos muito mais energéticos do que o site de propriedade comum (onde dominam grandes faixas de azul, vermelho e verde).

Outro esquema de cores de site inesperado neste site imobiliário — A Berdan Real Estate evita os esquemas de cores corporativos típicos em favor de algo fresco e quente.

O seguro geralmente não é considerado uma indústria moderna e inovadora, mas isso não significa que seus projetos não possam ser. O site da Lemonade usa um esquema de cores cinza e branco com detalhes em fúcsia. É completamente inesperado em um setor que não é conhecido por assumir riscos.

Um esquema de cores UX completamente inesperado no site Lemonade — A escolha de fúcsia da Lemonade em sua marca é totalmente inesperada na indústria.

Há uma infinidade de outros exemplos de cores UX não convencionais usadas na prática na web que podem ser usadas para inspiração.

A Regra 60-30-10

A Regra 60-30-10 é uma teoria simples para criar paletas de cores bem equilibradas e visualmente interessantes. A ideia é que uma cor – geralmente algo bastante neutro (literalmente ou psicologicamente) – compõe 60% da paleta. Outra cor complementar compõe 30% da paleta. E então uma terceira cor é usada como destaque para os 10% restantes do design.

Esse método torna muito mais fácil para os designers começarem a experimentar paletas de cores não convencionais sem sair muito das normas esperadas dentro de um setor ou marca. Adicionar um toque de alguma tonalidade inesperada pode elevar um design que, de outra forma, se encaixa no que é esperado de uma determinada empresa. Também pode ser o primeiro passo para criar uma paleta de marca muito mais inovadora do que seus concorrentes, diferenciando a marca e tornando-a mais memorável.

Um excelente exemplo da regra 60-30-10 na teoria das cores do web design — O site da Clarity Stress Management mostra bem a regra 60-30-10, com 60% roxo, 30% branco e 10% magenta no cabeçalho e rodapé.

Conclusão

Embora a teoria das cores seja um assunto complexo, não é particularmente complicado aprender o básico. A partir daí, os designers podem aproveitar seus conhecimentos para criar paletas de cores mais variadas e sofisticadas para seus projetos.

Uma paleta de cores bem projetada, principalmente uma que inclui alguns tons inesperados, não é apenas uma escolha estética. Pode ter efeitos psicológicos significativos nos usuários, que os designers de UX devem capitalizar para criar melhores experiências.

• • •