Heat map para site: relatórios para melhorar a usabilidade
Última atualização: 20 de agosto de 2020
O monitoramento de resultados e de performance é parte essencial de qualquer ação online, incluindo alterações realizadas em páginas da web.
No caso de rotinas de otimização de conversão, o monitoramento é ainda mais importante. Na verdade, não é possível fazer CRO sem que os sites (ou páginas) em processo de otimização sejam rigorosamente monitorados.
E uma das ferramentas mais práticas e intuitivas para isso são os heat maps para sites. Você conhece os heat maps online?
É claro que quando se fala em monitoramento, estamos falando de diversas outras ferramentas, como Web Analytics, que nos ajudam a entender uma série de aspectos relacionados à forma como os visitantes interagem com uma página.
E entre estas ferramentas, a mais conhecida em todo o mundo é o Google Analytics – um serviço tão amplamente utilizado que faz com que outros, também muito eficientes e até mais adequados para determinadas situações, sejam muitas vezes negligenciados.
O Google Analytics é uma ferramenta que prioriza uma visão quantitativa do que está acontecendo em um site. Isto é muito importante, porém nem sempre fornece todas as informações necessárias, pois em muitas situações é preciso ter uma visão mais qualitativa das análises.
Hoje vamos falar de heat map para site, 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.
Prepare-se para saber tudo sobre os heat maps de site, ou “mapas de calor.
O que são heat maps para sites?
Heat maps (ou mapas de calor) são relatórios que fornecem indicadores qualitativos das interações do público com uma página ou conjunto de páginas da web.
Também conhecidas como ferramentas de click tracking, elas podem gerar insights de usabilidade que estão fora do escopo de outras ferramentas do tipo.
Os heat maps online fornecem indicadores que vão além de pageviews e relatórios básicos de navegação, mostrando com exatidão quais são os links e outros elementos onde os usuários clicam (e também onde não clicam), além de demonstrar até que ponto os visitantes fazem a rolagem de uma página e que elementos eventualmente são ignorados ao longo da rolagem.
Os relatórios fornecidos pelas ferramentas de heat map online têm o potencial de elevar o patamar do trabalho dos profissionais de CRO (Otimização de Conversão), UX, UI e design, e também podem ser muito úteis para áreas como PPC, SEO e Copywriting.
Como funciona o heat map online
Integração
O primeiro passo é escolher a ferramenta de heat map de site mais adequada para você (vamos abordar as opções mais à frente) e então fazer a integração dela com o seu site.
Este processo é extremamente simples. Basicamente você terá que copiar uma string de código fornecido pela ferramenta e colar numa área determinada do código-fonte da sua página – normalmente dentro da tag <head>.
Pequenas variações podem acontecer dependendo da ferramenta escolhida, mas não se preocupe. As instruções de integração sempre são claras e realmente simples.
Operação
Depois de concluída a integração é que as coisas começam a ficar divertidas!
O primeiro passo é escolher as páginas do seu site que você deseja monitorar. Então a ferramenta vai gerar um screenshot de cada uma das páginas, onde serão demonstrados os cliques dos usuários e também as áreas visualizadas ao longo delas.
E aqui vamos entender porque estas ferramentas são conhecidas como heat maps.
Mapa de calor em exame de imagem de um cérebro humano
O termo 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, como na imagem ao lado, de um exame de imagem realizado em um cérebro humano utilizando um mapa de calor para o diagnóstico.
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, que é mais próximo do que as ferramentas objeto deste artigo utilizam.
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:
< Mais atividade Menos atividade >
Entendendo este conceito, vamos falar dos dois principais tipos de heat maps online utilizados para a compreensão da interação dos usuários com páginas da web: os mapas de cliques e os mapas de rolagem.
Mapas de cliques (ou 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.
Desta forma, as áreas mais clicadas aparecem com “manchas” avermelhadas/alaranjadas no screenshot, enquanto as menos clicados aparecem azuladas/esverdeadas e as não clicadas não são coloridas.
O resultado é uma visualização como essa:
Na imagem, podemos notar como a página apresenta o comportamento esperado no que se refere aos cliques dos visitantes.
As áreas mais clicadas são os botões com os calls-to-action, seguidas pelo menu de navegação e pelo logotipo da empresa.
Porém, se houvesse problemas neste aspecto, o mapa de cliques os mostraria claramente. Estes problemas poderiam ser, por exemplo:
- Poucos cliques nos botões com os calls-to-action (que são, naturalmente, as áreas onde desejamos que os visitantes mais cliquem);
- Muitos cliques em áreas sem links;
- Grande volume de cliques em links de menor importância.
Neste tipo de situação, obviamente uma página não poderá cumprir satisfatoriamente seus objetivos de conversão.
Toda página da web que vá além do conteúdo informativo, ou seja, que pretenda alguma ação determinada do usuário, deve utilizar técnicas como o Copywriting para persuadir e a usabilidade para conduzir o usuário no caminho da conversão pretendida.
E os heat maps para site são uma ferramenta indispensável para isso. Através dos mapas de calor, é possível identificar claramente as áreas e elementos de uma página que se encontram ineficientes no objetivo de direcionar o usuário às ações desejadas.
Mapas de rolagem
Quando se fala em heat maps de site, a primeira imagem que vem à cabeça é de um mapa de cliques. Porém, os mapas de rolagem são também muito úteis no propósito de compreender a forma como os visitantes interagem com uma página.
Uma questão recorrente no momento da criação de uma página ou de uma landing page é a sua extensão. Existe um tamanho ideal?
Sem entrar muito neste mérito, é importante compreender que a extensão da página deve ser suficiente para trazer toda a informação necessária para persuadir o visitante a concluir a ação que desejamos dele.
Uma página longa não é necessariamente um problema. Mas, por outro lado, ela não deve ter nenhum pixel além do necessário, sob pena de que o usuário se disperse ao longo da leitura e abandone a navegação.
Os mapas de rolagem servem para compreender se os visitantes estão lendo todo o conteúdo de uma página, conteúdo este que certamente vai demandar tempo e dedicação na sua elaboração.
Se um grande volume de visitantes não chega a acessar grandes partes da página, significa que ela tem problemas, que sua mensagem não será adequadamente entregue e, claro, que é necessário revisar o layout desta página.
A análise da rolagem das páginas é realizada por meio de screenshots como este:
A lógica do espectro de cores é a mesma, conforme a escala do lado do mapa de rolagem.
No exemplo acima, quase todos os usuários visualizam a comparação entre os planos, no alto da página, porém poucos chegam a concluir a leitura do conteúdo até o fim, onde está o botão de conversão – o que é um problema grave!
Este tipo de visualização mostra claramente até que ponto os usuários navegam na página, o que é essencial para compreender se a sua mensagem está sendo integralmente entregue ao leitor. Quando isto não acontece, o nível de persuasão não será adequado e, consequentemente, suas taxas de conversão vão cair.
Ferramentas de heat map para site
Existem diversas opções de ferramentas de heat map online no mercado. Você pode se cadastrar e utilizar o trial de algumas para decidir qual é mais adequada às suas necessidades, mas para ajudá-lo na sua pesquisa, vamos falar de algumas das nossas favoritas: Crazy Egg, Clicktale e Hotjar.
Crazy Egg
O Crazy Egg é possivelmente a ferramenta de mapas de calor mais popular do mercado. Fornece relatórios bastante completos e claros da interação dos usuários com as páginas do seu site.
A segmentação por termos de busca e sites de referência facilita bastante a compreensão do comportamento de usuários provenientes de diferentes fontes.
A ferramenta disponibiliza um trial de 30 dias para novos usuários.
Clicktale
ClickTale é uma ferramenta voltada para sites com um volume de visitas mais considerável: mínino de 500.000 por mês. Para contratá-la, é preciso solicitar um contato comercial no site.
É também uma ferramenta bastante completa. Destacamos o recurso “ClickTale Touch”, 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.
Hotjar
O Hotjar é uma opção muito interessante, que integra os heat maps online a outros recursos para compreensão do comportamento dos visitantes de um site, como pesquisas em soft pop-ups, funis de conversão, análises de formulários e gravação de telas de usuários.
A ferramenta vem ganhando muito mercado, pois apresenta uma ótima relação de custo x benefício.
Está disponível, no site, um trial de 15 dias do plano Plus e também há versões gratuitas (com limitações do número de usuários monitorados e de heat maps simultâneos).
Casos de uso de heat maps de site na Supersonic
Como dissemos anteriormente, a nossa metodologia de CRO envolve diversas áreas de conhecimento, empregadas de forma coordenada para fazer com que o máximo de visitantes de uma página conclua a ação deseja pelos administradores do site.
Uma das mais importantes destas disciplinas é a usabilidade, que é essencial para conduzir o usuário no caminho da conversão.
Os heat maps são a ferramenta de analytics perfeita para melhorias de usabilidade de páginas da web. Para que você possa compreender melhor como isso ocorre, veja os casos de uso abaixo, conduzidos pela equipe da Supersonic e que utilizaram mapas de calor para os seguintes clientes:
Conclusão
Se você quer compreender a fundo o comportamento dos visitantes do seu site, os sistemas de Web Analytics quantitativos, como o Google Analytics, são muito importantes, porém necessitam da complementação de plataformas de análise qualitativas.
No caso de análises voltadas à usabilidade das páginas, os heat maps para site são essenciais para se compreender de forma plena como seus visitantes interagem com as páginas do seu site, quais são suas dificuldades, quais conteúdos estão e não estão obtendo a visibilidade adequada e quais links importantes para a conclusão do processo de conversão não estão obtendo cliques em volumes adequados.
Neste artigo você viu o que são, como funcionam, que benefícios proporcionam e quais são as melhores ferramentas de mapas de calor.
Os insights trazidos por elas podem te ajudar a melhorar a usabilidade do seu site. O que é fundamental, já que uma boa usabilidade é fator essencial para se obter boas taxas de conversão.
Se ficaram dúvidas, estamos sempre prontos a respondê-las. Deixe seu comentário abaixo e vamos conversar!
De curioso a cliente
Um passo a passo eficiente para transformar seus visitantes em compradores
baixar e-book
Sensacional hein! 😀
Gostei, vocês conhecem o smatlook?
Oi Diego, conhecemos sim. É outra ótima ferramenta! Vale o uso!