Como usar cores no seu site para aumentar conversões

A cor é uma das ferramentas mais poderosas no kit de ferramentas do designer. Você pode usar a cor para impactar as emoções dos usuários, chamar a atenção deles e colocá-los em um determinado espírito para fazer uma compra. É também um dos principais fatores na percepção dos clientes de uma marca. Hoje vamos aprender neste post como usar cores no seu site para aumentar conversões.

Com um número infinito de combinações de cores possíveis, pode ser difícil decidir quais cores irão causar o maior impacto em seu site. Seria impossível testar tudo, mas pegamos alguns truques e tendências sobre como a cor afeta as atitudes e o comportamento dos usuários.

Neste artigo, abordaremos a teoria básica da cor, a psicologia, as questões de acessibilidade e o impacto na taxa de conversão.

Teoria das cores para iniciantes:

Se você já fez qualquer aula básica de arte, é provável que você esteja familiarizado com a roda de cores. Caso contrário (ou se sua aula foi há muito tempo), aqui está uma atualização rápida. Basicamente são as cores primárias, secundárias e as terciárias; as cores análogas e complementares; e fala também das cores quentes e frias.

As cores primárias (vermelho / magenta, amarelo e azul / ciano) podem ser misturadas para criar cores secundárias (laranja, verde e roxo). O branco pode ser adicionado a uma cor para criar matizes (variações mais claras) e preto pode ser adicionado para criar tons (variações mais escuras).

As cores que são opostas uma a outra na roda são complementares. Eles contrastam fortemente e podem ser usados para atrair a atenção do espectador e dar energia. As cores que estão próximas uma da outra na roda são análogas. Eles têm um contraste menor, e podem ser usados para criar uma sensação de harmonia e continuidade em um projeto.

Quando você está usando cores no texto, esteja ciente de que colocar duas cores com baixo contraste de valor ao lado do outro pode tornar sua leitura muito difícil, sejam elas cores complementares ou análogas.

Isto é especialmente verdadeiro em celulares, onde os usuários são mais propensos a estarem ao ar livre ou em locais luminosos que causam dificuldade de leitura na tela.

Psicologia e associações de cores:

É um fato bem conhecido que as cores podem provocar emoções. Aqui estão algumas emoções tradicionalmente associadas às cores:

• Vermelho: Poder, paixão, apetite, amor, perigo
• Laranja: Confiança, alegria, simpatia
• Amarelo: Juventude, felicidade, calor, sol
• Verde: Crescimento, dinheiro, melhoria, meio ambiente, inveja
• Azul: Confiança, paz, lealdade, masculinidade, segurança
• Roxo: Realeza, mistério, espiritualidade, criatividade
• Marrom: Ar livre, comida, conservadorismo, terra
• Preto: Formalidade, luxo, sofisticação, morte
• Branco: Pureza, simplicidade, qualidade e frescura

Tenha em mente que as associações de cores variam de cultura para cultura e de pessoa para pessoa. Homens e mulheres geralmente têm diferentes preferências de cores, e as cores que estão em moda este ano podem ser muito mais eficazes com um público mais jovem ou de renda mais alta.

Marca e indústria:

Muitas empresas populares usaram cor para evocar uma emoção particular em seus clientes. Você deve estudar esse gráfico se quiser aprender como usar cores no seu site para aumentar conversões.

Os clientes também formam associações de cores para certas indústrias, como azul para tecnologia, verde para a saúde e vermelho para fast food. Enquanto algumas empresas optam por combinar as expectativas dos clientes usando as cores comuns da indústria, outras descobriram que ir contra a maré pode ser uma maneira muito eficaz de causar uma impressão.

O azul representa a confiabilidade, o que é bom para as empresas de viagens (veja Melhores Destinos, Submarino Viagens ou Viajanet). Mas não existe uma regra rígida que todos os sites de viagens tenham que ser azul.

Embora possa não ser o que os usuários esperariam de um site da companhia aérea, certamente se destaca. Escolher cores inesperadas pode ser uma maneira eficaz de agregar prazer a uma experiência – e fazer os usuários se lembrarem de sua empresa.

Pense sobre o quão conservador é seu cliente-alvo. Como eles reagiriam a uma mudança da norma? Seria interessante ou talvez confuso para eles? Qual mensagem sua empresa enviaria se o seu esquema de cores se afastasse das expectativas tradicionais?

Preferências das mulheres versus preferências masculinas:

Em um estudo de 50 pessoas, aprendemos que as mulheres preferiam os sites mais brilhantes, com mais cor, dando-lhes uma classificação média de 4,35. Enquanto os homens também gostaram mais dos sites coloridos (dando-lhes uma pontuação média de 4,18), classificaram os sites escuros como segundo (4,04, em média).

Em contraste, as mulheres deram aos sites escuros a classificação mais baixa com uma pontuação de 3,38. Ambos os gêneros sentiram quase igualmente “indiferentes” sobre os sites brancos/minimalistas, dando-lhes uma classificação média de 3,6 (mulheres) e 3,54 (homens).

Os homens que deram aos sites escuros uma classificação alta eram mais propensos a descrever esses sites usando palavras muito positivas como “feliz”, “diversão” e “incrível”. Por outro lado, as mulheres que avaliaram os sites escuros tendem a usar descrições mais reservadas, como “caro”, “profissional” e “elegante”.

Cor e acessibilidade:

Como o seu site ou aplicativo aparece para seus usuários com deficiência visual?

Aproximadamente 8% dos homens e 0,5% das mulheres são afetados por alguma forma de daltonismo. Embora existam formas múltiplas da condição, o daltonismo de cor vermelha e/ou verde é a mais comum.

Os indivíduos com daltonismo para a cor vermelha ou verde têm problemas para distinguir os vermelhos, os verdes e os amarelos de valores semelhantes, especialmente quando os verdes têm mais amarelo do que azul neles.

Se você estiver usando cores com contraste de baixo valor, esteja ciente de que os usuários que têm daltonismo podem não conseguir distinguir as palavras ou as imagens.

Ferramentas de teste:

Existem algumas excelentes ferramentas disponíveis para ajudá-lo a testar a melhor forma de como usar cores no seu site para aumentar conversões para quem tem questões de acessibilidade. Você pode baixar o simulador de daltonismo Color Oracle para Windows, Mac e Linux, ou você pode fazer o upload de suas imagens estáticas para a Coblis para experimentá-las com nove diferentes tipos de visão colorida. Você pode até mesmo testar seu site com alguma pessoa daltônica para descobrir se algo é difícil para eles enxergarem.

Outras preocupações de acessibilidade:

Enquanto pensamos em acessibilidade, não se esqueça das pessoas que estarão usando software de leitor de tela para visualizar seu site. Você já recebeu uma mensagem de erro quando você está preenchendo um formulário que diz algo como “Os campos marcados em vermelho são obrigatórios”? Esta pode ser uma experiência extremamente frustrante para pessoas que não conseguem ver os campos marcados em vermelho. É melhor evitar referenciar as cores no site ou aplicativo, e fornecer mensagens de erro mais específicas, como “Um endereço de e-mail é necessário”.

Como usar cores no seu site para aumentar conversões:

Quais cores realmente vão melhorar suas taxas de conversão e aumentar sua linha de fundo? Como você pode usar a teoria da cor e a psicologia para que pessoas possam clicar em um botão?

Para cada especialista em otimização de taxa de conversão lá fora, quem afirma que um vermelho chamativo é a melhor cor para um botão, há outro que diz que o verde é o melhor porque o verde significa “vá em frente”.

Há uma abundância de resultados de teste A/B que mostram como uma mudança na cor de um botão CTA fez um impacto drástico nas inscrições. O HubSpot compartilhou esse famoso teste dos primórdios de sua empresa, quando eles eram conhecidos como Perfomable.

Mesmo eles tendo previsto que o botão verde se sairia melhor, o botão vermelho resultou em 21% mais cliques.

Mas eles também alertam seus leitores que esse resultado de teste por si só não deveria fazer todos mudarem seus botões para o vermelho. É possível que seu público simplesmente prefira vermelho, mesmo que outras pessoas possam preferir verde. Ou, mais provável, o botão vermelho teve mais atenção porque era um dos únicos objetos vermelhos na página.

A má notícia é que não há uma cor mágica que seja consistente para todos os sites. A boa notícia é que existem algumas regras que podem ajudá-lo a usar a cor para sua vantagem.

O contraste é a chave:

Parece óbvio, mas iremos em frente e dizer de qualquer maneira: se quiser que os usuários cliquem em algo, faça com que esse algo se destaque! Se o seu site ou aplicativo usa muito laranja, os usuários provavelmente não notarão um botão laranja de imediato, independentemente de quão bem os botões de laranja tenham uma boa performance nos testes A/B de outra empresa.

Nota: Por isso a importância de não sair por aí no Google pesquisando por testes A/B de outras empresas para você criar um “atalho”. As circunstâncias podem variar.

Lembre-se, o contraste não é apenas sobre cores complementares na roda de cores; é também sobre o luminosidade. Um botão claro não se destacará contra um fundo claro, como um botão escuro poderia. Além disso, as palavras também precisam se destacar no chamado à ação.

No final, ouça seus usuários:

Cobrimos diversos problemas relacionados com a cor que podem afetar a experiência do usuário em seu site ou aplicativo: associações de cores tradicionais, diferenças entre as percepções masculinas e femininas de esquemas de cores e preocupações de acessibilidade.

Esses fatores são um ótimo lugar para começar quando você está criando um novo design. Mas, em última instância, a decisão de design correta é a que os usuários acham correta. Em última análise, a decisão de design correta é a que os usuários acham certo.

É por isso que é tão importante ter feedback do seu público-alvo no início do processo de design. Descubra se suas escolhas de cores estão afetando seus usuários da maneira que você espera.

Exemplo de perguntas de teste:

Aqui estão algumas perguntas do teste que você pode pedir aos usuários quando você está testando suas escolhas de cores:

1. Antes de visitar [este site/aplicativo], diga-nos o que você esperaria de uma empresa que faça [o que sua empresa faz]. O que você espera que seja capaz de fazer? Como você espera que o site/aplicativo pareça?
2. Qual é a primeira coisa que você deveria clicar / tocar?
3. Quais são as três palavras que você usaria para descrever este site/aplicativo?
4. Em uma escala de 1 (muito desagradável) para 5 (muito agradável), como esse site/aplicativo fez você se sentir?
5. Quão provável ou improvável seria confiar nessa empresa?
6. Como esse site / aplicativo se comparou com suas expectativas?
7. Você consegue pensar em outras empresas que tenham ofertas muito semelhantes? Como você compararia essa empresa com eles?

A Internet é um lugar colorido, e há muito que pode ser feito usando cores da maneira correta, no momento certo, com o público certo e para o propósito correto.

Naturalmente, este artigo levantou questões sobre como usar cores no seu site para aumentar conversões. E se a sua empresa possui um guia de estilo de cor específico? E se a cor do logotipo ditar uma certa matiz? E se o designer principal ditar os requisitos de cores? Como você lida com isso?

Quanto mais liberdade você tiver em seu esquema de cores, melhor. Aqui estão algumas lições finais sobre como você implementa psicologia de cores em seu site:

Teste várias cores. Apesar do que alguns podem dizer, não há cor certa para um texto ou botão de conversão. Experimente um botão verde, roxo ou amarelo. Explore as vantagens de um esquema de fundo preto contra um fundo branco. Descubra o que funciona melhor para o seu público e com o seu produto.

Não deixe a escolha de cores apenas para o seu designer. Temos um enorme respeito pela profissão dos designers. Trabalhamos com muitos deles. No entanto, não deixe seu designer ditar quais cores você deve usar em seu site. A cor é uma questão de conversão, não apenas um problema “Oh, parece bom”. A estética da cor não é tudo. Os efeitos de conversão de cores são importantes! Você deve estar fortemente envolvido na seleção de cores das suas páginas de destino para melhorar suas conversões.

Evite a sobrecarga de cores. Acabamos de gastar mais de 2.000 palavras dizendo como a cor é importante e impressionante. Agora, você vai sair e colorir algo. Mas não vá sobrecarregar seu site. branco é uma cor, e também deve ser sua melhor amiga. Chamado de espaço de respiro por um motivo, deixe bastante espaço em branco no seu site. Muitas cores podem criar uma sensação de confusão.

Agora que você aprendeu como usar cores no seu site para aumentar a conversão, você pode querer aprender o que é landing page, como utilizar um para sua empresa, quais são seus objetivos e quais são os tipos de página de destino.