Como usar cores no seu site para aumentar conversões

Uma pequena aula de teoria das cores e como usar cores no seu site para aumentar conversões. Psicologia das cores, acessibilidade e botõ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:

Como você pode ver neste gráfico, 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.

Já a Virgin America escolheu ir contra com o design em seu site, como você pode ver em seu site. Ela usa gradientes de vermelho e roxo.

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”.

Não só a amostra desse estudo foi sido pequena, vale a pena você mesmo fazer um teste com seu usuário. Talvez você possa querer ler sobre O que é teste A/B – guia completo para fazer um no seu site.

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.

Você pode ler este artigo incrível sobre o tema: Daltonismo e UX: a experiência para todos

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óridos de sua empresa, quando eles eram conhecidos como Perfomable.

Você pode se interessar em ler: O que são call-to-action cta e como melhorar a conversão

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.

Sobre nós:


A Polímatas é uma rede de empreendedores que se reúne para compartilhar conhecimentos sobre gestão e negócios. Um polímata é uma pessoa que entende muito de várias áreas, e acreditamos que empreendedores precisam ser polímatas - especialmente naquele comecinho do seu negócio, nos primeiros anos. Se você também acredita nisso, como a gente, e chegou aqui em nosso blog porque está interessado em aprender um pouco mais para levar pro teu negócio, talvez valha a pena conferir mais sobre como você pode fazer parte da Polímatas.

O que você achou?

  • Curti 👍 (4)
  • Amei! 😍 (1)
  • Achei útil 👌 (2)
  • Wow! 😱 (1)
  • Confuso 😩 (0)




Contrate um polímata para o seu negócio ou projeto pessoal.

Nós podemos te ajudar com serviços de produção de conteúdo, eventos e lançamentos de campanhas de marketing. Confira!
A Polímatas é uma rede de troca de conhecimento de negócios entre empreendedores.

Contato

contato@polimatas.com
(41) 99888-0365
Hospedados no Hiplace (Curitiba/PR)

Redes sociais

Você já tem uma conta ou precisa criar?
Entre com sua conta já criada:
Crie seu cadastro agora:

×
Faça seu login
×
Faça sua conta gratuita na Polímatas!

×
As inscrições ainda não estão abertas!

Abriremos inscrições para novos polímatas na segunda-feira, dia 17 de Abril. Crie sua conta gratuita agora para ser avisado!

×

Faça sua inscrição aqui

Qual destes perfis você se encaixa?

Idade

Quais foram as coisas mais legais que você já fez profissionalmente?*

Nome da empresa atual e cargo.*

Por que você quer fazer parte da Polímatas?*

×

Faça sua inscrição aqui

Qual destes perfis você se encaixa?

Idade

Quais foram as coisas mais legais que você já fez profissionalmente?*

Nome da empresa atual e cargo.*

Por que você quer fazer parte da Polímatas?*

×
Fechar menu
Os polímatas
Empresas
Eventos
Cursos
Curadoria de conteúdo
Blog
Fazer Inscrição
Entrar
×

Entenda como você pode fazer parte da Polímata:

Conta gratuita:

Conta polímata:
Além de todos os benefícios acima,
2 eventos exclusivos adicionais por semana.
Participe de todos os eventos online por vídeo.
Trazer sua empresa ou projeto para receber feedbacks.
Acessar uma rede de mais de 100 empreendedores.
Crie seu próprio evento.
Isso tudo por apenas R$49/mês, sem nenhuma taxa adicional ou tempo mínimo de permanência.

Quero fazer parte
ou você pode continuar criando sua conta gratuita aqui

×