O guia completo sobre mapas de calor (ou heatmaps)

Neste guia você encontrará uma introdução aos diferentes tipos de heatmaps, e poderá aprender como criar e analisar os mapas de calor. Você também terá acesso a estudos de caso e exemplos práticos para que você possa descobrir por si mesmo o quanto os mapas de calor são valiosos e úteis quando se trata de aprimorar e expandir seu website, além de melhorar a experiência do usuário.

(Se você ler este guia até o final, terá uma visão geral completa da ferramenta permanentemente gratuita de heatmaps da Hotjar. 😉)

O que é um mapa de calor?

Um heatmap (ou mapa de calor) é uma representação gráfica de dados onde os valores são representados por cores. 

Essa representação gráfica é essencial para detectar o que funciona e o que não funciona em um site ou página, e com quais partes e elementos de uma página os usuários se engajam. 

Ao testar e experimentar como determinados botões e elementos estão posicionados no seu site, os mapas de calor permitem que você avalie o desempenho do seu produto, aumentando o envolvimento e a retenção do usuário à medida que você prioriza os trabalhos a serem feitos, resultando em uma agregação de valor para o cliente.

Os mapas de calor facilitam a visualização de dados complexos e a sua compreensão em um piscar de olhos:

Acredita-se que a prática que hoje chamamos de criação de mapa de calor tenha se originado no século XIX, quando o sombreamento manual de escala da cor cinza era usado para representar padrões de dados em matrizes e tabelas.

O termo mapa de calor foi registrado pela primeira vez no início da década de 1990, quando o designer de software Cormac Kinney criou uma ferramenta para exibir informações do mercado financeiro em tempo real na forma de gráficos.

Atualmente, os mapas de calor ainda podem ser criados à mão, usando planilhas do Excel ou com a utilização de uma ferramenta de insights de experiência digital, como a Hotjar. 

O que é o mapa de calor de um site, e como você pode utilizá-lo para aprimorar o seu produto?

Os mapas de calor de produtos e websites visualizam os elementos mais populares (quentes) e os elementos menos populares (frios) do seu conteúdo utilizando cores em uma escala de vermelho a azul.

Quem usa os mapas de calor e como eles funcionam? 

Os mapas de calor oferecem às equipes de produtos, profissionais de marketing, analistas digitais e de dados, designers de experiência do usuário (UX), especialistas em redes sociais– e qualquer um que vende qualquer coisa on-line–insights profundos sobre o comportamento das pessoas em seus sites, ajudando-as a descobrir por que elas não estão adotando seus produtos, usando botões de CTA (call to action) ou convertendo. 

Ao agregar o comportamento do usuário, os mapas de calor facilitam a análise de dados -  combinando dados quantitativos e qualitativos - e fornecem uma compreensão instantânea de como seu público-alvo interage com um site ou página de produto individual - no que eles clicam, por onde rolam a tela, e o que ignoram - o que ajuda a identificar tendências e a otimizar o seu produto e site para aumentar o engajamento do usuário, as conversões (CRO) e finalmente, as vendas.

Os mapas de calor também costumam exibir a dobra média, que é a parte da página que as pessoas veem na tela sem rolar, assim que chegam a ela.

 Os benefícios de usar mapas de calor em seu site

Os mapas de calor ajudam os gerentes de produtos e os proprietários de websites a entender como as pessoas interagem com as páginas de seus sites para encontrar respostas para questões essenciais relacionadas a objetivos comerciais como por exemplo: "Por que meus usuários não estão convertendo?" ou "Como faço para que mais visitantes tomem ação no meu site?” Usando mapas de calor, é possível determinar se os usuários estão:  

• Chegando ao conteúdo importante ou simplesmente não o estão vendo

• Encontrando e usando os principais links, botões, opt-ins e CTAs de uma página

• Se distraindo com elementos não clicáveis

• Tendo problemas com o site em diversos dispositivos

Como uma ferramenta visual, os mapas de calor o ajudam a tomar decisões fundamentadas e baseadas em dados para testes A/B, efetuar atualizaçōes, ou até mesmo (re)projetar seu site. Eles também são úteis em uma escala comercial mais ampla: os mapas de calor permitem que você mostre aos membros da sua equipe e aos acionistas o que está acontecendo, e que você obtenha com mais facilidade a sua aprovação quando forem necessárias alterações—é difícil argumentar contra um mapa de calor!

Os mapas de calor da Hotjar coletam dados continuamente e permitem que você filtre esses dados para criar mapas de calor customizados, com base em atributos do usuário— como por exemplo a função ou o cargo do usuário, a data em que ele criou a sua conta, se ele está em uma versão de avaliação do seu produto e muito mais—para que você possa encontrar rapidamente insights direcionados e específicos.

Por exemplo, as equipes de produtos podem usar os mapas de calor para testar como os usuários estão interagindo com um novo recurso ou priorizar correções de bugs, enquanto os designers de UX e UI podem usar os mapas de calor para medir a popularidade ou a aversão ao design de uma página e implementar alterações que facilitem a navegação dos clientes em seu site.

Com a função Destaques da Hotjar, você pode "favoritar" e compartilhar rapidamente insights específicos de um heatmap com outros departamentos ou indivíduos em sua empresa, alcançando assim uma colaboração multifuncional bem-sucedida.

Você também pode criar uma "coleção" de mapas de calor para destacar elementos específicos que deseja que sua empresa ou equipe priorizem. 

Por exemplo: um profissional de marketing digital pode criar uma coleção de mapas de calor para testar uma página de destino específica dentro do site e, em seguida, decidir mover um botão de CTA acima da dobra média, reduzindo a rotatividade e aumentando o número de inscrições para o seu site ou produto.

Quais são os diferentes tipos de mapas de calor (heatmaps)?

Heatmap é, na verdade, um termo genérico para diferentes tipos de mapas de calor: mapas de rolagem vertical, mapas de cliques e mapas de movimentação. Saber a diferença é muito útil, pois cada tipo de mapa ajuda a investigar um aspecto ligeiramente diferente do seu site e do desempenho do seu produto.

Vamos mergulhar de cabeça no assunto!

1. Mapas de rolagem

Os mapas de rolagem mostram a porcentagem exata de pessoas que rolam a tela para baixo até qualquer ponto da página: quanto mais vermelha a área, mais visitantes a veem.

2. Mapas de cliques

Os Mapas de cliques mostram os pontos específicos de um site onde os visitantes clicam com o mouse em dispositivos desktop, e onde tocam com o dedo em dispositivos móveis (nesse caso, eles são conhecidos como mapas de calor de toque). O mapa é codificado por cores para mostrar os elementos que foram mais clicados ou tocados (vermelho, laranja, amarelo).

3. Mapas de movimento

Os move maps ou mapas de movimento rastreiam onde os usuários de desktop movem o seu mouse enquanto navegam pela página. Os pontos quentes em um mapa de movimento representam o ponto onde os usuários moveram o cursor em uma página, e pesquisas sugerem uma correlação entre onde as pessoas estão olhando e onde está o ponteiro do mouse - o que significa que um mapa de movimento fornece uma indicação de onde as pessoas podem estar olhando enquanto navegam pela sua página.

4. Zonas de engajamento

As Zonas de engajamento combinam conjuntos de dados de interação de mapas de calor de clique, rolagem e movimentação em uma exibição simples.

É uma poderosa ferramenta de visualização de dados que lhe ajuda a analisar páginas em segundos, para que você possa ter uma visão completa do engajamento do usuário com o seu produto.

5. Mapas de cliques de raiva

Os mapas de cliques de raiva permitem que você identifique exatamente onde os usuários ficam frustrados em uma página. Identifique e resolva esses pontos problemáticos para reduzir os cliques de raiva e o atrito que é produzido em seus principais fluxos para melhorar a experiência do usuário (UX) e aumentar as conversões.

6. Mapas de calor para desktop, tablet e celular

Os mapas de calor para desktop, tablet e celular ajudam a comparar o desempenho do seu website em diferentes dispositivos. Por exemplo, o conteúdo que é destaque em uma página de desktop pode ficar muito abaixo da dobra em um telefone — e você precisa verificar se a interação se diferencia entre eles, e de qual maneira.

Pronto para criar um mapa de calor e melhorar a experiência do usuário no seu site?

Os mapas de calor são fáceis de criar e de serem compreendidos, e lhe permitem chegar a insights práticos que ajudam a melhorar a jornada do usuário e as suas páginas de produtos, aumentando assim a retenção do usuário e as inscrições no seu site!