Heatmaps in App Analytics: What They Are, Types, and How They Work

What Is a Heatmap?

A heatmap is a method of data visualization in which metric values are displayed in color: from blue or green (minimal activity) through yellow to red (maximum activity). In the context of mobile analytics, a heatmap shows which interface elements users click on most often and which ones go unnoticed.

Unlike numerical reports, a heatmap provides instant visual understanding of behavior patterns. According to NN Group (2024), heatmaps reduce the time needed to analyze user behavior by 60% compared to tabular data. This makes them an indispensable tool for UX researchers and product designers.

Types of Heatmaps in Analytics

Click Heatmap

Click Heatmap is the most common type, displaying touch points and clicks on a screen. The hotter the color, the more interactions in that area. It is used to test hypotheses: if a “Buy” button is in a cool zone, it needs to be moved higher or its design changed. Click Heatmaps also reveal false clicks — when users click on non-clickable elements expecting a response.

Scroll Heatmap

Scroll Heatmap shows what percentage of users scrolled to each section of a screen or page. The top part is 100%, decreasing further down. If at 50% of the screen height fewer than 30% of users remain, critical content needs to be moved higher. According to Crazy Egg (2024), 65% of users do not scroll below the first screen in mobile applications with long forms.

Move Heatmap

Move Heatmap tracks the trajectory of mouse cursor movement (on desktop). Nielsen Norman Group research shows a high correlation (0.85–0.90) between cursor movement and user gaze direction. In mobile applications, the equivalent is touch maps, which show not only clicks but also long presses and swipes.

How Heatmaps Work

The working principle of a heatmap is based on collecting the coordinates of each user interaction with the screen. The SDK of an analytics platform (Hotjar, Smartlook, UXCam) records the X and Y coordinates of each click or tap along with the screen resolution and device type. This data is aggregated and overlaid on a screenshot of the screen as an overlay.

Color rendering uses a gradient: from blue (0–5% of the maximum number of interactions) through green and yellow to red (95–100%). Each point represents one or more interactions. Modern platforms also show absolute numbers of clicks when hovering over an area.

For reliable data, a minimum of 100–200 sessions per page or screen is required. According to Hotjar (2025), 500 sessions provide a margin of error of less than 5% and are considered statistically significant for design decision-making.

How to Use Heatmap Data

Heatmap data is used in three scenarios: conversion optimization, usability improvement, and design decision validation. In the first case, a heatmap shows whether users are clicking on the CTA button — if not, the button is moved higher or its color is changed. In the second, elements that users mistakenly perceive as interactive are identified.

In the validation scenario, compare heatmaps before and after a screen redesign. If the hot zone has shifted to the target element (for example, the “Add to Cart” button), the redesign is successful. According to VWO (2024), 70% of A/B tests based on heatmap data show a statistically significant improvement in conversion.

Don’t rely solely on heatmaps — combine them with session recordings and quantitative analytics. A heatmap shows “where” but does not answer the question “why” — that requires qualitative behavior analysis.

Heatmaps for Mobile and Desktop Applications

Mobile heatmaps differ from desktop ones in several parameters. On mobile devices, there is no cursor, so Move Heatmaps are replaced by Touch Heatmaps — touch maps that additionally record press force (3D Touch) and duration. Scroll Heatmaps on mobile devices are critically important due to the limited screen size: content “below the fold” may not be seen by 70% of users.

Desktop heatmaps use cursor movement as a proxy for attention — the correlation between cursor position and gaze focus reaches 0.85 according to Nielsen Norman Group. On mobile devices, no such correlation exists, so attention analysis uses eye-tracking maps or long-press maps. According to UXCam (2024), mobile heatmaps require 40% more sessions for statistical significance due to the variability of screen sizes.

When setting up heatmaps for a cross-platform application, create separate heatmaps for iOS and Android — differences in navigation (gestures vs. buttons) can radically change click distribution. Also filter by OS version: interface elements on Android 12+ with Material You may look and be positioned differently than on Android 11.

Heatmap Implementation Example

To track clicks in a mobile application on Android, use the Kotlin code below. It intercepts touch coordinates and sends them to the analytics system for building a heatmap.

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
        }
    }
}

After collecting the data, build a heatmap in a BI tool or use a ready-made platform like UXCam for automatic visualization.

Heatmap Platform Comparison

Heatmap platforms differ in functionality, price, and depth of integration with mobile SDKs. Hotjar is the most popular tool for web heatmaps with a simple interface and a free plan of up to 35 sessions per day. However, Hotjar does not support mobile applications — only web versions and PWAs. For mobile applications, use Smartlook or UXCam with native SDKs.

UXCam is the leader in mobile heatmaps: it supports Android and iOS, automatic filtering by device class, overlay mode for A/B testing, and ML anomaly detection. Smartlook offers unlimited recordings on the Growth plan and supports both mobile and web heatmaps in a single project. Microsoft Clarity is a free alternative for web projects with unlimited traffic but without mobile SDK support.

When choosing a platform, consider the frequency of data updates, filtering depth, and the ability to export raw click coordinates for custom analytics. According to G2 Reviews (2025), UXCam receives the highest ratings (4.6/5) among mobile heatmap solutions, and Hotjar among web solutions (4.4/5).

Common Heatmap Analysis Mistakes

The first mistake is analyzing a heatmap without filtering by device. Screen resolution greatly affects element placement: what is at the top on an iPhone 15 Pro may be in the middle on a budget Android device. Always filter heatmaps by device model or screen size.

The second mistake is confusing absolute and relative click counts. A red zone may be hot not because of high conversion but because the element occupies 50% of the screen. Use normalized heatmaps, where the color shows the percentage relative to the element’s size.

The third mistake is ignoring time on screen. If users spend little time on a screen, the heatmap will be “cold” not because of poor design but because of low interest. Analyze heatmaps together with engagement metrics — Time on Screen and Session Duration.