A verdade sobre as melhores cores de botão de chamada para ação para o seu site

Muito se tem falado na Internet sobre as cores que funcionam melhor em uma página web. Você encontrará milhares de artigos sobre isso. Desde aquele em que um usuário pergunta qual cor é melhor e recebe respostas contraditórias (que surpresa, hein?), até o conhecido artigo que explica os testes que o Google fez com muitos tons de azul para seus links.

A realidade por trás de tudo isso é que ninguém pode garantir que uma cor específica funcionará melhor ou pior em um site sem experimentá-la. Se eles disserem o contrário, eles estão mentindo para você. E tenho certeza que você não gosta de ser enganado.

Nem eu, então quando eu estava lendo este artigo do Yahoo! Small Business onde dizem que as melhores cores para usar nos botões são vermelho, verde e laranja ou amarelo, a primeira coisa que pensei é que deveria tentar em nosso próprio site.

Se você acompanha a série de artigos que escrevi mensalmente sobre testes A/B, com certeza já sabe que uma das páginas mais importantes do nosso site é a landing page do Nelio Content, junto com sua página de preços. Em ambas as páginas, os botões de call-to-action que temos são laranjas.

O vermelho ou o verde funcionarão melhor em comparação com a cor laranja que já usamos em nosso site para botões de call-to-action? Esta é a pergunta que me fiz e que vou responder aqui com dados reais dos nossos visitantes. Não é opinião subjetiva. Dados reais.

Vamos lá!

Criando um teste A/B de CSS

A maneira mais fácil de alterar a cor dos botões em uma página é adicionar algumas regras CSS adicionais para aplicar a nova cor. Você coloca uma nova regra background-color no botão com a cor desejada e pronto. Mole-mole.

Com o Nelio A/B Testing você tem a possibilidade de criar um teste A/B de estilos CSS para testar diferentes variantes de regras CSS adicionais. Você só precisa criar um novo teste e selecionar a opção CSS no seletor de tipo de teste:

Isso o levará ao editor de teste, onde a primeira coisa que você precisa fazer é criar as variantes. Tenha em mente que neste tipo de teste, a primeira variante é aquela que mostra a página com sua aparência atual, sem CSS extra.

Então você cria uma variante para, no nosso caso, cada uma das cores adicionais que vamos testar: uma para verde e outra para vermelho. A primeira variante já é laranja, então com isso temos tudo pronto.

Para cada variante adicional, você pode editá-la para adicionar as regras CSS adicionais que alteram a cor dos botões. As regras de CSS necessárias dependerão do tema que você usa no seu WordPress. No editor de CSS fornecido pelo Nelio A/B Testing, você pode ver em tempo real como suas novas regras de CSS mudam a aparência do seu site. Isso irá ajudá-lo a verificar se você está fazendo certo.

Aqui está a aparência dos botões de ação no editor de estilo CSS de cada variante do teste A/B que estamos configurando. Como mencionado, primeiro você tem a versão original, com os botões laranja. As outras duas variantes incluem o CSS para deixar os botões verdes e vermelhos, respectivamente:

Assim que tivermos as variantes prontas, é hora de definir as metas de conversão que queremos medir. Nesse caso, como você pode ver na captura de tela do editor de teste, temos dois objetivos.

A primeira meta medirá os cliques nos botões de ação, enquanto na segunda também mediremos esses cliques, mas apenas aqueles que acontecem na página de preços do Nelio Content.

Por fim, observe que os testes A/B de CSS afetarão todas as páginas do seu site. Para limitar esse comportamento no Nelio A/B Testing, na barra lateral direita do editor de teste A/B você tem a opção de limitar o escopo do teste. Eu fiz isso para que isso afetasse apenas a página principal do Nelio Content e a página de preços.

Temos tudo pronto para começar o teste. Feito isso, o Nelio A/B Testing se encarrega de dividir o tráfego que visita essas duas páginas para você e mostrar as diferentes variantes de cores, além de acompanhar as conversões (cliques nos botões).

Lembre-se, você só precisa esperar que seus visitantes passem por essas páginas para começar a ver os resultados.

Analisando os resultados

O teste A/B das cores dos botões está sendo executado em nosso site há um mês e meio no site em espanhol e quase um mês no site em inglês. Na versão em inglês, paramos antes porque alcançamos resultados estatisticamente significativos mais rapidamente com um alto valor de confiança.

Mas vamos começar com os resultados do teste em nossa web em espanhol:

Como você pode ver na captura de tela acima, para o objetivo de medir cliques em ambas as páginas, parece que as variantes verde e vermelha dos botões têm um desempenho um pouco melhor do que a versão laranja original. No entanto, as estatísticas nos dizem que a melhora não é substancial e, portanto, não podemos dizer que essas cores sejam melhores que o laranja.

Para o segundo objetivo, que mediu apenas cliques na página de preços do Nelio Content, vemos que também não há uma cor vencedora clara. Podemos até observar como o verde aqui tem um desempenho pior que o laranja. Embora não possamos tirar conclusões fortes com os dados que o Nelio A/B Testing coletou de nossos visitantes:

Vamos agora ver os resultados do teste na versão em inglês da página. Aqui, na primeira meta, que mediu cliques em qualquer uma das duas páginas do Nelio Content, vemos que tanto o verde quanto o vermelho são cores que produzem uma melhor taxa de cliques.

Além disso, aqui podemos afirmar que a cor verde é a cor vencedora da prova. Os resultados são estatisticamente significativos com um grau de confiança superior a 99%. Verde é a melhor cor que podemos usar em nosso site em inglês para os botões das páginas de conteúdo do Nelio.

Se observarmos apenas os cliques na página de preços do Nelio Content (segunda meta do teste), veremos que os resultados são consistentes com os da primeira meta do teste:

Tendo visto isso, podemos dizer que o verde é a cor que melhor funcionou para nosso público em inglês nas páginas do Nelio Content. No entanto, para o nosso público espanhol, não conseguimos encontrar uma cor que funcione melhor do que a que já tínhamos.

Conclusões

Aqui mostrei os resultados de um teste A/B com dados reais dos visitantes que navegaram por duas das páginas mais relevantes do nosso site. E você conseguiu verificar que o que funciona melhor para um público específico não precisa funcionar melhor para outro.

Os botões verdes funcionam melhor para nossos visitantes que falam inglês. Mas isso não significa que seja o mesmo para outros visitantes. Por esse motivo, alteramos apenas a cor dos botões de ação das páginas do Nelio Content para verde na versão em inglês dessas páginas. Os em espanhol permanecem laranja.

Eu seria tolo se dissesse que você precisa usar a cor verde em sua página. Ninguém deveria lhe dizer isso. Nem eu, nem ninguém. Não tenho ideia se o verde funcionará para você.

Por isso, antes de prestar atenção nos muitos gurus que você encontrará na Internet, faça você mesmo o teste. Criar o teste A/B é muito fácil. E é a única maneira de descobrir o que funciona (ou não) melhor no seu site. Com seu público real.

Imagem em destaque por Robert Katzki no Unsplash.