Saiba qual a melhor cor para o botão comprar

botao-verde

Muitos lojistas e desenvolvedores sabem da importância que a cor dos botões call-to-action (os que levam à ação que se espera.) têm para o aumento da taxa de conversão de uma loja virtual e isso não é nenhuma novidade.

Mas qual é a cor que mais gera conversão?

Há algum tempo, tenho ouvido muitas pessoas afirmarem que a cor que mais converte views em cliques é o verde, porém, sempre me mostrei resistente à ideia de analisar um elemento da página de forma individual sem que fosse observado o todo.

Um dos mais importantes princípios da Gestalt diz que o todo é maior que a soma de suas partes. Mas o que isso quer dizer?

O botão é apenas um dos elementos da página e não deve ser avaliado separadamente, pois quando os elementos são vistos juntos, seu cérebro irá interpretar todo o conjunto ao mesmo tempo. (Faço um paralelo com uma música. Não se pode julgar uma música considerando apenas um instrumento, pois quando você a ouve, percebe todos os sons ao mesmo tempo.)

Sendo assim, como fazer pra que o botão trabalhe em conjunto com os demais elementos visuais da página para gerar mais cliques?

Foi exatamente essa pergunta que o pessoal da Hubspot fez e para atestar a eficácia do botão verde, elaboraram um teste A/B em uma situação real para saber se o verde realmente gerava mais conversão.

As cores escolhidas para o teste foram o verde e o vermelho por serem opostas. O verde carrega consigo a conotação de “Siga” enquanto o vermelho simboliza o “Pare”.

Inside Banner Mandaê

Qual a sua opinião?

Qual gerou mais cliques?

Note que a única coisa diferente nas duas páginas é a cor do botão. Textos e diagramação foram mantidos exatamente iguais tanto numa quanto na outra.

Talvez você se surpreenda com o resultado, mas após 2.000 views, o botão vermelho recebeu 21% mais cliques que o verde.

É isso mesmo! Apesar do peso negativo que a cor traz, ela fez com que o número de usuários que efetuaram o cadastro aumentasse em quase ¼.

Não se sabe exatamente os fatores que levaram ao aumento significativo da conversão para quem visualizava o botão vermelho, mas repare na quantidade de verde que há na página comparado com a quantidade de vermelho.

Há muito mais verde na página (alguns inclusive com o mesmo tom do botão), isso fez com que o botão verde ficasse camuflado, enquanto o vermelho se destacava.

Isso significa que a cor ideal para o botão call-to-action é aquela que é imediatamente percebida na página de forma que o usuário saiba onde precisa clicar sem ter que procurar ou mesmo pensar. Por isso, para destacar o seu botão escolha cores que chamem a atenção, com bastante contraste com os demais elementos do site, em um tamanho que seja fácil de localizá-lo e, acima de tudo, faça testes A/B para se certificar que você realmente fez a escolha certa.

Portanto, contrate um bom profissional de usabilidade, fuja de falsos paradigmas e aposte em cores diversificadas.

Diego Jusinskas é especialista em User Experience da VTEX, empresa especializada em tecnologia para o comércio eletrônico.
  • Todos Fornecedores
  • Plataformas
    • Gestão de Anúncios
    • Atendimento ao Cliente
    • E-Mail Marketing
    • Sistema de ERP
    • Pagamento Online
    • Mídias Sociais
    • Plataforma de E-Commerce
  • Serviços
    • Escola Especializada
    • Logística
    • Agência Especializada
 
Moovin
EZ Commerce
Rakuten
Bling
Accesstage
Mailbiz
LojaMestre
E-Goi
Neoassist
DLojavirtual
Dotstore
Ciashop
Seri.e Design
Web Jump
GhFly
E-Millennium
Bis2Bis
Bluefoot
F1soluções
Enviou
Xtech Commerce
ComSchool
Brasil na Web
Nação Digital
Trezo
E-Commerce Logística
Softvar
SoS Loja Virtual
World Pay
Tray
Socialrocket
Qwintry
Mandaê
Jet Business
E-completo
Braspag
 

7 COMENTÁRIOS

  1. Muito bom post. Esta questão das cores do botão é muito importante na identificação sempre do próximo passo em direção a uma possível conversão.

  2. Sou a favor da cor verde pois temos como intuição e percepção uma cor de ação positiva. Para tudo o verde é o ok, o sim o certo etc…

    Abs

  3. Eu já fico com o vermelho, pois acredito que é uma forma de chamar a atenção principalmente dos olhos. O verde como demostra que você pode seguir, trará um pouco de “comodismo” e acabamos passando despercebido. O vermelho te força a olhar a informação que há dentro do botão.

    http://www.redeseciashop.com.br

  4. Concordo com ideias assim.
    Também mudei os links para vermelho e os resultados mudaram.
    O azul ficou batido demais e muitas pessoas não gostam dele.
    O verde é rotineiro.
    Vermelho chama atenção e convida a pessoa a clicar nele.

    É isso.

  5. Olá Diego,
    Recentemente estive em uma palestra de um, provável, colega de trabalho seu, o Tiago Luz, que também trabalha para a VTEX. Porém o mesmo sempre fala sobre o poder dos botões VERDES! Que o verde sim faz diferença no hora da compra, ele citou alguns cases em que aconteceram o contrário do que você citou neste post, onde pessoas trocaram o botão vermelho pelo verde e tiveram 10, 20, ou até 30% de conversões a mais. Achei de certa forma engraçada esse divergência, tendo em vista que vocês trabalham para a mesma empresa.
    E agora? Vermelho ou Verde?

    http://www.weebo.com.br

    • Olá Ivan,
      é muito comum encontrarmos divergências de opiniões dos profissionais da área de usabilidade.
      Eu sempre defendo que a usabilidade da loja é algo que deve ser analisado caso a caso, e NÃO RECOMENDO realizar alterações baseado em resultado que os outros sites apresentaram.
      O objetivo desse post é exatamente o de desmitificar o poder da cor verde e mostrar que o conjunto todo SOMADO à cor do botão, pode trazer resultados surpreendentes.
      Minha recomendação é que você realize um teste A/B para descobrir qual cor irá funcionar melhor no SEU caso.
      E reafirmo o que disse no final do post. Fuja de falsos paradigmas e teste cores diversificadas pra descobrir qual traz melhores resultados pra sua loja.
      Abraço

      http://www.vtex.com.br

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here