Mga heatmap sa analytics ng app: ano ito, mga uri at prinsipyo ng paggana

Ano ang heatmap?

Heatmap (heatmap) — isang paraan ng visualization ng data kung saan ang mga halaga ng sukatan ay ipinapakita sa pamamagitan ng kulay: mula sa asul o berde (pinakamababang aktibidad) sa pamamagitan ng dilaw hanggang sa pula (pinakamataas na aktibidad). Sa konteksto ng mobile analytics, ipinapakita ng heatmap kung aling mga elemento ng interface ang madalas na ini-click ng mga user at alin ang hindi napapansin.

Hindi tulad ng mga numerikong ulat, ang heatmap ay nagbibigay ng agarang biswal na pag-unawa sa mga pattern ng pag-uugali. Ayon sa NN Group (2024), binabawasan ng heatmap ang oras ng pagsusuri ng pag-uugali ng user ng 60% kumpara sa data ng talahanayan. Ginagawa nitong isang kailangang-kailangan na tool para sa mga mananaliksik ng UX at mga taga-disenyo ng produkto.

Mga uri ng heatmap sa analytics

Click Heatmap (mapa ng click)

Click Heatmap — ang pinakakaraniwang uri, na nagpapakita ng mga punto ng pagpindot at pag-click sa screen. Kung mas mainit ang kulay, mas maraming interaksyon sa zone na iyon. Ginagamit ito para sa pagsubok ng mga hipotesis: kung ang button na “Bumili” ay nasa malamig na zone, kailangan itong ilipat nang mas mataas o baguhin ang disenyo nito. Inilalantad din ng Click Heatmap ang mga maling click — kapag nag-click ang mga user sa mga elementong hindi pwedeng i-click, umaasa ng reaksyon.

Scroll Heatmap (mapa ng scroll)

Scroll Heatmap ay nagpapakita kung anong porsyento ng mga user ang nag-scroll sa bawat bahagi ng screen o pahina. Itaas na bahagi — 100%, saibaba — pagbaba. Kung sa 50% ng taas ng screen ay wala pang 30% ng mga user ang natitira, ang kritikal na nilalaman ay kailangang ilipat nang mas mataas. Ayon sa Crazy Egg (2024), 65% ng mga user ay hindi nag-scroll sa ibaba ng unang screen sa mga mobile app na may mahabang form.

Move Heatmap (mapa ng paggalaw)

Move Heatmap — sinusubaybayan ang trajectory ng paggalaw ng cursor ng mouse (sa desktop). Ang pananaliksik ng Nielsen Norman Group ay nagpapakita ng mataas na ugnayan (0.85–0.90) sa pagitan ng paggalaw ng cursor at direksyon ng tingin ng user. Sa mga mobile app, ang katumbas ay mga touch map na nagpapakita hindi lamang ng mga click, kundi pati na rin ng mahabang pagpindot at pag-swipe.

Paano gumagana ang mga heatmap

Prinsipyo ng paggana ng heatmap ay batay sa pagkolekta ng mga coordinate ng bawat interaksyon ng user sa screen. Ang SDK ng analytics platform (Hotjar, Smartlook, UXCam) ay nagtatala ng X at Y coordinate ng bawat click o pagpindot kasama ang resolution ng screen at uri ng device. Ang data na ito ay pinagsama-sama at inilalapat sa screenshot sa anyo ng overlay.

Ang pagpapakita ng kulay ay gumagamit ng gradient: mula sa asul (0–5% ng maximum na bilang ng mga interaksyon) sa pamamagitan ng berde at dilaw hanggang sa pula (95–100%). Ang bawat punto ay kumakatawan sa isa o higit pang mga interaksyon. Ipinapakita rin ng mga modernong platform ang absolute na bilang ng mga click kapag nag-hover sa isang zone.

Para sa maaasahang data, kailangan ng hindi bababa sa 100–200 session bawat pahina o screen. Ayon sa Hotjar (2025), ang 500 session ay nagbibigay ng error na mas mababa sa 5% at itinuturing na makabuluhan sa istatistika para sa paggawa ng desisyon sa disenyo.

Paano gamitin ang data ng heatmap

Data ng heatmap ay inilalapat sa tatlong scenario: pag-optimize ng conversion, pagpapabuti ng usability, at pag-validate ng mga desisyon sa disenyo. Sa unang kaso, ipinapakita ng heatmap kung nagki-click ang mga user sa CTA button — kung hindi, ang button ay inililipat nang mas mataas o binabago ang kulay. Sa pangalawa — natutukoy ang mga elemento na maling itinuturing ng mga user na interactive.

Sa scenario ng validation, ihambing ang mga heatmap bago at pagkatapos ng redesign ng screen. Kung ang mainit na zone ay lumipat sa target na elemento (hal. button na “Idagdag sa Cart”), ang redesign ay matagumpay. Ayon sa VWO (2024), 70% ng mga A/B test na batay sa data ng heatmap ay nagpapakita ng makabuluhang pagpapabuti ng conversion sa istatistika.

Huwag umasa lamang sa mga heatmap — pagsamahin ang mga ito sa mga session recording at quantitative analytics. Ipinapakita ng heatmap ang “ saan”, ngunit hindi sinasagot ang tanong na “bakit” — para doon, kailangan ng qualitative analysis ng pag-uugali.

Mga heatmap para sa mobile at desktop app

Mobile heatmap ay naiiba sa desktop heatmap sa ilang aspeto. Sa mga mobile device, walang cursor, kaya ang Move Heatmap ay pinalitan ng Touch Heatmap — touch map na nagtatala din ng lakas ng pagpindot (3D Touch) at tagal. Ang Scroll Heatmap sa mga mobile device ay kritikal dahil sa limitadong laki ng screen: ang content na “below the fold” ay maaaring hindi makita ng 70% ng mga user.

Ang desktop heatmap ay gumagamit ng paggalaw ng cursor bilang proxy para sa atensyon — ang ugnayan sa pagitan ng posisyon ng cursor at focus ng tingin ay umaabot sa 0.85 ayon sa data ng Nielsen Norman Group. Sa mga mobile device, walang ganoong ugnayan, kaya para sa pagsusuri ng atensyon, ginagamit ang eye-tracking o mahabang pagpindot. Ayon sa UXCam (2024), ang mobile heatmap ay nangangailangan ng 40% higit pang session para sa statistical significance dahil sa pagkakaiba-iba ng laki ng screen.

Kapag nagse-set up ng mga heatmap para sa cross-platform app, gumawa ng hiwalay na heatmap para sa iOS at Android — ang pagkakaiba sa navigation (gesture vs buttons) ay maaaring radikal na baguhin ang distribusyon ng click. I-filter din ayon sa bersyon ng OS: ang mga elemento ng interface sa Android 12+ na may Material You ay maaaring magmukha at mailagay nang iba kaysa sa Android 11.

Halimbawa ng implementasyon ng heatmap

Para subaybayan ang mga click sa mobile app sa Android, gamitin ang Kotlin code sa ibaba. Nakuha nito ang mga coordinate ng pagpindot at ipinapadala ang mga ito sa analytics system para sa pagbuo ng heatmap.

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

Pagkatapos mangolekta ng data, bumuo ng heatmap sa BI tool o gumamit ng handa nang platform tulad ng UXCam para sa awtomatikong visualization.

Paghahambing ng mga platform ng heatmap

Mga platform ng heatmap ay naiiba sa functionality, presyo, at lalim ng integrasyon sa mobile SDK. Hotjar — ang pinakasikat na tool para sa web heatmap na may simpleng interface at libreng plano hanggang 35 session bawat araw. Gayunpaman, hindi sinusuportahan ng Hotjar ang mga mobile app — tanging mga web version at PWA. Para sa mga mobile app, gamitin ang Smartlook o UXCam na may native SDK.

UXCam — lider sa mobile heatmap: sumusuporta sa Android at iOS, awtomatikong pag-filter ayon sa klase ng device, overlay mode para sa A/B test, at ML anomaly detection. Nag-aalok ang Smartlook ng walang limitasyong bilang ng mga recording sa Growth plan at sumusuporta sa parehong mobile at web heatmap sa isang proyekto. Microsoft Clarity — libreng alternatibo para sa web project na may walang limitasyong trapiko, ngunit walang suporta para sa mobile SDK.

Kapag pumipili ng platform, isaalang-alang ang dalas ng pag-update ng data, lalim ng pag-filter, at posibilidad ng pag-export ng raw click coordinates para sa custom analytics. Ayon sa G2 Reviews (2025), ang UXCam ay tumatanggap ng pinakamataas na rating (4.6/5) sa mga mobile heatmap solution, at ang Hotjar — sa mga web solution (4.4/5).

Mga karaniwang pagkakamali sa pagsusuri ng heatmap

Unang pagkakamali — pagsusuri ng heatmap nang walang pag-filter ayon sa device. Malaki ang epekto ng resolution ng screen sa paglalagay ng mga elemento: kung ano sa iPhone 15 Pro ay nasa itaas, sa murang Android ay maaaring nasa gitna. Palaging i-filter ang heatmap ayon sa modelo ng device o laki ng screen.

Pangalawang pagkakamali — pagkalito sa pagitan ng absolute at relative na bilang ng click. Ang pulang zone ay maaaring mainit hindi dahil sa mataas na conversion, kundi dahil ang elemento ay sumasakop sa 50% ng screen. Gumamit ng normalized heatmap, kung saan ang kulay ay nagpapakita ng porsyento na ratio sa laki ng elemento.

Pangatlong pagkakamali — pagbabalewala sa oras na ginugol sa screen. Kung ang mga user ay gumugugol ng kaunting oras sa screen, ang heatmap ay “malamig” hindi dahil sa masamang disenyo, kundi dahil sa mababang interes. Suriin ang heatmap kasama ng mga sukatan ng pakikipag-ugnayan — Time on Screen at Session Duration.