5 dicas de psicologia de cores para melhorar instantaneamente os sites de comércio eletrônico

Psicologia da cor para sites de comércio eletrônico

Como designer, a psicologia das cores pode não ser algo em que você pense regularmente, mas provavelmente você sabe que algo vermelho pode fazer você sentir fome e que um quarto amarelo claro e ensolarado pode fazer você se sentir alegre e feliz.

Aplicar a psicologia das cores ao design da web de sites de comércio eletrônico também pode ter um impacto emocional nos visitantes do site. As cores que você escolhe para o design podem ajudar no reconhecimento da marca e até mesmo a probabilidade de um cliente confie na sua marca.

A psicologia da cor é basicamente a forma como a cor afeta as emoções e o comportamento das pessoas. Isso os faz querer comprar um item? Isso os deixa felizes ou mostra um lado sério?

No entanto, a psicologia das cores não é tão simples quanto o vermelho deixa você com fome e o azul faz você se sentir calmo. Há muito mais coisas relacionadas à psicologia das cores, e isso tem muitas facetas em camadas. Mais ainda, se você está fazendo isso para sites de comércio eletrônico, a psicologia das cores é ainda mais importante.

Conteúdo[Show]

Não há um padrão universalmente aceito para como a cor afeta a todos. As emoções ou sentimentos que as cores criam são muito individuais de pessoa para pessoa. Suas próprias experiências de vida podem até impactar como você vê uma cor específica e os sentimentos que ela evoca.

No estudo de impacto da cor no marketing, os pesquisadores descobriram que 90% das primeiras impressões vêm de se o visitante sente que a cor é apropriada para a marca e se ela é apropriada para o que está sendo vendido.

Se o cliente achar que a cor não é apropriada para a marca, ele provavelmente não confiará na empresa.

O takeaway?

Esteja atento às percepções de cor, como cores escuras, pretos e cinzas para produtos masculinos e robustos e rosa e roxo para produtos femininos. Mas não fique tão preso à teoria da cor a ponto de ignorar a marca ou a estética geral do design.

Comece com um design responsivo realmente excelente e, em seguida, ajuste as cores para encontrar as melhores para sua marca em particular. Você também vai querer estar ciente do equilíbrio do espaço em branco e se o design geral é agradável ao olho humano.

Como as cores afetam as taxas de conversão

Como usar a teoria das cores no design de sites de comércio eletrônico

Quando se trata de aplicar a teoria das cores ao design de comércio eletrônico, o melhor lugar para começar é com as cores que fazem os usuários quererem comprar seu produto. Cerca de 62-90% da opinião que um cliente dá nos primeiros 90 segundos em um site é formada apenas pela escolha da cor.

Leitura recomendada: 

Mais de 25 melhores temas WordPress de comércio eletrônico para lojas online (2020)

 

Com isso em mente, você pode ver por que é vital escolher as cores certas para o seu design.

A última coisa que você quer é desligar os clientes para que eles saiam do seu site.

Como mencionado antes, a cor que pode atrair os leitores depende de sua marca geral e se o cliente a considera apropriada para sua marca.

Por exemplo, se você está vendendo acessórios para motocicletas, provavelmente não usaria um botão de compra rosaless você está vendendo especificamente acessórios femininos para mulheres. Você deseja ter alguma consistência em todo o design.

Portanto, se você decidir usar botões de call to action (CTA) vermelhos, seus botões de CTA devem manter essa cor em todo o design. A única exceção é se você deseja apenas chamar a atenção para um botão específico e não para os outros.

O que provavelmente é ainda mais importante do que a cor que você finalmente escolhe é garantir que suas cores sejam consistentes em todo o site. Se você decidir usar o vermelho para criar uma sensação de energia e frescor, use essa paleta de cores, desde os botões de call to action até os títulos em destaque

Certifique-se de não usar cores conflitantes que possam criar um símbolo estridente de aborrecimento para os visitantes do site.

psicologia da cor

Fonte: WebpageFx

Navegando nas opções de cores - como faço a melhor escolha?

Saber quais cores usar quando pode ser um pouco mais complicado, mas é possível descobrir o que funciona melhor para o seu site.

Por exemplo, se você deseja criar um sentimento de confiança, o azul pode ser uma boa escolha. Explicaremos um pouco mais a seguir sobre quais tipos de emoções e sentimentos as diferentes cores podem ter como alvo.

Também é importante saber quais cores seus concorrentes estão usando e decidir se cores semelhantes funcionariam bem para você ou se você deseja se destacar da concorrência com cores muito diferentes. Alguns sites utilizam cores muito bem. Aqui estão alguns exemplos:

  • Artigos esportivos de Dick utiliza um verde escuro para fazer pensar no ar livre. Uma vez que vendem equipamento para exteriores, esta é a escolha de cor perfeita para eles. Você encontrará essa cor em seus cabeçalhos, banners de vendas e alguns botões de CTA.caralhos esportivos

 

  • Rue 21 é uma empresa de roupas online destinada a adolescentes e jovens adultos. Suas roupas são frescas, baratas e divertidas. Não é surpreendente que as cores usadas neste site sejam jovens, frescas, azuis e rosas brilhantes. Observe também que o foco está no preço barato com pequenas bolhas rosa brilhante mostrando as diferentes faixas de preço na loja. Essas são quase uma chamada à ação para o visitante do site.

rue21 

Target Personas and Color - a quem se destina o meu produto?

 

É de vital importância entender seu público-alvo e os tipos de cores que eles esperam de seu tipo de site. Portanto, sua primeira etapa na escolha de uma paleta de cores deve começar com o estudo do seu público-alvo.

Se você ainda não criou uma persona de usuário para seu público-alvo, deve criar pelo menos uma.

Essa é basicamente uma pessoa fictícia que representa seu cliente mais provável. Você pode dar-lhe um nome, características, carreira potencial e assim por diante. Isso pode ajudá-lo a compreender melhor o público para o qual você está escrevendo e, então, direcionar seu conteúdo - e suas opções de cores - para esse tipo de personalidade.

Por exemplo, foi demonstrado que os homens tendem a preferir o azul em 57%, seguido pelo verde (14%) e preto (9%).

Um exemplo do uso de azul combinado com uma aparência masculina é a Mountain Productions Rigging Equipment and Services. Observe como as cores são profundas e escuras, dando à página toda uma aparência masculina. Pops de azul trazem uma cor favorita, criando um forte apelo à ação, e a página tem espaço em branco suficiente para equilibrar todo o visual.

cordame

As mulheres tendem a preferir o azul também em 35%, seguido de perto pelo roxo em 23% e vermelho em 9%.

Um bom exemplo do uso de roxos em um web design pode ser visto no site da Claire's, que vende roupas e joias a preços acessíveis. Este site usa algumas faixas roxas, mas também utiliza fortes respingos de cores brilhantes para mostrar seu lado jovem, principalmente na imagem das meninas usando os acessórios de Claire.

No entanto, o site também traz um pouco de azul, entendendo que o azul é uma cor favorita e confiável entre as mulheres. Você até verá um pouco de vermelho neste site, provando que aqueles que o criaram entendem claramente que a maioria das mulheres prefere essas cores a outras.

No final das contas, você realmente não pode errar com o azul, já que a maioria das pessoas gosta da cor e a vê como confiável e calmante.
da Claire

Cores e o que elas transmitem

 

Embora você deva ter em mente que o impacto de uma cor pode variar com base nas experiências das pessoas que visualizam uma página específica, existem algumas regras básicas sobre o que cada cor significa que você pode aplicar aos seus designs:

1. Vermelho

O vermelho tende a transmitir:

  • Energia
  • Potência
  • Paixão
  • Ame


O vermelho pode criar entusiasmo e atrai a atenção. Observe como o design do site abaixo é brilhante e enérgico.

Fantasy Shopping usa vermelho em ambas as partes do título e para apresentar um ponto mais forte para uma pergunta e no próprio design. Observe como o vermelho chama sua atenção para onde o designer deseja que ele vá.

balenciaga ecommerce sites color

XStore oferece um modelo com tema vermelho mais suave, mas continua a ter uma declaração ousada com as linhas diagonais vindo em direção ao centro. O ponto focal leva você direto ao texto principal. 

XStore

2. Amarelo

O amarelo frequentemente evoca:

  • Alegria
  • Energia
  • Calor
  • Alegria


O amarelo geralmente cria sentimentos de felicidade e leveza.

 

O Lipton Tea faz um excelente trabalho ao usar o amarelo para criar um clima brilhante e ensolarado. O chá gelado não está apenas associado a momentos felizes, mas também ao chá do sol e ao verão.

Os amarelos brilhantes neste projeto fazem você feliz e podem ajudá-lo a imaginar a diversão de um churrasco no quintal. Dá vontade de sair correndo e comprar um pouco de chá para poder fazer seu próprio chá de sol, não é?

Observe como até mesmo as fotos do produto refletem esse uso de amarelo ensolarado.

Lipton Tea - psicologia de cores para sites de comércio eletrônico

Modelo de limão também transmite calor e vivacidade por meio de seu design com um toque de amarelo nas várias páginas.

Os usuários são incentivados a mover o cursor pelo painel de navegação superior, alterando o preto translúcido para um traço amarelo. Este design não apenas destaca a energia, mas convida outras pessoas a se sentirem rejuvenescidas enquanto navegam pelo site.

limão

3. Preto e cinza

Preto e cinza geralmente criam uma sensação de:

  • Autoridade
  • Potência
  • Fortalecimento
  • Masculinidade
  • Neutralidade

Essas cores também criam um sentimento de confiança e confiabilidade.

A Harley Davidson usa pretos e cinzas de maneira muito eficaz para criar um site poderoso e masculino que fala de poder e autoridade. Observe como as cores são bastante escuras, exceto para o botão laranja CTA.

Você não pode deixar de ter seus olhos atraídos para esse botão, que efetivamente direciona o visitante do site para onde a empresa deseja que ele vá.

Leia mais sobre sites negros e web design escuro aqui.

Harley Davidson - psicologia da cor

O tema Phoenix também usa preto e cinza em seu modelo e tem uma personalidade forte e sofisticada. É um modelo elegante com o mínimo de distrações.

Esse tipo de site atrai os líderes de negócios que não querem truques e vêm ao site com um propósito. Se você estiver interessado em implementar técnicas minimalistas de web design e muito mais, você pode verificar este artigo sobre temas mínimos do WordPress.

Phoenix

4. Laranja

A laranja tende a promover:

  • Felicidade
  • Excitação
  • Calor
  • Sofisticação

Assim como o vermelho e o amarelo, o laranja pode criar uma sensação de energia e felicidade. No entanto, também é vista como uma cor mais sofisticada. Um bom exemplo do uso de laranja em um design é Sunny Delight Beverages. Como se trata de bebidas com sabor de laranja, faz sentido que usem essa cor em seu design.

Lembre-se de que parte da psicologia das cores é usar cores que o visitante do site espera que sua marca use. Sunny D utiliza esse conceito muito bem. O design usa borda laranja, botões de navegação laranja e laranja em suas imagens e logotipo. A justaposição do espaço em azul profundo e branco oferece um visual sofisticado que mostra que a bebida não é apenas para crianças, mas para todas as idades.

Sunny D

Observe como o modelo do Omega tem tanta vibração em seu design por causa da barra laranja em negrito. É um layout convidativo e todos os recursos que eles desejam destacar estão em laranja. Esteticamente, esse design simples pode ter muito valor para uma empresa em potencial.

ómega

5. Verde

O verde costuma transmitir:

  • natureza
  • Crescimento
  • Dinheiro
  • Fertilidade


O verde evoca sensações de calma e relaxamento. Freqüentemente, você verá marcas que são ecologicamente corretas ou relacionadas ao ar livre usando essa cor. Além disso, as empresas financeiras podem usar o verde para mostrar que você pode ganhar dinheiro - pense em bancos, blogs de dinheiro etc.

A John Deere é um bom exemplo do uso do verde no design de um site.

Eles usam um tom de verde muito específico e é bem conhecido em todo o mundo. Os tratores da marca vêm nas cores verde e amarelo e, portanto, só faz sentido que essas cores apareçam no design do site da John Deere.

Afinal, canções country foram escritas até mesmo sobre "John Deere Green".

Observe como o exemplo de site abaixo utiliza o verde brilhante, mas também tem um bom equilíbrio de cores neutras para evitar que o verde seja muito opressor.

Um designer profissional pode dar uma olhada no equilíbrio geral da página e certificar-se de que o texto está aparecendo de forma legível, mas que ainda vincula as cores ao conceito geral da marca, como Badgeland na Nova Zelândia usa a cor verde para refletir sua marca no site.

Este é um dos melhores exemplos de um site que utiliza o que já se sabe sobre a cor de sua marca e traduz em seu conceito de design de forma inteligente.

john deere green - psicologia da cor

Adeline Fashion combina estímulos ambientais e seu mercado dentro do modelo. Possui estética natural dentro do design, mostrando como uma marca mais voltada para a natureza pode customizar este template e ainda ter um apelo orgânico.

adeline

6. Azul

O azul geralmente é visto como:

  • Confiável
  • Calmo
  • Sábio
  • Sereno

Existem muitos tons diferentes de azul e cada tom pode criar uma emoção diferente. Por exemplo, um azul royal profundo pode criar a impressão de realeza e riqueza. Esta é uma boa cor para marcas de luxo. Por outro lado, um aqua brilhante pode criar uma sensação de juventude e descontração. Um azul claro pode criar uma sensação de calma.

Pense nas coisas que você associa a diferentes tons de azul e em qual tonalidade melhor representa sua marca. Existem muitos exemplos diferentes de empresas que utilizam a cor azul no design.

Lembre-se de que o azul é uma cor favorita entre homens e mulheres, por isso faz sentido que essa cor apareça com frequência em vários designs de sites.

Um exemplo da cor azul usada efetivamente em um conceito de design é o Skype.

O próprio nome faz você pensar no céu - e no azul do céu. O Skype incorpora essa expectativa em seu logotipo e em todo o design. Observe como eles criam um equilíbrio com algumas cores neutras e, em seguida, adicionam um toque de cor em azul com sua frase de chamariz.

Além disso, o uso de cores brilhantes pode indicar juventude, diversão ou feminilidade. Apenas certifique-se de usar essas cores com moderação, ou corre o risco de sobrecarregar o design e o visitante do site. A estética geral deve ser agradável e simples de navegar.

Além disso, esteja ciente de usar amarelos e outras cores claras que podem não aparecer no branco ou podem cansar os olhos.

Algumas pessoas preferem usar cores mais brilhantes em um design web escuro.

No entanto, um design web escuro pode não corresponder completamente ao tom de suas ofertas de produtos. Lembre-se de que um design escuro pode criar uma sensação imponente, pesada e masculina. O exemplo acima da Harley Davidson funciona muito bem com cores escuras e ousadas.

No entanto, se você está tentando vender esmalte, esse visual provavelmente não é para você.

skype

VG Strepre apresenta um paleta de cores semelhantes com seu modelo e também usa botões arredondados. A cor complementar destaca CTAs específicos e funciona bem com a sensação geral do site.

A última coisa que você quer é que seus CTAs pareçam avassaladores.

Stepre

Teste de divisão para ver quais cores funcionam melhor com seu público

 

Uma vez que a percepção individual pode ter um grande impacto sobre quais cores funcionam melhor, uma coisa inteligente a fazer em seu próprio site é descobrir quais cores seu próprio público-alvo prefere. Você pode pesquisá-los, mas as respostas podem não ser tão precisas quanto conduzir alguns testes simples de divisão para ver a quais eles respondem melhor.

Você pode configurar diferentes páginas de destino e acompanhar os resultados das conversões, o tempo gasto na página, etc.

Algumas coisas que você pode querer testar incluem:

  • Cor das manchetes
  • Cor dos botões CTA
  • Cor de fundo
  • Equilíbrio entre a cor principal e as cores neutras

Experimente combinações diferentes e veja quais funcionam melhor para o seu site. Use cores fortes e fortes para o seu CTA (vermelho, rosa brilhante, azul).

Por exemplo, a Nature Air testou 17 páginas de destino diferentes para ver qual delas tinha melhores taxas de conversão. Por meio de testes A / B, eles descobriram que as cores de CTA mais proeminentes aumentaram as conversões em até 591%.

Além disso, o Performable fez um teste no qual trocou o botão CTA da página inicial de verde para vermelho e observou um aumento de 21% nas conversões.

O vermelho chama a atenção, não importa como você o corta, e é uma cor que você deve pelo menos incorporar em seu site ocasionalmente para uma frase de chamariz. Faça seu próprio teste A / B com este conceito e veja que tipo de resultados você obtém.

Conclusões da psicologia da cor

A psicologia da cor tem tantos elementos diferentes porque as pessoas são indivíduos únicos. Mesmo a cultura da qual uma pessoa vem pode criar diferenças na forma como eles vêem as diferentes cores.

Os primeiros passos para determinar quais cores usar no design devem começar com a descoberta de quem é o seu público-alvo. Essa é uma etapa essencial para sites de psicologia de cores e de comércio eletrônico.

Em seguida, leve em consideração as cores que a maioria das pessoas associa ao tipo de produto oferecido. Olhe para sua concorrência para ver quais cores eles estão usando. Embora queira ser único, você também deseja seguir pelo menos alguns padrões convencionais.

Por fim, conduza alguns testes A / B para ter certeza de que analisou tudo corretamente e esteja aberto para alterar as coisas, se necessário.

Compreender a psicologia das cores é importante, mas não fique tão preso a ela a ponto de ignorar as técnicas básicas de design ou o bom senso.

Sobre o autor
David Attard
Autor: David AttardSite: https://www.linkedin.com/in/dattard/
David tem trabalhado na ou em torno da indústria online / digital nos últimos 18 anos. Ele tem vasta experiência nas indústrias de software e web design usando WordPress, Joomla e nichos ao seu redor. Como consultor digital, seu foco é ajudar as empresas a obter uma vantagem competitiva usando uma combinação de seu website e plataformas digitais disponíveis hoje.

Mais uma coisa... Você sabia que as pessoas que compartilham coisas úteis como esta postagem também parecem FANTÁSTICAS? ;-)
. deixe um útil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso útil e vamos colher os benefícios juntos. Obrigado por compartilhar e ser legal!

Divulgação: Esta página pode conter links para sites externos de produtos que amamos e recomendamos de todo o coração. Se você comprar produtos que sugerimos, podemos receber uma taxa de referência. Essas taxas não influenciam nossas recomendações e não aceitamos pagamentos por análises positivas.

Autor (es) em destaque em:  Logotipo da revista Inc   Logotipo do Sitepoint   Logotipo do CSS Tricks    logotipo do webdesignerdepot   Logotipo WPMU DEV   e muitos mais ...