Se você não sabe o que mudar, tente mudar as cores do seu site

Um dos maiores problemas na hora de melhorar o desempenho do seu site é não saber quais mudanças fazer. Isso já aconteceu com todos nós em algum momento. Nesses casos, a coisa certa a fazer é focar nas partes da web que são mais críticas. Com isso quero dizer as seções da sua página que recebem mais atenção ou são mais importantes para o seu modelo de negócios.

Por exemplo, se seu objetivo é que quem visita seu site acabe preenchendo um formulário, concentre-se no próprio formulário: dê mais destaque e simplifique-o o máximo possível para que seja fácil de preencher e enviar. Como eu disse antes, procure primeiro os elementos que, quando alterados, podem ter um impacto maior nos seus visitantes, pois assim você obterá resultados interessantes mais rapidamente.

Se você ainda não sabe o que mudar, algo que nunca decepciona e que é muito fácil de tentar é aplicar mudanças nas cores da sua página web. Sem nenhuma intenção de deixar de lado os deficientes visuais, fica claro que as cores do seu site são muito importantes. Muito mais do que você pode imaginar.

Existem vários estudos sobre a teoria das cores e a forma como nós humanos a percebemos. O que pode parecer apenas uma interpretação de diferentes comprimentos de onda captados pelo nosso sistema visual (olhos, nervo óptico e cérebro), esconde um enorme fundo psicológico.

Por isso, encorajo você a tentar mudar as cores de sua página web (ou de alguns elementos de alto impacto dentro dela) e estudar como a interação de seus visitantes evolui diante dessas mudanças. É exatamente isso que vou explicar hoje com um exemplo completo e real que testamos neste site.

Definição do teste A/B

Para testar quaisquer alterações em seu site, você deve usar um teste A/B. Ao fazer isso você pode garantir com dados reais e seguindo o método científico que as alterações aplicadas funcionam melhor (ou não) do que sua versão atual.

No exemplo de hoje, o que vamos fazer é testar uma mudança nas cores da primeira dobra da página de preços do Nelio A/B Testing. Essa primeira dobra tem um grande impacto em nosso negócio, pois é ela que se encarrega de exibir a tabela de preços por meio da qual nossos visitantes acabam se tornando clientes ao adquirir o plugin.

Na comparação a seguir você pode ver a versão original da primeira dobra (à esquerda) e a versão alternativa (à direita) com as diferentes cores de botões e margens e uma nova imagem de fundo:

Para testar as alterações, usamos o Nelio A/B Testing como nosso plug-in de teste A/B de referência. A primeira coisa que vamos fazer é criar um novo teste A/B de páginas, que é o elemento que vamos testar.

Fazemos isso porque podemos alterar as cores através do próprio editor de páginas do WordPress. Se não pudéssemos fazer assim porque as cores vêm através de um template de tema ou de alguma outra forma menos ortodoxa –a experiência nos diz que os estilos de cores podem ser definidos de várias maneiras no WordPress–, outra opção que sempre funcionaria seria use um teste A/B de estilos CSS, onde podemos aplicar as novas cores adicionando novas regras de estilo CSS na variante.

Na tela de edição do teste A/B, selecionamos a página base que queremos testar (nossa página de preços) e criamos uma nova variante, que editaremos posteriormente:

Outro aspecto importante a destacar é definir quais métricas queremos que a ferramenta de teste A/B acompanhe para depois descobrir qual das duas versões funcionou melhor. Definimos isso na seção de metas e ações de conversão, como você pode ver na captura de tela acima.

No nosso caso, definimos cinco metas, que nos darão cinco resultados diferentes para o mesmo teste A/B. Primeiramente definimos a meta que mede a quantidade de cliques nos botões de compra de qualquer um dos planos que estão na tabela de preços. Em seguida, temos 3 metas adicionais que medem os cliques de cada plano individualmente. E, finalmente, temos uma meta que mede o número real de compras feitas após ver cada versão da página em teste.

Por fim, editamos a versão alternativa da página. Isso nos leva ao editor de páginas do WordPress que estamos usando (no nosso caso, o editor de blocos), como você pode ver na captura de tela a seguir:

Aqui só temos que mudar as cores dos botões de ação de cada uma das três colunas e do elemento que usamos para criar a margem superior. E também alteramos a imagem de fundo para outra que enviamos para nossa biblioteca de mídia do WordPress.

Assim que a página alternativa com as alterações que queremos testar estiver pronta, é hora de voltar para a tela de edição do teste A/B e iniciá-lo. Isso dividirá automaticamente o tráfego para nossa página de preços em dois. Metade de nossos visitantes interagirá com a versão original, a outra metade verá a variante.

Dessa forma, podemos verificar qual versão da página funciona melhor em relação às cinco metas de conversão. Agora só precisamos esperar os resultados para nos dar a informação que buscamos.

Análise dos resultados do teste

Eventualmente, se uma variante for melhor que a outra, a própria ferramenta de teste A/B nos dirá isso. No teste A/B que descrevemos antes, os resultados foram claros. A versão com as novas cores é pior do que a que já tínhamos. Você pode ver o detalhe dos resultados para cada uma das cinco metas definidas no teste na galeria a seguir:

A variante não apenas obteve menos cliques nos botões de ação, mas também resultou em menos vendas (quase 22% menos).

Isso pode parecer bobo, mas se ao invés de testar as alterações com um teste A/B você as alterar diretamente em seu site sem testá-las antes, você corre o risco de introduzir alterações que podem funcionar pior. Este poderia ter sido o nosso caso, já que as mudanças que queríamos fazer não funcionaram tão bem quanto pensávamos.

Você pode achar que mudar as cores a qualquer momento é uma boa solução, porque você gosta mais das novas. Você encontrou uma nova paleta de cores que acha muito melhor do ponto de vista estilístico e optou por usá-la diretamente. Mas isso é um grande erro. O fato de você gostar mais de uma cor do que de outra não é importante. O importante é verificar com atenção se esse é realmente o caso do seu público e dos seus visitantes. E você pode fazer isso em um ambiente controlado por meio de um teste A/B.

Imagem em destaque por Jeremy Thomas no Unsplash.