Hărți termice în analitica aplicațiilor: ce sunt, tipuri și principiu de funcționare

Ce este o hartă termică?

Harta termică (heatmap) — este o metodă de vizualizare a datelor în care valorile metricei sunt afișate prin culoare: de la albastru sau verde (activitate minimă) prin galben la roșu (activitate maximă). În contextul analiticii mobile, heatmap arată pe ce elemente ale interfeței utilizatorii fac clic cel mai des și care rămân neobservate.

Spre deosebire de rapoartele numerice, harta termică oferă o înțelegere vizuală imediată a modelelor de comportament. Potrivit NN Group (2024), heatmap reduce timpul de analiză a comportamentului utilizatorilor cu 60% în comparație cu datele tabelare. Acest lucru o face un instrument indispensabil pentru cercetătorii UX și designerii de produs.

Tipuri de hărți termice în analitică

Click Heatmap (harta clicurilor)

Click Heatmap — cel mai răspândit tip, care afișează punctele de atingere și clic pe ecran. Cu cât culoarea este mai caldă, cu atât mai multe interacțiuni în această zonă. Este utilizat pentru verificarea ipotezelor: dacă butonul „Cumpără” se află în zona rece, acesta trebuie mutat mai sus sau designul său modificat. Click Heatmap relevă, de asemenea, clicurile false — atunci când utilizatorii fac clic pe elemente neclicabile, așteptând o reacție.

Scroll Heatmap (harta derulării)

Scroll Heatmap arată ce procent de utilizatori a derulat până la fiecare porțiune a ecranului sau paginii. Partea superioară — 100%, mai jos — scădere. Dacă la 50% din înălțimea ecranului rămân mai puțin de 30% dintre utilizatori, conținutul critic trebuie mutat mai sus. Potrivit Crazy Egg (2024), 65% dintre utilizatori nu derulează sub primul ecran în aplicațiile mobile cu formulare lungi.

Move Heatmap (harta mișcării)

Move Heatmap — urmărește traiectoria de mișcare a cursorului mouse-ului (pe desktop). Cercetările Nielsen Norman Group arată o corelație ridicată (0.85–0.90) între mișcarea cursorului și direcția privirii utilizatorului. În aplicațiile mobile, echivalentul sunt hărțile de atingere, care arată nu doar clicurile, ci și atingerile lungi și swipe-urile.

Cum funcționează hărțile termice

Principiul de funcționare al hărții termice se bazează pe colectarea coordonatelor fiecărei interacțiuni a utilizatorului cu ecranul. SDK-ul platformei analitice (Hotjar, Smartlook, UXCam) înregistrează coordonatele X și Y ale fiecărui clic sau atingeri împreună cu rezoluția ecranului și tipul dispozitivului. Aceste date sunt agregate și suprapuse pe o captură de ecran sub formă de suprapunere.

Afișarea culorilor utilizează un gradient: de la albastru (0–5% din numărul maxim de interacțiuni) prin verde și galben la roșu (95–100%). Fiecare punct reprezintă una sau mai multe interacțiuni. Platformele moderne arată, de asemenea, numerele absolute ale clicurilor la trecerea cu mouse-ul peste o zonă.

Pentru date fiabile sunt necesare minimum 100–200 de sesiuni pe o pagină sau ecran. Potrivit Hotjar (2025), 500 de sesiuni oferă o eroare mai mică de 5% și sunt considerate statistic semnificative pentru luarea deciziilor de design.

Cum să utilizați datele hărților termice

Datele hărților termice se aplică în trei scenarii: optimizarea conversiei, îmbunătățirea utilizabilității și validarea deciziilor de design. În primul caz, heatmap arată dacă utilizatorii fac clic pe butonul CTA — dacă nu, butonul este mutat mai sus sau i se schimbă culoarea. În al doilea — sunt identificate elementele pe care utilizatorii le confundă cu cele interactive.

În scenariul de validare, comparați hărțile termice înainte și după reproiectarea ecranului. Dacă zona caldă s-a mutat pe elementul țintă (de exemplu, butonul „Adaugă în coș”), reproiectarea este reușită. Potrivit VWO (2024), 70% dintre testele A/B bazate pe datele heatmap arată o îmbunătățire semnificativă statistic a conversiei.

Nu vă bazați exclusiv pe hărțile termice — combinați-le cu înregistrări ale sesiunilor și analitică cantitativă. Heatmap arată „unde”, dar nu răspunde la întrebarea „de ce” — pentru aceasta este necesară o analiză calitativă a comportamentului.

Hărți termice pentru aplicații mobile și desktop

Hărțile termice mobile diferă de cele desktop din mai multe puncte de vedere. Pe dispozitivele mobile nu există cursor, prin urmare Move Heatmap este înlocuit cu Touch Heatmap — o hartă a atingerilor care înregistrează suplimentar forța de apăsare (3D Touch) și durata. Scroll Heatmap pe dispozitivele mobile este critică din cauza dimensiunii limitate a ecranului: conținutul „dedesubtul pliului” (below the fold) poate să nu fie văzut de 70% dintre utilizatori.

Hărțile termice desktop utilizează mișcarea cursorului ca proxy pentru atenție — corelația dintre poziția cursorului și focalizarea privirii ajunge la 0.85 conform datelor Nielsen Norman Group. Pe dispozitivele mobile o astfel de corelație nu există, prin urmare pentru analiza atenției se utilizează hărți de fixare a privirii (eye-tracking) sau ale atingerilor lungi. Potrivit UXCam (2024), heatmap-urile mobile necesită cu 40% mai multe sesiuni pentru semnificație statistică din cauza variabilității dimensiunilor ecranelor.

La configurarea hărților termice pentru o aplicație cross-platform, creați heatmap-uri separate pentru iOS și Android — diferența de navigare (gesturi vs butoane) poate modifica radical distribuția clicurilor. Filtrați, de asemenea, după versiunea sistemului de operare: elementele de interfață pe Android 12+ cu Material You pot arăta și fi amplasate diferit față de Android 11.

Exemplu de implementare a unei hărți termice

Pentru urmărirea clicurilor într-o aplicație mobilă pe Android, utilizați codul Kotlin de mai jos. Acesta interceptează coordonatele atingerilor și le trimite în sistemul analitic pentru construirea hărții termice.

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

După colectarea datelor, construiți o hartă termică într-un instrument BI sau utilizați o platformă gata făcută precum UXCam pentru vizualizare automată.

Compararea platformelor pentru hărți termice

Platformele pentru hărți termice diferă prin funcționalitate, preț și profunzimea integrării cu SDK-urile mobile. Hotjar — cel mai popular instrument pentru hărți termice web, cu o interfață simplă și un plan gratuit de până la 35 de sesiuni pe zi. Cu toate acestea, Hotjar nu suportă aplicațiile mobile — doar versiunile web și PWA. Pentru aplicații mobile, utilizați Smartlook sau UXCam cu SDK-uri native.

UXCam — lider în hărți termice mobile: suportă Android și iOS, filtrarea automată după clasa dispozitivului, modul de suprapunere pentru testele A/B și detectarea anomaliilor ML. Smartlook oferă un număr nelimitat de înregistrări în planul Growth și suportă atât hărți termice mobile, cât și web într-un singur proiect. Microsoft Clarity — o alternativă gratuită pentru proiecte web cu trafic nelimitat, dar fără suport pentru SDK-uri mobile.

La alegerea platformei, luați în considerare frecvența actualizării datelor, profunzimea filtrării și posibilitatea exportului de coordonate brute ale clicurilor pentru analiză personalizată. Potrivit G2 Reviews (2025), UXCam primește cele mai mari evaluări (4.6/5) printre soluțiile mobile de heatmap, iar Hotjar — printre soluțiile web (4.4/5).

Greșeli tipice la analiza hărților termice

Prima greșeală — analiza hărții termice fără filtrarea după dispozitiv. Rezoluția ecranului influențează puternic amplasarea elementelor: ceea ce pe iPhone 15 Pro se află în partea de sus, pe un Android ieftin poate fi la mijloc. Filtrați întotdeauna heatmap-ul după modelul dispozitivului sau dimensiunea ecranului.

A doua greșeală — confuzia între numărul absolut și relativ de clicuri. Zona roșie poate fi caldă nu din cauza conversiei ridicate, ci pentru că elementul ocupă 50% din ecran. Utilizați hărți termice normalizate, unde culoarea arată raportul procentual față de dimensiunea elementului.

A treia greșeală — ignorarea timpului petrecut pe ecran. Dacă utilizatorii petrec puțin timp pe ecran, harta termică va fi „rece” nu din cauza unui design prost, ci a interesului scăzut. Analizați heatmap-ul împreună cu metricile de implicare — Time on Screen și Session Duration.