Tudo o que você precisa saber antes de usar um mapa de calor da página de destino

O software da Cormac Kinney começou como uma ferramenta para ajudar os operadores de Wall Street a manipular o mercado de ações. Ele transformou os dados financeiros em “mosaicos luminosos de quadrados vermelhos e azuis”, chamados de “mapas de calor”, que sinalizavam aos comerciantes quando comprar ou vender usando cores.

Mais de duas décadas depois, não são apenas os comerciantes que se beneficiam dos mapas de calor e dos insights que eles fornecem. Os profissionais de marketing (e agora os clientes da Instapage) também os estão usando. E ao fazer isso, eles estão aprendendo exatamente como os clientes em potencial se comportam em suas páginas da web.

O que é um mapa de calor?

Um mapa de calor é uma visualização de dados que mostra como os visitantes interagem com uma página da web usando um sistema codificado por cores. Dê uma olhada, por exemplo, no talvez mais conhecido mapa de calor de todos os tempos (pelo menos por profissionais de marketing digital), que mostra que as pessoas lêem em um padrão em forma de F na web:

As partes vermelha e amarela do mapa indicam uma área altamente visualizada. O azul é onde os visitantes menos olham.

Esses dados em particular foram coletados pelo Nielsen Norman Group em um estudo de rastreamento ocular de 2006 que monitorou o olhar dos visitantes conforme eles encontravam um texto em uma página da web. Mas testes como esses não são os que você provavelmente verá circulando pela web.

Mapas de calor de rastreamento ocular vs. mapas de calor de rastreamento de mouse

Mapas de calor de experimentos de rastreamento ocular são os mais precisos, mas também são os mais caros e inconvenientes de se produzir. Estudos como o Nielsen Norman acima geralmente ocorrem em um ambiente controlado (laboratório, interno) com uma equipe de pesquisa ou hardware caro que observa os olhos dos visitantes enquanto eles interagem com sua página da web. Sua execução pode custar mais de vários milhares de dólares.

Como a contratação de uma equipe inteira de pesquisadores está fora de questão para a maioria das empresas, muitas optam pelo software de rastreamento do mouse. Ao contrário de monitorar os movimentos oculares reais, o software de rastreamento do mouse monitora o movimento do mouse do visitante , como cliques, rolagens e focos.

Como esse método não exige um ambiente formal de laboratório ou uma grande parte do orçamento de uma empresa, é muito mais acessível. Hoje, você pode instalar um software de rastreamento do mouse e começar a monitorar o comportamento dos visitantes imediatamente - e algumas pesquisas mostram, quase tão precisamente quanto os estudos formais de rastreamento ocular.

O mapa de calor à esquerda foi produzido a partir de um estudo formal de rastreamento ocular, enquanto o da direita foi gerado com rastreamento do mouse. De acordo com ClickTale, experimentos em que ambas as técnicas foram administradas simultaneamente mostraram que há uma correlação de 84-88% entre seus resultados.

Basicamente, em alguns casos, onde as pessoas movem o mouse e para onde olham tendem a coincidir (mais sobre isso depois).

Os diferentes tipos de mapas de calor de rastreamento do mouse disponíveis

Quando as pessoas se referem a um “mapa de calor”, elas estão se referindo a uma visualização que exibe o comportamento do usuário. Mas, esse comportamento do usuário nem sempre é o mesmo. Alguns mapas de calor mostram como as pessoas rolam, enquanto outros tipos podem identificar onde as pessoas passam o mouse em uma tela. Os principais tipos de mapas de calor de rastreamento do mouse são os seguintes:

Clique nos mapas de calor

Os mapas de cliques mostram onde um visitante clicou em sua página da web. Eles são especialmente valiosos para descobrir links populares ou áreas que os visitantes podem pensar que são links, mas não são.

Veja este mapa específico, por exemplo, que revelou que os elementos mais clicados em uma página eram fotos do produto:

O fundador da Brothers Leather Supply Company, Adam Kail, explica como este mapa mudou o foco da empresa no que diz respeito ao design da página do produto:

Os mapas de calor reforçaram nossa necessidade de ótimas imagens em todas as páginas de nossos produtos. Costumávamos trabalhar com a cópia certa - mas agora gastamos tempo obtendo as imagens certas. Cada imagem mostra um uso ou ângulo diferente para nossas bolsas ... Os futuros clientes querem saber como a bolsa fica com um laptop dentro quando está cheio quando alguém o está usando.

Em última análise, esse é o objetivo da análise do mapa de calor - descobrir o comportamento do visitante na vida real que você pode usar para otimizar a experiência do usuário. Para ilustrar, vamos dar uma olhada em outro mapa de cliques que vem de uma página de destino pós-clique de telefone celular:

Contornado em vermelho, você notará que o telefone mais clicado está bem abaixo da dobra, localizado em vários modelos menos populares. Então, como você pode usar este mapa para melhorar a experiência do usuário?

Substitua um dos modelos menos populares acima da dobra por aquele destacado em vermelho. Dessa forma, as pessoas não precisam caçar para encontrá-lo.

Talvez o mapa de calor mais relevante para o design da página de destino pós-clique venha de um estudo de caso da VWO em um cliente, Pair (agora Couple).

Esta é a página inicial original do aplicativo:

E aqui está a aparência do mapa de calor de cliques dessa página inicial:

Você percebeu o que o comerciante em crescimento da Pair, Lim Cheng Soon, fez neste mapa de calor? Ele diz:

Acontece que descobri que muitas pessoas clicam na barra de navegação na parte superior em vez de clicar no botão de conversão (link para AppStore e Google Play). Então, inventei a teoria de que ter muitas “distrações” ao redor do botão de conversão não era uma ideia tão boa.

Então, eu faço alguns testes A / B com base na teoria de remover as “distrações” ao redor do botão de conversão.

Os resultados?

• Ocultar o texto “download grátis” acima do botão aumentou a taxa de conversão em 10%.
• Ocultar o menu de navegação aumentou a taxa de conversão em 12%

A teoria de Soon de “distrações demais” não foi inventada. Como vários outros testes mostraram, os links de navegação podem diminuir drasticamente a taxa de conversão. Em sua página de destino pós-clique, é melhor excluí-los de seu design.

Mapas de cliques como os acima são particularmente valiosos por causa de uma intenção de sinais de clique - a ação é mais provavelmente proposital do que aleatória. Quando alguém clica, o faz porque deseja saber mais sobre um elemento específico ou o conteúdo a que corresponde (um botão de CTA, link “sobre nós” etc.).

Mapas de calor de rolagem

“Você não vai terminar este artigo” foi o título de um artigo publicado pela Slate em 2013. Nele, o autor Farhad Manjoo revelou resultados de uma análise de mapa de calor conjunta entre Chartbeat e a revista online, que mostrou que muito poucas pessoas liam tudo o caminho através dos artigos.

Mesmo que uma quantidade impressionante de 86,2% do engajamento tenha ocorrido abaixo da dobra, apenas 25% das pessoas passaram do pixel de número 1.600 (a maioria dos artigos do Slate tem cerca de 2.000 pixels de comprimento). Percepções como essas são o que os mapas de rolagem são úteis para descobrir - especialmente em páginas mais longas.

Em termos de página de destino pós-clique, é mais provável que seja uma página de vendas. Essas peças persuasivas de marketing habilmente elaboradas podem atingir proporções gigantescas. Este, por exemplo, tem mais de 5.000 palavras (clique aqui para a página inteira):

Um mapa de rolagem em uma página como esta pode dizer a seus criadores onde as pessoas estão parando no processo de leitura. Com esses dados, os criadores podem hipotetizar as razões para a queda - texto sem brilho, anúncios irritantes ou até mesmo uma mudança na cor de fundo, diz Peep Laja:

Se você tem linhas fortes ou mudanças de cor (por exemplo, o fundo branco se torna laranja), essas são chamadas de 'extremidades lógicas' - muitas vezes as pessoas pensam que tudo o que se segue não está mais conectado ao que veio antes.

A partir daí, os otimizadores podem testar maneiras potenciais de fazer as pessoas lerem a página inteira - o que um experimento do Nielsen Norman Group mostra que é certamente possível:

É raro, mas possível.

Lembre-se de que o mapa acima mostra os movimentos dos olhos, não exclusivamente a profundidade de rolagem. Isso significa que é mais detalhado do que o que você verá em um mapa de rolagem, que mostrará apenas o quanto os visitantes avançaram na página. Aqui está um exemplo de um teste feito no site da RJMetrics:

As áreas mais visualizadas nesta página da web, por cor, são:

• Branco
• vermelho
• Amarelo
• Verde
• Azul

Nós sabemos o que você está pensando: como o topo de uma página pode ser visto menos do que o meio?

Bem, a pesquisa do Chartbeat mostra que muitas pessoas tendem a começar a rolar antes mesmo de uma página carregar, o que significa que perderão o topo.

A pesquisa também mostra que o pico de engajamento fica logo abaixo da dobra em muitas páginas:

E isso pode explicar por que a área próxima à dobra é vermelha, enquanto grande parte da área acima dela é amarela.

A partir deste mapa, Stephanie Liu, uma ex-desenvolvedora de front-end da RJMetrics, surgiu com a seguinte hipótese:

Minha hipótese era que mover o botão para a área do mapa white hot scroll faria com que o design tivesse uma taxa de conversão mais alta em comparação com a página de preços original. Mais pessoas prestariam atenção ao botão simplesmente porque seus olhos permaneceriam ali por mais tempo.

A página original era assim:

A variação que ela criou era assim:

O resultado foi um aumento de 310% nas conversões.

As duas lições importantes desse teste de mapa de rolagem são:

1. Com um mapa de rolagem, você não saberá por que as pessoas estão rolando tanto. Você e sua equipe terão que fazer alguns testes de hipótese para descobrir.

2. Às vezes, você não precisa necessariamente saber por que as pessoas desistem de onde pararam. O objetivo nem sempre é fazer as pessoas rolarem mais fundo. No caso de Stephanie, simplesmente mover o botão CTA para uma área mais visualizada trouxe um grande aumento de conversão para RJMetrics.

Hover heat maps (também conhecidos como mapas de calor de movimento)

Seus olhos se movem para onde o cursor do mouse - essa é a suposição geral em que os mapas de calor flutuantes, também conhecidos como mapas de calor de “movimento”, se baseiam.

A precisão desses mapas depende da correlação entre o movimento dos olhos e o movimento do mouse, que o estudo mencionado anteriormente mostra que pode estar em torno de 84-88%. Outras fontes, porém, não estão convencidas de que seja tão alto.

Em 2010, a Dra. Anne Aula do Google divulgou suas descobertas sobre a precisão dos mapas de calor flutuantes:

• 6% das pessoas mostraram uma correlação vertical entre o movimento do mouse e o movimento dos olhos.
• 19% das pessoas mostraram uma correlação horizontal entre o movimento do mouse e o movimento dos olhos.
• 10% das pessoas passaram o mouse sobre um elemento específico da página enquanto olhavam para as áreas ao redor dele.

E ainda outro experimento do Google e Carnegie Mellon encontrou uma correlação de 64% entre o movimento do mouse e o movimento dos olhos.

Desnecessário dizer que a pesquisa sobre mapas de calor de movimento está em todo lugar. Mas e quanto aos aplicativos da vida real?

Bem, isso está em todo lugar também.

Aqui está um mapa de calor flutuante North Face usado para otimizar sua página de checkout:

À esquerda, a versão A parece mostrar que um banner na barra lateral direita está recebendo mais atenção do que o botão CTA (circulado em branco) abaixo dele. A versão B leva isso em consideração e troca o banner com o botão (novamente, circulado em branco).

O resultado foi um aumento de 62% na taxa de conversão.

Aqui está outro mapa flutuante que parece mostrar ... Bem ... Veja você mesmo:

Não parece haver uma conclusão clara deste mapa. Há muito pairando. Em todos os lugares.

No geral, a coisa mais importante a tirar da pesquisa de mapa de calor hover e suas aplicações práticas é esta:

Use mapas flutuantes para informar seu projeto, mas nas palavras de Rory Gallagher da EyeQuant, "não generalize demais".

Se o seu mapa se parece com o produzido pela North Face, você pode ter uma hipótese valiosa para o teste A / B, como esta:

“Percebemos em um mapa de calor flutuante que a área acima do botão CTA da página de checkout parece estar recebendo mais atenção do visitante. Portanto, acreditamos que ao trocar o botão com o banner promocional acima dele, podemos aumentar os checkouts. ”

Se você desenvolver uma hipótese de teste a partir do segundo mapa de calor, no entanto, provavelmente você é culpado de viés de confirmação - procurar um resultado específico de um teste simplesmente porque ele confirma sua crença em algo. Um trecho mal informado pode ter a seguinte aparência:

“Percebemos no mapa de calor flutuante que as palavras 'Como fazer' parecem atrair mais atenção do que qualquer outra coisa acima da dobra. Portanto, acreditamos que todas as manchetes de postagens em blogs devem começar com 'Como fazer' no futuro para atrair os leitores. ”

“Como fazer” é uma ótima maneira de começar um título, mas este teste não indica isso. Aborde os resultados do seu mapa de calor com uma mentalidade cética e apenas teste quando tiver um motivo claro para fazê-lo.

Usando mapas de calor com responsabilidade

Os mapas de calor são valiosos para descobrir como as pessoas usam sua página da web, mas não devem ser a única ferramenta que você usa para fazer isso. Sozinhos, eles pintam uma imagem incompleta de seus usuários e confiar neles como seu único indicador do comportamento do cliente em potencial tem o potencial de enganá-lo. A equipe da Optimizely oferece um exemplo:

Ao olhar para um mapa de calor de um formulário, ele pode mostrar que os usuários estão clicando no primeiro campo e que há menos cliques nos campos subsequentes.

Isso pode sugerir que os usuários estão desistindo do processo após preencher o primeiro campo. O que os mapas de calor não mostram, no entanto, é se os usuários usaram o teclado para percorrer os campos do formulário, em vez do mouse.

Por razões como essa, combinar seus mapas de calor com o insight de outras ferramentas como Google Analytics ou Instapage Analytics formará uma imagem mais completa de como seus clientes potenciais se comportam em sua página de destino pós-clique.

Mas essa “imagem mais cheia” valerá alguma coisa? Não se você não coletar dados de usuário suficientes, diz Peep Laja:

Você precisa de um tamanho de amostra suficiente por página / tela antes de confiar em qualquer resultado. Uma estimativa aproximada seria de 2.000 a 3.000 visualizações de página por tela de design. Se o mapa de calor for baseado em 34 usuários, não confie em nenhum deles.

No final do dia, é importante lembrar que os mapas de calor não são dados; eles simplesmente organizam os dados de uma forma facilmente digerível. Eles mostram cliques, rolagens e focalizações. O que esses movimentos do mouse significam depende de você determinar.

Sempre conecte todos os seus anúncios a páginas de destino pós-clique personalizadas para reduzir seu custo por aquisição de cliente. Comece a criar suas páginas dedicadas de pós-clique, inscrevendo-se hoje para uma demonstração do Instapage Enterprise.