Testando estilos diferentes nos botões de checkout

Hoje trago para vocês mais um teste A/B que estamos executando há alguns meses. Como sempre nesta série de artigos mensais, vamos ver detalhadamente a hipótese de melhoria que fizemos, a sua aplicação através da criação de variações de uma página do nosso site e os resultados que obtivemos.

Há algum tempo estávamos estudando a cor dos botões de ação na página principal do Nelio Content. Graças a um teste A/B de estilos CSS, pudemos ver como a cor verde funciona melhor para nossos visitantes dessa página que falam inglês.

Não podemos assumir que este será o caso de qualquer página. É por isso que hoje vamos testar a cor e o tamanho dos botões de checkout da tabela de preços que aparece na página de compra do Nelio A/B Testing.

Definição do teste A/B

Nossa hipótese de melhoria é que alterar a cor e o tamanho dos botões de checkout na tabela de preços do Nelio A/B Testing gerará mais cliques nesses botões e, consequentemente, teremos mais vendas.

A versão original da tabela de preços do Nelio A/B Testing mostra os três planos que vendemos, cada um com seu preço, detalhes e um botão para assinar o serviço. Você pode vê-lo na captura de tela a seguir:

Os botões são de uma cor cinza que se destaca pouco, com exceção do plano profissional, que possui um botão azul escuro para dar mais ênfase a este plano em relação aos outros dois.

A primeira coisa que vamos verificar é se mudar a cor desses botões para torná-los mais marcantes é melhor ou não. Para isso, a versão alternativa que propomos inclui uma mudança de estilos CSS com novas cores, como você pode ver abaixo:

Mantivemos o plano profissional em destaque, mas agora os outros planos são azul escuro e esse plano intermediário tem uma cor laranja mais proeminente. De acordo com estudos em psicologia das cores, o laranja é uma boa opção para botões de ação, por isso decidimos escolher esse laranja que você viu na imagem anterior para o plano profissional.

Como nossa hipótese afirmava que o tamanho dos botões também deve afetar seu desempenho, mantivemos as alterações nas cores propostas na variação anterior para criar uma nova em que os tamanhos dos botões foram aumentados. Você pode ver essa alteração na captura de tela a seguir:

Portanto, temos três versões diferentes dos estilos CSS da tabela de preços do Nelio A/B Testing:

• O original, sem alterações de estilos.
• Uma primeira variante com cores mais proeminentes nos botões.
• Uma segunda variante com cores proeminentes e um tamanho de botão maior.

Com todo esse trabalho feito, podemos traduzir isso em um teste A/B de estilos CSS. Para isso, o Nelio A/B Testing permite que você crie um teste A/B de diferentes estilos CSS com os quais você pode facilmente testar mudanças de estilo no WordPress.

Criamos o novo teste CSS A/B e as três alternativas dentro dele. Na verdade, as capturas de tela que você viu antes das variações são capturas de tela do editor de estilo CSS que o Nelio A/B Testing inclui para criar as alternativas.

Como você pode ver na captura de tela acima, limitamos o escopo do teste à página de preços do Nelio A/B Testing, bem como ao fato de que definimos cinco metas a serem medidas no teste:

• Cliques nos botões de qualquer plano.
• Clica nos botões do plano básico.
• Cliques nos botões do plano profissional.
• Cliques nos botões do plano empresarial.
• Quantidade de compras.

Com tudo isso criado, algo que não levará mais de 10 minutos, iniciamos o teste e aguardamos os resultados. Agora é a vez do Nelio A/B Testing fazer o trabalho. Nosso plugin se encarrega de dividir o tráfego de entrada entre as diferentes variações e contar as conversões em cada meta definida no teste A/B.

Análise dos resultados do teste A/B

Este teste A/B foi executado por três meses em nosso site. Os resultados podem ser vistos abaixo. Vamos analisar cada objetivo em detalhes para entender as conclusões que tiramos desse teste.

O primeiro objetivo foi mensurar os cliques que foram feitos em qualquer um dos botões dos planos da tabela de preços. Nesse caso, os resultados mostram que a variante com as cores alteradas consegue 17,2% mais cliques. Por outro lado, a variante que mudou de cores e tamanhos é 15% pior que a versão original da página.

No entanto, nenhum desses números alcançou um nível de confiança estatística suficiente para identificar claramente uma versão vencedora para esse objetivo.

A segunda meta contou cliques apenas nos botões do plano básico. Neste caso, os resultados são semelhantes ao objetivo anterior. Temos a versão com cores alteradas como a melhor das três e a versão com cores e tamanhos como a pior.

Da mesma forma, as estatísticas não são capazes de identificar a versão com as novas cores como um vencedor claro com suficiente confiança.

O caso do terceiro gol, onde medimos os cliques no plano profissional, é um pouco diferente. Como antes, a versão com as cores é melhor e a versão que combina cores e tamanhos é pior. No entanto, agora as estatísticas nos dizem que claramente a versão vencedora tem confiança suficiente.

Podemos dizer que usando cores mais destacadas conseguimos um número maior de cliques. O botão laranja funciona melhor que o botão azul que tínhamos antes.

No caso de cliques no plano empresarial, aqui voltamos ao mesmo estado dos dois primeiros objetivos. Mas aqui as diferenças entre a variante original e a variante com as cores alteradas são insignificantes. A versão que parece muito pior é aquela que inclui mudanças de cor e tamanho.

Todo esse material de cliques é bom. Mas se olharmos apenas para os resultados anteriores, teremos uma visão parcial da realidade.

Por isso, acrescentei a última meta na qual medimos o número de compras realizadas por cada variante. Você pode obter uma variante que obtenha mais cliques, mas se não conseguir obter mais vendas também, você estará escolhendo um falso vencedor.

Nos resultados a seguir vemos que é exatamente isso que acontece. A versão com as novas cores atinge 24,5% menos vendas, enquanto a versão que combina cores e tamanhos vende 16,6% menos que a versão atual da nossa página (a que não mudou).

Com esses resultados, o que temos a ver é que o funil de conversão é complexo e, embora muitas vezes o dividamos em fases e contemos as microconversões, não devemos perder de vista o quadro todo.

A vantagem de criar testes A/B multi-objetivos é que podemos ter todas as perspectivas que desejamos para obter uma visão completa do desempenho (ou ruim) do nosso site. Só assim poderemos ter a confiança necessária para escolher um vencedor com total tranquilidade ao analisar os dados dos resultados do teste A/B.

Imagem em destaque por Grooveland Designs no Unsplash.