Os mapas de calor e as gravações de sessões tornaram-se um dos temas mais debatidos na comunidade de design. Enquanto alguns profissionais questionam a vertente da privacidade, outros consideram que a forma como funcionam os mapas de calor é perfeitamente adequada para manter os dados dos utilizadores privados e seguros.
Há, no entanto, algo com que todos concordam — o valor que obtém (enquanto designer de UX) ao utilizar uma ferramenta de mapas de calor.
Hoje, quero explorar este tema consigo e compreender como pode utilizar mapas de calor para melhorar a forma como cria as experiências dos seus utilizadores.
Em que consistem os mapas de calor?
Os mapas de calor são ferramentas de monitorização e visualização de dados que pode utilizar para compreender como o seu público-alvo interage com o seu produto ou sítio Web.
Os mapas de calor são gráficos bidimensionais que destacam determinadas partes da área com cores específicas para transmitir informações úteis. Por exemplo, o governo de Helsínquia lançou recentemente um mapa em tempo real que mostra quais são as zonas mais movimentadas da cidade.
Para visualizar o número de pessoas em determinados bairros, criaram um mapa de calor da cidade.
Quanto mais pessoas houver numa determinada zona da cidade, mais “quente” será o destaque dessa zona no mapa. Se nada estiver destacado, isso significa que o bairro em questão não está lotado.
Enquanto ferramentas de visualização, os mapas de calor são bastante versáteis. Assim, para além de visualizar os “pontos quentes” num mapa físico (como no caso de Helsínquia acima ou nos mapas meteorológicos que vemos na televisão), também pode sobrepô-los à sua interface de utilizador.
Neste caso, pode destacar as partes da sua interface com mais interações dos utilizadores. Pode depois associá-los a gravações de sessões para obter uma visão aprofundada da jornada do utilizador e realizar investigação de UX que o ajudará a:
- Obter informações valiosas sobre a forma como os utilizadores interagem com o seu sítio Web ou aplicação móvel.
- Compreender o que pode fazer para captar melhor a atenção dos seus utilizadores.
- Identificar novas oportunidades para otimizar a sua UX e melhorar as suas métricas principais (aumentar a taxa de conversão, a CTR dos seus botões de apelo à ação, etc.).
Assim, os mapas de calor são uma excelente ferramenta tanto para designers de UX como para gestores de produto estudarem a forma como os utilizadores interagem com os seus produtos e os melhorarem.
Ferramentas populares de mapas de calor
Vejamos agora como pode criar um mapa de calor para o seu produto. A Internet está repleta de ferramentas de análise que podem monitorizar as interações dos utilizadores no seu design de UI e destacar os elementos da página que recebem mais atenção.
Entre as mais conhecidas encontram-se a Hotjar, a Mouseflow, a Fullstory, a Crazy Egg, entre outras.
Mas não quero aprofundar demasiado este tema, pois temos uma lista selecionada de ferramentas de mapas de calor que pode consultar.
Have an account? Log In
4 tipos essenciais de mapas de calor para designers de produto
Aquilo a que chamamos “mapa de calor” não é um único tipo de informação visual utilizado para analisar a sua UX. Em vez disso, “mapa de calor” é um termo abrangente para várias ferramentas visuais que funcionam segundo o mesmo princípio geral — destacar determinadas áreas da sua UX com cores diferentes.
Não quero analisar todos os diferentes tipos de mapas de calor, pois muitos deles são simplesmente inúteis para designers de produto e de UX. Em vez disso, vejamos quatro tipos que a minha equipa de design considerou serem os mais úteis.
1. Mapas de cliques
Os mapas de cliques são provavelmente a primeira coisa que lhe vem à cabeça quando se fala de mapas de calor. São o tipo de mapa de calor mais popular e encontrará esta funcionalidade em praticamente todas as ferramentas de mapas de calor e de análise disponíveis (exceto no Google Analytics e nas ferramentas baseadas em eventos).
Um mapa de cliques (também conhecido como mapa de calor de cliques) mostra em que elementos da sua interface os utilizadores clicaram (por exemplo, na página inicial do sítio Web). Estes mapas visualizam a atividade de cliques do seu público, destacando as áreas relevantes e utilizando um código de cores para indicar quais as partes da sua UX que estão “quentes” ou “frias”.
Eis o aspeto do mapa de cliques da página de carreiras da Hotjar.
Ao examinar o mapa de cliques, podemos observar o seguinte:
- Uma área vermelha “quente” perto do CTA principal — “Ver ofertas de emprego”.
- Um pouco de atividade “morna” (amarela) em torno do botão de seta para a direita que altera a imagem em destaque na página.
- Também existe alguma atividade (azul) na seta para a esquerda.
O resto do ecrã não apresenta quaisquer destaques, o que nos indica que está “frio” e que ninguém clicou nessas áreas.
Por outro lado, o destaque “quente” no CTA principal indica que muitos utilizadores (provavelmente a maioria, a julgar pelo grau de “calor”) estão a clicar nele. Depois, temos as áreas mornas em torno dos botões de seta, que nos indicam que uma pequena parte dos utilizadores também navega pelas imagens em destaque.
Como utilizar mapas de calor deste tipo? Testes A/B aos seus CTAs!
Bem, existe uma grande variedade de casos de utilização para os mapas de cliques. Pode utilizá-los, por exemplo, para compreender a eficácia do posicionamento, do texto, etc. do seu CTA. No entanto, eu e os meus designers de produto adoramos utilizar mapas de calor por uma razão diferente — testar os nossos CTAs e outros elementos de design através de testes A/B.
Deixe-me ilustrar este caso de utilização com um exemplo. Imagine que está responsável pela aplicação web do ChatGPT e que está a enfrentar um problema com utilizadores que não criam novas conversas e falam com a IA dentro de uma única conversa.
Depois de analisar o mapa de calor, verifica que o botão “Nova conversa”, no topo da barra lateral, está frio (não há nada destacado).
Rapidamente, parte do princípio de que isso se deve à cor do CTA, que é igual à do fundo da barra lateral. Assim, realiza uma experiência A/B, na qual altera a cor de fundo para verde na variante A e mantém a cor “tal como está” na variante B.
Depois de um determinado número de utilizadores ter interagido com ambas as variantes, pode abrir o mapa de calor de cliques de cada uma e fazer uma comparação lado a lado para ver qual delas tem um botão “Nova conversa” mais “quente”.
De seguida, escolhe a variante em que o CTA obteve mais cliques com base na sua análise do mapa de calor.
2. Mapas de deslocamento
Mapear os cliques dos utilizadores é ótimo, mas nem sempre conta toda a história.
Por exemplo, se o seu mapa de cliques mostrar que tem um botão com baixo desempenho algures na parte inferior do ecrã, isso não significa necessariamente que exista um problema com o texto, a cor ou outros fatores do seu CTA. Talvez o seu CTA seja bastante bom, mas as pessoas simplesmente não percorram a página para baixo e não o vejam.
É aqui que entram em ação os mapas de deslocamento (também conhecidos como mapas de calor de deslocamento). Ao contrário do tipo anterior, que destaca os cliques dos utilizadores na sua interface, os mapas de deslocamento mostram o tempo que os utilizadores passam em cada secção da sua interface e o seu comportamento de deslocamento.
Dependendo do tempo despendido em cada secção, a página será destacada a vermelho (muito tempo despendido), laranja/amarelo (tempo despendido moderado) e verde/azul (pouco tempo despendido).
Deixe-me demonstrar isto com outro exemplo do Hotjar.
A imagem que vemos acima é uma das versões mais antigas da página “sobre nós” do Hotjar. Ao analisar os dados do mapa de calor de deslocamento desta página, podemos concluir que:
- Todos os seus utilizadores viram a parte superior da página (destacada a vermelho). Obviamente, certo?
- Depois, vemos que cerca de 75% deles deslocaram-se um pouco para baixo para ver os logótipos dos padrões que utilizam o Hotjar (a secção dos logótipos está amarela).
- Por fim, a parte inferior da página está verde, o que significa que apenas uma parte dos seus utilizadores se deslocou até esse ponto. A linha imediatamente acima do logótipo da Glassdoor indica-nos que apenas 57% dos utilizadores se deslocaram até esse ponto.
Este foi um caso clássico em que a parte superior está vermelha, a parte intermédia está amarela e a parte inferior está verde. Na vida real, no entanto, pode encontrar mapas de deslocamento em que uma secção específica nas partes inferiores do ecrã apresenta um bom desempenho (por exemplo, a secção dos seus planos de preços), enquanto os seus utilizadores ignoram o conteúdo acima e abaixo.
Como os designers de produto utilizam mapas de deslocamento: otimização de conteúdo
Tal como os mapas de cliques, os mapas de deslocamento são ferramentas versáteis que pode utilizar por vários motivos. No entanto, o caso de utilização mais popular é a otimização do posicionamento do seu conteúdo.
Como já mencionei, por exemplo, as secções de preços apresentam um desempenho realmente bom na sua página web. Isto significa que as pessoas percorrem rapidamente o seu conteúdo, reparam depois na secção de preços, param, leem-na e continuam a deslocar-se.
Este padrão comportamental permite-nos colocar estrategicamente a secção de preços no meio ou na parte inferior da nossa página. Fazemo-lo para garantir que as pessoas percorrem toda a página (e reparam em algumas das mensagens importantes que temos para elas) antes de encontrarem as informações sobre os nossos planos de preços.
A nossa estratégia aqui é semelhante à dos supermercados quando colocam os produtos lácteos e de padaria. Normalmente, são ambos produtos que compra com bastante frequência. Por isso, colocam-nos no lado oposto do edifício, fazendo-o atravessar o supermercado inteiro para os ir buscar.
A lógica é que, muito provavelmente, irá reparar noutros produtos nos corredores e comprá-los enquanto se dirige à secção de produtos lácteos.
3. Mapas de movimento
Os mapas de deslocamento dão-lhe uma visão geral das secções que os seus utilizadores estão a consultar. Os mapas de cliques, por outro lado, são um pouco mais específicos no que diz respeito a indicar em que elemento exato o utilizador clicou.
No entanto, existe a necessidade de algo de nível intermédio que consiga indicar-lhe como as pessoas navegam pela informação e pelos elementos da interface do utilizador dentro de uma determinada secção da sua página.
É aqui que pode tirar partido dos mapas de movimento. Como o nome sugere, este tipo de mapa de calor acompanha os movimentos do cursor do rato ao longo da sua interface.
Tal como acontece com outros mapas, as áreas da interface são destacadas através de uma variedade de cores (do azul ao vermelho), em que o azul significa pouco movimento do rato sobre essa área (e o vermelho significa muito).
Vejamos como é que isto se apresenta num artigo de blogue.
O mapa mostra-nos que uma pequena parte dos utilizadores passa o rato sobre o título e o primeiro cabeçalho do artigo. A maioria, no entanto, mantém o rato próximo da área de pesquisa, no canto superior direito.
Como os designers de produto utilizam mapas de movimento: acompanhar a atenção em determinados elementos
É bastante comum termos alguns elementos da nossa interface que não são clicáveis, mas que continuam a ser muito importantes, e queremos garantir que os nossos utilizadores os viram.
Um exemplo disso seria a nossa lista de funcionalidades na página de preços. Poderemos querer compreender a que funcionalidades os utilizadores prestaram mais atenção ao analisarem a nossa tabela de preços.
Para isso, podemos tirar partido do hábito humano de passar o rato sobre aquilo que estamos a ler/analisar naquele momento e criar um mapa de movimento do rato que nos indique quais são as funcionalidades que os utilizadores estão a consultar mais na nossa página de preços.
4. Mapas de cliques de frustração
Existem cliques normais e existem cliques de frustração.
Isto acontece quando as falhas na sua UX fazem com que os utilizadores se irritem e cliquem de forma agressiva e repetida num dos elementos da sua interface porque:
- Pensam que é algo clicável, mas não é.
- É clicável, mas o seu produto não faz nada depois de o utilizador clicar nele.
A principal razão por detrás do primeiro caso é a criação de elementos de interface que não são botões nem ligações, mas que se parecem com eles.
Relativamente ao segundo caso, poderá ter acabado por se deparar com:
- Um erro ou falha que fez com que o seu produto não executasse a ação que o botão em questão deveria executar.
- Tudo funciona corretamente, mas existe falta de feedback de UX. Assim, mesmo que o utilizador tenha executado com sucesso aquilo que pretendia com a ajuda do seu botão, não lhe deu essa indicação.
- O seu produto está a executar a ação solicitada pelo utilizador, mas é lento. Os utilizadores ficam irritados com isso ou não lhes indicou que o processamento está em curso.
Embora os mapas de cliques normais também registem os cliques de frustração (afinal, são apenas cliques), não conseguirá diferenciar os cliques de frustração dos seus cliques normais. Acabará por tirar conclusões incorretas a partir dos seus dados.
Por exemplo, se o seu botão não estiver a funcionar e as pessoas clicarem repetidamente nele por frustração, o seu mapa de cliques normal dir-lhe-á que as pessoas utilizam ativamente essa funcionalidade, quando a realidade é o oposto.
Visualmente, os mapas de cliques de frustração são iguais aos mapas de cliques normais. A única diferença é que ter muitas áreas vermelhas num mapa de cliques normal é positivo, mas é uma má notícia num mapa de cliques de frustração.
More Articles
Como os designers de produto utilizam mapas de movimento: identificar uma UX deficiente
Não existe nenhum produto com uma UX perfeita. Acabará sempre por ter elementos ou experiências terríveis (mesmo que pense que não).
Os mapas de cliques de frustração são excelentes para ajudar a identificar vários tipos destas experiências negativas, incluindo feedback de UX deficiente, design de elementos inadequado, entre outros.
Os mapas de calor são os melhores amigos dos designers de UX
Com base na minha experiência e na da minha equipa de design de produto, os mapas de calor de sites estão entre as ferramentas mais úteis para realizar testes de usabilidade e estudar o comportamento dos utilizadores.
Com a sua ajuda, pode obter informações quantitativas (incluindo a forma como utilizam o seu design em dispositivos de secretária e móveis) sobre a eficácia do seu design web.
Pode então analisar estas informações e identificar lacunas no seu design e funcionalidade que precisa de colmatar para garantir que o seu produto, website, plataforma de comércio eletrónico ou página de destino é fácil de utilizar.
Não se esqueça de subscrever a nossa newsletter para obter mais recursos e guias sobre gestão de produtos, além dos podcasts, entrevistas e outros insights mais recentes de líderes e especialistas do setor.