Saiba qual a melhor cor para o botão comprar

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

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.