Como e por que você deve criar testes A/B de suas landing pages de e-commerce

Lembro-me, há muito tempo, da primeira vez que desci a principal avenida comercial de Chicago, a Michigan Avenue, fiquei absolutamente maravilhada com as vitrines de mais de uma loja. A loja da Nike foi uma grande homenagem a Michael Jordan, a loja de brinquedos FAO Schwarz foi um espetacular miniparque de diversões e assim por diante. Você entrou e acabou levando algo com você, só para levar uma lembrança da experiência

O equivalente a uma vitrine física em sua loja online é sua Landing Page. Uma landing page é uma página crucial do seu site: em muitos casos é a primeira página que um visitante verá depois de fazer uma pesquisa no Google ou depois de ler um post em seu blog.

As pessoas costumam pensar que a landing page é a página inicial do seu site e, portanto, que existe apenas uma. Nada poderia estar mais longe da verdade. Este tipo de páginas são as páginas que concebemos como pontos de entrada para o nosso website. É o que atrai a atenção do visitante, o mantém em nosso site e inicia sua experiência de compra. Assim, por exemplo, em nosso site Nelio, algumas das landing pages que temos para mostrar o Nelio A/B Testing são:

• Página inicial do Nelio A/B Testing
• Nelio A/B Testing para o seu negócio
• Nelio A/B Testing para e-commerce
• etc

Cada uma dessas páginas apresenta nosso produto de uma perspectiva ligeiramente diferente para responder aos diferentes tipos de perfis que podem estar interessados ​​em nosso produto. Assim, por exemplo, a landing page de um e-commerce enfatiza características ou funcionalidades de sites que possuem um e-commerce. Eles são criados com o objetivo de converter clientes em potencial. E é por isso que seu principal objetivo nessas páginas é otimizar sua taxa de conversão.

Neste post veremos as principais características de uma landing page e as melhores práticas para melhorar sua taxa de conversão.

Recursos de uma página de destino de comércio eletrônico

Como você já viu, uma landing page de e-commerce é uma página da web autônoma criada especificamente para fins de marketing. É a página na qual um visitante “aterra” quando clica em um link, seja de um anúncio, de um resultado de mecanismo de pesquisa ou de uma campanha promocional.

O objetivo de uma landing page é fazer com que os clientes concluam uma determinada ação, que no caso de um e-commerce é principalmente fazer uma compra. Uma das principais diferenças de uma landing page em relação a outras que você possa ter na web é, por um lado, que ela é customizada para se adequar a um perfil de visitante específico: os títulos, textos, imagens e depoimentos são específicos para aquele perfil, então que alguém com este perfil é incentivado a comprar. E, por outro lado, uma landing page sempre inclui um ou mais calls to action.

Por exemplo, se uma pessoa pesquisa como otimizar a taxa de conversão em seu e-commerce e depois de ver os diferentes resultados clica no link do Nelio A/B Testing para e-commerce (você pode ver uma captura de tela parcial na imagem acima ), quando chegar à página, verá um título que corresponde à pesquisa, encontrará uma imagem de uma loja e um texto e uma frase de chamariz que os convida a começar a criar testes A/B. A página também explica como eles podem otimizar a apresentação dos produtos em sua loja e inclui um depoimento para dar mais confiança ao visitante. Finalmente, há algumas seções explicando como eles podem aumentar as vendas graças aos dados e, claro, informações adicionais sobre por que eles podem confiar em nós.

Como você pode ver no exemplo acima, o objetivo de qualquer landing page é que o potencial comprador encontre exatamente o que está procurando em questão de segundos. O conteúdo da página é adaptado à persona do comprador, incluindo recursos importantes do produto (mais uma vez, escritos com um público específico em mente), agregando confiança e facilitando a compra do visitante.

A grande vantagem de ter diferentes landing pages é que você pode segmentar clientes específicos muito melhor. O design, a proposta de valor e o call to action podem ser muito mais adaptados a um segmento de mercado.

Por que e quais testes devo criar em uma landing page

Pode-se perguntar por que se dar ao trabalho de testes A/B em vez de simplesmente implementar os recursos mencionados acima. Bom, uma coisa é o que você acredita que vai melhorar a conversão dos seus usuários e outra, bem diferente, é o que realmente acontece no seu site. A única maneira de verificar o que funciona e o que não funciona é realizando testes A/B.

Como você já deve saber, um teste A/B começa com uma hipótese de melhoria (por exemplo, podemos pensar que uma redistribuição da página de destino para exibir melhor determinadas informações relevantes levará a mais conversões), implementa a hipótese em uma variante, e testa se esta variante tem um desempenho melhor do que sua página original. Tecnicamente, o teste A/B mostrará uma variante ou outra para cada um de seus visitantes, acompanhará o que eles fazem e determinará qual é a melhor (se houver).

Isso garante que qualquer alteração que você aplicar em seu site terá uma taxa de conversão melhor, pois você verificou com dados reais se a alteração é uma melhoria real ou não.

Lembre-se, como mostrarei com um exemplo, que os resultados obtidos em um teste A/B podem ser diferentes dos esperados, por isso é tão importante realizá-los. Além disso, os testes A/B devem ser realizados continuamente e fazer parte do que é conhecido como processo de otimização da taxa de conversão ou CRO.

Vamos dar uma olhada em algumas das práticas recomendadas que você pode começar a usar nas páginas de destino do seu site.

Simplifique a página

Uma landing page deve ser simples e fácil de seguir. Certifique-se de que o visitante não fique sobrecarregado com muito texto ou se perca e não consiga encontrar o botão “Comprar agora”. Algumas dicas para simplificar a página são:

• Mostrar títulos concisos e diretos
• Exiba frases de chamariz claras e visíveis
• Elimine links de navegação que não levam à página de checkout
• Mostrar detalhes do produto com marcadores
• Reduza o texto mostrando apenas as informações essenciais

Pense em uma página de destino como uma página onde você primeiro dá uma olhada rápida para decidir se deve permanecer nela ou tentar encontrar algo melhor. Evite textos desnecessários e limite-se a responder o que agrega valor ao visitante.

Embora a teoria seja boa, o mais importante é criar o teste A/B que confirme que a simplificação que você criou em sua página é de fato a que seus visitantes preferem. Por exemplo, queríamos simplificar nossa página inicial do Nelio Software e criamos um teste A/B dela. Nosso objetivo era projetar uma versão alternativa mais simples, mais visual e mais concisa para aumentar a conversão.

Executamos o teste e, surpreendentemente, a nova variante que criamos não foi a melhor solução para melhorar a conversão. Se não tivéssemos testado, teríamos aplicado uma página que achávamos melhor, mas na verdade não era. Você encontrará os detalhes do teste A/B que realizamos neste post.

Mas como você pode ver na imagem a seguir, não paramos por aí e continuamos testando diferentes variantes da home page do nosso Nelio. O design da nossa página inicial no momento da redação deste post é muito diferente das propostas anteriores: é mais claro, mais simples e mais organizado. E tem um desempenho melhor!

A primeira dobra da sua página de destino

A primeira dobra da sua página de destino é a seção mais importante. É a primeira coisa que todo visitante que chega a essa página verá. Se eles continuam navegando em seu site, role para baixo para ver mais ou fujam para o mecanismo de pesquisa do Google em menos de dois segundos, depende disso.

Infelizmente, você não pode ter todas as informações nesta primeira dobra: você deve escolher cuidadosamente o que colocar lá. Qual é a informação mais importante que você precisa informar a um visitante? Criar um teste A/B da primeira dobra pode ter um grande impacto na melhoria da conversão do seu site.

Por exemplo, na página de destino do Nelio A/B Testing na qual o produto é descrito e cujo objetivo de conversão é fazer com que o usuário visite a página de preços do produto, testamos diferentes versões de sua primeira dobra. Passe o mouse sobre o bloco e mova o controle deslizante para comparar as duas versões:

Na variante alteramos o título e ao invés do nome do produto, que já aparece no logotipo, adicionamos uma mensagem que despertasse a curiosidade do visitante. Uma cor diferente? Uma forma diferente para os botões? Um local alternativo para tudo isso?

Na sequência, alteramos a legenda para algo que indica que temos a solução para satisfazer a curiosidade deles: “crie e teste diferentes versões do seu WordPress para descobrir o que seu público mais gosta e melhorar suas conversões”. E, finalmente, alteramos o texto do botão de ação adicionando um ponto de urgência: “Comece agora”. Além disso, a primeira seção do site ocuparia toda a primeira dobra. O objetivo era focar na mensagem.

Nesse caso, os resultados do teste A/B foram diferentes para a versão em inglês do que para a versão em espanhol. Enquanto na versão em inglês obtivemos uma melhoria de conversão de mais de 12%, na versão em espanhol não conseguimos obter dados conclusivos. Para mais detalhes sobre este experimento, clique aqui.

Este exemplo mostra mais uma vez a importância do teste A/B de suas landing pages. Você não pode saber o impacto que qualquer alteração terá em seu site até testá-lo.

Imagens em destaque

Entre os elementos da primeira dobra de um site que mais afetam a percepção do visitante, a imagem característica que utilizamos é fundamental. Como é a primeira coisa que eles vêem, se o sentimento geral do visitante for de rejeição, nós os teremos perdido. Além disso, as imagens em destaque desempenham um papel importante quando o conteúdo é compartilhado nas mídias sociais.

Por esse motivo, algo tão fácil quanto criar um teste A/B de imagens em destaque pode trazer um sorriso ao seu rosto ao ver os resultados da conversão. Na landing page do Nelio Contents, cujo objetivo de conversão é que nossos usuários acabem visitando a página de preços, realizamos um teste A/B de sua imagem em destaque.

Nesta página, a primeira dobra contém uma imagem em destaque mostrando um homem sorridente com um post-it na testa e uma barba espessa, em frente a um computador. No monitor do computador vemos o calendário editorial da Nélio Conteúdo. Decidimos criar um teste A/B com duas variantes adicionais: a primeira alternativa é uma imagem mais convencional mostrando uma equipe de pessoas trabalhando na frente de um laptop. Na segunda opção, mostramos uma captura de tela do calendário editorial, ao qual aplicamos um efeito de desfoque para tornar o texto acima dele mais legível.

Nesse caso, alguma imagem foi melhor que as demais? O que você acha? O cavalheiro barbudo será capaz de vencer as outras duas variantes de imagem em destaque?

Bem, curiosamente havia uma imagem vencedora. Aqui está a página completa de resultados do teste:

Especificamente, a imagem com o grupo de pessoas em frente ao computador teve uma conversão 25% melhor que a do barbudo com quase 90% de confiança na versão em espanhol e um percentual de melhoria de quase 15% na versão vencedora em inglês, agora com um confiabilidade estatística ainda maior, superior a 95%.

Como você vê, é muito difícil adivinhar o que funcionará melhor se você não tiver criado um teste A/B para corroborar suas hipóteses. Você encontrará mais detalhes sobre este teste aqui.

E da mesma forma que testamos diferentes imagens em destaque, outro tipo interessante de teste é se é melhor trocar uma imagem por um vídeo. Neste post explicamos mais detalhes sobre esse experimento.

Botões de chamada para ação

Outro tipo de teste que você deve tentar em uma landing page é testar diferentes estilos de botões de call to action nela. Você testa o tamanho do botão, seu estilo e seu texto.

Seguindo algumas das teorias sobre qual cor é melhor para um botão de call to action, decidimos fazer um teste A/B na cor dos botões na landing page do Nelio Content. Neste caso, realizamos um teste de estilos CSS com o Nelio A/B Testing.

Aqui está a aparência dos botões de ação quando visualizados no editor de estilo CSS para cada variante do teste A/B que realizamos. Primeiro você tem a versão original, com os botões em laranja. As outras duas variantes incluem o CSS para definir os botões em verde e vermelho, respectivamente:

Neste caso, os resultados que obtivemos (você pode ver aqui mais detalhes sobre este experimento) foram que o verde é a cor que funcionou melhor para o nosso público inglês das 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.

Como crio esses testes A/B?

Criar um teste A/B é muito fácil se você usar uma ferramenta de teste A/B. Em particular, se você usar o Nelio A/B Testing, um plugin WordPress totalmente integrado, poderá criar as variantes de qualquer teste com a mesma facilidade com que faz modificações em uma página com o editor de blocos.

Além disso, como você já viu em algumas das imagens anteriores, você também tem os resultados no próprio WordPress e não precisa ter nenhum conhecimento de codificação ou usar uma ferramenta externa ao WordPress.

Neste guia completo explico como criar testes A/B com o editor de blocos do WordPress.

Comece a melhorar a conversão do seu e-commerce

Melhorar a conversão no seu e-commerce é tão ou mais crucial do que aumentar o número de visitas ao seu site. As páginas de destino são as páginas que seus visitantes alcançam e fazer com que eles convertam deve ser sua principal prioridade. Você já viu que todos eles têm algumas características em comum, mas somente se você criar testes A/B você saberá como melhorá-los. Mostramos alguns exemplos, mas ao invés de copiá-los, faça suas próprias hipóteses e comece a experimentar.

Nossa experiência na criação contínua de testes A/B nos permitiu aumentar as vendas com muito pouco esforço. O que você está esperando para melhorar a conversão do seu site?

Imagem em destaque por Igor Miske no Unsplash.