Mapa de calor do site: como ler sem confundir clique com atenção

Ferramentas gratuitas puseram o mapa de calor ao alcance de qualquer site: instala-se um código, espera-se um dia e a página aparece pintada de vermelho, amarelo e azul. Os guias sobre o assunto explicam os tipos de mapa e indicam ferramentas. Quase nenhum ensina a parte que decide se o mapa ajuda ou atrapalha: como ler. E ler mal é fácil, porque o mapa fica bonito com qualquer número de visitas.

O erro mais caro não é deixar de instalar o mapa. É redesenhar a página porque uma mancha vermelha apareceu no lugar errado, com poucas dezenas de visitas, misturando celular e computador, sobre um carrossel que a imagem nem mostra. Este guia trata o mapa de calor pelo que ele é: um gerador de hipóteses, e não um veredito.

O que é mapa de calor de um site?

É uma visualização que soma o comportamento de muitas visitas sobre uma imagem da página. A ferramenta registra onde as pessoas clicam, até onde rolam e quanto tempo cada trecho fica na tela, agrega tudo e pinta: quanto mais quente a cor, mais concentrado o comportamento naquele ponto.

O que o mapa faz bem é mostrar padrões que ninguém enxerga assistindo a uma visita de cada vez: um botão ignorado, um texto que parece link e recebe cliques, um trecho importante que fica abaixo de onde a maioria para de rolar. O que ele não faz é explicar o porquê. O mapa responde onde; a explicação vem de outras fontes, como gravações de sessão, conversas com clientes e testes com usuários.

Vale separar também de dois homônimos que dominam a busca: o mapa de calor de planilha (a tabela colorida do Excel ou do Power BI) e o de geografia. Aqui, o assunto é o comportamento de visitantes numa página web, a ferramenta que o trabalho de otimização de conversão usa para decidir o que testar.

Quais são os tipos de mapa de calor e o que cada um mede?

Os nomes variam de ferramenta para ferramenta, mas os tipos se repetem. A documentação dos mapas de calor do Microsoft Clarity, a ferramenta gratuita da Microsoft, lista cinco: clique, rolagem, área, conversão e atenção, e informa que eles podem ser gerados para uma página só ou para um grupo de páginas. A tabela resume o que cada um registra e, mais importante, o que ele não prova.

Tipos conforme a documentação do Microsoft Clarity (visão geral, mapas de clique, de rolagem e de atenção), consultada em 12/10/2026. A última coluna é leitura da Alliance.

Há um tipo que nenhuma dessas ferramentas produz: o mapa de eyetracking, feito em estudo com equipamento que rastreia o movimento do olho. É o único que mede para onde a pessoa olhou. Os outros medem o que a mão fez ou o que a tela mostrou, e é dessa diferença que vem a maioria das leituras erradas.

Qual a diferença entre clique, rolagem e atenção?

O clique mostra intenção de agir. A rolagem mostra que a tela passou por ali. O tempo de exibição mostra que o trecho ficou visível. Nenhum dos três garante que o olho parou. Um visitante pode rolar até o rodapé procurando o telefone sem ler uma linha do meio, ou deixar a aba aberta numa seção enquanto atende uma ligação.

Leia o número pelo que ele é. É tempo de olhar, não percentual de pessoas. É computador, não celular. E é média de muitas páginas e tarefas, não regra para a sua página. O que ele ensina a quem lê mapa de calor é outra coisa: mesmo quem rola a página olha pouco o que fica embaixo. A segunda tela recebeu cerca de um terço do tempo da primeira (17%), e os 26% restantes se espalharam pelo resto da página em fatias pequenas.

Por isso, um mapa de rolagem que mostra 60% dos visitantes chegando ao meio da página não diz que 60% leram o meio. Diz que, para os outros 40%, o meio nem apareceu na tela. É uma informação útil, só que de outra natureza: o mapa de rolagem é ótimo para mostrar o que ninguém viu, e fraco para provar o que foi visto.

O mesmo cuidado vale para o mapa de atenção. No Clarity, ele mede o tempo médio em que cada parte da página ficou na tela, comparado à duração média da sessão. É tempo de exibição, não de leitura. Um trecho quente pode ser o mais interessante da página ou o mais confuso, aquele em que a pessoa empacou. Só a gravação da sessão separa um caso do outro.

Por que um mapa com poucas visitas parece tão convincente?

Porque a ferramenta não avisa. A documentação do Clarity diz com todas as letras que não há tráfego mínimo para gerar um mapa de calor. É uma decisão de produto razoável, já que o mapa sai na hora e quem tem pouco tráfego também pode olhar, mas ela transfere a quem lê a responsabilidade de saber se aquelas cores significam alguma coisa.

Com poucas visitas, cada pessoa pesa demais. Três visitantes que clicaram na foto do produto pintam a foto de vermelho. Um visitante que deixou a aba parada numa seção esquenta a seção inteira no mapa de atenção. A cor diz o que é mais popular dentro daquele mapa; ela não diz quantas pessoas formam essa popularidade. Para saber, leia o número de visualizações que o Clarity mostra no rodapé do mapa, junto da escala de cores.

Não existe um número de visitas que valha para toda página, e desconfie de quem oferece um sem dizer de onde tirou. O critério que funciona é o da repetição: um padrão só é padrão se aparece de novo. Gere o mapa de um período, depois o de outro período do mesmo tamanho, e compare. Se a mancha principal muda de lugar, a amostra ainda não segurou o desenho. Se ela se mantém, você tem algo para investigar.

O Clarity tem um recurso de comparação que abre dois mapas lado a lado, cada um com seu próprio período, segmento e dispositivo. Ele serve exatamente para esse teste, e para comparar a página antes e depois de uma mudança.

Mapa de calor com poucas visitas não é dado fraco: é anedota pintada com as cores de um dado.

Como ler um mapa de calor sem se enganar?

Antes de mudar qualquer coisa na página, faça ao mapa as cinco perguntas abaixo. As quatro primeiras dizem se o mapa é confiável; a quinta diz o que fazer com ele. Se alguma resposta for "não", o mapa ainda não sustenta a decisão. Sustenta, no máximo, uma suspeita.

1. Amostra: o desenho se repete?

Compare dois períodos e veja se o padrão se mantém. Olhe também o número de visualizações por trás do mapa e, se a página tem objetivo de conversão, quantas conversões aconteceram no período. Uma página com muitas visitas e quase nenhum lead produz, na prática, um mapa de quem não converte. Isso pode ser exatamente o que você precisa saber, desde que saiba que é isso.

2. Dispositivo: celular e computador estão separados?

No celular a página é outra: coluna única, menu recolhido, botão em outra posição, dobra em outra altura. Somar os dois produz o mapa de uma página que ninguém viu. O Clarity permite escolher entre PC, tablet e celular nos mapas. Comece pelo dispositivo que traz mais tráfego para aquela página, informação que o Google Analytics dá em segundos.

3. Segmento: quem é esse público?

Quem chega por anúncio, por busca orgânica ou por e-mail chega com intenções diferentes. O cliente que volta para acessar a área logada clica em lugares que o visitante novo nem procura. Se a página recebe públicos muito distintos, use os filtros e segmentos da ferramenta (origem, visitante novo ou recorrente) antes de concluir. A média de todos costuma ser o comportamento de ninguém.

4. Elemento dinâmico: a imagem mostra o que foi clicado?

Carrossel, menu suspenso, abas, pop-up, banner que alterna: o mapa desenha os cliques sobre uma captura da página, e essa captura é de um momento só. A documentação do Clarity avisa que a imagem às vezes não mostra o elemento clicado, e que a ferramenta não captura o que está dentro de elementos Canvas ou de iframes de terceiros. Quando uma mancha aparece num lugar sem sentido, abra as gravações das sessões em que aquele elemento foi clicado, atalho que o próprio mapa oferece, ou troque a captura usada no mapa.

5. Hipótese: que mudança o mapa sugere, e como medir?

A última pergunta transforma a leitura em trabalho. Escreva a hipótese em uma frase com causa e efeito: "os visitantes de celular não chegam ao formulário porque ele está depois de três blocos de depoimento; subir o formulário vai aumentar os envios". Depois decida como medir: com teste A/B, se houver tráfego, ou com comparação de antes e depois por períodos iguais, sabendo que ela não isola a causa.

O que significa cada cor do mapa de calor?

A convenção é a de um termômetro: vermelho e laranja são as áreas mais quentes, onde se concentram cliques, rolagem ou tempo; verde e azul são as mais frias. Na documentação do Clarity, a regra aparece assim: as cores esquentam à medida que a popularidade de um trecho aumenta. No mapa de cliques, mais calor é mais cliques; no de rolagem, mais visitantes chegando; no de atenção, mais tempo.

Duas cautelas. A primeira: a cor compara pontos dentro do mesmo mapa. O vermelho de um mapa com poucas dezenas de visitas e o de um mapa com dezenas de milhares não têm o mesmo peso, então leia sempre o número de visualizações junto da cor. A segunda: frio não é sinônimo de ruim. Um rodapé azul no mapa de cliques é o esperado; um botão de compra azul é um problema. A cor só ganha sentido comparada com o papel que aquele elemento deveria ter na página.

Quais sinais do mapa de cliques merecem atenção primeiro?

O mapa de cliques geral mostra tudo misturado. Os recortes mais úteis para quem procura atrito são outros, e a página do mapa de cliques do Clarity separa cada um:

• Cliques mortos: cliques em pontos que não produzem resposta da página. Costuma ser um elemento que parece clicável e não é (uma imagem, um título sublinhado, um ícone) ou um link quebrado.
• Cliques de raiva: cliques rápidos e repetidos na mesma pequena área, num intervalo curto. Sinal de que a pessoa esperava que algo acontecesse e nada aconteceu, ou aconteceu devagar demais.
• Cliques com erro: cliques que acontecem logo antes de um erro de JavaScript. Aqui o problema é técnico; o caminho é passar ao desenvolvimento com o elemento identificado, e o Clarity copia o seletor CSS do elemento para isso.
• Primeiros e últimos cliques: o que as pessoas fazem ao chegar e o que fazem antes de sair. Quando o último clique se concentra no menu ou num link para outra página, ele indica o que a página não entregou.

Esses recortes têm uma vantagem sobre o mapa geral: apontam para defeitos, não para preferências. Um clique morto repetido por muita gente é mais fácil de defender numa reunião do que uma mancha vermelha sobre uma foto. E se o botão principal da página aparece frio, vale ler o artigo sobre o botão de call to action que não parece botão antes de simplesmente trocar a cor dele.

Como transformar o mapa de calor em teste, e não em redesenho?

O mapa responde onde. A gravação de sessão responde como. A conversa com o usuário responde por quê. E só a medição responde se a mudança funcionou. Pular etapas é o que leva ao redesenho por impressão, aquele que muda tudo ao mesmo tempo e não deixa saber o que deu certo.

1. Mapa: identifique o padrão que se repete em dois períodos, no dispositivo certo e no segmento certo.
2. Gravações: assista às sessões que passam por aquele ponto para ver a sequência completa. O artigo sobre o que a gravação do Microsoft Clarity guarda explica a ferramenta e os cuidados com privacidade e consentimento.
3. Pessoas: quando a gravação mostra a hesitação mas não o motivo, observe usuários reais. Um teste de usabilidade com cinco pessoas mostra o porquê que nenhum mapa mostra.
4. Hipótese: escreva a mudança, o efeito esperado e a métrica que vai decidir, antes de mexer na página.
5. Teste: rode um A/B quando o tráfego permitir; confira quanto tráfego e quanto tempo um teste A/B precisa antes de começar. Sem tráfego, implante e compare antes e depois por períodos iguais, com a ressalva de que outras coisas também mudam no meio do caminho.

Depois da mudança, gere de novo o mapa e compare com o anterior. Ele não prova que a conversão subiu (quem prova é a métrica escolhida na hipótese), mas mostra se o comportamento mudou do jeito esperado. Se o formulário subiu e continua frio, a hipótese estava errada, e isso também é resultado: uma explicação a menos na lista.

Qual ferramenta usar: Clarity, Hotjar ou Google Analytics?

Para a maioria dos sites, a escolha é entre uma ferramenta gratuita e uma com planos pagos e mais recursos de pesquisa. O Microsoft Clarity é gratuito, sem limite de tráfego segundo a própria Microsoft, e reúne os cinco tipos de mapa e as gravações de sessão. O Hotjar tem plano gratuito e planos pagos; pela página de preços consultada em 12/10/2026, todos incluem mapas de calor, gravações, funis e pesquisas com o visitante. Planos e limites mudam com frequência: compare na página de cada uma antes de decidir.

O Google Analytics 4 não substitui nenhuma das duas nesse ponto. Pela documentação da medição otimizada do GA4, o evento de rolagem é registrado uma única vez, quando 90% da altura da página fica visível, e o clique automático é só o de link que leva para fora do site. É dado de evento, não de posição na tela: serve para contar, não para pintar a página. O Clarity, por sua vez, tem integração com o Google Analytics, o que permite cruzar as duas leituras.

Documentação do Microsoft Clarity, página de preços do Hotjar e documentação da medição otimizada do GA4, consultadas em 12/10/2026.

Na prática, as pontas se completam. O GA4 diz quais páginas importam e para qual público; o mapa diz o que acontece dentro delas. Comece pela página que tem mais tráfego e mais peso na conversão, e não pela home por hábito.

O que muda na leitura por tipo de site?

As cinco perguntas valem para qualquer página, mas o que procurar muda de um negócio para outro.

• Landing page de campanha: o tráfego vem quase todo de anúncio, e a origem define o dispositivo. Filtre por dispositivo antes de tudo e veja se o formulário ou o botão principal aparece antes do ponto em que a maioria para de rolar. Para o restante da checagem, há o guia sobre como saber se a sua landing page está boa.
• Loja virtual: a página de produto concentra o que importa. Foto, cálculo de frete e seletores de tamanho ou cor são os lugares onde vale procurar primeiro cliques mortos e de raiva. O mapa de conversão ajuda a separar o clique que aparece junto da venda do clique que só distrai.
• Site institucional e de serviços B2B: pouco tráfego por página e decisão longa. Aqui a regra da repetição pesa mais. Agrupe páginas parecidas (todas as de serviço, por exemplo) para juntar volume, já que o Clarity gera mapa de um grupo de páginas.
• Blog e conteúdo: os mapas de rolagem e de atenção mostram onde o leitor desiste. Se a maioria sai antes do primeiro link para o serviço, quem está no lugar errado é o link, não o leitor.

Quais os erros mais comuns ao usar mapa de calor?

• Decidir com o mapa da primeira semana. Sem comparar dois períodos, não há como saber se o desenho é padrão ou acaso.
• Misturar dispositivos. A dobra do celular e a do computador ficam em alturas diferentes; a média das duas não descreve nenhuma.
• Ler rolagem como leitura. Chegar à tela não é ler. O eyetracking da NN/g mostra a atenção caindo depressa depois da primeira tela, mesmo entre quem rola.
• Confiar na captura de tela. Em carrossel, menu e conteúdo que muda, a imagem pode não ser o que o visitante viu.
• Levar o botão até a mancha vermelha. A mancha mostra onde as pessoas clicaram com a página como ela está. Mudar a página muda o comportamento. Isso é hipótese para testar, não conclusão.
• Esquecer o consentimento. Mapas e gravações coletam dados de comportamento. Confira se o aviso de cookies e a política de privacidade do site mencionam a ferramenta; o artigo sobre o Clarity detalha esse ponto.

Por onde começar hoje?

Escolha uma página só: a que mais pesa na geração de leads ou de vendas. Instale a ferramenta se ainda não tiver, espere juntar visitas de dois períodos comparáveis e faça as cinco perguntas antes de abrir o editor da página. Escreva o que o mapa sugere como hipótese, não como verdade, e decida de antemão como vai medir.

Se a dúvida for maior do que uma página (se o problema é de tráfego, de oferta ou de jornada), o diagnóstico de marketing gratuito da Alliance mostra onde estão as lacunas antes de você investir em ferramenta. E quando o mapa já levantou mais hipóteses do que a equipe consegue testar, o trabalho de CRO, otimização de conversão organiza a fila: o que testar primeiro, com qual tráfego e como medir.