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

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

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.

📝 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.

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.

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:

• Obter mais dados através das gravações de sessão, para ver exatamente como cada visitante usa a caixa de pesquisa

• Ver onde os usuários estão despejando cliques de raiva e onde ficam confusos

• Considerar a aplicação de Testes A/B em novos layouts (como três caixas de pesquisa separadas ao invés de apenas uma com guias) e, em seguida, colocar mapas de movimento em suas variantes de teste A/B para descobrir por que as variantes bem-sucedidas vencem

• Considere adicionar uma pesquisa no site para perguntar aos usuários se há algo faltando na página

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.

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.

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.

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

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.

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.

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

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.

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.

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".

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. 😉