Usando mapas de calor para melhorar a UX do seu site: 5 maneiras de começar

A pista está no nome: UX (user experience ou experiência do usuário) tem tudo a ver com os seus usuários. Portanto, faz sentido que, quanto mais focado no usuário você for ao coletar dados do site, mais bem equipado estará para fazer otimizações que atendam à todas as necessidades dos usuários.

Você provavelmente já tem algumas pistas sobre o comportamento do usuário a partir dos dados tradicionais de análise de UX (por exemplo, taxa de rejeição, visualizações de página, conversões). Mas como você sabe o que corrigir primeiro quando detecta um problema? E por onde começar quando está buscando aumentar as conversões ?

Se você é UX designer, desenvolvedor ou profissional de marketing e trabalha para aprimorar a experiência do usuário, os mapas de calor podem ajudá-lo a coletar dados sobre como as pessoas interagem com seu site, para que você possa usar esses insights para aprimorar a UX e as métricas mais importantes para a sua empresa.

O que é um mapa de calor?

Um mapa de calor é uma visualização de dados que mostra como os usuários do site clicam, rolam e se movem pelas páginas de um site. A parte "calor" do nome vem da escala de cores: o vermelho representa áreas mais populares (quentes) da página e o azul, áreas menos populares (frias).

Você pode coletar dados de mapas de calor em qualquer página do site em desktops e dispositivos móveis, e visualizá-los de diferentes maneiras:

• Mapas de cliques destacam onde os usuários clicam com o mouse (ou onde tocam a tela, no caso de dispositivos móveis)

• Mapas de rolagem destacam por onde os usuários rolam a tela pelas páginas de um site

• Mapas de movimento destacam o movimento do mouse do usuário (sem clicar)

Ficou curioso e quer ver um mapa de calor em ação? Experimente a nossa demo de Heatmaps da Hotjar para ter uma ideia de como a ferramenta funciona. Alterne entre os tipos de mapa de calor na barra lateral direita para ver as diferentes percepções que você pode obter de cada um.

5 maneiras de usar os mapas de calor para avaliar a UX do seu site

Se uma imagem vale mais que mil palavras, então um mapa de calor vale mais que mil insights. Uma lista de mil insights pode ser um pouco longa demais para este artigo (!), portanto, para começar, aqui estão cinco maneiras principais de usar diferentes tipos de mapas de calor para coletar dados de UX, validar suas ideias e identificar oportunidades de otimização.

1. Mostre os seus designs que possuem o melhor desempenho

As páginas do seu site podem parecer impressionantes por si só, mas os mapas de calor permitem que você demonstre aos clientes e colegas o desempenho real delas.

Os mapas de calor são muito intuitivos e fáceis de entender, e podem ajudá-lo a explicar o seu trabalho para alguém que não é designer, permitindo que você obtenha uma adesão importante para uma eventual reformulação do site ou exibir os seus projetos bem-sucedidos de UX design. Esse impacto é especialmente útil se você quiser que suas páginas tenham um desempenho melhor.

Na Spotahome, uma plataforma on-line para aluguel de imóveis de médio e longo prazo, a Gerente de Conhecimentos sobre Clientes, Sara Parcero-Leites, usa os mapas de calor para garantir que a sua equipe esteja ciente das áreas de UX que apresentam problemas e precisam ser aprimoradas.

Durante as "festas" da Hotjar programadas regularmente, Sara apresenta de 3 a 4 mapas de calor interessantes, juntamente com insights de outras ferramentas da Hotjar, para estimular discussões e colaborar no desenvolvimento de soluções.

Sara nos disse que a maioria dos desenvolvedores e gerentes de produto nunca tinha visto os usuários interagindo com os recursos que eles criaram antes dela começar a organizar essas festas, e de mostrar-lhes evidências visuais, como dados de mapas de calor—agora eles saem de cada um desses eventos com informações reveladoras e muitos bugs para corrigir.

2. Encontre os CTAs com mais (e menos) cliques

Os CTAs (calls-to-action) são solicitações de ação do usuário—geralmente botões ou links—e podem ser projetados especificamente para atrair cliques com o objetivo de aumentar as inscrições/assinaturas de serviços ou produtos, e as vendas.

Os mapas de cliques mostram quais CTAs têm mais cliques, e quais estão sendo ignorados. Você pode descobrir que outros elementos da página distraem os usuários da visualização do seu CTA principal,ou pode identificar uma oportunidade de testar um novo CTA em uma área que esteja atraindo mais engajamento do usuário.

Veja um exemplo: ao apresentar as ferramentas da Hotjar à sua equipe, Conan Heiselt, designer de UX da empresa de software Techsmith, descobriu que os usuários não estavam interagindo com os CTAs do produto como esperado—essa revelação foi possível através da visualização de um mapa de cliques.

Depois de aplicar um mapa de cliques à página de serviços, Conan e sua equipe perceberam que muitos usuários estavam ignorando os botões de texto do CTA, e preferiam clicar nas imagens dos produtos. Evidências visuais concretas coletadas a partir de apenas um mapa de cliques permitiram que sua equipe proporcionasse aos usuários uma experiência mais intuitiva.

3. Meça a distância percorrida pelos usuários na navegação por uma página do seu site

Nem todos os usuários que acessam seu site rolam até o final de cada página, o que significa que eles podem estar perdendo informações importantes. As pessoas também visitam o seu site a partir de vários dispositivos e navegadores diferentes, portanto, nem todas conseguem ver as mesmas informações acima da dobra (a parte da página que fica imediatamente visível na tela, sem a necessidade da rolagem de tela por parte do usuário).

As ferramentas de mapa de rolagem podem mostrar onde está a dobra média em dispositivos móveis e de desktop, para que você possa colocar informações essenciais e CTAs onde elas são mais vistas. Você também pode saber até onde os usuários rolam a página e mover elementos para o topo da página, para que eles fiquem mais evidentes e assim, sejam vistos por mais pessoas.

Lembre-se de que não é necessário analisar os dados de rolagem isoladamente; compare os seus mapas de cliques e seus mapas de rolagem para ter uma visão completa de onde você está perdendo a atenção do usuário.

Com a Hotjar, você não precisa alternar freneticamente entre dois ou três mapas de calor: o mapa simplificado de Zonas de Engajamento combina dados de clique, movimentação e rolagem em uma única exibição, para que você possa ver com quais partes da sua página os usuários mais engajam.

4. Identifique cliques problemáticos

Às vezes, os usuários clicam em elementos (por exemplo, imagens ou cabeçalhos) esperando que sejam links clickáveis. Esses podem ser cliques incorretos, mas os mapas de calor coletarão dados de um número suficiente de usuários para desconsiderar anomalias e mostrar padrões de cliques comuns em todo o seu público.

Ao analisar um mapa de calor de cliques, você pode identificar cliques incorretos e corrigir o problema adicionando links ou modificando elementos sem importância, para torná-los menos clicáveis.

Você pode até encontrar bugs no site ou erros de design que deixam os seus usuários frustrados, fazendo com que eles desistam e saiam do site. Há um mapa de calor especializado para visualizar isso: O mapa de cliques de raiva da Hotjar revela quais elementos causam atrito, mostrando onde os usuários clicam repetidamente em um curto período de tempo—é a ferramenta perfeita para ser usada caso você queira evitar irritar os usuários durante sua experiência de navegação.

5. Otimize para dispositivos móveis e desktop

O web design responsivo (páginas que se adaptam à tela do usuário) é uma maneira rápida e eficiente de fornecer conteúdo a todos os seus usuários, mas é preciso lembrar que o que parece ser algumas linhas em um desktop pode ser algo muito mais extenso, que exige muita rolagem em dispositivos móveis.

Compare os mapas de calor de dispositivos móveis e de desktop para identificar qualquer diferença de comportamento, e verificar se os usuários de apps móveis estão perdendo CTAs importantes ou outros elementos de página. Talvez seja necessário projetar interfaces diferentes, mais intuitivas e fáceis de usar para dispositivos móveis e para desktop, para garantir uma boa experiência do usuário em todos os dispositivos.

O uso de mapas de calor para otimizar páginas para vários dispositivos aumentou significativamente as conversões do Materials Market, um site que conecta fornecedores de materiais de construção com clientes em todo o Reino Unido.

O CEO Andrew Haehn usou um mapa de rolagem da Hotjar para descobrir que pouquíssimos usuários de dispositivos móveis rolavam a página o suficiente para ver o CTA principal, então a sua equipe redesenhou o botão e o colocou em uma posição mais alta na página, para aumentar a sua visibilidade. Essa simples mudança contribuiu para um aumento de 1,1% na taxa de conversão, gerando mais de £10.000 em receita anual.

Uso de mapas de calor com outras ferramentas de UX

Os dados de mapas de calor são realmente impressionantes, e lhe darão muitos insights por si só, mas você irá obter ainda mais benefícios deles ao combiná-los com outras ferramentas de análise, de feedback e ferramentas de UX design. Vejamos quatro exemplos:

1. Mapas de calor + análise tradicional

Ferramentas tradicionais de Web Analytics (como o Google Analytics) fornecem muitos pontos de dados quantitativos como visualizações de página, fontes de tráfego e taxas de rejeição, mas não podem explicar o motivo, e nem mesmo como isso acontece.

Ao combinar a análise tradicional com a análise de mapas de calor, você pode eliminar algumas das suposições e descobrir por que as suas métricas estão do jeito que estão. Você tem uma página com muito tráfego, mas que não está convertendo? Então, configure um mapa de calor e comece a ver o que está fazendo as pessoas desistirem e abandonarem o seu site.

Você pode levar a sua análise de mapas de calor para o próximo nível com a ferramenta Hotjar Trends. Configure um mapa de calor para analisar o comportamento do usuário, antes e depois do lançamento ou reformulação de uma página e, em seguida, passe diretamente do mapa de calor para os gráficos para descobrir como o engajamento evolui ao longo do tempo.

2. Mapas de calor + registros de sessão

Uma gravação de sessão (ou reprodução de sessão) é uma renderização de uma sessão de navegação do usuário que permite observar as ações de um único usuário (anônimo) durante a sua navegação por várias páginas de um site.

Embora os mapas de calor ajudem a visualizar os dados de todos os usuários de uma só vez, as gravações são criadas para cada usuário individual. Ao invés de fazer suposições sobre os cliques e sobre a rolagem que você vê em um mapa de calor, tente visualizar algumas gravações de sessão para ver como pessoas reais realmente interagem com as páginas do seu site.

Digamos que você descubra uma interação de usuário preocupante durante uma gravação de sessão, e queira saber se é um incidente isolado ou um problema de funcionalidade mais generalizado. O recurso de redução de zoom do Hotjar permite que você visualize uma gravação de um usuário que está tendo dificuldades e, em seguida, alterne diretamente para o mapa de calor dessa página para descobrir se outros usuários estão tendo o mesmo problema.

Para dar um exemplo da vida real, vamos ver como as gravações da Hotjar combinadas com os mapas de calor ajudaram a agência de UX design digital Turum-burum a aumentar em 55% a taxa de conversão da loja da varejista de calçados Intertop.

Primeiro, as gravações de sessão revelaram que os clientes tinham problemas com os filtros de produtos da Intertop—eles estavam navegando por um grande número de páginas só para procurar o tamanho do sapato.

Depois de analisar um mapa de cliques, a equipe da Turum-burum descobriu que muitos usuários clicavam em "mostrar tudo" enquanto procuravam um produto pois não tinham os filtros necessários para poderem encontrar exatamente o que estavam procurando.

Com os insights obtidos das gravações de sessão e dos mapas de calor, a Turum-burum conseguiu implementar um recurso de filtragem mais simplificado, identificando e priorizando categorias de produtos claras, um elemento de navegação essencial na experiência de compras de E-commerce. O aprimoramento da Turum-burum levou a uma melhor experiência do usuário e a um aumento nas vendas para seu cliente.

3. Mapas de calor + feedback na página

Os dados quantitativos (numéricos) são extremamente importantes para a tomada de decisões de UX baseadas em dados, mas não negligencie o valor dos dados qualitativos (não numéricos).

Depois de usar mapas de calor para revelar problemas de design em páginas específicas do seu site, peça aos usuários pra deixarem um feedback de UX em cada página do site, para saber o que eles acham que está faltando ou o que você deve mudar para ajudá-los a atingirem seus objetivos.

O feedback do site não precisa ser um incômodo para os usuários: uma pesquisa simples e não intrusiva com apenas uma pergunta pode ser tudo o que você precisa para dar o pontapé inicial em algumas melhorias de UX que você não havia pensado.

Além dos insights sobre o mapa de cliques que levaram a empresa de software Techsmith a oferecer uma experiência do usuário melhor ao redesenhar os CTAs de seus produtos, o designer de experiência do usuário Conan Heiselt também usou as pesquisas da Hotjar para obter uma compreensão mais profunda das necessidades de seus clientes.

Com uma simples pesquisa na página, Conan enviou aos usuários que concluíram determinadas interações com o site uma pergunta aberta: "Qual é a sua maior frustração com esta página?" Ele conseguiu coletar respostas suficientes para identificar 15 temas gerais, o que possibilitou que ele começasse a tomar medidas para atender às necessidades específicas dos usuários.

Se você não tiver tempo suficiente para preparar um relatório de pesquisa de UX detalhado e acionável como o de Conan, experimente a ferramenta AI for Surveys da Hotjar e descubra como ela gera um relatório automatizado com insights importantes e sugestões sobre as próximas etapas, com base no feedback real de seus usuários.

4.Mapas de calor + testes A/B

Dados de mapas de calor e testes A/B andam de mãos dadas: você pode usar dados de mapas de calor para criar uma hipótese de teste e pode executar mapas de calor em variações de testes A/B, para coletar dados úteis sobre por que uma variação de página é bem-sucedida (ou não).

Por exemplo, os designers de UX da empresa de design de banners Bannersnack usam mapas de calor nas principais páginas de destino para coletar evidências de como as pessoas interagem com essas páginas. Com base nos dados, a equipe cria um design alternativo e faz testes A/B com as versões antiga e nova; em um teste, a Bannersnack aumentou as inscrições em 25% combinando os insights dos mapas de calor com os testes A/B.

Como começar a usar os mapas de calor

Uma ferramenta de mapa de calor de site como a Hotjar é muito fácil de usar, bastando adicionar um script de rastreamento. Você pode configurar um mapa de calor em apenas alguns minutos, e os dados começarão a ser coletados toda vez que um usuário visitar o seu site.

Independentemente de você usar mapas de calor para mostrar o seu trabalho, aumentar as conversões ou obter ideias para novos testes, o insight inestimável que você obterá desses gráficos com as cores do arco-íris provavelmente dará à sua abordagem de UX a mudança necessária para elevar a qualidade e a performance do seu site ao próximo nível.