Skip to main content
Sobre nós

27 de Abril de 2020 6 Minutos lidos

Utilização de mapa térmico do website para melhorar o UX e as conversões

De blocos de células coloridos a software de mapa térmico complexo

O termo mapa de calor ou heatmap foi registrado pela Cormac Kinney em 1993, e a primeira aplicação em larga escala dele pareceu uma tabela de blocos de células retangulares coloridas. O objetivo era tentar mostrar os dados dos mercados de ações de uma forma amigável que pudesse ajudar a identificar tendências e superar os mercados financeiros. Simplificando, eram visualizações de dados que usavam cores para representar valores em uma matriz.

30 anos depois, eles também ganharam um lugar no nicho analítico do site.

Por que os heatmaps são uma ferramenta de análise de dados tão poderosa quando se trata de análise da web e de entender como os usuários interagem com os sites?

Os heatmaps são muito mais visuais do que os seus relatórios analíticos habituais. Torna-os mais acessíveis, particularmente para pessoas que não estão habituadas a analisar dados.

As cores do Heatmap variam do vermelho escuro ao azul frio, para indicar o nível de interação com um elemento da página. Você pode ver facilmente os hotspots do seu site, a forma como os usuários navegam e as áreas com as quais interagem mais ou menos. Quanto mais quente a cor, maior o interesse.

Com base neste esquema de cores, você pode ajustar o design do site para combinar com os pontos focais de atenção mostrados no mapa de calor. A mudança de elementos importantes das áreas frias (azuis) para as áreas quentes (vermelhas) seria aconselhada.

Tipos de mapas térmicos

Há pelo menos cinco tipos diferentes de mapas de calor disponíveis na maioria dos softwares de mapas de calor:

Os mapas de clique mostram onde em uma determinada página os visitantes clicam com mais freqüência. As áreas com mais cliques dos utilizadores irão mostrar uma cor "mais quente".

Mapas de movimento rastreiam todo o movimento do mouse através da página e mostram os elementos mais pairam sobre

Os mapas de toque são o equivalente aos mapas de clique, mas para dispositivos móveis. Eles rastreiam os toques no ecrã.

Os mapas de rolagem são uma medida de profundidade de rolagem. Eles usam cores para mostrar onde a maioria dos usuários param de rolar. Com os mapas de rolagem, a seção acima da dobra da página será, naturalmente, a mais quente. O rodapé será, muito provavelmente, o mais frio, já que menos pessoas rolam até o final da página.

Os mapas de calor de atenção são um tipo de ferramenta que apenas alguns softwares de mapas de calor oferecem. Eles ajustam os dados dos mapas de deslocamento para exibir cores também com base no tempo gasto em cada seção da página.


Porquê usar heatmaps?

Os heatmaps do site dão-lhe acesso rápido a insights sobre como o seu site está a ser utilizado. Você pode obter dados semelhantes das gravações das sessões dos visitantes, mas provavelmente não terá tempo para assistir a milhares de gravações uma a uma. Os heatmaps funcionam como dados agregados dessas gravações e fornecem informações num piscar de olhos.

Você pode descobrir as seguintes coisas sobre seus usuários e tomar medidas:

  • Eles estão interagindo com os elementos importantes da sua página: CTAs, botões, vídeos, etc.? Se não, altere o seu tamanho, cor, fontes ou posição.

  • Os visitantes não conseguem chegar ao conteúdo que você acha importante, não rolando o suficiente? Mova este conteúdo para cima na página.

  • Os visitantes clicam em elementos que não podem ser clicados? Ou os torna clicáveis ou muda o seu design.

 

Exemplos de mapas térmicos e estudos de caso

1. Dan, o blogueiro, e o seu texto mal formatado

Dan tinha um blog moderadamente bem sucedido e tentou rentabilizá-lo, juntando-se a programas de afiliados. Ele começou a vincular textos de âncora de seus posts às páginas de seus parceiros para ganhar comissão.

Um mês depois, mais de 3.800 usuários tinham lido sua brilhante resenha de um recente e-book mais vendido. Houve também muitos comentários sobre o post e o conteúdo tinha sido compartilhado por alguns. No entanto, olhando para a sua análise, Dan viu que apenas 3 visitantes tinham clicado nos links de afiliados no seu texto. Ele achou que era muito pouco, mas não tinha idéia das razões por trás disso.

Para o seu próximo post, ele também usou uma ferramenta de heatmap. O que ele encontrou, surpreendeu-o. Olhando para o heatmap de clique para a página, ele notou que os usuários estavam realmente tentando clicar, mas nos lugares errados. Alguns fragmentos de texto foram destacados de tal forma que as pessoas pensaram que eram clicáveis. Por outro lado, o estilo dos links reais não chamou a atenção e clicou o suficiente.

Dan decidiu que a maneira mais fácil de resolver isso, era fazer os fragmentos que estavam "quentes" seus links de afiliados atuais. Ele também decidiu usar esse estilo particular em todos os seus futuros links de afiliados. Para uma boa medida, ele adicionou um botão CTA visível ao texto. Os resultados foram massivos. O seu CTR passou de menos de 0,1% para 6% após as edições.

 

2. Empresa X e sua posição do botão CTA

A Empresa X tinha um site muito organizado e bem estruturado, e mesmo assim eles estavam lutando para conseguir conversões a partir de suas visitas. Eles colocaram um botão CTA na página inicial, mas, mesmo assim, sua taxa de conversão estava abaixo de 0,5%. Apenas 1 em cada 200 visitantes realmente clicaria no botão CTA.

Para entender porquê, eles instalaram uma ferramenta de mapa térmico e usaram-na para fazer um mapa de movimento. Após uma semana, eles puderam notar que as pessoas estavam pairando muito mais no lado esquerdo da página inicial. O botão CTA estava do lado direito. A solução era mover o botão para uma área "mais quente". Depois de mais uma semana, a percentagem de pessoas que clicavam nele aumentou para 2,8%. Isto teve um efeito imediato nas vendas.

3. A empresa Y e as áreas frias no seu mapa de pergaminho

A empresa Y publicou uma série de posts em blogs sobre assuntos ligados ao seu produto. No final de cada post, eles encorajariam os usuários a assinar a sua newsletter. Embora, em média, eles recebessem 11.700 visitas por semana em seus posts no blog, os novos assinantes eram 34/semana.

Para saber porquê, usaram o Visitante Heatmaps e descobriram que apenas 5% dos visitantes se deslocaram até onde se encontrava o botão "Subscribe to Newsletter". Então eles colocaram uma cópia do mesmo botão mais acima, sob o primeiro parágrafo de seus posts no blog, em uma área "quente". Na semana seguinte após a mudança, o número de assinantes tinha aumentado em 43.

Heatmaps da Visitor Analytics

Ficar atento a erros e oportunidades no seu website é crucial para o seu sucesso. Eles o ajudam, como proprietário de um website, a tomar decisões críticas de negócios, design e tecnologia rapidamente. Você pode usá-los como uma ferramenta de diagnóstico e descobrir o que está errado com o desempenho do seu website.

A informação que os heatmaps fornecem é intuitiva e tem muitos usos. Eles são uma grande adição a ter em seu arsenal de ferramentas analíticas.

O objetivo do Visitor Analytics é dar aos usuários um aplicativo verdadeiramente completo, que pode combinar dados de heatmaps com outros conjuntos de estatísticas relevantes: caminhos de visitantes, número de visitantes únicos e outros recursos de comportamento do usuário, incluindo análise de funil.

Assista ao vídeo para entender mais sobre como funcionam os mapas de calor da Visitor Analytics.

Start using Heatmaps
Traffic stats + recordings + heatmaps - from $0/month