Teplotní mapy v analytice aplikací: co to je, typy a princip fungování

Co je teplotní mapa?

Teplotní mapa (heatmap) — metoda vizualizace dat, ve které jsou hodnoty metriky zobrazeny barvou: od modré nebo zelené (minimální aktivita) přes žlutou po červenou (maximální aktivita). V kontextu mobilní analytiky heatmap ukazuje, na které prvky rozhraní uživatelé klikají nejčastěji a které zůstávají nepovšimnuty.

Na rozdíl od číselných reportů poskytuje teplotní mapa okamžité vizuální pochopení vzorců chování. Podle NN Group (2024) heatmap zkracuje dobu analýzy chování uživatelů o 60% ve srovnání s tabulkovými daty. To z ní činí nepostradatelný nástroj pro UX výzkumníky a produktové designéry.

Typy teplotních map v analytice

Click Heatmap (mapa kliknutí)

Click Heatmap — nejrozšířenější typ, zobrazující body dotyků a kliknutí na obrazovce. Čím teplejší barva, tím více interakcí v dané zóně. Používá se k ověřování hypotéz: pokud se tlačítko „Koupit“ nachází ve studené zóně, je třeba ho posunout výše nebo změnit jeho design. Click Heatmap také odhaluje falešná kliknutí — když uživatelé klikají na neklikatelné prvky a očekávají reakci.

Scroll Heatmap (mapa scrollování)

Scroll Heatmap ukazuje, jaké procento uživatelů doscrollovalo k jednotlivým částem obrazovky nebo stránky. Horní část — 100%, níže — pokles. Pokud na 50% výšky obrazovky zůstává méně než 30% uživatelů, kriticky důležitý obsah je třeba posunout výše. Podle Crazy Egg (2024) 65% uživatelů nescrolluje pod první obrazovku v mobilních aplikacích s dlouhými formuláři.

Move Heatmap (mapa pohybu)

Move Heatmap — sleduje trajektorii pohybu kurzoru myši (na desktopu). Výzkumy Nielsen Norman Group ukazují vysokou korelaci (0.85–0.90) mezi pohybem kurzoru a směrem pohledu uživatele. V mobilních aplikacích jsou ekvivalentem dotykové mapy, které ukazují nejen kliknutí, ale také dlouhá stisknutí a swipování.

Jak fungují teplotní mapy

Princip fungování teplotní mapy je založen na sběru souřadnic každé interakce uživatele s obrazovkou. SDK analytické platformy (Hotjar, Smartlook, UXCam) zaznamenává X a Y souřadnice každého kliknutí nebo dotyku spolu s rozlišením obrazovky a typem zařízení. Tato data jsou agregována a překryta na snímek obrazovky ve formě překryvu.

Barevné zobrazení používá gradient: od modré (0–5% maximálního počtu interakcí) přes zelenou a žlutou po červenou (95–100%). Každý bod představuje jednu nebo více interakcí. Moderní platformy také ukazují absolutní počty kliknutí při najetí na zónu.

Pro spolehlivá data je potřeba minimálně 100–200 relací na jednu stránku nebo obrazovku. Podle Hotjar (2025) poskytuje 500 relací chybu menší než 5% a je považováno za statisticky významné pro rozhodování o designu.

Jak používat data teplotních map

Data teplotních map se uplatňují ve třech scénářích: optimalizace konverze, zlepšení použitelnosti a validace designových rozhodnutí. V prvním případě heatmap ukazuje, zda uživatelé klikají na tlačítko CTA — pokud ne, tlačítko se posune výše nebo změní barvu. Ve druhém — jsou identifikovány prvky, které uživatelé mylně považují za interaktivní.

Ve scénáři validace porovnejte teplotní mapy před a po redesignu obrazovky. Pokud se horká zóna přesunula na cílový prvek (např. tlačítko „Přidat do košíku“), redesign je úspěšný. Podle VWO (2024) 70% A/B testů založených na datech z heatmap vykazuje statisticky významné zlepšení konverze.

Nespoléhejte pouze na teplotní mapy — kombinujte je s nahrávkami relací a kvantitativní analytikou. Heatmap ukazuje „kde“, ale neodpovídá na otázku „proč“ — k tomu je potřeba kvalitativní analýza chování.

Teplotní mapy pro mobilní a desktopové aplikace

Mobilní teplotní mapy se liší od desktopových v několika parametrech. Na mobilních zařízeních není kurzor, proto je Move Heatmap nahrazen Touch Heatmap — dotykovou mapou, která navíc zaznamenává sílu stisku (3D Touch) a dobu trvání. Scroll Heatmap je na mobilních zařízeních kriticky důležitá kvůli omezené velikosti obrazovky: obsah „pod záhybem“ (below the fold) může nevidět 70% uživatelů.

Desktopové teplotní mapy využívají pohyb kurzoru jako proxy pro pozornost — korelace mezi polohou kurzoru a ohniskem pohledu dosahuje 0.85 podle Nielsen Norman Group. Na mobilních zařízeních taková korelace neexistuje, proto se pro analýzu pozornosti používají mapy fixace pohledu (eye-tracking) nebo dlouhých stisknutí. Podle UXCam (2024) vyžadují mobilní heatmapy o 40% více relací pro statistickou významnost kvůli variabilitě velikostí obrazovek.

Při nastavování teplotních map pro multiplatformní aplikaci vytvářejte samostatné heatmapy pro iOS a Android — rozdíl v navigaci (gesta vs tlačítka) může radikálně změnit rozložení kliknutí. Filtrujte také podle verze OS: prvky rozhraní na Android 12+ s Material You mohou vypadat a být umístěny jinak než na Android 11.

Příklad implementace teplotní mapy

Pro sledování kliknutí v mobilní aplikaci na Androidu použijte níže uvedený kód v Kotlin. Ten zachycuje souřadnice dotyků a odesílá je do analytického systému pro vytvoření teplotní mapy.

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

Po shromáždění dat vytvořte teplotní mapu v BI nástroji nebo použijte hotovou platformu jako UXCam pro automatickou vizualizaci.

Srovnání platforem pro teplotní mapy

Platformy pro teplotní mapy se liší funkčností, cenou a hloubkou integrace s mobilními SDK. Hotjar — nejoblíbenější nástroj pro webové teplotní mapy s jednoduchým rozhraním a bezplatným tarifem až 35 relací denně. Hotjar však nepodporuje mobilní aplikace — pouze webové verze a PWA. Pro mobilní aplikace používejte Smartlook nebo UXCam s nativními SDK.

UXCam — lídr v mobilních teplotních mapách: podporuje Android a iOS, automatické filtrování podle třídy zařízení, režim překryvu pro A/B testy a ML detekci anomálií. Smartlook nabízí neomezený počet nahrávek v tarifu Growth a podporuje jak mobilní, tak webové teplotní mapy v jednom projektu. Microsoft Clarity — bezplatná alternativa pro webové projekty s neomezeným provozem, ale bez podpory mobilních SDK.

Při výběru platformy zohledněte frekvenci aktualizace dat, hloubku filtrování a možnost exportu surových souřadnic kliknutí pro vlastní analytiku. Podle G2 Reviews (2025) získává UXCam nejvyšší hodnocení (4.6/5) mezi mobilními heatmap řešeními a Hotjar — mezi webovými řešeními (4.4/5).

Typické chyby při analýze teplotních map

První chyba — analýza teplotní mapy bez filtrování podle zařízení. Rozlišení obrazovky silně ovlivňuje umístění prvků: to, co je na iPhone 15 Pro nahoře, může být na levném Androidu uprostřed. Vždy filtrujte heatmap podle modelu zařízení nebo velikosti obrazovky.

Druhá chyba — záměna absolutního a relativního počtu kliknutí. Červená zóna může být horká ne kvůli vysoké konverzi, ale proto, že prvek zabírá 50% obrazovky. Používejte normalizované teplotní mapy, kde barva ukazuje procentuální poměr k velikosti prvku.

Třetí chyba — ignorování času stráveného na obrazovce. Pokud uživatelé tráví na obrazovce málo času, teplotní mapa bude „studená“ ne kvůli špatnému designu, ale kvůli nízkému zájmu. Analyzujte heatmap společně s metrikami zapojení — Time on Screen a Session Duration.