Heatmaps: O que são, para que servem e como usar

Thaysa Santos
5 min readMar 16, 2019

Heat maps, são mapas de calor com representações visuais de cores que mostram exatamente onde as pessoas estão interagindo no seu site, ou seja, um heatmap é um tipo de análise que foca em compreender a forma como os visitantes de uma página interagem com seus elementos, fornecendo uma visão clara sobre a eficiência da usabilidade daquela página.

O termo heat map foi originado a partir de tecnologias que utilizam o calor do corpo humano para monitoramento de ambientes ou para realização de exames médicos. Esta representação utiliza o espectro de cores, das “quentes” (vermelhas) para as “frias” (azuis) para identificar as áreas de maior ou menor temperatura, de forma literal, ou de atividade.

Nos mapas de calor, as áreas em vermelho são as mais ativas, enquanto as azuis são as menos ativas, com as cores intermediárias do espectro representando, igualmente, as áreas de atividade média, no caso, em uma página:

Fonte: gosupersonic

Esses mapas ajudam a compreender melhor a distribuição da informação de acordo com os pontos que o usuário mais interage. Dessa forma, é possível saber exatamente quais partes da página analisada são mais visíveis para os usuários, nos navegadores e dispositivos, identificar claramente as áreas e elementos que se encontram ineficientes, e com essa análise é possível decidir onde colocar os elementos mais importantes de acordo com as estratégias do negócio e assim melhorar a experiência do usuário.

Existem três tipos de mapas que podem ser usados para realizar essa análise, sendo eles: mapas de cliques, mapas de rolagem e os mapas de hover.

Mapas de cliques (click maps): os mapas de cliques mostram, em detalhes, os links e elementos mais e menos clicados pelos visitantes de uma página, utilizando como representação o espectro de cores conforme explicado acima. Dessa forma as áreas mais clicáveis terão uma cor avermelhada ou alaranjada, enquanto as áreas menos clicáveis terão um cor mais azulada.

Exemplo de um click map. Fonte: gosupersonic

Mapas de rolagem (scroll maps): os mapas de rolagem são úteis no propósito de compreender a forma como os visitantes interagem com uma página. Os mapas de rolagem servem para compreender se os visitantes estão lendo todo o conteúdo de uma página, esse tipo de mapas são interessantes porque mostram onde os usuários tendem a parar a atividade da barra de rolagem, o que pode ser útil para ajustar o design e indicar a priorização da ordem do conteúdo.

Exemplo de um scroll map. Fonte: mandae

Mapas de hover (hover maps): os mapas de hover, mostram as áreas em que os visitantes moveram o mouse na tela do seu site. A ideia é exibir onde as pessoas pararam o cursor, o que ajuda a entender como os usuários leem uma página na web. No entanto, alguns estudiosos questionam a eficácia desse método, afinal, o usuário pode estar com a atenção voltada para outros pontos que não necessariamente sejam os que ele depositou o cursor do mouse.

Exemplo de um hover map. Fonte: madae

Programas de Heatmaps

Antes de sair testando e usando qualquer tipo de ferramenta para criar um heatmap é importante analisar se o site realmente precisa. Sites que possuem um tráfego baixo de usuários pode não ser um bom candidato para utilizar um mapa de calor, pois as análises podem não ser muito representativas. Caso mesmo assim seja necessário analisar um mapa de calor, ou se o site possua algum tráfego considerável, existem ferramentas online onde é possível fazer essa análise, abaixo estão listadas algumas dessas ferramentas:

  1. Mouseflow: mostra onde as pessoas clicam, tocam, movem e rolam, além de oferecer suporte a intervalos de datas personalizados, layouts móveis/responsivos e testes A/B. Ele também rastreia a atividade do usuário de uma página para outra, para que se possa ver os caminhos que os clientes bem-sucedidos tomam e onde se está perdendo o restante. O mouseflow disponibiliza uma versão gratuita de fácil utilização.
  2. Heatmap.me: oferece mapas de calor em tempo real que aparecem em sua tela em segundos e atualizam constantemente — ideal para sites com muito tráfego e conteúdo que muda regularmente; oferece o truque de sobrepor o mapa de calor diretamente nas páginas, para que você possa navegar pelo seu site e ver o que todo mundo está olhando. O Heatmap possui um pacote básico gratuito.
  3. Hotjar: além do mapeamento de calor, oferece pesquisas de feedback na página. Portanto, se os usuários estiverem se comportando de uma maneira totalmente inexplicável, você pode perguntar por quê. Os relatórios do mapa de calor dos dispositivos móveis também são úteis para verificar como os visitantes veem seu site em computadores ou em celulares e tablets. O Hotjar oferece um pacote básico gratuito.
  4. ClickTale: é uma ferramenta voltada para sites com um volume de visitas mais considerável: mínimo de 500.000 por mês. Para contratá-la, é preciso solicitar um contato comercial no site. É também uma ferramenta bastante completa. Possui um recurso chamado “ClickTale Touch”, que é voltado para gerar heat maps de sites mobile, e o funil de conversão, que é muito útil para e-commerces, revelando onde os visitantes se perdem no caminho da conversão.
  5. CrazyEgg: oferece mapeamento de calor, rastreamento de rolagem e rastreamento de cliques. Oferece uma avaliação gratuita, mas sua versão básica inclui a maioria dos recursos e é de apenas US$ 9/mês para 10 páginas e 10.000 visitas (ideal para novos sites e pequenas empresas).

Links da pesquisa:

http://www.gosupersonic.com.br/blog/o-que-e-mapa-calor-site/

https://www.mandae.com.br/blog/heat-maps-o-que-sao-e-para-que-servem/

http://www.gosupersonic.com.br/blog/heat-map-site/

--

--