O que são Heatmaps do site e como usá-los?

Gabriel Resende
18/10/2018

Mapas de calor: é provavelmente a categoria mais ampla e mais popular de ferramentas de insight disponível para qualquer empresa que queira entender e  melhorar a experiência do usuário em seu site.

heatmapexample2.png

Eles estão por aí há anos, e a maioria das empresas os usa em algum momento ou outro. Eles são uma ferramenta básica para departamentos do Google Analytics, equipes de Otimização de conversões e profissionais de experiência do usuário em todos os lugares.

Mas há uma tremenda confusão sobre o que os mapas de calor realmente medem e como eles devem ser usados.

A verdade é que a maioria das pessoas que usa mapas de calor está usando-as erradamente.

Não é de admirar que as pessoas fiquem confusas; os mapas parecem todos iguais – apenas um overblock avermelhado-amarelado-verde-azulado do seu site.

Os vendedores neste espaço não facilitaram nada. Em um esforço para simplificar sua mensagem, muitos são culpados de usar termos excessivamente vagos para descrever o que fazem, e não há convenções de nomenclatura consistentes para os diferentes tipos de mapas de calor.

Neste post, tentaremos esclarecer o tópico para que você obtenha mais valor dos mapas que você usa e saiba de quais tipos você realmente precisa dependendo de seus objetivos. Também vamos apontar armadilhas e mal entendidos comuns.

Vamos começar com a  regra nº 1 para você saber:

Os mapas de calor nada mais são do que um método para visualizar dados, e não há percepção até você entender quais dados você está visualizando.

É incrivelmente importante internalizar esse conceito. Mapas de calor não são dados, eles apresentam dados . Eles são uma forma de codificação por cores. Um mapa de calor pode representar qualquer coisa, desde o clima, ao congestionamento do tráfego, à eficiência energética da sua casa, etc.

Screen Shot 2017-05-19 às 14.13.52.png

No contexto de sites, um mapa de calor também pode representar muitas coisas diferentes: movimentos do mouse, cliques, fixações de olho físico (volume de fixação ou duração), padrões de rolagem e muito mais.

Você poderia estar olhando para um mapa de calor que mostra dados coletados durante períodos específicos, ou uma sessão de usuário inteira. Você pode estar vendo dados de todos os tipos de usuários ou apenas de um subconjunto específico. Existem muitas variáveis ​​e você precisa ter uma idéia muito clara de quais informações você está obtendo e quais informações você deseja.

Por exemplo, aqui estão três tipos diferentes de mapas de calor:

Captura de tela de 2017-05-19 at 14.48.10.png

Como você pode ver, há diferenças notáveis ​​entre eles. O mapa à esquerda  mostra qual conteúdo é mais provável de capturar os olhos dos usuários quando eles chegam pela primeira vez na página (nota: isso é realmente simulado usando um AI – mais sobre isso depois). Você notará que as  pessoas tendem a ver a manchete, o apelo à ação e a imagem do produto imediatamente.

O segundo mapa  mostra onde os cursores dos usuários estavam durante seu tempo na página. Você pode ver que muitas pessoas pairaram sobre o texto e os links na navegação, enquanto outros usuários moveram o cursor para o lado (no espaço em branco) para que ele ficasse fora do caminho. Aqui, podemos entender melhor qual conteúdo é mais interessante para os usuários.

Finalmente, o mapa de cliques mostra onde as pessoas finalmente clicaram. Ver esses três mapas juntos mostra uma boa imagem da experiência do usuário: desde o que chamou a atenção deles inicialmente, até qual conteúdo era interessante, até o que os usuários decidiram  fazer.

Qual deles é mais relevante? Depende inteiramente do que você está tentando realizar. Com isso em mente, vamos dar uma olhada mais profunda nos diferentes tipos de heatmaps disponíveis.

Este guia é completo, então aqui está o roteiro, caso você queira ir em frente:

Mapas de calor de rastreamento de mouse

Mouse.jpg

Estas são as categorias mais comuns de mapa de calor. Você pode inserir algum código de acompanhamento em seu site, deixá-lo rodar por tempo suficiente para coletar dados suficientes, e você  acabará com algunsinsights interessantes sobre como os usuários estão usando o mouse para interagir com seu website. Existem 3 tipos principais de mapa de calor baseado no mouse que você pode obter:

Clique em Maps

Eles mostram quais partes de uma página são mais (e menos) clicadas; seja um link, foto, texto ou até mesmo espaço em branco.clickmapheatmap.png

Este mapa de cliques  mostra que os visitantes geralmente clicam na função de pesquisa
e no painel de navegação.

Os mapas de clique são úteis para visualizar quais links e botões são mais populares, mas também são úteis para detectar algumas falhas de usabilidade. Por exemplo, você pode ocasionalmente descobrir que as pessoas estão clicando em algo que não faz link em lugar nenhum. Isso pode indicar uma possível confusão sobre como navegar no site. Por exemplo, as pessoas podem clicar em uma imagem do produto porque esperam que ela seja direcionada para uma página com mais informações sobre esse produto específico. Uma vez que você os viu, problemas como esse são relativamente fáceis de consertar.

Muitas pessoas também usam mapas de cliques para entender onde as pessoas desistem ao preencherformulários. Isso pode ajudá-lo a fazer algumas alterações rápidas nos campos do formulário para aumentar as taxas de conclusão.

Mapas de movimento do mouse

Também chamados de “mapas de navegação” ou “mapas de atenção”, esses mapas de calor identificam partes da tela em que os usuários passam mais com o cursor.

Hovermaps_clicktale.png

Esse mapa de calor do movimento do mouse mostra que os usuários tendem a pairar sobre a mesa à esquerda da página, sugerindo que esse é um recurso útil.  

Esses mapas são interessantes porque muitos usuários tendem a mover o cursor para a parte da página que estão frequentando. Como resultado, um mapa de movimento do mouse pode ajudar você a entender qual conteúdo as pessoas tendem a achar mais relevantes ou interessantes em sua página.

Tenha cuidado para não generalizar demais: há também muitos usuários que são “parkers”, o que significa que eles deixam o mouse em um ponto, independentemente do conteúdo em que estão interessados. Por esse motivo, é importante reconhecer que mapas não contam a história completa. Os fornecedores que oferecem esses mapas geralmente os comparam ao rastreamento ocular, apesar de um estudo realizado em 2013 pelo Google e pela Carnegie Mellon University, que sugere que o rastreamento de mouse é um proxy fraco para rastreamento ocular, e não um substituto apropriado. Um estudo do Google em 2007  explorou a possibilidade de usar dados de movimento do mouse para prever movimentos dos olhos, mas os pesquisadores conseguiram apenas 64% de precisão usando essa abordagem.

Mapas de rolagem

Essa é uma ótima maneira de visualizar até onde a maioria dos usuários está rolando uma página para baixo e em quais seções eles passam a maior parte do tempo.

heatmap-scroll.png

Este mapa de rolagem mostra que quase metade dos usuários não vai rolar o suficiente para descobrir imediatamente toda a gama de serviços oferecidos- o que é uma visão útil para a equipe deles.

Os mapas de rolagem ajudam você a entender o quanto seus usuários realmente sabem sobre seus produtosou serviços. Pode ser bastante esclarecedor e um pouco angustiante descobrir que muitos usuários não conseguem ir longe o suficiente na página para absorver determinado conteúdo.

Prós e contras de mapas de calor de rastreamento de mouse

mousetrackingtable.png

 

Mapas de Calor de Rastreamento Ocular

eyeball.jpg

Para entender realmente como os usuários  realmente  visualizam seu website, você pode realizar estudos que envolvam a medição e o registro dos movimentos oculares físicos das pessoas que usam seu website. A abordagem clássica para isso é baseada em laboratório, onde os participantes do estudo usam dispositivos de rastreamento que medem com precisão cada movimento dos olhos, embora alguns fornecedores também ofereçam uma abordagem baseada na web cam.

Ao conduzir estudos de rastreamento de olho físico, você tem a capacidade de coletar muitos dados interessantes que podem ser visualizados como um mapa de calor. Ao lidar com mapas de calor de rastreamento ocular, é extremamente importante entender exatamente o que você está vendo. Uma das principais fontes de confusão é o  cronograma .

Um mapa de calor mostrando como os usuários olham para a página durante os primeiros três segundos – embora muito valiosos – não é o mesmo que um que dura 30 segundos. O exemplo abaixo mostra como o período de tempo afeta a aparência do mapa de calor:

Screen Shot 2017-05-29 às 15.39.34.png

Este exemplo  mostra como as fixações no anúncio evoluem ao longo de vários períodos de tempo diferentes (de 0 a 2000 milissegundos).

Outra fonte comum de confusão com mapas de calor de rastreamento ocular é em torno dos dados reais que estão sendo mostrados. Existem 2 tipos principais de mapas de calor no rastreamento dos olhos, e eles são muito diferentes.

Um  mapa de calor do volume de fixação mostra quais partes da página atraíram o maior número de fixações oculares. Normalmente, uma fixação é registrada toda vez que um usuário olha em um único ponto por mais de 50 milissegundos, essencialmente medindo a  frequência com que aspessoas olhavam para uma parte específica do conteúdo. Enquanto isso, um mapa de calor de duração de fixação mostra quanto  tempo eles ficaram em um determinado ponto. Muitas pessoas confundem os dois ou não sabem que essa distinção existe. Como resultado, eles interpretam mal os dados. Novamente, a  regra # 1  : você tem que entender quais dados o mapa de calor está realmente visualizando, caso contrário não é útil.

Por exemplo, um mapa de calor de volume de fixação será mais útil para entender qual conteúdo realmente se destaca em um design (ou seja, o mais atraente), enquanto um mapa de calor de duração de fixação pode fornecer mais informações sobre qual conteúdo era visualmente mais interessante Comercial.

Um estudo de rastreamento ocular também torna possível entender caminhos de olhares comuns e a ordem típica de fixações em toda a página.

Os prós e contras do rastreamento ocular variam dependendo dos métodos que você usa, mas em geral você obtém insights que vão além da natureza transacional dos cliques e movimentos do mouse. Além disso, você pode executar um estudo de rastreamento ocular em protótipos e maquetes – não apenas sites ao vivo. Isso é uma grande vantagem se você estiver trabalhando em um grande redesenho.

A desvantagem do rastreamento ocular se resume em praticidade. Tende a sercaro e demorado, mas ainda pode fazer sentido dependendo do projeto. Vamos dar uma olhada em algumas das suas opções, se você gostaria de coletar alguns dados de rastreamento ocular:

Laboratórios de rastreamento de olho profissional

Existem muitos laboratórios de pesquisa de usuários que você pode contratar para executar estudos de rastreamento ocular profissional com hardware de alta qualidade e configuração de experimentos especializados. Essa abordagem oferece os resultados mais precisos e permite que você personalize os diferentes tipos de informações que gostaria de obter no estudo.

usabilitylab.jpg

Um laboratório de usabilidade profissional

Você provavelmente será capaz de combinar os dados com entrevistas qualitativas com as pessoas que estão olhando para o seu site, o que pode gerar informações adicionais. Essa é uma opção interessante se você estiver procurando por um projeto único para obter uma compreensão mais profunda de como os usuários veem seu website, não apenas como eles clicam ou navegam nele. Também pode ser um ótimo método para usar se você quiser validar protótipos de estágio final para uma grande reformulação que ainda não foi publicada.

Prós e contras do uso de laboratórios profissionais de rastreamento ocular

eyetrackingabstable.png

Rastreamento Doméstico

Há uma opção de DIY para rastreamento ocular também. O hardware necessário se tornou muito mais acessível nos últimos anos, por isso é totalmente possível comprar seu próprio equipamento e montar seus próprios estudos de rastreamento ocular. Isso pode fazer sentido se você planeja realizar testes constantes em projetos de alto valor, e está disposto a investir tanto no equipamento quanto na especialização.

Tobii.jpg

Prós e Contras do Rastreamento Doméstico

inhousetable.png

Rastreamento Remoto de Olho via Webcam

Essa abordagem não usa nenhum equipamento profissional e permite que você faça crowdsourcing de participantes para que seus movimentos oculares sejam rastreados por meio de sua própria webcam. Esta é uma opção interessante para quando você quer fazer rastreamento ocular regular, mas não tem orçamento para um estudo profissional.

sitingoncomp.jpg

Prós e Contras do Rastreamento Remoto de Olho via Webcam

webcamtable.png

 

 

Mapa de calor de atenção inicial

Este mapa é o equivalente a um mapa de calor de rastreamento ocular de volume de fixação de 3 segundos com pelo menos 25 participantes. Ele mostra qual conteúdo é mais atraente para os usuários quando eles chegam.

Screen Shot 2017-05-22 às 17.19.27.png

Armado com este mapa, é fácil identificar conteúdo que possa distrair os usuários.

Mapa de Percepção

Esta visualização mostra qual conteúdo o se espera que as pessoas vejam dentro de 3 segundos após o pouso na página (cobrindo aproximadamente os 10 primeiros movimentos oculares).

visual-flaws-1-1.png

Isso permite que você verifique com rapidez e facilidade se os usuários verão imediatamente o conteúdo mais importante da página ou se precisarão se esforçar para encontrá-lo. Se você fez um bom trabalhoAo estabelecer uma hierarquia visual na página, os usuários devem ver imediatamente o  que é a página,  por que devem se importar e  para onde ir em seguida.

Mapa de clareza

Os mapas de clareza (também conhecidos como mapas de desordem)  mostram quais partes do seu design são mais (e menos) prováveis ​​de serem consideradas excessivamente confusas.

Screen Shot 2017-05-23 em 12.01.23.png

O mapa de clareza do Fans.com sugere que as imagens em segundo plano podem estar muito ocupadas.

Este mapa é útil para identificar áreas em um design que devem ser arrumadas, removidas ou reprojetadas.

Alguns casos de uso típicos são: comparar e validar ideias de design, comunicar decisões de design a partes interessadas,  qualificar variantes de design para testes adicionais e controlar a qualidade em criativos (opções de banner, imagens de herói).

Quais as que você precisa, dependendo de suas metas

Nem todos os mapas de calor são necessários para ajudá-lo a realizar tarefas específicas. Outras vezesdeterminado mapa de calor pode ser bom ter, mas não é tudo o que é viável para implementar. Aqui está o que recomendamos usar dependendo do tipo de trabalho que você está realizando.

Um grande redesenho

Rastreamento ocular profissional

Ninguém quer investir uma tonelada de tempo e dinheiro redesenhando seu site apenas para tê-lo no flop quando lançado. Mas isso acontece o tempo todo.

target-redesign-hed-2013_0.jpg

O redesenho de 2013 da Target estimulou um artigo da AdWeek intitulado “Quase todo mundo odeia o novo redesign da Target.com”.

Não há absolutamente nenhuma desculpa para enviar um novo site sem fazer alguns testes anteriores para validar o novo design. Não fazer isso pode ser um erro caro que coloca a empresa de volta em sua transformação digital e pode até mesmo custar seu trabalho.

Além de testes qualitativos de usuários, pode ser útil realizar um estudo profissional de rastreamento ocular nos novos designs antes de entrar em produção. No entanto, esse projeto final será o resultado de milhares de decisões de design menores, e cada uma delas deve ser feita comoobjetivamente quanto possível. Aqueles no dia-a-dia em que os mapas de calor do EyeQuant podem ser extremamente úteis.

Construindo uma pilha do Analytics

Mapas de calor de rastreamento de mouse

Muitas empresas começam a procurar mapas de calor porque decidiram recentemente investir em uma suíte de análise mais sofisticada e estão criando uma pilha de ferramentas para fornecer dados concretos sobre como os usuários estão se comportando em seu site. Na maioria dos casos, a equipe de análise será proprietária dessa pilha e fornecerá insights para outras áreas da empresa quando necessário.

analytics.feature.mobile-workspace.371x188.png

Para este caso de uso, mapas de calor de rastreamento de mouse (que coletam dados passivamente) são provavelmente a melhor aposta, enquanto um pesquisador de UX especializado pode estar mais interessado nos outros métodos que vimos.

Um programa de otimização de conversões

Mouse mapeando mapas de calor, EyeQuant

Muitas empresas agora têm uma equipe de otimização de conversão dedicada que coleta ideias sobre como melhorar seu website e conduz testes A / B na esperança de aumentar as taxas de conversão. O mantra dos anos anteriores era que, mesmo perdendo os testes, na verdade são vencedores, porque você aprende algo sobre seus usuários. Embora seja verdade em certo sentido, a empresa também precisa ver um retorno sobre o investimento, e muito poucos testes A / B realmente geram melhorias significativas.

Isso coloca pressão na equipe de otimização para melhorar sua taxa de vitórias. A maneira mais fundamental de fazer isso é formar hipóteses melhores fazendo uma pesquisa mais adiantada sobre como os usuários se envolvem atualmente com o site. Quanto mais fontes de dados apontarem na mesma direção, melhor. É aí que os heatmaps de rastreamento de mouse podem ser muito valiosos, além de testes com usuários, pesquisas, etc. O EyeQuant também pode ajudar aqui, mostrando possíveis falhas da interface do usuário.

Outra maneira importante de melhorar as taxas de ganhos é validando as variantes de página em potencial antes de se comprometer com o teste A / B. Para alterações relacionadas ao design, o EyeQuant é uma ótima maneira de validar variantes de design antes de lançar um teste e de eliminar variantes mais fracas. O efeito disso é duplo: você deve ver uma taxa de vitórias maior e perderá menos tempo com variantes ruins, o  que ajuda a aumentar a velocidade do teste.

Rastreamento ocular geralmente não é uma ótima solução para o trabalho diário das equipes de otimização – principalmente por questões de praticidade e orçamento.

Alguns pensamentos finais

Profissionais da Internet têm usado mapas de calor há anos para aprender coisas incríveis sobre como os usuários estão interagindo com o site. Neste ponto, você deve estar bem equipado para cortar a selva de mensagens de marketing e trazer os mapas de calor corretos para o seu arsenal de ferramentas. Aqui estão algumas coisas importantes para lembrar.

1. A peça mais importante do quebra-cabeça é entender os dados que cada mapa de calor representa. Determine o que você está tentando realizar e, em seguida, descubra quais dados são mais relevantes para ajudar você a chegar lá.

2. Pense no seu fluxo de trabalho: quando  você precisa de insights e com que frequência? Algumas ferramentas de mapeamento de calor são mais adequadas para projetos únicos, enquanto outras podem ser usadas todos os dias. Alguns podem ser usados ​​durante o processo de design, enquanto outros só podem dar feedback quando uma página estiver no site.

3. Não é uma decisão ou. Equipes digitais de classe mundial geralmente usam vários tipos diferentes de mapas de calor em diferentes partes de seu fluxo de trabalho. Você pode precisar usar mais de um fornecedor.

A maioria dos fornecedores fornece demonstrações personalizadas, white papers ou avaliações gratuitas – por isso, é bastante fácil obter uma amostra do que o serviço oferece.

Copyright 2018 WayPanel ©  All Rights Reserved