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

Какво е топлинна карта?

Топлинна карта (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 — разликата в навигацията (жестове спрямо бутони) може коренно да промени разпределението на кликванията. Филтрирайте също според версията на ОС: елементите на интерфейса на 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 с native SDK.

UXCam — лидер в мобилните топлинни карти: поддържа Android и iOS, автоматично филтриране по клас устройство, 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.