Теплові карти в аналітиці додатків: що це таке, типи та принцип роботи

Що таке теплова карта?

Теплова карта — це метод візуалізації даних, у якому значення метрики відображаються кольором: від синього або зеленого (мінімальна активність) через жовтий до червоного (максимальна активність). У контексті мобільної аналітики 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.