Тепловые карты в аналитике приложений: что это такое, типы и принцип работы

Что такое тепловая карта?

Тепловая карта (heatmap) — это метод визуализации данных, в котором значения метрики отображаются цветом: от синего или зелёного (минимальная активность) через жёлтый к красному (максимальная активность). В контексте мобильной аналитики heatmap показывает, на какие элементы интерфейса пользователи нажимают чаще всего, а какие остаются незамеченными.

В отличие от числовых отчётов, тепловая карта даёт мгновенное визуальное понимание паттернов поведения. По данным NN Group (2024), heatmap сокращает время анализа пользовательского поведения на 60 % по сравнению с табличными данными. Это делает её незаменимым инструментом для UX-исследователей и продуктовых дизайнеров.

Типы тепловых карт в аналитике

Click Heatmap (карта кликов)

Click Heatmap — самый распространённый тип, отображающий точки касаний и кликов на экране. Чем горячее цвет, тем больше взаимодействий в этой зоне. Используется для проверки гипотез: если кнопка «Купить» находится в холодной зоне, её нужно переместить выше или изменить дизайн. Click Heatmap также выявляет ложные клики — когда пользователи нажимают на некликабельные элементы, ожидая реакции.

Scroll Heatmap (карта прокрутки)

Scroll Heatmap показывает, какой процент пользователей доскроллил до каждого участка экрана или страницы. Верхняя часть — 100 %, ниже — уменьшение. Если на 50 % высоты экрана остаётся менее 30 % пользователей, критически важный контент нужно поднять выше. По данным Crazy Egg (2024), 65 % пользователей не доскролливают ниже первого экрана в мобильных приложениях с длинными формами.

Move Heatmap (карта движения)

Move Heatmap — отслеживает траекторию движения курсора мыши (на десктопе). Исследования Nielsen Norman Group показывают высокую корреляцию (0.85–0.90) между движением курсора и направлением взгляда пользователя. В мобильных приложениях аналогом служат карты касаний, показывающие не только клики, но и длительные нажатия и свайпы.

Как работают тепловые карты

Принцип работы тепловой карты основан на сборе координат каждого взаимодействия пользователя с экраном. SDK аналитической платформы (Hotjar, Smartlook, UXCam) записывает X и Y координаты каждого клика или касания вместе с разрешением экрана и типом устройства. Эти данные агрегируются и накладываются на скриншот экрана в виде наложения.

Цветовое отображение использует градиент: от синего (0–5 % от максимального числа взаимодействий) через зелёный и жёлтый до красного (95–100 %). Каждая точка — одно или несколько взаимодействий. Современные платформы также показывают абсолютные числа кликов при наведении на зону.

Для достоверных данных требуется минимум 100–200 сессий на одну страницу или экран. По данным Hotjar (2025), 500 сессий дают погрешность менее 5 % и считаются статистически значимыми для принятия дизайн-решений.

Как использовать данные тепловых карт

Данные тепловых карт применяются в трёх сценариях: оптимизация конверсии, улучшение юзабилити и валидация дизайн-решений. В первом случае heatmap показывает, нажимают ли пользователи на CTA-кнопку — если нет, кнопку перемещают выше или меняют цвет. Во втором — выявляются элементы, которые пользователи ошибочно принимают за интерактивные.

В сценарии валидации сравните тепловые карты до и после редизайна экрана. Если горячая зона сместилась на целевой элемент (например, кнопку «Добавить в корзину»), редизайн успешен. По данным VWO (2024), 70 % A/B-тестов, основанных на данных heatmap, показывают статистически значимое улучшение конверсии.

Не полагайтесь только на тепловые карты — комбинируйте их с записью сессий и количественной аналитикой. Heatmap показывает «где», но не отвечает на вопрос «почему» — для этого нужен качественный анализ поведения.

Тепловые карты для мобильных и десктоп-приложений

Мобильные тепловые карты отличаются от десктопных по нескольким параметрам. На мобильных устройствах отсутствует курсор, поэтому Move Heatmap заменяется Touch Heatmap — картой касаний, где дополнительно фиксируется сила нажатия (3D Touch) и длительность. Scroll Heatmap на мобильных устройствах критически важна из-за ограниченного размера экрана: контент «ниже сгиба» (below the fold) может не увидеть 70 % пользователей.

Десктопные тепловые карты используют движение курсора как прокси для внимания — корреляция между положением курсора и фокусом взгляда достигает 0.85 по данным Nielsen Norman Group. На мобильных устройствах такой корреляции нет, поэтому для анализа внимания используются карты фиксации взгляда (eye-tracking) или длительных нажатий. По данным UXCam (2024), мобильные heatmap требуют на 40 % больше сессий для статистической значимости из-за вариативности размеров экранов.

При настройке тепловых карт для кроссплатформенного приложения создавайте отдельные heatmap для iOS и Android — разница в навигации (жесты vs кнопки) может кардинально менять распределение кликов. Фильтруйте также по версии ОС: элементы интерфейса на Android 12+ с Material You могут выглядеть и располагаться иначе, чем на Android 11.

Пример реализации тепловой карты

Для отслеживания кликов в мобильном приложении на Android используйте код Kotlin ниже. Он перехватывает координаты касаний и отправляет их в аналитическую систему для построения тепловой карты.

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

После сбора данных постройте тепловую карту в BI-инструменте или используйте готовую платформу вроде UXCam для автоматической визуализации.

Сравнение платформ для тепловых карт

Платформы для тепловых карт различаются по функциональности, цене и глубине интеграции с мобильными SDK. Hotjar — самый популярный инструмент для веб-тепловых карт с простым интерфейсом и бесплатным тарифом до 35 сессий в день. Однако Hotjar не поддерживает мобильные приложения — только веб-версии и PWA. Для мобильных приложений используйте Smartlook или UXCam с нативными SDK.

UXCam — лидер в мобильных тепловых картах: поддерживает Android и iOS, автоматическую фильтрацию по device class, overlay-режим для A/B-тестов и ML-детекцию аномалий. Smartlook предлагает неограниченное количество записей на тарифе Growth и поддерживает как мобильные, так и веб-тепловые карты в одном проекте. Microsoft Clarity — бесплатная альтернатива для веб-проектов с неограниченным трафиком, но без поддержки мобильных SDK.

При выборе платформы учитывайте частоту обновления данных, глубину фильтрации и возможность экспорта сырых координат кликов для кастомной аналитики. По данным G2 Reviews (2025), UXCam получает наивысшие оценки (4.6/5) среди мобильных heatmap-решений, а Hotjar — среди веб-решений (4.4/5).

Типичные ошибки при анализе тепловых карт

Первая ошибка — анализ тепловой карты без фильтрации по устройству. Разрешение экрана сильно влияет на расположение элементов: то, что на iPhone 15 Pro находится вверху, на бюджетном Android может быть в середине. Всегда фильтруйте heatmap по модели устройства или размеру экрана.

Вторая ошибка — путаница между абсолютным и относительным количеством кликов. Красная зона может быть горячей не из-за высокой конверсии, а из-за того, что элемент занимает 50 % экрана. Используйте нормированные тепловые карты, где цвет показывает процентное соотношение к размеру элемента.

Третья ошибка — игнорирование времени на экране. Если пользователи проводят на экране мало времени, тепловая карта будет «холодной» не из-за плохого дизайна, а из-за низкого интереса. Анализируйте heatmap вместе с метриками вовлечённости — Time on Screen и Session Duration.