Qual cor de botão converte o melhor?

Publicados: 2021-07-22

A cor é uma parte essencial de como experimentamos o mundo. Mas as cores realmente importam para a otimização de conversão? A cor de um botão pode garantir melhor desempenho para uma frase de chamariz (CTA)?

Nenhuma cor é melhor do que outra. Em última análise, o que importa é o quanto a cor de um botão contrasta com a área ao seu redor.

Esta postagem explica o que realmente importa para os CTAs e as cores dos botões do site. Os estudos “definitivos” que você leu estão longe de ser definitivos, e uma abordagem superficial de teste (ou seja, tente qualquer cor de botão aleatória) não o ajudará a construir um programa de experimentação rigoroso.

Curso de Otimização de Conversão

Por Peep Laja

As perguntas da pesquisa são apenas uma parte da torta de otimização de conversão. Aprofunde-se em como otimizar todas as suas pesquisas de conversão neste curso gratuito.

  • Este campo é para fins de validação e deve ser deixado inalterado.

As associações psicológicas de cores

Cores diferentes podem nos elevar ou nos derrubar. Há também um lado psicológico nas cores - certas cores estão associadas a diferentes qualidades e emoções.

Em diferentes culturas, cores diferentes significam coisas contraditórias. Por exemplo, o branco é a cor do luto e da morte na cultura chinesa, mas a cor da morte no Brasil é o roxo. Amarelo simboliza felicidade e paz no hinduísmo, mas representa tristeza na Grécia e ciúme na França.

Pessoas de países tropicais respondem favoravelmente a cores quentes; pessoas de climas do norte preferem cores mais frias e assim por diante.

Diz-se também que, na cultura norte-americana, a cor azul cria um sentimento de confiança, mas também estimula o apetite. Supostamente, verde significa natureza, frescor, crescimento e dinheiro. O amarelo traz consigo o sol e a felicidade.

alguma verdade nessas interpretações, mas podemos traduzir essas supostas associações em elevações de conversão?

Experimentos com uso de cores

O vermelho pode torná-lo um vencedor ...

Quase universalmente, o vermelho significa parar. Vermelho significa perigo. Vermelho significa quente. E ao analisar os resultados das Olimpíadas de 2004, os pesquisadores descobriram que o vermelho também significa domínio.

Eles examinaram o boxe, o taekwondo, a luta greco-romana e a luta livre, basicamente todos os esportes um contra um. Nesses esportes, os competidores recebem uniformes vermelhos ou azuis aleatoriamente, de forma que nenhum equipamento é possível.

Comparação de roupas de luta livre com as cores azul e vermelha
Os competidores com roupas vermelhas tendem a ter um desempenho (ligeiramente) melhor nas Olimpíadas, mesmo quando as cores são atribuídas aleatoriamente. (Crédito da imagem )

Em 16 das 21 rodadas, aqueles que vestiam vermelho venceram. Tendências semelhantes foram encontradas no Campeonato Europeu de Futebol de 2004. Os pesquisadores têm o cuidado de apontar que o efeito é sutil, na melhor das hipóteses. E esse vermelho pode ser um fator decisivo apenas entre concorrentes equilibrados - mas ainda existe.

“Descobrimos que usar vermelho está consistentemente associado a uma maior probabilidade de vitória”, escreveram os pesquisadores Russell Hill e Robert Barton da Universidade de Durham.

... ou um perdedor

Pesquisadores da Universidade de Rochester descobriram que a cor vermelha também pode nos impedir de dar o nosso melhor nos testes. Em seus experimentos, eles queriam descobrir se a percepção do vermelho afetaria os resultados dos testes de QI ou dos principais exames acadêmicos. No contexto acadêmico, a cor vermelha é tradicionalmente associada a erros de marcação.

Quatro experimentos mostraram que apenas uma breve percepção da cor teve um impacto negativo nos resultados. “ Isso levou as pessoas a piorar sem o seu conhecimento ”, disse Elliot, um dos autores.

Os resultados mostraram que “deve-se ter cuidado em como o vermelho é usado em contextos de realização”, relataram os pesquisadores, “e ilustrar como a cor pode atuar como uma dica ambiental sutil que tem importantes influências no comportamento”.

Cor e gosto de chocolate quente

teste de cor de embalagem de chocolate quente
O que torna aquele chocolate quente tão bom? Pode ser da cor do recipiente de onde você bebe. (Crédito da imagem)

Acontece que a cor do recipiente em que a comida e a bebida são servidas contribui para o sabor percebido. Isso é verdade, pelo menos, para beber chocolate quente, explica a pesquisadora Betina Piqueras-Fiszman.

Piqueras-Fiszman e seus parceiros de pesquisa tiveram 57 participantes experimentando chocolate quente servido em recipientes de quatro cores diferentes: branco, creme, laranja e vermelho. Todos eram do mesmo tamanho e todos eram brancos por dentro.

O sabor do chocolate quente servido em xícaras de cor laranja e creme foi melhor avaliado pelos participantes. No entanto, a doçura e o aroma foram considerados semelhantes, independentemente da cor.

“Não existe uma regra fixa afirmando que o sabor e o aroma são realçados em uma xícara de uma determinada cor ou tonalidade”, reconheceu Piqueras-Fiszman. “Na realidade isso varia dependendo do tipo de alimento, mas a verdade é que, à medida que esse efeito ocorre, mais atenção deve ser dada à cor do recipiente, pois ele tem mais potencial do que se poderia imaginar.”

Se a cor pode afetar nosso desempenho atlético, desempenho acadêmico e percepção do paladar, também pode afetar nossa decisão de clicar?

Qual é a melhor cor para botões de CTA?

O vermelho pode aumentar suas chances de ganhar nos esportes. Seu próximo chocolate quente pode ficar melhor em uma xícara de laranja. Mas o que isso tem a ver com conversões na web? O vermelho realmente dá a você uma vantagem para o botão de CTA?

Verde vs. vermelho: uma guerra de botões de apelo à ação

Ao longo dos anos, houve controvérsia sobre qual cor converte melhor para o botão CTA. A Unbounce declarou que o futuro dos botões CTA era “BOB” (botões laranja grandes).

Há também uma série de estudos de caso de teste A / B interessantes nos quais um botão laranja ou vermelho foi testado em comparação com outras cores, geralmente verde.

Quando você pensa sobre isso, o verde está mais associado a emoções positivas. Quando os semáforos ficam verdes, significa que você pode dirigir. Vice-versa com vermelho. A cor está associada principalmente a emoções negativas.

Então, o que você pensa? Qual cor de botão venceu? Aqui está o que os estudos de caso têm a dizer.

Estudo de caso 1

comparação do botão dmix vermelho vs verde

Dmix escreveu sobre um teste de cores de botão verde e vermelho. Em seus testes com 600 assuntos, eles descobriram que as conversões aumentaram 34% quando usaram um botão vermelho.

Estudo de caso 2

comparação das cores do botão "começar agora" (vermelho x verde)
Crédito de imagem

O próximo teste é cortesia da HubSpot. Eles executaram um teste semelhante com botões verdes e vermelhos no site de um cliente. Eles fizeram o teste por alguns dias e, no total, tiveram mais de 2.000 visitas.

Seu resultado? O botão vermelho superou o botão verde em 21%.

Estudo de caso 3

múltiplas variantes de cores de botões cta
(Crédito da imagem)

O terceiro teste é cortesia da VWO. O cliente deles era um site de comércio eletrônico que vende telefones celulares e acessórios. Eles testaram as cores dos botões “Compre agora” no site. A competição incluiu um botão branco com texto verde, botão verde com texto branco e botão vermelho (laranja escuro) com texto branco.

E o vencedor foi - você adivinhou - o botão vermelho, desta vez com um aumento de conversão de 5%.

Estudo de caso 4

monetate laranja vs teste de cor do botão azul
Crédito de imagem

Este estudo, em vez de comparar botões avermelhados e verdes, olhou para um botão laranja e azul. Em seus testes, o botão azul venceu, produzindo um aumento de 9%.

Apesar da “virada” pelos botões azuis, os botões vermelhos ou avermelhados foram dominantes, uma tendência apoiada por outros estudos também.

E, no entanto, Peep não escreveu o seguinte sobre cores em web design nesta postagem:

Gostei deste tweet de Naomi Niles:

Naomi tweetou

Eu não poderia concordar mais. Esse tipo de narrativa dá às pessoas uma ideia errada sobre o que é o teste. Sim, claro - às vezes a cor afeta os resultados - especialmente quando afeta a hierarquia visual, faz a chamada para ação se destacar melhor e assim por diante. Mas “verde vs laranja” não é a essência dos testes A / B. Trata-se de compreender o público-alvo. Fazer pesquisas e análises pode ser entediante e definitivamente um trabalho árduo, mas é algo que você precisa fazer.

Para dar um grande impulso às suas conversões, você precisa fazer uma pesquisa de conversão. Você precisa fazer o trabalho pesado.

Ganhos sérios em conversões não vêm de truques psicológicos, mas da análise do que seus clientes realmente precisam, a linguagem que ressoa com eles e como eles querem comprar. É sobre relevância e valor percebido da oferta total.

Por que você deve ser cético em relação aos estudos de caso de cores de botões

Vamos dar uma olhada em um último exemplo, que ajudará a fazer muito mais sentido. A RIPT Apparel testou a cor do botão “Compre agora” para ver se isso faria alguma diferença em seus resultados financeiros.

Esta é a versão original:

cor do botão original ript
Crédito de imagem

E este era o novo botão:

teste de cor do botão ript
Crédito de imagem

Para nenhuma grande surpresa, os números de conversão aumentaram. Olhando para os casos anteriores, pode-se dizer que se eles mudassem o botão para vermelho ele poderia converter ainda melhor. Bem, não exatamente.

Dê uma olhada no original novamente. Você vê algo que deveria estar lá, mas não está? O original está sem um botão! O CTA “Compre agora” se perde no design. Você pode ver o novo botão claramente, independentemente de ser verde, vermelho, amarelo ou qualquer uma das várias cores.

Foi assim, infelizmente, que começou a grande polêmica das cores dos botões. Você vê resultados surpreendentes que sugerem que uma cor sempre converte o melhor. Isto é, até você olhar mais de perto.

Na maioria das vezes, esses testes revelam que, anteriormente, não havia botão ou o botão é apenas muito mais proeminente. Ele se destaca do resto da página e converte melhor porque é uma cor de alto contraste, não uma única cor.

Monetate, que executou o teste do botão azul vs. laranja, tinha o seguinte:

Mas, se você se aprofundar nos resultados, verá que os botões laranja quase sempre foram testados contra um controle de nenhum botão. Em casos como esses, não é surpresa que os botões laranja façam diferença. Claro que sim ... quando comparado a nenhum botão! Praticamente qualquer botão fará a diferença, independentemente da cor.

No caso da RIPT Apparel, eles testaram uma versão final, com um botão amarelo:

botão amarelo
Crédito de imagem

As conversões aumentaram 6,3%. Então, o amarelo vence o verde? Não não não.

A cor do botão CTA faz pouca diferença por si só

A cor do botão tem pouco ou nenhum efeito por si só. O que é mais importante é como isso muda a hierarquia visual da página e como faz com que a frase de chamariz se destaque.

Também depende do que estamos acostumados a ver. O Bing aumentou sua receita em US $ 80 milhões ao encontrar a cor exata de azul para seus links. As pessoas estão acostumadas a ver links azuis. Quando a World Wide Web surgiu, o azul era a cor dos links. (Os engenheiros da Microsoft que trabalharam nisso também admitiram que “... era um tom de azul bastante semelhante ao usado pelo Google.”)

Não há melhor cor para conversões. No caso do botão amarelo, eles também adicionaram urgência (“US $ 10 somente por 24 horas”), o que foi demonstrado repetidas vezes para aumentar as conversões. No caso do Bing e do azul, foi o poder da convenção em ação.

Voltar para HubSpot

O mesmo pode ser dito para o exemplo do HubSpot. Dê uma olhada nele novamente:

hubspot
Crédito de imagem

Você notou algo que pode contribuir para que o botão vermelho seja uma escolha melhor? Algo no design geral da página?

Verde é uma das cores principais do site! E o que acontece quando você adiciona um botão verde à mistura? Não vai se destacar. Eles poderiam ter testado o verde contra quase qualquer outra cor brilhante e teriam visto os mesmos resultados “surpreendentes”.

Para crédito da HubSpot, eles dizem no estudo de caso que "não podem generalizar esses resultados para todas as situações". Mesmo assim, um botão verde em uma página com um design verde dominante? Sério?

Conclusão

A cor é importante para seus apelos à ação. Mas dizer que uma cor converte melhor do que outra não é válido. Não existe uma melhor cor universal. O que funciona em um site não funciona necessariamente em outro.

A hierarquia visual é importante. O mesmo acontece com o destaque dos botões de CTA com uma cor de alto contraste. O debate “verde x vermelho” é menos sobre a cor em si e mais sobre se a cor ajuda o botão a se destacar.

Crédito de imagem em destaque