Aprender / Guias / Guia de mapas de calor
5 exemplos reais de mapas de calor: como usá-los e como interpretá-los
Mapa de calor (ou heatmaps) são termos genéricos para definir representações visuais codificadas por cores de como os usuários interagem com uma página online em um website. Por trás de cada tipo de mapa de calor estão ocultos insights muito diferenciados entre si.
Neste capítulo do guia de mapas de calor, examinamos cinco exemplos de heatmaps e como usá-los para aprimorar seu site.
Crie uma conta gratuita na Hotjar, adicione o código de rastreamento ao seu site e comece a usar os mapas de calor hoje mesmo.
1. Os mapas de rolagem mostram conteúdos importantes que são ignorados pelo usuário
O mapa de calor acima é um mapa de rolagem vertical que mostra até onde as pessoas rolam a página para baixo. Ele foi colocado na antiga página de carreiras da Hotjar para ver como os candidatos em potencial a vagas de emprego interagem com o conteúdo.
O que o mapa de rolagem destacou
Quando você olha para o mapa de rolagem, pode identificar imediatamente duas alterações nítidas no gradiente de cores: uma na parte superior da página (de vermelho para amarelo) e outra três quartos abaixo da página (de verde para azul escuro). Em um mapa de rolagem, geralmente espera-se que as cores se tornem gradualmente mais frias. Uma mudança brusca o alerta para o fato de que uma porcentagem significativa de usuários parou de rolar a página depois de chegar a um ponto específico.
Vamos nos concentrar na mudança de verde para azul da parte inferior da página. Com base na forma como o conteúdo está distribuído, podemos traçar duas hipóteses:
Os visitantes pensam que a página termina assim que a seção "vagas atuais" acaba e, como resultado, eles saem
Os candidatos em potencial estão interessados nas vagas em aberto e clicam para ir para a próxima página
De qualquer forma, a parte inferior da página só é vista por cerca de 20% do total de visitantes.
A nota de 5 pontos de 5 da Hotjar na Glassdoor (que está muito acima da média) é um excelente elemento de prova social para candidatos em potencial, mas 80% das pessoas que acessam a página nunca saberão disso.
Por que um mapa de rolagem foi útil para esse caso de uso?
Os dados do mapa de calor mostraram que 80% dos visitantes não chegaram à parte inferior da página do site, e por isso não viram a seção de prova social.
A partir destes insights, decidimos encurtar (drasticamente) a página e colocar os depoimentos dos funcionários mais acima, logo abaixo do limite visual médio (dobra de página).
Agora, 75% dos visitantes veem a seção de depoimentos e incríveis 69% chegam ao final da página. Nada mal!
💡Dica avançada: combinamos dados numéricos dos mapas de calor com insights qualitativos obtidos através de feedback dos nossos usuários para aprimorar ainda mais a página.
Por exemplo, um usuário apontou que não conseguia filtrar as vagas por cargos/funçōes ou local. Baseado nesta informação valiosa, decidimos adicionar esta opção:
Insights dos usuários como esse são uma mina de ouro para o seu site, produto ou serviço.
2. Os mapas de cliques revelam que os usuários estão ignorando um vídeo na página
O mapa de calor acima é um mapa de cliques ou mapa de calor de cliques, que mostra a quantidade de cliques dos usuários sob a forma de uma paleta de cores mais clara (poucos cliques) ou mais escura (mais cliques). Ele foi colocado na nova versão de nossa página "Carreiras" para estudar a interação dos nossos usuários com os principais elementos da página.
O que o mapa de cliques destacou
Como parte da reformulação da página "Carreiras", incluímos um vídeo na seção de depoimentos na parte superior. Presumimos que os visitantes estariam ansiosos para ver como foi a nossa última reunião da empresa e clicar no botão "play". Só que eles não o fizeram.
Esse botão solitário ficou em grande parte sem ser clicado, com apenas 2 cliques de um total de 3300 sessões (isso representa uma taxa de CTR de apenas 0,02)
Por que um mapa de cliques foi útil para esse caso de uso?
O mapa de cliques forneceu um ponto de dados interessante sobre a nossa suposição de que os usuários preferem assistir a cultura Hotjar em ação ao invés de ler sobre ela.
Essa simples análise de dados nos permitiu formular duas hipóteses para explicar por que os visitantes do site não reproduziram o vídeo:
Eles não estavam interessados nele
Eles não perceberam que trata-se de um vídeo e de que o botão é clicável
Para validar essas hipóteses, poderíamos efetuar um teste A/B para alterar o layout ou o conteúdo desta seção, melhorando assim a experiência do usuário.
💡Dica avançada: realizar entrevistas com usuários através do Hotjar Engage também poderia nos ajudar a obter feedback direto dos usuários sobre o motivo pelo qual eles não clicam no vídeo. Essa etapa preliminar de pesquisa de produto informaria o tipo de alteração que precisamos fazer nesta seção antes de iniciar um experimento.
3. Os mapas de movimentação mostram por onde os usuários movem o mouse em uma página
O mapa de calor acima é um mapa de movimento ou mapa de calor de rastreamento do mouse, que mostra o movimento do mouse à medida que os usuários navegam por uma página. Inconscientemente ou não, os olhos dos usuários seguem os movimentos do mouse à medida que eles clicam e passam o mouse sobre os diferentes elementos da página. Portanto, os mapas de movimento podem ser usados como uma tecnologia confiável de rastreamento ocular.
O que o mapa de movimento destacou
Colocado em nosso guia de Heatmaps, o mapa de movimentação informa o que chama a atenção dos leitores nesse conteúdo de formato longo. Um insight interessante foi o fato de que blocos longos de texto não conseguiam prender a atenção dos leitores, conforme indicado pelo esquema de cores mais claras, visíveis mais abaixo neste parágrafo:
Por que um mapa de movimento foi tão útil para esse caso de uso?
Como menos leitores passavam o mouse sobre a parte inferior desta seção de texto, é seguro presumir que a maioria começava a ler, mas acabava simplesmente escaneando rapidamente o conteúdo.
Com base nisso podemos traçar duas hipóteses:
o conteúdo em si não era suficientemente cativante ou relevante, ou
os leitores obtiveram as informações que estão buscando logo no início da seção
No primeiro caso, precisamos alterar o conteúdo para tornar a leitura até o final mais atraente. No segundo caso, podemos concluir que conseguimos dar ao leitor o que ele queria logo no início e, nesse caso, deveríamos considerar encurtar esta seção.
Porém, antes de tomar qualquer decisão, talvez seja necessário entender mais sobre o contexto desse comportamento do usuário e validar a nossa hipótese—nesse caso, o mapa de movimento é um excelente ponto de partida para uma pesquisa mais avançada e aprofundada.
💡Dica avançada: uma pesquisa de feedback sobre conteúdo também pode nos ajudar a determinar se os leitores estão satisfeitos com o conteúdo da página, o que pode estar faltando, ou se o layout não é do agrado deles.
4. Os mapas da Zona de Engajamento mostram como os usuários interagem com a página
Os mapas da Zona de Engajamento combinam conjuntos de dados de cliques, movimentos e rolagens para desktop—-ou toques e rolagens no caso de celulares e tablets—-em uma única exibição. É a ferramenta de análise de mapa de calor ideal para a visualização de dados.
Quais zonas de engajamento foram destacadas
Ao analisar a seção de depoimentos da nossa página “Sobre nós”, a ferramenta de mapa de calor mostra que os usuários estão engajando com os cartões (Oba!).
O logotipo da Glassdoor e o componente "Funcionário atual da Hotjar" obtêm o maior engajamento, como se os usuários quisessem clicar para ver a avaliação na Glassdoor...mas nenhum desses componentes é clicável (Ops!).
E pior ainda: o CTA "Leia a avaliação", que é clicável, é totalmente ignorado (Oh-oh!).
Por que as zonas de engajamento foram úteis para esse caso de uso?
O comportamento do usuário nessa seção indica o seu desejo de verificar a autenticidade das avaliações da Glassdoor. Afinal de contas, seria justo supor que uma empresa que não faz um link para os depoimentos simplesmente inventou esses depoimentos.
Certamente não queremos que nossos usuários tenham essa impressão—principalmente porque nós temos links para as avaliações na Glassdoor.
Os mapas da Zona de Engajamento destacaram uma possível fonte de desconfiança. Com esse insight prático, podemos revisar o design de nossos cartões de testemunho para melhorar a experiência do usuário (UX) com confiança:
Tornar o logotipo da Glassdoor e o elemento inferior esquerdo clicáveis e/ou
Tornar o CTA para "Ler a avaliação" mais visível
💡Dica avançada: antes de efetuar qualquer alteração, poderíamos usar uma pesquisa de teste conceitual para fazer um teste de preferência e avaliar qual dos dois (ou mais) designs teria mais repercussão entre os usuários.
Exemplo de um teste de preferência para o logotipo do Hotjar
5. Os mapas de cliques de raiva ajudam a identificar exatamente em que ponto das páginas os usuários estão ficando frustrados
Como você deve ter adivinhado, um mapa de cliques de raiva mostra onde os cliques de raiva ocorrem em uma página. Cliques de raiva são indicadores essenciais de frustração do usuário—eles indicam um atrito que prejudica as taxas de conversão.
O que um mapa de cliques de raiva destacou
Ao examinar a tabela de preços, um aspecto que se destaca no padrão dos cliques de raiva é o foco nos recursos incluídos em cada plano.
Isso sugere que os usuários não entendem o que esses recursos significam ou que gostariam de obter mais detalhes. Os usuários podem esperar que cada recurso tenha um link para uma explicação, na mesma página ou em uma página diferente.
Por que um mapa de cliques de raiva foi útil para esse caso de uso?
O padrão de cliques de raiva nessa página nos diz que a nossa página de preços pode precisar de algumas modificações extras com o objetivo de melhorar a experiência do usuário. Algumas opções incluem:
Tornar os balões de informações mais visíveis
Exibir o conteúdo das bolhas de informações quando os usuários passam o mouse sobre o texto (e não apenas sobre as bolhas)
Substituir os balões de informações por um componente suspenso
Renomear os recursos para torná-los mais explícitos
Adicionar um link aos recursos para enviar os usuários mais adiante na página, onde eles encontrarão uma explicação mais detalhada
Ao identificar objetos de frustração do usuário, o mapa de cliques de raiva proporcionou oportunidades de aprimoramento da experiência do usuário. Agora podemos fazer testes A/B para identificar quais alterações repercutem melhor entre nossos usuários.
💡Dica avançada: os mapas de cliques de raiva também podem destacar cliques "mortos" na sua página: se você notar um indicador de cliques de raiva em um botão de CTA ou em um híperlink, isso pode ser um sinal de que os usuários não conseguem clicar nesse link. Como resultado, sua taxa de conversão certamente cairá, portanto:
Confira a página que está no ar
Fique de olho nas taxas de conversão em Funis
Assista a gravações de sessões de usuários filtradas por 'erros' nesta página
Se houver de fato um clique "morto" na página, corrija-o e veja suas principais métricas dispararem! 🚀
Obtenha mais informações com os diferentes tipos de mapas de calor
Agora que você aprendeu como usar cada tipo de mapa de calor, não há nada que o impeça de coletar insights valiosos sobre o comportamento do usuário. Comece a coletar dados para melhorar a experiência do usuário em seu site e aumentar as conversões.
Crie uma conta gratuita na Hotjar, adicione o código de rastreamento ao seu site e comece a usar os mapas de calor hoje mesmo.
