Usando mapas de calor na página de preços

Vamos começar “O Teste A/B do Mês” com um teste que não é A/B. Antes de fugir para outro canto da Internet, deixe-me explicar por que começaremos com mapas de calor.

Uma das principais causas de não usar testes A/B regularmente em seu site é não saber por onde começar: quais mudanças eu tento, onde e por quê? Essas são as principais perguntas que você fará a si mesmo. Se você não souber respondê-las, desistirá de testar.

Para superar isso, o que eu recomendo é que a primeira coisa que você faça é escolher uma página do seu site para começar. Esta página deve ser relevante para seus objetivos. Isto significa que é uma página onde recebe muitas visitas, ou é uma página chave para a sua atividade ou negócio.

No exemplo de hoje, optamos por começar com as páginas de preços de nossos plugins premium: Nelio A/B Testing e Nelio Content. Estas páginas são fundamentais para o nosso negócio, pois a receita da nossa empresa vem de ambas.

Agora que escolhemos as páginas, para saber quais mudanças fazer e por quê, é melhor começar executando um teste de mapa de calor. Fazemos isso porque os mapas de calor nos fornecem dados reais sobre como nossos visitantes interagem com nosso site.

Quando realmente vemos o desempenho de nossas páginas com dados reais do usuário, fica muito mais fácil obter ideias para testes futuros a serem executados. É por isso que os mapas de calor são sempre um bom começo.

Como criar um teste de mapa de calor no WordPress

Criar um teste de mapa de calor para uma página do WordPress é muito fácil. Basta selecionar a página escolhida e iniciar o teste.

No Nelio A/B Testing, crie um novo teste de mapa de calor selecionando este tipo de teste na caixa de diálogo que se abre quando você clica no botão para adicionar um novo teste.

Na tela de edição do teste, você define um nome para o seu teste para que seja fácil identificá-lo posteriormente. Você também pode adicionar uma descrição do que deseja experimentar no teste. Por último, mas não menos importante, você precisa selecionar a página na qual deseja fazer o teste do mapa de calor:

Quando tiver tudo pronto (como você vê na captura de tela anterior, é muito fácil), clique no botão no canto superior direito da janela para iniciar o teste. Você só precisa esperar que seus visitantes cheguem para que o Nelio A/B Testing colete dados de seu comportamento na página e processe os resultados.

Resultados do mapa de calor

No nosso caso, tivemos dois testes de mapa de calor sendo executados ao mesmo tempo em nosso site: um para a página de preços do Nelio A/B Testing e outro para a página de preços do Nelio Content.

Cada teste vem coletando dados há cerca de 20 dias e já analisou o comportamento de cerca de 500 visitantes. Isso é mais do que suficiente para podermos tirar certas conclusões e pensar nos futuros testes A/B que podemos executar nestas páginas.

Tenha em atenção que estas páginas não são as que têm mais visitas no nosso website. Eles são o estágio final do funil de conversão, portanto, o tráfego é perdido ao longo do caminho. Mas lembre-se que os escolhemos por sua importância para o nosso negócio. Em testes futuros estudaremos outras páginas com mais tráfego, por outros motivos que explicaremos.

Página de preços do Nelio A/B Testing

Vamos começar com os resultados obtidos para a página de preços do Nelio A/B Testing. O teste do mapa de calor nos mostra os dados de três perspectivas diferentes: mapa de calor, mapa de rolagem e confete. Incorporar aqui as 3 imagens completas é demais, pois elas são bem grandes em termos de altura em pixels. Para evitar forçá-lo a rolar para cima e para baixo, eu apenas os vinculei aqui:

• Mapa de calor da página de preços do Nelio A/B Testing.
• Scrollmap da página de preços do Nelio A/B Testing.
• Confetes da página de preços do Nelio A/B Testing.

Vejamos agora os fragmentos mais relevantes dos resultados anteriores:

Como você pode ver na imagem anterior, um mapa de calor é uma representação gráfica que mostra a interação dos usuários com os elementos da página, de forma agregada e com uma escala de cores onde uma cor quente indica grande relevância.

Na página de preços do Nelio A/B Testing, a primeira dobra da página é onde há mais pontos de acesso. Se analisarmos detalhadamente, os elementos da área do plano básico e do plano profissional ganham mais relevância do que os do empreendimento. Diante disso, talvez pudéssemos reordenar os planos de preços para mostrar primeiro o plano empresarial. Observe que estamos acostumados a ler da esquerda para a direita, portanto, mostrar primeiro o plano mais caro na página de preços pode ser uma boa mudança para tentar em um teste A/B.

Outro elemento que recebe muita interação do usuário é o link para rolar para baixo para ver a comparação detalhada dos planos. Isso é bom, pois significa que há interesse em ver mais detalhes sobre os planos.

O que não é tão bom é que existem muitas interações em elementos não clicáveis. Você pode vê-lo no confete, que é a representação gráfica onde você pode ver todos os cliques feitos pelos visitantes:

Em todo o bloco de planos que você pode ver na captura de tela anterior, apenas os botões que aparecem em cada plano são elementos que podem ser clicados. Tenha em mente que clicar em todo o resto não tem efeito. Nossa interface atual está gerando confusão.

Os visitantes estão clicando nos textos e ícones das funcionalidades de cada plano, que são elementos não clicáveis. A partir daqui, podemos entender que eles tentam encontrar mais informações sobre isso, mas, em vez disso, temos essas informações mais abaixo na página.

Outro teste A/B que poderíamos tentar aqui é alterar cada um dos recursos dos planos para que eles tenham um elemento flutuante que apareça ao passar o mouse sobre o texto e forneça mais informações contextuais ao visitante. Poderíamos testar esta versão com ajuda contextual em relação à versão atual para ver qual acaba gerando mais compras.

O confete também nos dá informações agregadas dos visitantes, extraídas dos cliques que eles fizeram. O Nelio A/B Testing inclui vários tipos de filtros para entender melhor as diferentes características dos visitantes, como você pode ver aqui:

Desses filtros extraímos os seguintes dados:

• Chrome e Firefox são, de longe, os navegadores mais usados ​​por nossos visitantes. Portanto, devemos fazer com que a web pareça boa, pelo menos, nesses navegadores.
• Metade dos visitantes desta página vem dos Estados Unidos. Isso corresponde aos nossos dados de vendas.
• Os visitantes visitam-nos mais nos primeiros 3 dias da semana. Conhecer essas informações pode ser útil para, por exemplo, fazer ofertas nos demais dias em outras áreas da web, e assim atrair tráfego em dias com pouco tráfego.
• Quase 100% dos visitantes acessam a página de um computador desktop ou laptop. Quase não recebemos visitas de dispositivos móveis. Isso é algo para estudar no futuro.
• Windows 10 e Mac OS X são os sistemas operacionais a partir dos quais as pessoas nos visitam. Corresponde aos dados anteriores, pois não temos visitantes de sistemas operacionais para dispositivos móveis.
• Temos mais visitantes durante a jornada de trabalho (o teste foi executado no fuso horário de Chicago). Faz sentido, já que nosso principal cliente é dos EUA.
• As visitas são feitas em telas com largura mínima superior a 1500 pixels. Outro fato que confirma que as visitas são de computadores desktop ou laptops.

Se você verificar as versões completas do mapa de calor e dos confetes, verá que todas as outras seções da página de preços do Nelio A/B Testing são menos relevantes. Com isso em mente, vamos verificar o seguinte mapa de rolagem:

Se você verificar o mapa de rolagem completo, verá que pouquíssimos visitantes vão além da primeira dobra da página. Isso me faz pensar que talvez devêssemos usar uma versão muito mais curta da página de preços do Nelio A/B Testing, condensando as informações relevantes acima da dobra.

As seções após a primeira dobra da página têm muito texto e os visitantes não estão lendo. Menos de 20% vem ver e interagir com a tabela detalhada comparando os planos, que você encontra na parte inferior da web. Todos esses dados são fornecidos pelo mapa de rolagem:

Testar com versões mais curtas da página, incluindo seções mais visuais, pode ajudar a convencer o potencial comprador e obter uma página de preços muito mais eficaz e eficiente. Esta é outra ideia de uma possível mudança para tentar com um teste A/B.

Já temos algumas ideias que poderíamos testar no futuro, então fica claro que as informações que os heatmaps nos fornecem são muito úteis para obter ideias que podemos aplicar em testes A/B.

Página de preços do conteúdo Nélio

Assim como na página de preços do Nelio A/B Testing, aqui você tem as imagens completas com os resultados do mapa de calor para a página de preços do Nelio Content:

• Mapa de calor da página de preços do Nelio Content.
• Scrollmap da página de preços do Nelio Content.
• Confetes da página de preços da Nelio Content.

A página de preços do Nelio Content é mais simples e curta do que a do Nelio A/B Testing. Entre outros motivos, esta página tem apenas um plano, enquanto com o Nelio A/B Testing tínhamos 3 planos diferentes.

Se você observar o mapa de calor completo e compará-lo com o do Nelio A/B Testing, verá que neste caso há mais pontos quentes em outras partes da página, além da primeira dobra.

Na imagem anterior vemos que os botões de ação dentro da tabela comparando os planos ganham uma relevância especial. Isso é bom, porque nós os temos lá por esse motivo. No entanto, observe que o plano Starter na tabela, que nada mais é do que a versão gratuita do Nelio Content, ganha especial relevância.

Aqui a questão é se devemos ter um link para o diretório de plugins do WordPress em nossa página de preços para que os visitantes possam baixar a versão gratuita do Nelio Content ou não. Agora temos, mas o mapa de calor mostra que provavelmente vários visitantes estão deixando nossa página de preços para ir para a versão gratuita.

Este tema é polêmico e fonte de longas discussões em nossas reuniões. Por um lado, manter o link não é bom porque você perde uma possível venda direta dentro da página de preços. Mas mesmo que os visitantes saiam do nosso site, pode ser que experimentar o Conteúdo Nelio gratuitamente seja uma coisa boa. Os usuários podem adorar a ferramenta e acabar comprando-a mais tarde, depois de testá-la. Em Nélio já discutimos isso várias vezes e suponho que hoje não será a última vez que o faremos?. Por enquanto, o link fica. O que você acha disso?

Vemos também que o vídeo chama bastante atenção. Criamos um vídeo muito legal, e talvez pudéssemos mostrá-lo mais cedo na página. Poderíamos tentar essa mudança com um teste A/B porque a seção após a primeira dobra também não está recebendo tanta relevância.

Por outro lado, vemos no mapa de rolagem que a perda de visitantes é menos abrupta à medida que rolamos a página para baixo. Isso confirma que uma página de preços mais curta pode funcionar melhor se o que queremos é que o visitante veja o máximo de conteúdo possível.

Além disso, combinado com o mapa de calor anterior, vemos que as duas seções após a primeira dobra, que falam sobre recursos específicos e mostram opiniões de pessoas, podem precisar de um redesenho. São seções com muito texto e que não atraem muita atenção. Poderíamos tentar uma versão alternativa mais visual e direta.

Com relação ao gráfico dos confetes de cliques, é interessante ver a quantidade de cliques incorretos que são feitos em áreas não clicáveis ​​dentro da primeira dobra da página:

Embora a maioria desses cliques não possa ser evitada (sim, suponha que as pessoas cliquem em áreas laterais, especialmente à direita, ao rolar), há outros que são resultado de visitantes confusos. Este é o caso dos cliques no número do preço mensal que você vê na captura de tela anterior. Esse preço não é um item clicável; você tem que clicar no botão laranja em vez disso. No entanto, o número do preço anual mostrado abaixo é um link adequado.

Devemos procurar outra forma menos confusa de mostrar os dois preços, com uma interação igual para ambos os casos. Este é outro teste A/B que poderíamos executar nesta página.

E agora?

Começamos sem ter ideia de quais testes A/B poderíamos executar em nosso site. Vimos que os mapas de calor nos ajudam a obter ideias facilmente para testar em testes A/B em nossas páginas. Uma vez que temos essas ideias de teste, o que temos que fazer é priorizá-las de acordo com nossas necessidades.

Lembre-se de que as alterações na primeira dobra da página são mais rápidas de testar, pois mais pessoas as verão e, assim, você obterá resultados mais rapidamente. Você pode começar a priorizar os testes A/B que tentam mudanças nessa parte da página.

E a lição mais importante aqui é: uma vez que você comece a testar, não pare. Após cada iteração do processo de teste, você aprenderá algo novo tanto do seu site quanto de seus visitantes.

Até o próximo mês com outro tipo de teste em que analisaremos resultados reais. Lembre-se de me deixar um comentário com sua opinião sobre este post e tudo o que expliquei aqui. Em qual página do seu site você executaria um mapa de calor?

Imagem em destaque por Steve Halama no Unsplash.