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.
