Mapas de calor na análise de aplicativos: o que são, tipos e princípio de funcionamento

O que é um mapa de calor?

Um mapa de calor é um método de visualização de dados no qual os valores das métricas são exibidos em cores: do azul ou verde (atividade mínima) passando pelo amarelo ao vermelho (atividade máxima). No contexto da análise móvel, um heatmap mostra em quais elementos da interface os usuários clicam com mais frequência e quais passam despercebidos.

Ao contrário dos relatórios numéricos, um mapa de calor fornece uma compreensão visual instantânea dos padrões de comportamento. De acordo com NN Group (2024), os heatmaps reduzem o tempo de análise do comportamento do usuário em 60 % em comparação com dados tabulares. Isso o torna uma ferramenta indispensável para pesquisadores de UX e designers de produtos.

Tipos de mapas de calor em análise

Click Heatmap (mapa de cliques)

Click Heatmap é o tipo mais comum, exibindo pontos de toque e cliques em uma tela. Quanto mais quente a cor, mais interações naquela área. É usado para testar hipóteses: se um botão “Comprar” estiver em uma zona fria, ele precisa ser movido para cima ou ter seu design alterado. O Click Heatmap também revela cliques falsos — quando os usuários clicam em elementos não clicáveis esperando uma resposta.

Scroll Heatmap (mapa de rolagem)

Scroll Heatmap mostra qual porcentagem de usuários rolou até cada seção de uma tela ou página. A parte superior é 100%, diminuindo conforme desce. Se a 50% da altura da tela restarem menos de 30% dos usuários, o conteúdo crítico precisa ser movido para cima. De acordo com a Crazy Egg (2024), 65% dos usuários não rolam abaixo da primeira tela em aplicativos móveis com formulários longos.

Move Heatmap (mapa de movimento)

Move Heatmap rastreia a trajetória do movimento do cursor do mouse (no desktop). Pesquisas do Nielsen Norman Group mostram uma alta correlação (0,85–0,90) entre o movimento do cursor e a direção do olhar do usuário. Em aplicativos móveis, o equivalente são os mapas táteis, que mostram não apenas cliques, mas também toques longos e deslizes.

Como funcionam os mapas de calor

O princípio de funcionamento de um mapa de calor é baseado na coleta das coordenadas de cada interação do usuário com a tela. O SDK da plataforma analítica (Hotjar, Smartlook, UXCam) registra as coordenadas X e Y de cada clique ou toque junto com a resolução da tela e o tipo de dispositivo. Esses dados são agregados e sobrepostos em uma captura de tela como uma sobreposição.

A representação de cores usa um gradiente: do azul (0–5% do número máximo de interações) passando pelo verde e amarelo ao vermelho (95–100%). Cada ponto representa uma ou mais interações. Plataformas modernas também mostram números absolutos de cliques ao passar o mouse sobre uma área.

Para dados confiáveis, são necessárias no mínimo 100–200 sessões por página ou tela. De acordo com a Hotjar (2025), 500 sessões fornecem uma margem de erro inferior a 5% e são consideradas estatisticamente significativas para a tomada de decisões de design.

Como usar os dados dos mapas de calor

Os dados dos mapas de calor são usados em três cenários: otimização de conversão, melhoria de usabilidade e validação de decisões de design. No primeiro caso, um heatmap mostra se os usuários estão clicando no botão CTA — se não, o botão é movido para cima ou sua cor é alterada. No segundo, são identificados elementos que os usuários confundem como interativos.

No cenário de validação, compare os mapas de calor antes e depois do redesenho de uma tela. Se a zona quente mudou para o elemento de destino (por exemplo, o botão “Adicionar ao carrinho”), o redesenho é bem-sucedido. De acordo com VWO (2024), 70% dos testes A/B baseados em dados de heatmap mostram uma melhoria estatisticamente significativa na conversão.

Não confie apenas em mapas de calor — combine-os com gravações de sessão e análises quantitativas. O heatmap mostra “onde”, mas não responde à pergunta “por que” — para isso é necessária uma análise qualitativa do comportamento.

Mapas de calor para aplicativos móveis e desktop

Os mapas de calor móveis diferem dos de desktop em vários parâmetros. Em dispositivos móveis não há cursor, então o Move Heatmap é substituído pelo Touch Heatmap — um mapa tátil que registra adicionalmente a força da pressão (3D Touch) e a duração. O Scroll Heatmap em dispositivos móveis é criticamente importante devido ao tamanho limitado da tela: o conteúdo “abaixo da dobra” (below the fold) pode não ser visto por 70% dos usuários.

Os mapas de calor de desktop usam o movimento do cursor como proxy para atenção — a correlação entre a posição do cursor e o foco do olhar atinge 0,85 de acordo com o Nielsen Norman Group. Em dispositivos móveis, não existe tal correlação, portanto, para análise de atenção, são usados mapas de rastreamento ocular (eye-tracking) ou de toques longos. De acordo com UXCam (2024), os heatmaps móveis exigem 40% mais sessões para significância estatística devido à variabilidade dos tamanhos de tela.

Ao configurar mapas de calor para um aplicativo multiplataforma, crie heatmaps separados para iOS e Android — diferenças na navegação (gestos vs botões) podem mudar radicalmente a distribuição de cliques. Filtre também pela versão do SO: elementos da interface no Android 12+ com Material You podem parecer e estar posicionados de forma diferente do que no Android 11.

Exemplo de implementação de mapa de calor

Para rastrear cliques em um aplicativo móvel no Android, use o código Kotlin abaixo. Ele intercepta as coordenadas de toque e as envia para o sistema analítico para construir um mapa de calor.

class HeatmapTracker {
    fun trackEvent(activity: Activity) {
        activity.window.decorView.setOnTouchListener { _, event ->
            if (event.action == MotionEvent.ACTION_UP) {
                val bundle = Bundle().apply {
                    putFloat("x", event.x)
                    putFloat("y", event.y)
                    putInt("screen_width", resources.displayMetrics.widthPixels)
                }
                Firebase.analytics.logEvent("touch_heatmap", bundle)
            }
            false
        }
    }
}

Após coletar os dados, construa um mapa de calor em uma ferramenta de BI ou use uma plataforma pronta como UXCam para visualização automática.

Comparação de plataformas para mapas de calor

As plataformas para mapas de calor diferem em funcionalidade, preço e profundidade de integração com SDKs móveis. Hotjar é a ferramenta mais popular para heatmaps web com uma interface simples e um plano gratuito de até 35 sessões por dia. No entanto, o Hotjar não suporta aplicativos móveis — apenas versões web e PWAs. Para aplicativos móveis, use Smartlook ou UXCam com SDKs nativos.

UXCam é líder em heatmaps móveis: suporta Android e iOS, filtragem automática por classe de dispositivo, modo de sobreposição para testes A/B e detecção de anomalias por ML. Smartlook oferece gravações ilimitadas no plano Growth e suporta heatmaps móveis e web em um único projeto. Microsoft Clarity é uma alternativa gratuita para projetos web com tráfego ilimitado, mas sem suporte para SDKs móveis.

Ao escolher uma plataforma, considere a frequência de atualização de dados, a profundidade da filtragem e a capacidade de exportar coordenadas brutas de cliques para análises personalizadas. De acordo com G2 Reviews (2025), a UXCam recebe as maiores pontuações (4,6/5) entre as soluções móveis de heatmap, e a Hotjar entre as soluções web (4,4/5).

Erros comuns na análise de mapas de calor

O primeiro erro é analisar um mapa de calor sem filtrar por dispositivo. A resolução da tela afeta muito o posicionamento dos elementos: o que está no topo em um iPhone 15 Pro pode estar no meio em um Android barato. Filtre sempre os heatmaps por modelo de dispositivo ou tamanho de tela.

O segundo erro é confundir o número absoluto e relativo de cliques. Uma zona vermelha pode estar quente não por alta conversão, mas porque o elemento ocupa 50% da tela. Use mapas de calor normalizados, onde a cor mostra a porcentagem relativa ao tamanho do elemento.

O terceiro erro é ignorar o tempo na tela. Se os usuarios passam pouco tempo em uma tela, o mapa de calor será “frio” não por causa de um design ruim, mas por baixo interesse. Analise os heatmaps junto com métricas de engajamento — Time on Screen e Session Duration.