Olá! Hotjar está disponível para uso em português brasileiro 🇧🇷 Comece grátis.

Aprender / Guias / Guia de mapas de calor

Voltar aos guias

Como usar os mapas de movimento para melhorar a experiência do usuário e aumentar as suas conversões

Rastrear os pontos de uma página por onde os usuários do seu site movem e onde param o cursor do mouse ajuda você a visualizar o que atrai (ou não) a atenção destes usuários em qualquer página do site ou interface de produto. Na Hotjar, chamamos essa visualização de mapa de movimento.

Esse guia explica o que são os mapas de movimento, por que eles são úteis, e como analisar os dados de movimento do mouse, para que você possa usá-los como base para implementar otimizações centradas no cliente, que melhoram a experiência do usuário (UX) e as conversões do seu site.

Neste guia abordamos:

  1. O que é um mapa de movimento?

  2. 4 maneiras de usar os mapas de movimento para melhorar a experiência do usuário e as conversões do site

  3. Em quais páginas você deve usar o rastreamento de mouse?

  4. Mapas de movimento vs. mapas de cliques vs. mapas de rolagem

  5. Como configurar e implementar um mapa de movimento no seu site

Encontre os hotspots do seu site que chamam a atenção

Use os Heatmaps da Hotjar para visualizar o movimento do mouse, identificar oportunidades de melhorias de UX, e para aumentar as suas conversões.

O que é um mapa de movimento?

Um mapa de movimento—também conhecido como mapa de calor de movimento do mouse, mapa de calor de rastreamento do mouse ou mapa de atenção— rastreia o movimento geral e o posicionamento do cursor do mouse de um usuário durante a navegação por uma página do seu site.

Os mapas de calor de movimento do mouse usam cores para mostrar o nível de atenção que os usuários dão a diferentes elementos da página: quanto mais tempo o cursor do mouse permanece em um determinado ponto, mais vermelho ele fica.

#A move map showing popular mouse positions on an example pricing page
A move map showing popular mouse positions on an example pricing page

📝 Observação: alguns mapas de movimento também coletam a atividade dos dedos em dispositivos móveis, mas isso geralmente não é muito útil, pois a maioria dos usuários de tablets ou celulares só tocam na tela para clicar ou rolar.

Por que usar um mapa de movimento para rastrear o movimento do mouse

Os mapas de movimento mostram quais partes de uma página chamam mais atenção. Como esses mapas sobrepõem o comportamento do mouse de vários usuários ao mesmo tempo, os mapas de movimento são representações quantitativas dos elementos da página que são lidos ou vistos ativamente pelos usuários.

A Hotjar move map on UI-Patterns.com shows the sidebar getting ignored

Pesquisas mostram uma correlação entre o movimento do mouse e o movimento dos olhos. Isso significa que os mapas de movimento também são um bom indicador para entender para onde as pessoas olham enquanto navegam pelo seu site.

Em comparação com o rastreamento ocular em um laboratório, os mapas de calor de movimento do mouse são mais baratos e mais fáceis de gerar, capturam mais usuários em escala, e medem de maneira eficaz o comportamento dos usuários no mundo real.

4 maneiras de usar os mapas de movimento para melhorar a experiência do usuário e aumentar as conversões do site

Use os exemplos abaixo para obter ideias sobre como aproveitar ao máximo os mapas de movimento em seu próximo UX design ou otimização da taxa de conversão ou projeto de otimização da taxa de conversão:

1. Descubra onde você está capturando a atenção do usuário

Os mapas de movimento mostram quais elementos captam mais a atenção do usuário em qualquer página—basta procurar os pontos vermelhos (hotspots).

Após descobrir o que está sendo mais visualizado pelos visitantes da página, você pode fazer recomendações de otimização e obter ideias sobre o que deve ser investigado em seguida.

A Hotjar move map on a University of Baltimore library site shows the search box getting all the attention

Por exemplo, a Universidade de Baltimore usou os Heatmaps da Hotjar para adicionar um mapa de movimento à página inicial de uma biblioteca. O mapa de calor mostrou que a maioria dos visitantes da página inicial se concentrava na caixa de pesquisa com guias, e praticamente não interagiam com outros elementos da página, como, por exemplo, o botão "Pergunte a um bibliotecário".

Se esse fosse o seu site,você poderia fazer o seguinte:

2. Avaliar se os elementos não clicáveis estão sendo vistos

A maioria dos textos e imagens não exige que os visitantes cliquem, portanto, os mapas de movimento são a única maneira de saber em larga escala se esses elementos estão sendo lidos e vistos.

#Part of a move map on a previous iteration of our guide to heatmaps
Part of a move map on a previous iteration of our guide to heatmaps

Por exemplo, geramos o mapa de movimento acima em uma versão anterior do nosso guia de mapas de calor. Esse mapa nos mostrou que muitos visitantes pararam para ver uma imagem que comparava os mapas de rolagem com os mapas de cliques. Essa descoberta nos obrigou a manter essa imagem quando atualizamos a página. Caso você encontre imagens semelhantes nesta postagem do blog, agora já saberá o por quê!

3. Veja quais elementos são ignorados

Como os mapas de movimento medem o posicionamento contínuo do mouse, que pode ser correlacionado com o movimento dos olhos, eles são melhores do que outras ferramentas de análise para mostrar quais elementos da página os usuários ignoram.

A Hotjar move map on Ukrainian fashion retailer Intertop shows visitors ignoring product listings

Por exemplo, a agência de UX/UI Turum-Burum usou a Hotjar para criar um mapa de movimento nas páginas de categorias de produtos da loja de moda Intertop. Os filtros de pesquisa recebiam toda a atenção, enquanto as listagens de produtos eram bastante ignoradas, o que sugeria que os usuários não conseguiam encontrar os resultados que estavam buscando. A equipe fez algumas alterações e adicionou mais filtros de produtos, o que contribuiu para um aumento nos cliques em produtos e uma receita média por usuário (ARPU) extra de 13,3%.

4. Segmente seus mapas de movimento para gerar insights direcionados

Diferentes segmentos de usuários se comportam de maneira diferente durante a visita ao seu site, e alguns segmentos são mais importantes para a sua empresa do que outros. A segmentação dos seus mapas de movimento ajuda você a se concentrar em seus segmentos de usuários mais valiosos.

Se estiver usando a Hotjar, você poderá filtrar os mapas de calor retroativamente: clique em "Adicionar Filtro" para ver as opções disponíveis.

#Hotjar’s heatmap filters
Hotjar’s heatmap filters

Algumas maneiras de usar esse recurso incluem:

  • Filtrar por página de saída, para ver no que os usuários prestaram atenção antes de abandonarem a página

  • Filtrar por evento como o clique em um botão para "Criar uma conta", para ver o que chamou a atenção dos usuários logo antes da conversão acontecer

  • Filtrar por referenciador ou identificador (como parâmetros UTM) para isolar e posteriormente investigar o comportamento específico do tráfego pago

A Hotjar move map on IDX’s homepage

Por exemplo, a agência de CRO The Good usou os Heatmaps da Hotjar no site do serviço de proteção de privacidade IDX para melhorar o ROI do tráfego de anúncios.

Em quais páginas você deve usar o rastreamento do mouse?

Você pode rastrear os movimentos do mouse em qualquer site ou página de produto que esteja gerando tráfego, mas os mapas de movimento são mais úteis em páginas críticas para os negócios, e em qualquer lugar onde você queira verificar a interação dos usuários com elementos não clicáveis. 🐭 Por exemplo:

  • Páginas de produtos de E-commerce: use mapas de movimento para medir quanto tempo os clientes gastam lendo as descrições dos produtos e olhando as imagens dos produtos

  • Postagens de blog: use os mapas de movimento para ver quais parágrafos e imagens chamam mais atenção

  • Páginas com altas taxas de abandono: use a análise de funil e ferramentas como o Google Analytics para identificar vazamentos de conversão e, em seguida, utilize os mapas de movimento para ver quais áreas recebem a atenção do usuário

  • CTAs essenciais para os negócios: se as chamadas para ação (CTAs) não estiverem sendo clicadas, use um mapa de movimento para solucionar o problema

Mapas de movimento vs. mapas de clique vs. mapas de rolagem

Os mapas de movimento não são o único tipo de mapa de calor que você pode usar: os mapas de cliques rastreiam onde os usuários clicam ou tocam, e os mapas de rolagem monitoram até onde os usuários rolam por uma página. Diferentemente dessas alternativas, os mapas de movimento medem o comportamento do usuário continuamente, até mesmo nos espaços de tempo entre a realização de ações na página.

Dessa forma, os mapas de movimento revelam insights que outros mapas de calor não podem revelar. Por exemplo, um mapa de rolagem pode mostrar uma alta porcentagem de usuários que rolam até a parte inferior de uma página—mas um mapa de movimento pode revelar que eles estão ignorando completamente a barra lateral dessa página. Da mesma forma, um mapa de cliques pode não mostrar cliques em uma descrição de produto, mas um mapa de movimento pode revelar que os usuários que a veem acabam convertendo.

A Hotjar move map (left) and click map (right) on Data36.com

Nenhum tipo de mapa de calor é melhor ou pior do que o outro—use-os em conjunto para obter insights mais conclusivos e mais claros:

  • Use os mapas de cliques para ver se as pessoas clicam em botões de CTA, links quebrados ou elementos sem links

  • Use os mapas de rolagem para visualizar a dobra média e ver para onde a maioria dos usuários rola a página

  • Use os mapas de movimento para descobrir quais áreas de uma página chamam mais a atenção dos usuários

Dica avançada: Caso você esteja usando a Hotjar, os mapas de calor são capturados continuamente em todas as páginas, de modo que você possa alternar entre os mapas de clique, de movimento e de rolagem sem precisar alterar nenhuma configuração.

Two ways to toggle between click, move, and scroll maps in Hotjar Heatmaps

📝Observação: talvez você perceba que existe um quarto tipo de mapa de calor na imagem acima, o mapa de zonas de engajamento. Esse mapa de calor combina os dados de cliques, de movimento e de rolagem em um formato de grade, para que você possa ver quais áreas das páginas do seu site estão recebendo mais engajamento. Experimente!

Mapas de movimento vs. gravações de sessão

Uma gravação de sessão recria a sessão de navegação de um usuário individual em várias páginas do site: você verá os movimentos do mouse, mas somente para um único usuário de cada vez.

Os mapas de movimento, por sua vez, agregam o movimento do mouse de vários usuários em uma única página. Você pode usá-los para procurar tendências gerais e ter uma ideia geral de como diferentes elementos chamam a atenção dos usuários.

Dica avançada: combine dados qualitativos e quantitativos para chegar a conclusões mais sólidas. Use mapas de movimentação para identificar um problema geral que os usuários possam estar enfrentando, como um elemento que está sendo ignorado pela maioria deles e, em seguida, observe as gravações das sessões para obter uma compreensão qualitativa do que os usuários individuais fazem.

Movimentos do mouse do usuário sendo rastreado pela ferramenta Hotjar Recordings

Como configurar um mapa de movimento no seu site

Para começar, crie uma conta gratuita na Hotjar e adicione o nosso código de rastreamento em seu site. Ative a captura de sessão e a Hotjar coletará automaticamente os mapas de movimento em seu site.

#How to view a move map in Hotjar Heatmaps
How to view a move map in Hotjar Heatmaps

Depois de receber algum tráfego no seu site, clique no ícone de mapa de calor à esquerda, insira uma URL e clique em "Exibir mapa de calor".

#Click to toggle between move maps and other heatmap types in Hotjar
Click to toggle between move maps and other heatmap types in Hotjar

Selecione um período, como, por exemplo, os últimos 30 dias, e clique no ícone de mapa de movimento para então gerar o seu mapa personalizado de movimento. É simples assim!

Crie um mapa de movimento gratuito e aumente as suas conversões hoje mesmo

Os mapas de movimento dão a você uma visão geral do que as pessoas mais prestam atenção (e mais ignoram) nas páginas gerais do seu site e nas suas páginas de produtos.

Por si só, eles são ótimos recursos visuais para ajudar a explicar o comportamento do usuário à sua equipe e aos stakeholders. Mas eles se tornam muito mais valiosos quando combinados com outros insights do seu arsenal de ferramentas analíticas: Funnels para informar onde estão ocorrendo os vazamentos de conversões, Recordings para mostrar em detalhes como as pessoas navegam por todo o seu site, e Surveys para obter feedback com as próprias palavras dos seus clientes.

E adivinhe só? Você pode fazer tudo isso com a Hotjar. 😉

Encontre os hotspots do seu site que chamam a atenção

Use os Heatmaps da Hotjar para visualizar o movimento do mouse, identificar oportunidades de melhorias de UX, e para aumentar as suas conversões.

3 perguntas frequentes sobre os mapas de movimento