Aprender / Guias / Guia de mapas de calor
Como usar os mapas de calor para otimizar seu website e melhorar a experiência do usuário
Os mapas de calor possuem inúmeras aplicações práticas e aparecem em diversos lugares, como por exemplo na previsão do tempo, e até mesmo como ferramenta para ajudar a traçar os padrões de jogo do campeonato de Wimbledon, e claro, na análise de websites. Eles nos ajudam a entender dados complexos em um piscar de olhos, e a tomar decisões informadas.
Neste blog, vamos nos concentrar na parte analítica da Web e explorar como os mapas de calor são ferramentas poderosíssimas para ajudá-lo a melhorar o design do site e a experiência do usuário (UX), o que leva ao aumento das vendas e conversões.
Equipado com uma ferramenta de análise de comportamento do usuário como a Hotjar, você pode começar a criar mapas de calor e a desvendar insights valiosos sobre quais elementos e seções do seu site prendem a atenção dos seus usuários, o que estimula seu engajamento, e onde eles ficam perdidos ou presos.
Então, vamos lá?
Set up your heatmap today
Sign up for a free Hotjar account, add the tracking code, and start using heatmaps to improve your site or product.
O que é um mapa de calor, e por que essa é a melhor ferramenta para a otimização da experiência do usuário?
Os mapas de calor são uma ferramenta poderosa para analisar e visualizar dados, usando uma representação de valores codificada por cores, que vão do vermelho ao azul. Eles facilitam a visualização das áreas mais populares (quentes) e menos populares (frias) das suas páginas da Web.
O uso de um mapa de calor lhe oferece uma compreensão profunda de como as pessoas interagem com o seu site à medida que rastreia:
Cliques
Deslizamentos verticais da tela (Rolagem)
Movimentos do mouse
Depois que a representação visual dos dados de comportamento e de interação do usuário for gerada, a próxima etapa é efetuar uma Análise de mapa de calor. A partir dela, você poderá obter insights que definirão toda e qualquer futura mudança, decisão ou estratégia futura relacionada à interface do usuário (UX). Portanto, é verdade—você realmente obtém acesso a uma ferramenta poderosa que lhe permite alcançar resultados incríveis, ao criar um mapa de calor:
Testar e iterar: Faça testes A/B, atualize ou (re)crie seu site com base em dados e fatos concretos
Descobrir bugs e bloqueadores: investigue profundamente e corrija um problema, como por exemplo uma taxa de conversão reduzida
Obtenha aprovação instantânea: convença os membros da equipe e os investidores ou stakeholders, usando provas visuais que os ajudam a priorizar melhor
💡Dica avançada: adicione os mapas de calor da Hotjar à sua caixa de ferramentas para preencher as lacunas deixadas pelas ferramentas tradicionais de análise de sites, como o Google Analytics (GA). Os dados quantitativos só podem dizer, por exemplo, que os usuários estão chegando à página de checkout e indo embora, sem comprar, mas não podem lhe mostrar o que está errado, e por que os usuários se comportam dessa maneira. Já os mapas de calor, podem lhe mostrar tudo isso e muito mais!
Como usar os mapas de calor para otimizar o seu site e aumentar as conversões
Pode parecer simples, mas acredite: você levará seu negócio on-line a novos patamares ao adicionar os mapas de calor ao seu arsenal de ferramentas. Veja abaixo algumas dicas práticas que você pode aplicar imediatamente com o intuito de melhorar a experiência do usuário no seu site.
Adicione contexto à análise tradicional de sites
Se você é novo aqui, talvez esteja se perguntando se a Hotjar pretende substituir as ferramentas tradicionais de análise, como o Google Analytics. Aproveitamos esta oportunidade para dizer que definitivamente não é o caso!
O GA não é apenas uma das ferramentas mais populares; ela também é uma das principais ferramentas deste setor. Muitos usuários, como grandes marcas de comércio eletrônico e equipes de produtos a usam para obter insights valiosos sobre o que está acontecendo em seus sites, tais como:
Quais páginas são as mais populares?
Quanto tempo as pessoas permanecem nas páginas de produtos?
Onde ocorrem os abandonos?
Mas o Google Analytics é uma ferramenta bem especializada—o seu objetivo não é sanar as diferentes necessidades de todos. Por exemplo, uma das coisas que ele não pode fazer é revelar o comportamento real dos usuários, já a Hotjar, sim!
Ao combinar os mapas de calor da Hotjar com o Google Analytics, você pode investigar a fundo os dados obtidos e responder a importantes perguntas como:
Por que a nossa taxa de conversão está baixa?
Os usuários estão chegando ao conteúdo importante nessa página principal?
Por que as pessoas estão ficando presas?
❓Você sabia?
As ferramentas da Hotjar se integram perfeitamente ao Google Analytics, tornando mais fácil do que nunca a visualização do comportamento dos usuários, pelos quais a análise de dados é derivada, possibilitando assim a priorização das correções necessárias a serem feitas. Descubra o que está acontecendo no GA, e entenda por que isso está acontecendo através da Hotjar—essa é definitivamente uma combinação perfeita!
Depois de identificar as áreas do seu site que poderiam ser otimizadas, use os insights dos seus mapas de calor para fazer as alterações necessárias. Por exemplo, suponha que os usuários estejam tendo problemas para encontrar um determinado botão ou link. Você poderia movê-lo para um local mais visível da página, ou fazer com que ele se destaque mais através do uso de cores fortes ou de outros elementos de design.
A melhor parte é que a coleta de insights de websites através dos mapas de calor definitivamente está ao alcance de qualquer um! Pegue uma xícara de café e dedique uns 20 minutinhos estudando alguns mapas de calor—você ficará surpreso com o que irá descobrir. Mais tarde, você pode mostrar suas descobertas em um sprint e resolver um problema com sua equipe em tempo recorde.
Utilize o tipo adequado de mapa de calor para atingir cada objetivo
Para empatizar verdadeiramente com os seus usuários, familiarize-se com os diferentes tipos de mapas de calor, e como eles podem ajudá-lo a entender melhor a sua experiência.
Lembre-se: Os usuários não veem a visita ao seu site como uma única parada em uma página específica, e sim como uma jornada completa.
Mapas de cliques
Um mapa de cliques mostra onde os usuários clicam com o mouse em dispositivos desktop ou tocam com os dedos em seus dispositivos móveis. O mapa exibe os elementos mais clicados da página em tons mais quentes, ou seja, vermelho, laranja e amarelo.
Com esse tipo de mapa, você pode descobrir se os principais elementos, como por exemplo as chamadas para ação (CTAs), links e botões estão recebendo os cliques ou toques esperados. Eles também permitirão que você responda a perguntas como:
Quanta interação eles estão recebendo?
As pessoas estão ignorando um recurso do produto que você deseja popularizar?
Os links estão funcionando como deveriam?
Essa investigação com o auxílio do mapas de cliques permitirá que você:
Monitore a eficácia dos principais CTAs
Identificar áreas com possíveis problemas de navegação
Identificar e remover elementos/áreas que causam atrito
Além disso, é possível utilizar estes insights obtidos através dos mapas de cliques para fazer pequenas alterações de design, para obter melhorias rápidas ou para justificar a necessidade de pesquisas mais aprofundadas com os usuários.
Mapas de rolagem
Se você quiser ver até que ponto os usuários rolam verticalmente páginas específicas, os mapas de rolagem são seu melhor amigo. Esse tipo de mapa de calor do site permite que você visualize o comportamento de rolagem dos visitantes do site.
Normalmente, o mapa de rolagem codificado por cores muda gradualmente do mais quente ao mais frio. É um código de cores que reflete a porcentagem de usuários que rolaram verticalmente através de cada parte da sua página. A parte superior geralmente é a área mais "quente".
Essa característica dos mapas de rolagem faz deles uma das melhores ferramentas de análise a serem empregadas quando você pretende realizar uma otimização da taxa de conversão (CRO).
Os usuários estão vendo os conteúdos importantes?
CRO é uma prática muito difundida para aprimorar o conteúdo e os elementos das páginas na Web. As pessoas que mais se beneficiam da CRO incluem profissionais de marketing digital, profissionais de comércio eletrônico e equipes de produtos. E a Hotjar, em particular os Mapas de calor, estão no topo das listas das ferramentas de CRO favoritas (não acredite apenas na nossa palavra; veja aqui estudos de caso de mapas de calor para revelar o que os nossos clientes pensam sobre nós).
Você pode confiar nos mapas de calor de rolagem para determinar se o seu conteúdo está realmente gerando conversões—ou seja, as ações que você deseja que os seus usuários realizem, como baixar um e-book, clicar em um link para uma página de produto, e, finalmente concluir uma compra.
Aqui estão algumas etapas para você começar:
Verifique a dobra média (average fold) do seu site—a área que os usuários veem assim que chegam no seu site, antes de efetuar qualquer ação de rolagem com o mouse. Saber onde está a dobra média é fundamental para saber se os visitantes estão chegando aos conteúdos mais importantes, como ofertas de produtos e anúncios de campanhas.
Revise todo o mapa de calor para descobrir qual é a porcentagem de visitantes que chegam (ou não) a pontos específicos da página. Esses dados são úteis em páginas mais longas, com muitas informações que você deseja que as pessoas vejam.
Fique atento a mudanças bruscas de cor, o que significa que um número significativo de usuários parou de rolar a página. Use isso como um ponto de partida para investigar se essas pessoas achavam que haviam chegado ao final da página.
A análise do mapa de rolagem pode indicar que as informações que os usuários estão buscando não estão imediatamente visíveis. Nesse caso, talvez seja necessário colocar o conteúdo importante mais acima na página, ou indicar mais claramente que há mais conteúdo abaixo. E quem sabe, talvez isso seja tudo o que você precisa fazer para disparar as suas conversões!
Mapas de movimento
Ao invés de rastrear os cliques do mouse, os mapas de movimento rastreiam o movimento do mouse—por onde os usuários de desktop movem o mouse enquanto navegam em uma página. Em particular, os pontos quentes deste mapa informam os pontos da página por onde seus usuários estão passando o mouse. Estudos sugerem uma relação entre o ponto onde as pessoas estão fixando seu olhar, e onde está o cursor do mouse, e isso pode indicar áreas de atenção elevada do usuário e, inversamente, áreas de baixa interação.
Consulte os mapas de movimento para verificar se a atividade do cursor está espalhada por toda a página, ao invés de estar concentrada nas mensagens principais, nos botões de CTA e nos links. Pode ser que vários elementos da página estejam competindo pela atenção das pessoas. Se esse for o caso, você terá que reorganizar o conteúdo, ou criar slogans interessantes para direcionar a atenção do usuário aos elementos e ao conteúdo que gera conversão.
Um panorama geral de como os usuários se comportam nas suas páginas principais
Organize a sua análise focada no usuário observando os mapas de calor de determinadas páginas, como:
A página inicial
Páginas de destino
Páginas principais
Páginas de baixo desempenho
Páginas recém-criadas
Vamos abordar mais alguns exemplos de mapas de calor e possíveis cenários que podem ser encontrados em algumas das páginas anteriores deste guia:
A página inicial
Você já sabe que as conversões podem ser afetadas negativamente quando um visitante que chega à sua página sai sem chegar à sua parte inferior. Mas e se você tiver colocado seu conteúdo importante acima da dobra média visível da página, e mesmo assim não está alcançando os resultados esperados?
Nós mesmos passamos por isso há alguns anos, depois de colocar um vídeo acima da dobra média visível da nossa página inicial. Ao consultar um mapa de cliques, percebemos que as pessoas não estavam clicando para assistir ao vídeo. Na verdade, o vídeo recebeu apenas três cliques dos 7.000 cliques registrados! 😬
Os dados visuais indicavam o que precisava ser corrigido em nosso site. Por isso, decidimos criar testes A/B em um conjunto de páginas iniciais, muitas das quais não mostravam mais um vídeo acima da dobra, para corrigir o problema.
Páginas de destino
Digamos que a marca X tenha publicado um formulário de captura de leads, uma página de destino autônoma, criada com o objetivo de coletar informações de leads de clientes em potencial. Desde então, geraram pouquíssimas conversões (inscrições).
Com a ajuda de um mapa de movimento, eles descobrem que a área em que o formulário é posicionado tem pouca ou nenhuma atividade de usuário. Essa percepção os leva a reformular a página de destino, reduzindo o número de campos de formulário, aumentando seu tamanho, adicionando uma imagem à esquerda, e tornando a mensagem principal legível. Problema resolvido!
Páginas com baixo desempenho
Os mapas de calor também revelam se o oposto está acontecendo com as páginas que você espera que tenham um bom desempenho, como a página de preços. Se você observar que, depois de passar um tempo considerável nessa página, as pessoas pulam para a página de estudos de caso, vale a pena descobrir como ajudá-las na sua tomada de decisões. Adicionar depoimentos de clientes à página de preços seria a próxima etapa lógica para aumentar as conversões.
Analisar problemas em todos os dispositivos
Configure mapas de calor para desktop e dispositivos móveis para comparar a distância percorrida pelos usuários nas páginas, em diversos dispositivos. Dessa forma, as equipes de comércio eletrônico, de marketing ou de produtos podem:
Determinar se as pessoas estão consumindo mais ou menos conteúdo de acordo com o dispositivo sendo utilizado
Combine mapas de rolagem com mapas de cliques para comparar o comportamento de cliques e a interação dos usuários com a página no desktop e no celular
Propor com confiança mudanças a serem feitas
Para favorecer a colaboração multi-funcional, você pode trabalhar lado a lado com o seu designer de UX para aplicar mudanças rápidas ou reestruturar e redesenhar as páginas por completo.
Complementar outras ferramentas de análise de comportamento na Hotjar
Os mapas de calor são apenas uma ferramenta para entender como os usuários interagem com o seu site. Nós já mencionamos a poderosa combinação entre a Hotjar e o Google Analytics. Para obter uma visão completa do comportamento do usuário, você também deve considerar outras fontes de dados quantitativos e qualitativos, como a análise de sites através de outras ferramentas, e através de feedback do usuário.
💡Dica avançada: as gravações de sessão (também conhecidas como gravações de visitantes ou replays de sessão) são renderizações de sessões de navegação do usuário que ajudam a esclarecer melhor alguns dos insights obtidos em um mapa de calor. Ao invés de fazer suposições sobre os cliques, toques e/ou rolagem que você vê em um mapa de calor, tente assistir a alguns replays de sessão e veja como os usuários realmente interagem com o seu site.
Está curioso para saber como combinar os mapas de calor com os destaques? A gente explica melhor pra você neste vídeo:
Como combinar os mapas de calor com os destaques
Visualize o comportamento do usuário através dos mapas de calor
Os mapas de calor oferecem uma representação visual dos dados agregados de comportamento do visitante. Eles também complementam várias ferramentas de análise, inclusive as mais tradicionais, como o Google Analytics, e as centradas no cliente, como o Hotjar Recordings e Hotjar Feedback.
Não perca tempo e comece a maximizar os benefícios do uso de mapas de calor, seguindo as dicas e os truques práticos compartilhados neste artigo. E se você precisar criar e ativar um mapa de cliques, um mapa de rolagem ou um mapa de movimentação agora, a Hotjar é justamente o que você precisa!
Set up your heatmap today
Sign up for a free Hotjar account, add the tracking code, and start using heatmaps to improve your site or product.
