Provavelmente, a característica mais importante de um bom gestor de produto é a capacidade de se colocar no lugar dos utilizadores. Para desenvolver essa capacidade, os gestores de produto passam horas em entrevistas com utilizadores e a analisar os dados por detrás do comportamento dos utilizadores.
Mas existe outra forma de aperfeiçoar a sua intuição sobre os utilizadores: analisar a forma como interagem com o seu produto através de mapas de calor.
Os mapas de calor são apenas uma das muitas ferramentas de investigação de utilizadores que ajudam a identificar fricções, intenções e oportunidades ao longo da jornada do utilizador. Também se enquadram no âmbito da análise de produtos, ajudando-o a ir além das métricas de vaidade e a perceber o que os utilizadores estão realmente a fazer.
Se chegou até aqui, é provável que já tenha curiosidade sobre os benefícios dos mapas de calor — ou que esteja à procura de exemplos do mundo real para justificar o investimento.
De qualquer forma, está no sítio certo. Vamos explicar os diferentes tipos de mapas de calor e como pode utilizá-los para alcançar os seus objetivos de produto.
#1: Mapas de cliques e mapas de toques
Começamos pelo mais popular de todos: o mapa de cliques (para interfaces de computador) ou de toques (para interfaces móveis).
Os mapas de cliques são a representação visual da forma como os seus utilizadores clicam nos elementos da sua interface. Trata-se simplesmente de uma captura de ecrã da sua interface de utilizador com partes destacadas em diferentes cores.
Se a sua ferramenta de mapas de calor destaca um determinado elemento da sua interface, isso significa que um utilizador (ou vários) clicou nesse elemento. A cor, por outro lado, mostra o número de cliques que esse elemento específico recebeu.
As ferramentas de mapas de calor utilizam normalmente cores da escala de temperatura.
Verá cores mais quentes deste gradiente nas áreas que recebem muitos cliques e destaques com cores mais frias nas áreas que recebem pouca atenção.
Eis o aspeto da visualização de dados de um mapa de toques para uma aplicação móvel que permite gerir as suas finanças.
Podemos ver que as áreas que indicam o montante gasto em cada transação estão destacadas a vermelho. Isto significa que muitas pessoas clicam nelas (provavelmente para expandir a transação e ver os detalhes).
O saldo da conta no topo, por outro lado, está destacado a verde, indicando que poucas pessoas acabam por clicar nele.
Como utilizar um mapa de cliques
Os mapas de cliques são bastante ricos em informações úteis. Há muitas coisas que pode aprender sobre o comportamento dos seus utilizadores ao observar as áreas onde clicam.
Por exemplo, se gerir uma aplicação de um abrigo para cães que tenha uma página de donativos onde os utilizadores possam apoiar financeiramente o abrigo, pode utilizar um mapa de cliques para ver qual opção de donativo tem o melhor desempenho.
Ao analisar o mapa de toques acima, podemos afirmar que as opções de $10 e “Outro” são, de longe, as escolhas mais populares quando se trata de escolher o montante do donativo.
Uma conclusão importante que podemos retirar daqui é que, muito provavelmente, existe um montante de donativo que não está presente na lista (por exemplo, $1) e as pessoas clicam em “Outro” para introduzir esse montante.
Por isso, provavelmente será boa ideia verificar o que as pessoas introduzem na secção “Outro”, identificar os valores mais populares e adicioná-los à nossa lista.
#2: Mapas de deslocamento
Tal como o nome sugere, este tipo de mapa de calor permite analisar o comportamento de deslocamento dos seus utilizadores.
Os mapas de deslocamento também utilizam códigos de cores baseados na escala de temperatura. No entanto, em vez de destacarem pontos da sua interface onde as pessoas clicaram, destacam secções inteiras da sua página com base no número de pessoas que se deslocaram até esse ponto e visualizaram essa secção.
Tal como acontece com os outros mapas de calor, obtém destaques com cores quentes quando muitas pessoas percorrem e veem essa secção, e cores frias quando poucas pessoas o fazem.
Have an account? Log In
Como utilizar um mapa de deslocamento
Os mapas de deslocamento são excelentes para otimizar a posição de determinados elementos ou secções na sua página e resolver problemas de utilização/interação com essas secções.
Vamos analisar um caso típico de resolução de problemas, examinando o mapa de deslocamento da página de preços de um serviço SaaS chamado Nelio.
Imagine que está a ter problemas com a competitividade. Por algum motivo, as pessoas preferem subscrever os serviços dos seus concorrentes. Quando lhes pergunta porquê, respondem que a outra ferramenta tinha uma funcionalidade de acompanhamento de múltiplos objetivos e a sua não.
Ora, o problema é que dispõe dessa funcionalidade, pelo que precisa agora de compreender por que motivo as pessoas não se deparam com ela.
Ao observar o mapa de deslocamento da sua página de preços, verifica que a esmagadora maioria dos seus utilizadores não percorre a página. Depois, repara que a descrição da funcionalidade de acompanhamento de múltiplos objetivos está abaixo da área visível e na zona azul. Isto significa que apenas alguns dos seus utilizadores percorrem a página e leem sobre a funcionalidade, o que pode acontecer com a maioria das ferramentas de análise do comportamento dos utilizadores.
Problema identificado! Para resolver esta questão, pode considerar adicionar as funcionalidades da sua secção “Todos os planos incluem” como elementos adicionais nas listas dos seus planos de preços, garantindo que aparecem acima da área visível e que as pessoas as veem sem terem de percorrer a página.
#3: Mapas de calor de passagem do rato
Também conhecido como mapa de movimentos, este tipo de mapa de calor acompanha a posição do rato, permitindo visualizar o comportamento de “movimento” dos seus utilizadores numa interface.
Na maioria dos casos, ao utilizar mapas de calor de passagem do rato, partimos do princípio de que os utilizadores irão provavelmente olhar para o elemento sobre o qual o cursor está colocado. Assim, ao acompanhar o movimento do rato, estamos a correlacioná-lo com o acompanhamento do que as pessoas estão a observar enquanto navegam na nossa interface.
Visualmente, consiste em pontos realçados (mais uma vez, utilizando um esquema de cores baseado na temperatura) para as partes da sua interface onde o cursor do rato do utilizador permaneceu durante mais tempo. Além disso, algumas ferramentas de mapas de calor também mostram um “rasto” dos pontos onde os seus utilizadores geralmente começam e por onde se deslocam na interface.
Eis o aspeto desses rastos.
Este é o mapa de calor de acompanhamento do rato de, provavelmente, uma das melhores interfaces com experiência de utilização do mundo: o site da Apple (afinal, foi aí que trabalharam os primeiros designers de experiência de utilização da história). Estes rastos mostram que as pessoas começam a explorar a página de destino do MacOS Snow Leopard examinando primeiro o fascinante felino, antes de lerem o título e avançarem para os restantes elementos da página de destino.
Como utilizar um mapa de passagem do rato
Uma das formas interessantes de utilizar um mapa de movimentos é identificar distrações dos utilizadores.
Por exemplo, se estiver encarregado de otimizar a página de resultados de pesquisa da Amazon (o seu objetivo é levar os utilizadores a clicar num produto que a Amazon encontrou para eles), pode consultar o mapa de calor de passagem do rato e verificar que a maioria dos utilizadores vai primeiro observar um dos seus banners (por exemplo, algum tipo de anúncio), antes de prosseguir com a análise dos resultados da pesquisa.
Esta é uma grande distração para os seus utilizadores e pode diminuir a probabilidade de clicarem nos resultados da pesquisa. Por isso, pode remover esse banner ou torná-lo menos proeminente visualmente na sua interface.
#4: Mapas de calor da atenção
Até agora, falámos de três ferramentas de análise que permitem analisar visualmente os seus utilizadores: através de cliques, movimentos do rato e deslocamento da página.
Embora cada uma das opções acima possa fornecer-nos informações valiosas, confiar apenas numa delas pode induzir em erro. Observar o comportamento dos utilizadores isoladamente, sem o contexto adequado, pode não proporcionar uma visão suficientemente ampla do que está realmente a acontecer.
Por isso, as equipas de produto costumam utilizar todos estes tipos em simultâneo e combinar os conhecimentos obtidos a partir dos três antes de os analisarem e tirarem conclusões. Ainda assim, esta solução também não é perfeita, uma vez que provavelmente terá de despender 3x mais tempo para realizar a análise completa.
Felizmente, com o surgimento dos modelos de IA e de algoritmos avançados, as modernas ferramentas de visualização de mapas de calor podem combinar as informações obtidas a partir dos cliques dos utilizadores, da passagem do rato e do deslocamento numa única representação.
Este quarto tipo é chamado mapa de calor da atenção, uma vez que indica essencialmente quais as partes da interface que estão a receber mais atenção dos seus utilizadores. Visualmente, é muito semelhante a um mapa de cliques, com determinados elementos da interface realçados em cores diferentes da paleta de cores baseada na temperatura, de acordo com o nível de atenção dos utilizadores.
#5: Mapas de calor geográficos
Os mapas de calor existem desde muito antes de as pessoas começarem a aplicar essa técnica às interfaces de utilizador. Um dos tipos tradicionais de mapas de calor mais proeminentes tem sido o mapa geográfico.
Neste caso, está a destacar determinadas partes de um mapa com base no tipo de ponto de dados que selecionou. Por exemplo, se quiser analisar a distribuição geográfica dos locais turísticos em França, pode utilizar este mapa de calor geográfico.
No mapa acima, é apresentado o número de camas de hotel (destinadas principalmente a turistas) por quilómetro quadrado. Como podemos ver, a Córsega, os Alpes Franceses e a Côte d’Azur são os claros vencedores nesta categoria.
Como utilizar um mapa de calor geográfico
É interessante consultar os conjuntos de dados turísticos de França, mas será que estes mapas de calor me podem ajudar a analisar o meu produto digital? Vejamos um exemplo.
Continuemos com o tema do turismo (e de França) e imaginemos que gere um serviço online de alojamento para estadias de curta duração (algo semelhante ao Airbnb). Teve a ideia de criar e distribuir materiais promocionais para festivais locais em cidades francesas, de modo a conseguir que mais pessoas reservem hotéis nessas cidades através do seu serviço.
A primeira pergunta que lhe surgiria seria: com que cidade/festival deveria começar?
Para obter uma resposta, pode criar um mapa de calor geográfico que apresente a distribuição das casas e apartamentos para arrendamento que utilizam o seu serviço.
Ao observar o mapa, verá que o seu serviço é bastante popular no sul de França. Por isso, talvez deva considerar começar por promover os festivais da Provença e da Côte d’Azur.
#6: Mapas de cliques de frustração
Este é um subtipo de mapas de cliques que filtra e apresenta apenas os casos em que os utilizadores clicaram em algo num momento de frustração. As ferramentas de mapas de calor normalmente identificam algo como um clique de frustração (ou clique morto) quando o utilizador continua a clicar várias vezes seguidas no mesmo elemento.
Como utilizar um mapa de cliques de frustração
Os mapas de cliques de frustração são excelentes ferramentas para identificar experiências de utilizador problemáticas. Pode tratar-se de algo que parece ser clicável, mas não é, que não é intuitivo ou que é simplesmente um botão que não funciona.
Por exemplo, se fizéssemos uma análise de dados de cliques de frustração numa das páginas da Iterate, deveríamos encontrar definitivamente cliques de frustração em pelo menos dois pontos — eis o motivo:
Reparou nos dois elementos de texto destacados a azul? Adivinhe: não são ligações. São apenas textos comuns apresentados a azul. Muitos visitantes da Iterate (incluindo eu) tentaram clicar nestes elementos de texto, esperando ser redirecionados para outra página.
Naturalmente, nada acontecerá depois de clicar neles, e isso pode levar o utilizador a ficar frustrado e a começar a fazer «cliques de frustração».
A lição retirada da análise do mapa de cliques de frustração desta página seria garantir, por exemplo, que o seu texto não parece uma hiperligação. Pode realizar um teste A/B com cores diferentes e verificar se a sua suposição de que o texto azul causa cliques de frustração é verdadeira ou falsa.
#7: Mapas de calor de rastreio ocular
Até agora, utilizámos mapas de passagem do cursor para compreender para onde os nossos utilizadores têm olhado enquanto navegam na nossa página web. Partimos do princípio de que os olhos dos utilizadores estão, na maior parte do tempo, a olhar para o cursor. Assim, o movimento do cursor pela sua interface poderá indicar em que elementos se estão a concentrar os olhos dos seus utilizadores.
Esta é uma forma comum de analisar a atenção. No entanto, os dados do mapa de calor que fornece não são perfeitos, uma vez que os utilizadores nem sempre olham para o cursor.
Se quiser obter dados precisos sobre a localização e valores numéricos relativos ao que os seus utilizadores estão a observar, deve considerar utilizar um mapa de calor de rastreio ocular.
Ao contrário dos restantes, os mapas de calor de rastreio ocular exigem que os seus utilizadores utilizem equipamento especializado que acompanhe o movimento dos olhos e identifique a localização dos elementos para os quais estão a olhar.
Isto significa que terá de convidar os seus utilizadores para sessões especiais de testes, fazê-los usar estes dispositivos de monitorização e começar a utilizar o seu produto. Embora seja muito mais moroso e dispendioso, a qualidade dos dados que obtém é muito superior à de qualquer outro tipo de mapa de calor de um sítio Web.
Como utilizar um mapa de calor de rastreamento ocular
Considerando o custo de organizar sessões de testes de rastreamento ocular, provavelmente acabará por utilizar o rastreamento ocular apenas em áreas de otimização da UX de grande impacto.
Os estudos de rastreamento ocular são muito comuns nos produtos de grandes empresas tecnológicas, nas quais uma melhoria de 1% na usabilidade dos seus produtos pode traduzir-se em dezenas de milhões em receitas e ROI.
Imagine quanto ARR adicional a Amazon obteria se realizasse um estudo de rastreamento ocular e colocasse os banners dos seus produtos em destaque de forma a aumentar a taxa de conversão em 1%.
#8: [Bónus] Mapas de confettis
Os mapas de calor de confettis são um subtipo dos mapas de cliques comuns que mostram cliques individuais, em vez de destacarem a área geral onde os utilizadores clicaram.
A vantagem de analisar cliques individuais está na possibilidade de os filtrar com base em vários pontos de dados complexos.
Aqui, por exemplo, agrupámos os cliques no CTA de pesquisa pelo dia da semana em que ocorreu o evento de clique.
Com base nos dados, podemos ver que as terças-feiras registam mais cliques, enquanto as pessoas que visitam o sítio às segundas-feiras são as mais distraídas (muitos cliques por toda a interface).
Como utilizar um mapa de calor de confettis
Os mapas de calor de confettis são especialmente úteis quando precisa de analisar o comportamento dos utilizadores a um nível granular. Ao contrário dos mapas de calor tradicionais, que mostram dados agregados, os mapas de confettis permitem filtrar cliques individuais com base em parâmetros como o tipo de dispositivo, a origem da referência ou até a hora do dia.
Este tipo de mapa de calor é excelente para detetar padrões que, de outra forma, passariam despercebidos. Por exemplo, se o botão de finalização da compra receber mais cliques às sextas-feiras, mas muito menos às segundas-feiras, os seus utilizadores poderão ser compradores impulsivos motivados pelo dia de pagamento — e o seu público de segunda-feira poderá ainda estar a recuperar do fim de semana, a olhar fixamente para a sua página de preços em vez de converter.
Os mapas de confettis também podem destacar distrações inesperadas. Se os utilizadores estiverem a clicar por toda a página em vez de clicarem onde pretende, poderão estar confusos — ou simplesmente à procura desesperada de um sinal de vida. Se o menu de navegação estiver a receber mais cliques do que o seu CTA, isso poderá significar que os utilizadores estão perdidos e esperam escapar em vez de interagir. Pode utilizar os conhecimentos obtidos através dos mapas de calor para aperfeiçoar o seu mapa da jornada do utilizador, especialmente ao identificar esses pontos de fricção. Filtrar por segmento de utilizadores pode ajudá-lo a perceber quais os grupos que estão a ter mais dificuldades e onde precisa de tornar a experiência mais fluida.
Os mapas de calor reforçam a sua empatia pelos utilizadores
Cada tipo de mapa de calor que descobrimos em conjunto permite-lhe ter uma ideia de como os seus utilizadores exploram e utilizam os seus produtos. Se estiver a trabalhar com recursos reduzidos, os mapas de calor oferecem uma forma rápida e simples de realizar investigação de UX antes de investir em testes de usabilidade mais aprofundados. Com a sua ajuda, conseguirá ver e sentir as dificuldades que os seus utilizadores estão a experienciar e avançar com a sua resolução.
Combinados com ferramentas de análise de produtos, os mapas de calor podem proporcionar uma imagem mais clara de como os utilizadores interagem com o seu produto e em que pontos o abandonam. Por exemplo, associar mapas de calor a ferramentas de reprodução de sessões permite-lhe compreender tanto o «quê» como o «porquê» por detrás do comportamento dos utilizadores.
Os mapas de calor são excelentes, mas são apenas uma das muitas ferramentas que pode utilizar para desenvolver empatia. Para saber mais sobre as restantes, não deixe de subscrever a nossa newsletter.