Instalar uma ferramenta de heatmap demora cerca de dez minutos. Aproveitar de verdade o que ela mostra demora mais, porque a maioria das pessoas não sabe o que está à procura. O cenário habitual: abre-se a heatmap, passam-se alguns minutos a olhar para as cores, repara-se que o botão recebe muitos cliques e fecha-se o separador. Nada muda.
O problema não é a heatmap. O problema é que uma heatmap não se explica sozinha. É um instrumento de diagnóstico e, como qualquer instrumento de diagnóstico, exige saber que padrões indicam um problema e quais são comportamento esperado. Um aglomerado de cliques é ruído. Um cluster de cliques no sítio errado é um sinal.
Este guia cobre cinco padrões que aparecem de forma sistemática nas heatmaps quando algo está mal numa página. Não o que é uma heatmap; para isso existe o glossário. Mas o que ela lhe está a dizer e o que fazer a respeito.
Uma nota rápida sobre os tipos de heatmap
Antes dos padrões: as heatmaps existem em três formas e respondem a perguntas diferentes.
- Os mapas de cliques mostram onde os utilizadores clicam (ou tocam no telemóvel). Revelam com o que interagem, com o que tentam interagir e o que ignoram.
- Os mapas de scroll mostram até onde os utilizadores fazem scroll na página antes de saírem. Revelam se os utilizadores chegam aos seus conteúdos-chave e aos seus elementos de conversão.
- Os mapas de movimento registam para onde os utilizadores movem o rato (apenas desktop). São uma aproximação grosseira de para onde vai a atenção, embora menos fiável do que os outros dois tipos.
A maioria dos cinco padrões abaixo vem dos mapas de cliques e de scroll. Os mapas de movimento são úteis para a exploração qualitativa, mas não devem orientar conclusões por si só.
Padrão 1: a queda de scroll antes do seu CTA
Abra o seu mapa de scroll. Encontre o seu call to action principal: o botão ou o formulário que impulsiona a sua conversão principal. Agora veja que percentagem de utilizadores faz scroll suficiente para o ver.
Se a profundidade de scroll cai abruptamente entre os 40 e os 60% e o seu CTA está aos 70%, os utilizadores não chegam a ele. É um dos problemas mais frequentes e mais fáceis de corrigir na otimização de conversão, e é invisível sem dados de scroll.
O que provoca a queda importa. Veja que conteúdo está mesmo antes do ponto de abandono:
- Um bloco longo de texto denso que perde ímpeto
- Uma secção que parece um rodapé ou um final (pouco peso visual, fundo claro, linguagem de resumo)
- Um elemento concorrente que responde cedo demais à pergunta do utilizador, eliminando o motivo para continuar a fazer scroll
A solução raramente é «subir o CTA», embora por vezes seja a certa. Mais frequentemente trata-se de reestruturar a secção mesmo antes da queda: parágrafos mais curtos, uma rutura visual, uma pista direcional que sinalize que há mais para ver.
Uma referência útil: numa página de produto ou landing page padrão, o seu CTA principal deve ser visível para pelo menos 60% dos visitantes. Abaixo disso, a queda de scroll custa-lhe conversões que não vê nos dados da sua taxa de conversão, porque os utilizadores nunca chegaram ao ponto de decisão.
Padrão 2: cliques em elementos que não são clicáveis
Olhe para o seu mapa de cliques. Encontre os clusters. Agora verifique se esses clusters estão sobre elementos interativos (botões, links, campos de formulário) ou sobre algo sem interação: uma imagem de produto, um título, uma estatística, um logótipo, um ícone de funcionalidade.
Os cliques em elementos não interativos são um sinal concreto: o utilizador esperava que acontecesse algo e não aconteceu nada. Chama-se a isto um clique frustrado ou rage click, e indica uma expectativa quebrada mais do que um elemento avariado. O elemento funciona exatamente como foi desenhado; o que está errado é o design.
Variantes comuns deste padrão:
- Imagens de produto que os utilizadores tentam ampliar ou aplicar zoom
- Nomes de funcionalidades ou títulos que os utilizadores clicam à espera de uma expansão ou de uma janela modal
- Estatísticas ou números que parecem ligar a uma fonte
- Texto sublinhado que é apenas estilo, não um link
- Cartões que parecem totalmente clicáveis mas só têm um pequeno link «Ler mais»
A solução é tornar o elemento interativo (acrescentar o zoom, acrescentar o link, tornar o cartão inteiro clicável) ou redesenhá-lo para que a expectativa nem chegue a ser criada. A segunda opção é muitas vezes melhor. Acrescentar funcionalidade para satisfazer uma expectativa confusa raramente resolve o problema de clareza subjacente.
Padrão 3: uma zona morta acima da dobra
Este padrão é o oposto do que a maioria espera: pouco envolvimento no topo da página, apesar de todos os utilizadores a verem.
Num mapa de cliques surge como quase zero cliques na secção hero, sem qualquer interação com o título, o subtítulo ou o elemento visual envolvente. Num mapa de scroll surge como utilizadores que passam rapidamente pelo topo sem parar.
O que isto significa: o seu conteúdo acima da dobra não comunica o seu valor com rapidez suficiente. Os utilizadores leem em diagonal, não leem a fundo. Chegam com uma pergunta («isto é relevante para mim?») e a sua secção hero não responde com a clareza necessária para merecer a atenção deles.
Isto é diferente de uma taxa de rejeição elevada, que lhe diz que os utilizadores saíram. Uma zona morta com baixa rejeição significa que os utilizadores ficaram mas saltaram o seu conteúdo mais importante. Continuaram a fazer scroll à procura de algo que respondesse à sua pergunta, o que significa que o trabalho de conversão está a ser feito mais abaixo na página, com menos contexto e menos intenção.
As causas comuns:
- Um título que descreve o que faz em vez do que o utilizador ganha
- Uma imagem ou animação hero que desvia o olhar do texto
- Uma proposta de valor enterrada sob uma barra de navegação e um grande elemento visual
- Um desalinhamento entre o anúncio ou o link que trouxe o tráfego e aquilo com que a página abre
Teste a clareza do título antes de tudo o resto. O elemento visual pode ser corrigido mais tarde. Se os utilizadores não se prendem às palavras, redesenhar o layout em torno das mesmas palavras não resolverá o problema.
Padrão 4: a lacuna entre dispositivos
Nunca leia uma heatmap de forma agregada se tiver um tráfego mobile significativo. Uma heatmap agregada numa página com 60% de visitantes mobile é dominada pelo comportamento mobile, e os dois públicos usam uma versão fundamentalmente diferente da sua página.
O padrão da lacuna entre dispositivos aparece quando compara o mapa de scroll ou de cliques entre dispositivos e encontra uma divergência importante: os utilizadores de desktop fazem scroll até aos 70%, os de mobile param aos 35%. Os de desktop clicam no CTA principal, os de mobile clicam antes num link de navegação secundário.
Quando esta lacuna é grande, costuma apontar para um problema de layout específico de um dispositivo:
- Uma imagem em toda a largura no mobile que empurra todo o conteúdo para baixo da dobra
- Um botão de CTA dimensionado para desktop, pequeno demais para tocar no mobile
- Uma secção de duas colunas que se empilha numa lista vertical ilegível em ecrãs pequenos
- Tamanhos de letra confortáveis no desktop que obrigam a aplicar zoom no mobile
A correção exige auditar especificamente a experiência mobile, sem assumir que um layout responsivo é uma boa experiência mobile. Responsivo quer dizer que se adapta. Não quer dizer que funciona.
Segmente a sua heatmap por dispositivo antes de tirar qualquer conclusão sobre a página. Um agregado «bom» pode mascarar uma experiência mobile avariada que afeta a maioria dos seus visitantes.
Padrão 5: o cluster de distração
Este é o padrão que apanha a maioria das equipas de surpresa, porque parece envolvimento. Um volume elevado de cliques num elemento parece positivo, até verificar para onde vão esses cliques.
Um cluster de distração é uma concentração de cliques num elemento que afasta os utilizadores do seu fluxo de conversão: um link de navegação numa landing page, um link «saber mais» para um artigo de blog no meio de uma página de produto, um logótipo que leva os utilizadores de volta à página inicial, um link no rodapé que conduz a uma secção sem relação.
A versão mais clara: uma landing page criada para uma campanha específica, com toda a navegação do site ainda visível. A heatmap mostra a maior densidade de cliques nos links de navegação, não no CTA. Os utilizadores escapam por uma porta que se esqueceu de fechar.
O que procurar: em qualquer página com uma única ação pretendida, encontre os elementos que recebem mais cliques e verifique se esses cliques servem o seu objetivo ou o desviam. Em landing pages dedicadas, a resposta é quase sempre remover ou ocultar a navegação. Em páginas de produto e de conteúdo, a pergunta é se o conteúdo concorrente atrai utilizadores de alta intenção ou meros curiosos de baixa intenção, e se o compromisso vale a pena.
O que fazer quando deteta um padrão
Uma heatmap diz-lhe onde está o problema na página. Não lhe diz porque é que acontece. Esse é o trabalho das gravações de sessão.
Se encontrar uma queda de scroll aos 55% e o seu CTA estiver aos 70%, o passo seguinte é filtrar as gravações de sessão pelos utilizadores que pararam de fazer scroll nessa zona e observar o que aconteceu nos segundos antes de saírem. Leram a secção e fecharam? Hesitaram num elemento? A página carregou algo nesse momento que os interrompeu? A heatmap dá-lhe a coordenada; a gravação dá-lhe a história.
Este diagnóstico em dois passos — a heatmap para encontrar o local e a gravação para compreender o comportamento — é sistematicamente mais rápido a identificar as causas-raiz do que qualquer uma das ferramentas isoladamente. A mesma lógica aplica-se quando filtra as gravações de sessão por fonte de tráfego: o segmento define a pergunta, a gravação responde-lhe.
O limite das heatmaps agregadas
Para além da segmentação por dispositivo, a dimensão mais subaproveitada da análise de heatmaps é a fonte de tráfego.
Um utilizador que chega de uma pesquisa de marca (alguém que escreveu o nome da sua empresa) traz um nível de intenção completamente diferente de um utilizador que chega de uma campanha de retargeting display. Vão interagir de forma diferente com a mesma página: profundidade de scroll diferente, padrões de clique diferentes, tolerância diferente ao comprimento do conteúdo.
Uma heatmap agregada faz a média destes dois públicos. Se os seus visitantes orgânicos de alta intenção fazem scroll até aos 80% e os seus visitantes pagos de baixa intenção até aos 30%, a média é de 55%, o que faz a página parecer medíocre quando talvez funcione muito bem para o público para o qual foi concebida.
Segmente as suas heatmaps por fonte de tráfego antes de decidir se tem um problema de página ou um problema de segmentação de público. A distinção muda por completo a correção: um é um problema de design, o outro um problema de investimento em meios.
Transformar padrões em testes mensuráveis
Um padrão de heatmap é uma hipótese, não um diagnóstico. «Os utilizadores não fazem scroll até ao CTA» não é uma conclusão; torna-se uma quando faz uma alteração e mede o efeito.
Antes de fazer alterações com base em padrões de heatmap, defina uma métrica de referência que possa acompanhar:
- Se corrigir uma queda de scroll: defina um objetivo de profundidade de scroll para a percentagem de utilizadores que chegam à secção do CTA
- Se corrigir uma zona morta: acompanhe o tempo na página ou o envolvimento da secção hero como indicador antecipado
- Se corrigir um cluster de distração: acompanhe especificamente a taxa de cliques no seu CTA principal, não apenas a conversão global
Sem uma referência, faz uma alteração, reabre a heatmap um mês depois e não tem forma de saber se o que vê é melhor, pior ou simplesmente diferente. Um objetivo mensurável antes da alteração transforma a análise de heatmaps num verdadeiro ciclo de otimização, em vez de uma série de ajustes estéticos.
Em resumo
Os cinco padrões (queda de scroll, cliques fantasma, zona morta, lacuna entre dispositivos, cluster de distração) cobrem a maioria das observações úteis de uma heatmap. A maioria das páginas com problemas de conversão mostra pelo menos um deles com clareza. A maioria das equipas que olham para as suas heatmaps não sabe que os deve procurar.
A sequência que funciona: abra primeiro o mapa de scroll, encontre onde os utilizadores param. Abra depois o mapa de cliques, encontre com o que os utilizadores interagem e se essa interação serve o objetivo. Segmente por dispositivo. Segmente por fonte de tráfego. Depois vá ver as gravações de sessão dos segmentos que mostram o problema.
Os dados dizem-lhe que algo está mal. A observação diz-lhe porquê.
