Värmekartor i appanalys: vad är det, typer och funktionsprincip

Vad är en värmekarta?

Värmekarta (heatmap) — en metod för datavisualisering där metriska värden visas med färg: från blått eller grönt (minimal aktivitet) via gult till rött (maximal aktivitet). I sammanhanget av mobil analys visar heatmap vilka gränssnittselement användare klickar på oftast och vilka som förblir obemärkta.

Till skillnad från numeriska rapporter ger en värmekarta omedelbar visuell förståelse av beteendemönster. Enligt NN Group (2024) minskar heatmap analystiden för användarbeteende med 60% jämfört med tabelldata. Detta gör det till ett oumbärligt verktyg för UX-forskare och produktdesigners.

Typer av värmekartor i analys

Click Heatmap (klickkarta)

Click Heatmap — den vanligaste typen, som visar tryck- och klickpunkter på skärmen. Ju varmare färg, desto fler interaktioner i den zonen. Används för att testa hypoteser: om knappen „Köp” befinner sig i en kall zon måste den flyttas högre upp eller ändra design. Click Heatmap avslöjar också falska klick — när användare klickar på icke-klickbara element i förväntan om en reaktion.

Scroll Heatmap (scrollkarta)

Scroll Heatmap visar hur stor andel av användarna som scrollat till varje del av skärmen eller sidan. Övre delen — 100%, lägre — minskning. Om mindre än 30% av användarna återstår vid 50% av skärmhöjden måste kritiskt innehåll flyttas högre upp. Enligt Crazy Egg (2024) scrollar 65% av användarna inte under den första skärmen i mobilappar med långa formulär.

Move Heatmap (rörelsekarta)

Move Heatmap — spårar musmarkörens rörelsebana (på stationär dator). Forskning från Nielsen Norman Group visar en hög korrelation (0.85–0.90) mellan markörens rörelse och användarens blickriktning. I mobilappar är motsvarigheten tryckkartor som visar inte bara klick utan även långa tryckningar och svepningar.

Hur värmekartor fungerar

Funktionsprincip — baseras på insamling av koordinater för varje användarinteraktion med skärmen. SDK för analysplattformen (Hotjar, Smartlook, UXCam) registrerar X- och Y-koordinaterna för varje klick eller tryck tillsammans med skärmupplösning och enhetstyp. Dessa data aggregeras och läggs som en överlagring på en skärmbild.

Färgvisning använder en gradient: från blått (0–5% av maximalt antal interaktioner) via grönt och gult till rött (95–100%). Varje punkt representerar en eller flera interaktioner. Moderna plattformar visar också absoluta antal klick när man hovrar över en zon.

För tillförlitlig data krävs minst 100–200 sessioner per sida eller skärm. Enligt Hotjar (2025) ger 500 sessioner ett fel på mindre än 5% och anses statistiskt signifikant för att fatta designbeslut.

Hur man använder data från värmekartor

Data från värmekartor tillämpas i tre scenarier: konverteringsoptimering, förbättring av användbarhet och validering av designbeslut. I det första fallet visar heatmap om användare klickar på CTA-knappen — om inte flyttas knappen högre upp eller byter färg. I det andra — identifieras element som användare felaktigt tror är interaktiva.

I valideringsscenariot jämför du värmekartor före och efter omdesign av skärmen. Om den heta zonen har flyttats till målelementet (t.ex. knappen „Lägg i varukorgen”) är omdesignen lyckad. Enligt VWO (2024) visar 70% av A/B-tester baserade på heatmap-data en statistiskt signifikant konverteringsförbättring.

Förlita dig inte enbart på värmekartor — kombinera dem med sessionsinspelningar och kvantitativ analys. Heatmap visar „var” men svarar inte på frågan „varför” — för det krävs kvalitativ beteendeanalys.

Värmekartor för mobil- och stationära appar

Mobila värmekartor skiljer sig från stationära på flera sätt. På mobila enheter finns ingen markör, därför ersätts Move Heatmap av Touch Heatmap — en tryckkarta som även registrerar tryckkraft (3D Touch) och varaktighet. Scroll Heatmap är kritisk på mobila enheter på grund av begränsad skärmstorlek: innehåll „nedanför vecket” (below the fold) kan 70% av användarna missa.

Stationära värmekartor använder markörrörelse som proxy för uppmärksamhet — korrelationen mellan markörens position och blickfokus når 0.85 enligt Nielsen Norman Group. På mobila enheter finns ingen sådan korrelation, därför används blickfixeringskartor (eye-tracking) eller långa tryckningar för uppmärksamhetsanalys. Enligt UXCam (2024) kräver mobila heatmaps 40% fler sessioner för statistisk signifikans på grund av variation i skärmstorlekar.

När du ställer in värmekartor för en plattformsoberoende app, skapa separata heatmaps för iOS och Android — skillnaden i navigering (gester vs knappar) kan radikalt förändra klickfördelningen. Filtrera även efter OS-version: gränssnittselement på Android 12+ med Material You kan se ut och placeras annorlunda än på Android 11.

Exempel på implementering av värmekarta

För att spåra klick i en mobilapp på Android, använd Kotlin-koden nedan. Den fångar tryckkoordinater och skickar dem till analyssystemet för att bygga värmekartan.

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

Efter att ha samlat in data, bygg en värmekarta i ett BI-verktyg eller använd en färdig plattform som UXCam för automatisk visualisering.

Jämförelse av plattformar för värmekartor

Plattformar för värmekartor skiljer sig i funktionalitet, pris och djup av integration med mobila SDK:er. Hotjar — det populäraste verktyget för webbvärmekartor med ett enkelt gränssnitt och en gratis plan upp till 35 sessioner per dag. Hotjar stöder dock inte mobilappar — endast webversioner och PWA. För mobilappar, använd Smartlook eller UXCam med inbyggda SDK:er.

UXCam — ledare inom mobila värmekartor: stöder Android och iOS, automatisk filtrering efter enhetsklass, överlagringsläge för A/B-tester och ML-anomalidetektering. Smartlook erbjuder obegränsat antal inspelningar i Growth-planen och stöder både mobila och webbvärmekartor i ett projekt. Microsoft Clarity — ett gratis alternativ för webbprojekt med obegränsad trafik, men utan stöd för mobila SDK:er.

När du väljer plattform, beakta datauppdateringsfrekvens, filtreringsdjup och möjlighet att exportera råa klickkoordinater för anpassad analys. Enligt G2 Reviews (2025) får UXCam högst betyg (4.6/5) bland mobila heatmap-lösningar och Hotjar — bland webbaserade lösningar (4.4/5).

Vanliga misstag vid analys av värmekartor

Första misstaget — analys av värmekarta utan filtrering efter enhet. Skärmupplösning påverkar starkt placeringen av element: det som på iPhone 15 Pro finns högst upp kan på en billig Android vara i mitten. Filtrera alltid heatmap efter enhetsmodell eller skärmstorlek.

Andra misstaget — förväxling av absolut och relativt antal klick. En röd zon kan vara het inte på grund av hög konvertering utan för att elementet upptar 50% av skärmen. Använd normaliserade värmekartor där färgen visar det procentuella förhållandet till elementets storlek.

Tredje misstaget — att ignorera tiden på skärmen. Om användare tillbringar lite tid på skärmen kommer värmekartan att vara „kall” inte på grund av dålig design utan på grund av lågt intresse. Analysera heatmap tillsammans med engagemangsmetrik — Time on Screen och Session Duration.