Hőtérképek az alkalmazás-analitikában: mi ez, típusok és működési elv

Mi az a hőtérkép?

Hőtérkép (heatmap) — egy adatvizualizációs módszer, amelyben a metrika értékei színnel jelennek meg: kéktől vagy zöldtől (minimális aktivitás) sárgán keresztül pirosig (maximális aktivitás). A mobil analitika kontextusában a heatmap megmutatja, hogy a felhasználók a felület mely elemeire kattintanak a leggyakrabban, és melyek maradnak észrevétlenek.

Ellentétben a számszerű jelentésekkel, a hőtérkép azonnali vizuális megértést nyújt a viselkedési mintákról. A NN Group (2024) adatai szerint a heatmap 60%-kal csökkenti a felhasználói viselkedés elemzésének idejét a táblázatos adatokhoz képest. Ez nélkülözhetetlen eszközzé teszi az UX-kutatók és terméktervezők számára.

Hőtérképek típusai az analitikában

Click Heatmap (kattintási térkép)

Click Heatmap — a leggyakoribb típus, amely az érintések és kattintások pontjait jeleníti meg a képernyőn. Minél melegebb a szín, annál több interakció van abban a zónában. Hipotézisek ellenőrzésére használják: ha a „Vásárlás” gomb a hideg zónában van, magasabbra kell helyezni vagy megváltoztatni a dizájnját. A Click Heatmap a hamis kattintásokat is feltárja — amikor a felhasználók nem kattintható elemekre kattintanak, reakciót várva.

Scroll Heatmap (görgetési térkép)

Scroll Heatmap megmutatja, hogy a felhasználók hány százaléka görgetett a képernyő vagy oldal egyes részeihez. Felső rész — 100%, lejjebb — csökkenés. Ha a képernyő magasságának 50%-ánál kevesebb mint 30% felhasználó marad, a kritikus tartalmat magasabbra kell helyezni. A Crazy Egg (2024) adatai szerint a mobilalkalmazásokban hosszú űrlapokkal a felhasználók 65%-a nem görget az első képernyő alá.

Move Heatmap (mozgási térkép)

Move Heatmap — az egérkurzor mozgásának pályáját követi (asztali számítógépen). A Nielsen Norman Group kutatásai magas korrelációt (0.85–0.90) mutatnak a kurzor mozgása és a felhasználó tekintetének iránya között. Mobilalkalmazásokban ennek megfelelője az érintési térkép, amely nemcsak a kattintásokat, hanem a hosszú lenyomásokat és az ujjmozdulatokat is mutatja.

Hogyan működnek a hőtérképek

Működési elv — a felhasználó képernyővel való minden interakciójának koordinátáinak gyűjtésén alapul. Az analitikai platform SDK-ja (Hotjar, Smartlook, UXCam) rögzíti minden kattintás vagy érintés X és Y koordinátáját a képernyő felbontásával és az eszköz típusával együtt. Ezek az adatok összesítésre kerülnek, és ráhelyezés formájában egy képernyőképre kerülnek.

A színmegjelenítés gradienst használ: kéktől (az interakciók maximális számának 0–5%-a) zöldön és sárgán keresztül pirosig (95–100%). Minden pont egy vagy több interakciót képvisel. A modern platformok a zónára mutatva a kattintások abszolút számát is mutatják.

A megbízható adatokhoz oldalanként vagy képernyőnként minimum 100–200 munkamenet szükséges. A Hotjar (2025) adatai szerint 500 munkamenet 5%-nál kisebb hibát eredményez, és statisztikailag szignifikánsnak tekinthető a tervezési döntések meghozatalához.

Hogyan használjuk a hőtérképek adatait

A hőtérképek adatait három forgatókönyvben alkalmazzák: konverzióoptimalizálás, használhatóság javítása és tervezési döntések érvényesítése. Az első esetben a heatmap megmutatja, hogy a felhasználók rákattintanak-e a CTA-gombra — ha nem, a gombot magasabbra helyezik vagy színt váltanak. A másodikban — azonosításra kerülnek azok az elemek, amelyeket a felhasználók tévesen interaktívnak hisznek.

Az érvényesítési forgatókönyvben hasonlítsa össze a hőtérképeket a képernyő újratervezése előtt és után. Ha a forró zóna a cél elemre (pl. a „Kosárba” gombra) került, az újratervezés sikeres. A VWO (2024) adatai szerint a heatmap-adatokon alapuló A/B tesztek 70%-a statisztikailag szignifikáns konverziójavulást mutat.

Ne hagyatkozzon kizárólag a hőtérképekre — kombinálja őket munkamenet-felvételekkel és kvantitatív analitikával. A heatmap megmutatja a „hol”-t, de nem válaszol a „miért” kérdésre — ehhez kvalitatív viselkedéselemzés szükséges.

Hőtérképek mobil és asztali alkalmazásokhoz

Mobil hőtérképek több szempontból különböznek az asztaliaktól. A mobileszközökön nincs kurzor, ezért a Move Heatmap-et felváltja a Touch Heatmap — egy érintési térkép, amely emellett rögzíti a nyomás erősségét (3D Touch) és időtartamát. A Scroll Heatmap a mobileszközökön kritikus a korlátozott képernyőméret miatt: a “hajtás alatti” (below the fold) tartalmat a felhasználók 70%-a nem látja.

Az asztali hőtérképek a kurzor mozgását használják a figyelem proxyjaként — a kurzor pozíciója és a tekintet fókusza közötti korreláció eléri a 0.85-öt a Nielsen Norman Group adatai szerint. Mobileszközökön ilyen korreláció nem létezik, ezért a figyelem elemzéséhez tekintetrögzítési (eye-tracking) vagy hosszú lenyomási térképeket használnak. A UXCam (2024) adatai szerint a mobil heatmap-ek 40%-kal több munkamenetet igényelnek a statisztikai szignifikanciához a képernyőméretek változékonysága miatt.

A többplatformos alkalmazáshoz készült hőtérképek beállításakor hozzon létre külön heatmap-eket iOS és Android rendszerre — a navigációs különbség (gesztusok vs gombok) gyökeresen megváltoztathatja a kattintások eloszlását. Szűrjön továbbá operációsrendszer-verzió szerint: az Android 12+ Material You felületelemek másképp nézhetnek ki és helyezkedhetnek el, mint az Android 11 esetében.

Példa hőtérkép implementációjára

A kattintások követéséhez Android mobilalkalmazásban használja az alábbi Kotlin-kódot. Az elfogja az érintések koordinátáit, és elküldi az analitikai rendszerbe a hőtérkép felépítéséhez.

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

Az adatok összegyűjtése után építsen hőtérképet egy BI-eszközben, vagy használjon kész platformot, például UXCam-ot az automatikus vizualizációhoz.

Hőtérkép platformok összehasonlítása

A hőtérkép platformok funkcionalitásban, árban és a mobil SDK-kkal való integráció mélységében különböznek. A Hotjar — a legnépszerűbb webes hőtérkép-eszköz egyszerű felülettel és ingyenes tarifával napi 35 munkamenetig. A Hotjar azonban nem támogatja a mobilalkalmazásokat — csak webes verziókat és PWA-t. Mobilalkalmazásokhoz használja a Smartlook-ot vagy az UXCam-ot natív SDK-kkal.

UXCam — vezető a mobil hőtérképekben: támogatja az Androidot és iOS-t, automatikus szűrést eszközosztály szerint, overlay módot A/B tesztekhez és ML-anomáliadetektálást. A Smartlook korlátlan számú felvételt kínál a Growth tarifában, és egy projektben támogatja mind a mobil, mind a webes hőtérképeket. A Microsoft Clarity — ingyenes alternatíva webes projektekhez korlátlan forgalommal, de mobil SDK támogatás nélkül.

A platform kiválasztásakor vegye figyelembe az adatok frissítési gyakoriságát, a szűrés mélységét és a nyers kattintási koordináták exportálásának lehetőségét egyéni analitikához. A G2 Reviews (2025) adatai szerint az UXCam kapja a legmagasabb értékelést (4.6/5) a mobil heatmap-megoldások között, a Hotjar pedig a webes megoldások között (4.4/5).

Tipikus hibák a hőtérképek elemzésénél

Első hiba — a hőtérkép elemzése eszköz szerinti szűrés nélkül. A képernyő felbontása erősen befolyásolja az elemek elhelyezkedését: ami iPhone 15 Pro-n felül van, olcsó Androidon lehet középen. Mindig szűrje a heatmap-et eszközmodell vagy képernyőméret szerint.

Második hiba — a kattintások abszolút és relatív számának összekeverése. A piros zóna lehet forró nem a magas konverzió miatt, hanem azért, mert az elem a képernyő 50%-át foglalja el. Használjon normalizált hőtérképeket, ahol a szín az elem méretéhez viszonyított százalékos arányt mutatja.

Harmadik hiba — a képernyőn töltött idő figyelmen kívül hagyása. Ha a felhasználók kevés időt töltenek a képernyőn, a hőtérkép „hideg” lesz, nem a rossz dizájn, hanem az alacsony érdeklődés miatt. Elemezze a heatmap-et a bevonódási mutatókkal — Time on Screen és Session Duration — együtt.