Blog

O que é mapa de calor para site? Tudo que você precisa saber

Rafael Damasceno

Você suspeita que sua página de vendas deixa as pessoas frias?

Você acha que ninguém está lendo seu conteúdo ou, no mínimo, ignorando seus botões de call to action (CTA)?

As imagens do seu website estão desativando ou confundindo os visitantes?

O que são seus visitantes pensando?!

Se você fez alguma dessas perguntas ou apenas quer saber do que seus visitantes gostam e do que não gostam, entender o que é mapa de calor para site é a resposta super simples (e valiosa) que você precisa ter.

Redatores e designers tomem nota: isso vai mudar a maneira como você faz tudo.

Pronto?

Vou mostrar a você como usar mapas de calor para aproveitar ao máximo seu conteúdo visual. Melhor parte? Esses programas geralmente são gratuitos ou acessíveis (recomendo cinco favoritos na parte inferior).

O que é um mapa de calor?

Vamos começar do começo, não mesmo? O que é mapa de calor para site?

Mapas de calor ou heat maps para site, também conhecidos como “mapas flutuantes” e “mapas de cliques”, são peças incríveis de tecnologia, sem mencionar as visualizações de dados impressionantes por si só.

Um bom programa de mapeamento de calor rastreia os movimentos de um mouse – e você provavelmente percebeu que, ao ler uma página, o mouse fica perto das palavras que você está lendo.

Nós tendemos a usar o cursor como um dedo na página para marcar onde lemos, mas também usamos quando estamos considerando. Parando no meio do pensamento para decidir a antiga pergunta: clicar ou não clicar?

Ao acompanhar os movimentos do mouse, você pode ver o que atrai os olhos dos seus visitantes, as opções que eles estão considerando e o que pode estar confundindo. Você também verá, muito claramente, onde sua página não está funcionando.

Um mapa de calor parece mais ou menos assim.

(O mapa de calor abaixo é do Mouseflow no painel do WordPress)

mapa-de-calor-mouseflow-wordpress

Mapa de calor Mouseflow – Fonte: SemRush

As áreas vermelhas são onde os visitantes estão pairando mais com o mouse. Como empreendedor, você pode usar essas informações para ajustar suas ofertas e descobrir as preferências de sua base de usuários e adaptá-las de acordo.

Como redator ou designer, você pode usar essas informações para criar estratégias que gostaria de enfatizar visualmente para obter mais atenção.

Para que serve o mapa de calor?

Agora que você já sabe o que é mapa de calor para site, vamos jogar Sherlock por um minuto, vamos?

Porque os mapas de calor não são úteis apenas para mostrar o que as pessoas estão vendo, elas são inestimáveis ​​para mostrar o que os visitantes não estão vendo.

Veja este exemplo no Heatmap.me.

Vê onde estão todos os pontos quentes? Observe onde eles não estão?

mapa-decalor-exemplo

Exemplo de tela do Heatmap.me – Fonte: Semrush

As imagens costumam atrair atenção – esse é o único propósito delas. Então, se você tem uma imagem que não está chamando atenção, você fez algo errado. Esta imagem perde duas oportunidades:

  • A primeira é que ela não é particularmente atraente, e é por isso que ela nem sequer dá uma olhada legal.
  • A outra é que estudos mostraram que as legendas abaixo das imagens são lidas com mais frequência do que qualquer outro texto na página. Esta imagem não tem legenda.

mapa-de-calor-exemplo-2

Exemplo de tela do Heatmap.me – Fonte: Semrush

Quando você estiver otimizando para a conversão, convém usar:

  • suas imagens para atrair atenção;
  • incluir legendas que sirvam como CTA
  • reforçar um tema principal que você deseja que seus visitantes conheçam.

Como usar o mapa de calor?

Até aqui você já entendeu o que é mapa de calor para sites e algumas formas de usá-lo estrategicamente no seu site. Então vamos avançar.

As pessoas são facilmente distraídas – oooh um objeto brilhante!

O que eu estava dizendo? Oh sim – as pessoas são facilmente distraídas, especialmente por imagens.

Você pode usar isso para sua vantagem, criando pistas visuais que apontam as pessoas na direção certa.

Confira esta sugestão visual sutil.

Veja onde os olhos do modelo estão olhando neste site de namoro?

Bem no CTA (call to action).

exemplo-CTA

Exemplo de call to action (CTA) – Fonte: SemRush

Porém, muitas páginas da Web apontam em todos os tipos de direções com suas imagens e design, de modo que, em vez de chegar a uma página e ser direcionado para completar uma tarefa desejável, o visitante fica sobrecarregado.

O Hotjar nos mostra como isso se parece na prática.

exemplo-hotjar

Exemplo do Hotjar – Fonte: Semrush.

A atividade do cursor, idealmente, deve estar focada na mensagem principal da sua página e nos botões da CTA.

Se você vir um mapa de calor com uma névoa de traços de cursor, é provável que seus visitantes estejam confusos e não saibam o que devem fazer na sua página.

Sua taxa de conversão de lead vai sofrer.

Mas, antes de refazer a página inteira, procure ver onde está a maior concentração de calor.

Quais são as palavras que o seu público vê como chave (em vez do que você planejou como suas palavras-chave)?

Se essas palavras ou frases ressoarem em sua mensagem, talvez você queira exibi-las com mais destaque.

Se eles não o fizerem, considere a possibilidade de voltar a trabalhar na sua mensagem (porque os visitantes estão provavelmente estão tendo a ideia errada).

Dica: se você perceber no seu mapa de calor que as pessoas estão rolando para a parte inferior da sua página – muito – isso significa que elas estão procurando informações que eles não vêem.

Tente remover um elemento acima da dobra da página que não esteja recebendo muita atenção e use esse espaço para adicionar informações.

Tornando o bom ainda melhor

Usar mapas de calor para otimizar seu site é fácil – se você decifrar as pistas corretamente.

Por exemplo, se você vê pouca atividade acima da dobra, mas muita atividade em torno de uma imagem abaixo da dobra – você deve tentar mover essa imagem para cima.

Alguns programas de rastreamento de cliques (que às vezes são dobrados em programas de mapeamento de calor, como o Crazyegg na imagem abaixo) não só mostram onde os visitantes clicam, mas também segmentam cliques por fontes de referência e termos de pesquisa, o que significa que você pode ver quais imagens, CTAs e as palavras na sua página estão em sintonia com seus públicos mais lucrativos.

Legal eh? Quero dizer, quente! Tente dobrar o que funciona, movendo essas peças para posições mais proeminentes na página.

exemplo-crazyegg

Exemplo Crazyegg – Fonte: SemRush

Baixe também: Um modelo de Landing Page com os elementos mais eficientes para conversão e com anotações detalhando o uso correto de cada um dos elementos na página.

Palavra para o sábio

De volta ao dedo na metáfora da página – você já notou que seu dedo não está realmente na palavra que você está lendo, mas talvez próximo ou abaixo dela? A mesma coisa acontece em sites.

Assim, mesmo que os hotspots possam estar em um conjunto de palavras, sempre olhe ao redor e veja se há outro conjunto de palavras por perto que pode estar realmente chamando a atenção.

Mapas de calor não são perfeitos. Até os melhores estão abertos à interpretação. Pense neles como um oráculo grego – ela apontará na direção certa e dará a você uma dica sobre o que fazer quando chegar lá, mas o resto depende de você.

E se você descobrir que uma imagem não está funcionando, não precisará gastar uma hora no Photoshop para reconfigurá-la. Experimente uma ferramenta como o Visage, que permite mover texto, gráficos e elementos visuais em qualquer lugar da sua tela com um clique e arraste rápidos (você pode até mesmo redimensionar a tela dessa maneira).

Quando você não precisa de um mapa de calor

Se o tráfego do seu site estiver baixo, um mapa de calor pode não ser representativo de como seu site funcionará quando seus números aumentarem (nesse caso, tente uma ferramenta algorítmica como Feng GUI ou eyequant para otimizar o layout da página e as imagens).

Se você tiver algum tráfego, pode ser útil ver exatamente o que os usuários estão fazendo. E é quando você deseja mudar de um mapa de calor para um programa de gravação de sessão, como SessionCam ou Hotjar.

Com estes, você pode assistir seus usuários reais trabalharem o seu caminho através do seu site, preencher seus formulários e abandonar seus carrinhos (Brincadeira! Na verdade não).

Com toda sinceridade, se você estiver obtendo preenchimentos parciais de formulários, a gravação de sessões de usuários pode gerar muitas respostas.

Leia também o case da RS1, um e-commerce aumentou seu faturamento em 63%, alterando apenas uma dobra.

5 ferramentas de mapa de calor para site

  1. Mouseflow
  2. Heatmap.me
  3. Hotjar
  4. SessionCam
  5. CrazyEgg

Mouseflow

Mostra onde as pessoas clicam, tocam, movem e rolam, além de oferecer suporte a intervalos de datas personalizados, layouts móveis/responsivos e testes A/B.

Ele também rastreia a atividade do usuário de uma página para outra, para que você possa ver os caminhos que os clientes bem-sucedidos tomam e onde você está perdendo o restante. Há uma versão gratuita e é insanamente fácil de instalar.

Heatmap.me

Oferece mapas de calor em tempo real que aparecem em sua tela em segundos e atualizam constantemente – ideal para sites com muito tráfego e conteúdo que muda regularmente.

Heatmap oferece o truque de sobrepor o mapa de calor diretamente nas páginas, para que você possa navegar pelo seu site e ver o que todo mundo está olhando. Heatmap oferece um pacote básico gratuito.

Hotjar

Além do mapeamento de calor, oferece pesquisas de feedback na página. Portanto, se os usuários estiverem se comportando de uma maneira totalmente inexplicável, você pode perguntar por quê.

Os relatórios do mapa de calor dos dispositivos móveis também são úteis para verificar como os visitantes veem seu site em computadores ou em celulares e tablets. O Hotjar oferece um pacote básico gratuito.

SessionCam

Registra sessões de usuários reais, o que é útil para solucionar problemas de conversão. É como compartilhar a tela com o usuário, mas de forma anônima o que é menos assustador.

A SessionCam também oferece mapas de calor, análise de formulários e caminhos de conversão. Oferece um teste gratuito.

CrazyEgg

Oferece mapeamento de calor, rastreamento de rolagem e rastreamento de cliques. O que é muito legal é como a cor codifica os cliques de onde o usuário veio (referências ou termos de pesquisa) para facilitar a segmentação.

Oferece uma avaliação gratuita, mas sua versão básica inclui a maioria dos recursos e é de apenas US$ 9/mês para 10 páginas e 10.000 visitas (ideal para novos sites e pequenas empresas).

Você tem alguma dúvida sobre o que é mapa de calor para sites, conhece recursos ou tem algum ponto para discussão? Deixe-os nos comentários abaixo!

E se você quer colocar a conversão do seu site em outro nível, nós da Supersonic temos a busca incessante por melhores taxas de conversão no nosso DNA.

Estamos sempre analisando em cima de dados as melhores estratégias de
Conversion Rate Optimization.
Converse com nossa equipe para conhecer melhor nosso trabalho e como podemos te ajudar.