Aprender / Guias / Guia de mapas de calor
Mapas de rolagem: 5 maneiras de usá-los para otimizar a experiência do usuário e aumentar as suas conversões
Os mapas de rolagem—mapas de calor que rastreiam o comportamento de rolagem, ou seja, o deslocamento de um usuário pelas páginas em um site ou aplicativo—são uma poderosa ferramenta de análise visual que ajuda você a entender como os usuários interagem com as páginas do seu site e com cada um dos seus elementos, para que você possa garantir que seu site gere conversões com eficiência, enquanto oferece uma excelente experiência ao usuário.
Os mapas de rolagem reúnem informações valiosas sobre o comportamento do usuário, ajudando-o a medir o engajamento do visitante e a determinar precisamente onde você pode estar perdendo a atenção dos visitantes do seu site. Os mapas de rolagem coletam rapidamente dados sobre como os visitantes se deslocam pelo seu site, para que você possa identificar oportunidades de melhorias na experiência do usuário (UX), fazer alterações e, por fim aumentar as conversões.
Ao final deste artigo, você saberá tudo o que precisa saber sobre os mapas de rolagem: o que são, como configurá-los, e como usá-los para obter insights acionáveis que irão turbinar a experiência do usuário.
Implemente um mapa de rolagem no seu site hoje mesmo 🔥
Comece a experimentar gratuitamente a coleta de dados dos mapas de rolagem com a Hotjar, e descubra como seus visitantes vivenciam a navegação pelas páginas mais importantes do seu site, para que você possa melhorar a experiência do usuário e aumentar as conversões.
O que é um mapa de rolagem?
Um mapa de rolagem é um tipo de mapa de calor do site que mostra visualmente a distância que os usuários percorrem por uma página em um desktop, tablet ou celular. Os mapas de rolagem usam um gradiente de cores para representar as partes mais visualizadas e menos visualizadas de uma página, compostos por uma escala que vai do quente (popular) ao frio (impopular). A cor vermelha indica os elementos da sua página que os usuários mais veem, enquanto a cor azul representa pouca ou nenhuma interação do usuário.
Os mapas de rolagem não se referem apenas à cor: eles também informam a porcentagem de usuários que se interessam em continuar a descer (ou prosseguir adiante) em uma página. Uma pontuação média de dobra também é exibida, para que você possa visualizar facilmente a parte da página que a maioria dos visitantes está vendo, antes de começarem a rolar a página.
Mapas de rolagem vs. mapas de calor
"Heatmap" (ou mapa de calor) é um termo amplo para diferentes tipos de dados visuais de análise da Web. Os mapas de rolagem são um tipo de mapa de calor onde as cores "mais quentes" mostram as seções mais visualizadas da página, e não os elementos mais clicados (ou tocados) dela (esses dados são, evidentemente, capturados com um mapa de cliques).
Em outras palavras, os mapas de rolagem geram zonas de calor das páginas do seu site, aplicativo ou produto de cima para baixo, de modo que se assemelham mais a um arco-íris vertical, ao invés de representarem os padrões de "confete" típicos de outros tipos de mapas de calor, como mapas de cliques ou mapas de movimento.
Dê uma olhada nesses exemplos de mapas de calor em ação para ver como os mapas de rolagem se comparam com os outros tipos de mapas de calor.
💡Dica avançada: quando você configura um mapa de calor na Hotjar, a ferramenta Heatmaps coleta automaticamente dados para todos os tipos de mapas de calor— rolagem, clique, cliques de raiva e movimento.
Você pode até mesmo combinar todos os dados de um mapa de calor em uma única exibição com o mapa de Zonas de Engajamento. Essa visualização ajuda a identificar rapidamente com quais elementos da página os usuários mais interagem, para que você possa validar a experiência do usuário da página, e garantir que ela seja otimizada para gerar o maior engajamento possível.
5 maneiras de usar os mapas de rolagem
Você pode ser o quão criativo quiser quando se trata de identificar padrões de dados e oportunidades de otimização de UX. Para te inspirar, aqui estão cinco das maneiras mais comuns de se usar os mapas de rolagem.
1. Descubra onde você está perdendo a atenção das pessoas
Os mapas de rolagem mostram até onde os usuários descem ou se deslocam pela página (os dados de porcentagem também o ajudarão a entender isso): cores mais frias (azuis) significam que menos pessoas viram essa seção da sua página.
Caso o seu objetivo seja aumentar e manter a atenção do usuário para que eles rolem mais para baixo em uma página—por exemplo, se você tiver uma página de destino longa, e quiser garantir que os visitantes vejam todas as informações contidas nela—os dados do mapa de rolagem o ajudarão a pensar em novas estratégias e a analisar de forma prática possíveis maneiras de ajustar o UX design dessa página ou o seu conteúdo, para reduzir os abandonos e aumentar as taxas de conversão.
💡Dica avançada: combine os mapas de rolagem com gravações de sessões de usuários individuais (também conhecidas como replays de sessão) para observar como as pessoas realmente interagem com a página.
Com a Hotjar, você pode facilmente reduzir o zoom de uma única gravação para observar tendências mais amplas através dos mapas de calor, ou aumentar o zoom de um mapa de calor para visualizar gravações de pessoas interagindo com uma página, para que você possa entender melhor tanto a experiência individual quanto a experiência geral do usuário.
A Hotjar permite que você amplie o escopo de visualização das gravações de sessão para incluir os mapas de calor, a fim de identificar tendências mais abrangentes de UX
2. Identifique fundos falsos
Às vezes, seus visitantes não percebem que há mais conteúdo a ser visualizado na parte inferior da página. Isso é conhecido como "fundo falso", e pode ser causado por blocos de espaço em branco, quebras de linha ou blocos que confundem e deixam os usuários frustrados e perdidos. Usando as porcentagens do mapa de rolagem, você pode "testar a profundidade" de suas páginas para verificar se há fundos falsos e ver quantas pessoas rolam para além de um determinado elemento.
💡Dica avançada: O mapa de cliques de raiva rastreia os momentos em que um usuário clica em um elemento repetidamente, esperando por uma interação que nunca acontece, o que acaba resultando em frustração e em um rápido abandono do seu site. Esses mapas de calor são ótimos para identificar possíveis bugs do site e outras áreas de frustração que podem estar levando à uma alta taxa de rejeição de uma página.
Os mapas de cliques de raiva da Hotjar expõem os pontos de frustração do usuário
3. Descubra se os usuários estão visualizando o conteúdo acima da dobra média
A parte de uma página do site conhecida como "acima da dobra" é a área que a maioria das pessoas verá ao chegar—a "dobra" é simplesmente o ponto de corte na parte inferior da tela de um usuário antes que ele precise rolar a tela para prosseguir.
Um mapa de rolagem calcula automaticamente a dobra média da sua página para usuários de desktop e de tablets ou celulares. Ao analisar os dados de dobra média do mapa de rolagem, você poderá posicionar elementos importantes (como CTAs) acima da dobra, de forma que funcione bem através de vários dispositivos, para promover o engajamento do usuário assim que chegam à página.
Implemente um mapa de rolagem no seu site hoje mesmo 🔥
Comece a experimentar gratuitamente a coleta de dados dos mapas de rolagem com a Hotjar, e descubra como seus visitantes vivenciam a navegação pelas páginas mais importantes do seu site, para que você possa melhorar a experiência do usuário e aumentar as conversões.
4. Descubra se os usuários estão conseguindo encontrar o que precisam
Você seria perdoado por supor que o objetivo de otimizar uma página usando um mapa de rolagem é fazer com que o maior número possível de pessoas role a página até o final. Mas você estaria errado. Em alguns casos, os usuários rolam a página porque não conseguem navegar de maneira satisfatória pelo site para encontrar o conteúdo útil que estão procurando.
A agência digital Epiphany, sediada no Reino Unido, melhorou o site de E-commerce de seu cliente adicionando filtros às páginas de categoria depois que os dados do mapa de rolagem mostraram que os usuários precisavam rolar muito através da página para encontrarem finalmente o que precisavam (veja aqui o estudo de caso completo do mapa de calor).
Às vezes, no design, menos é realmente mais.
💡Dica avançada: para obter ainda mais informações sobre o comportamento do usuário, configure uma pesquisa no site com a nossa ferramenta Surveys da Hotjar, e faça perguntas como "Você encontrou o que estava procurando hoje?" Esses dados qualitativos lhe darão uma camada extra de contexto, ao analisar os dados quantitativos dos mapas de calor.
5. Descubra se a sua página está oferecendo uma boa experiência em todos os diversos dispositivos
Os usuários podem não se comportar da mesma forma no desktop e no celular. Se você estiver otimizando um site responsivo (um site que redimensiona a mesma página para cada dispositivo), um mapa de calor de rolagem mostrará onde os usuários param de rolar no celular e no desktop, para que você possa projetar uma experiência linear em diversos dispositivos, que funcione de maneira eficiente para todos os seus usuários.
Os dados de rolagem existem para ajudá-lo a projetar experiências de usuário perfeitas; você pode consultar os dados do mapa de calor para descobrir exatamente onde precisa colocar um CTA para captar a atenção dos usuários no desktop e no celular.
💡Dica avançada: as páginas otimizadas para celular geralmente tendem a ser mais curtas, mas não siga cegamente as práticas recomendadas. Colete os seus próprios dados através dos mapas de rolagem, e descubra como os seus usuários se comportam em dispositivos móveis, para poder então determinar o tamanho e o design da página que sejam mais adequados para o seu público.
Como configurar os mapas de rolagem com a Hotjar
Configurar um novo mapa de rolagem é fácil; caso você ainda não seja cliente da Hotjar, faça um teste gratuito agora mesmo para começar a usar a nossa ferramenta de Mapas de calor
Quando você cria um novo mapa de calor na Hotjar, ele gera automaticamente todos os tipos de mapa de calor (clique, clique de raiva, movimento, rolagem e zonas de engajamento), portanto, não há necessidade de fazer nada especial para implementar um mapa de rolagem.
Passo 1: adicione o código de rastreamento da Hotjar ao seu site
Você pode instalar o código de rastreamento da Hotjar de várias maneiras, inclusive por meio do Google Tag Manager e do plug-in do WordPress.
Passo 2: ative a "captura de sessão"
Os mapas de calor contínuos são gerados a partir de sessões. Quando a "captura de sessão" está ativada, os mapas de calor ficam disponíveis automaticamente e começam a coletar dados de comportamento do usuário. Portanto, primeiro você precisa verificar se a "captura de sessão" está ativada, clicando no widget de cobertura de tráfego no canto superior direito da página.
Se a captura de sessão não estiver ativada, você verá um botão laranja "Captura de sessão desativada" na parte superior da página, que o levará à página de configuração da captura de sessão.
Passo 3: comece a usar os mapas de calor contínuos e selecione seu "agrupamento de dados
Clique em Mapas de calor no menu de navegação à esquerda.
Em seguida, clique no botão Novo mapa de calor" para começar.
Os mapas de calor podem mostrar dados de uma único URL específica, ou de um grupo de URLs que correspondam aos seus critérios de segmentação. Ao mostrar dados de um grupo de URLs, você verá apenas uma captura de tela para o seu mapa de calor, mas as métricas que aparecem sobre a captura de tela serão agregadas a partir de todas as URLs que correspondam aos seus critérios de segmentação.
Passo 4: insira uma URL do seu site, e selecione um tipo de mapa de calor
Insira a URL da página que deseja rastrear e, em seguida, selecione o tipo de mapa de calor que deseja configurar (lembre-se de que a Hotjar coletará dados para todos os tipos de mapas de calor, portanto, você pode alternar entre os diversos tipos, após criá-los).
Sua seleção o levará de volta ao painel da Hotjar, onde você poderá editar o mapa de calor e filtrar os dados coletados. Para obter mais informações sobre a configuração de um mapa de calor na Hotjar, clique aqui.
Passo 5: selecione filtros de acordo com os critérios do mapa de calor
Atualize o intervalo de datas e adicione quaisquer filtros de mapa de calor para exibir somente as sessões que correspondem aos seus critérios, como duração da sessão, comportamento ou atributos do usuário—que podem ser a profissão, o país e até mesmo o idioma do usuário.
Para obter mais detalhes sobre todos os filtros de mapa de calor da Hotjar e exemplos de casos de uso, leia este artigo: Casos de uso para filtragem de mapas de calor.
Então é isso! O seu primeiro mapa de rolagem está no ar! Essa é a sua aparência no painel da Hotjar:
Você pode alternar seu mapa de calor para mostrar sessões de desktop, tablet ou celular. Para visualizar os dados do mapa de rolagem, basta clicar em "Rolagem" nas opções de tipos de mapa de calor. Você também pode visualizar e baixar/exportar todos os dados brutos. Divirta-se!
Implemente um mapa de rolagem no seu site hoje mesmo 🔥
Comece a experimentar gratuitamente a coleta de dados dos mapas de rolagem com a Hotjar, e descubra como seus visitantes vivenciam a navegação pelas páginas mais importantes do seu site, para que você possa melhorar a experiência do usuário e aumentar as conversões.
