Heatmaps in der App-Analyse: Was sie sind, Typen und Funktionsprinzip

Was ist eine Heatmap?

Eine Heatmap ist eine Methode der Datenvisualisierung, bei der Metrikwerte farbig dargestellt werden: von Blau oder Grün (minimale Aktivität) über Gelb bis Rot (maximale Aktivität). Im Kontext der mobilen Analyse zeigt eine Heatmap, auf welche Oberflächenelemente Benutzer am häufigsten klicken und welche unbemerkt bleiben.

Im Gegensatz zu numerischen Berichten bietet eine Heatmap ein sofortiges visuelles Verständnis von Verhaltensmustern. Laut NN Group (2024) verkürzen Heatmaps die Zeit für die Analyse des Benutzerverhaltens um 60 % im Vergleich zu tabellarischen Daten. Dies macht sie zu einem unverzichtbaren Werkzeug für UX-Forscher und Produktdesigner.

Arten von Heatmaps in der Analyse

Click Heatmap (Klickkarte)

Click Heatmap ist die häufigste Art und zeigt Berührungspunkte und Klicks auf einem Bildschirm. Je wärmer die Farbe, desto mehr Interaktionen in diesem Bereich. Sie wird zum Testen von Hypothesen verwendet: Wenn ein „Kaufen“-Button in einer kalten Zone liegt, muss er höher verschoben oder sein Design geändert werden. Click Heatmap deckt auch Fehlklicks auf — wenn Benutzer auf nicht anklickbare Elemente klicken und eine Reaktion erwarten.

Scroll Heatmap (Scrollkarte)

Scroll Heatmap zeigt, wie viel Prozent der Benutzer zu jedem Abschnitt eines Bildschirms oder einer Seite gescrollt haben. Der obere Teil ist 100 %, nach unten hin abnehmend. Wenn bei 50 % der Bildschirmhöhe weniger als 30 % der Benutzer übrig sind, muss kritischer Inhalt höher verschoben werden. Laut Crazy Egg (2024) scrollen 65 % der Benutzer in mobilen Anwendungen mit langen Formularen nicht unter den ersten Bildschirm.

Move Heatmap (Bewegungskarte)

Move Heatmap verfolgt die Flugbahn der Mauscursor-Bewegung (auf dem Desktop). Untersuchungen der Nielsen Norman Group zeigen eine hohe Korrelation (0,85–0,90) zwischen der Cursorbewegung und der Blickrichtung des Benutzers. In mobilen Anwendungen ist das Äquivalent die Berührungskarte, die nicht nur Klicks, sondern auch lange Drück- und Wischbewegungen anzeigt.

Wie Heatmaps funktionieren

Das Funktionsprinzip einer Heatmap basiert auf dem Sammeln der Koordinaten jeder Benutzerinteraktion mit dem Bildschirm. Das SDK der Analyseplattform (Hotjar, Smartlook, UXCam) zeichnet die X- und Y-Koordinaten jedes Klicks oder jeder Berührung zusammen mit der Bildschirmauflösung und dem Gerätetyp auf. Diese Daten werden aggregiert und als Überlagerung auf einen Screenshot gelegt.

Die Farbdarstellung verwendet einen Farbverlauf: von Blau (0–5 % der maximalen Interaktionen) über Grün und Gelb bis Rot (95–100 %). Jeder Punkt stellt eine oder mehrere Interaktionen dar. Moderne Plattformen zeigen auch absolute Zahlen der Klicks beim Darüberfahren mit der Maus an.

Für zuverlässige Daten sind mindestens 100–200 Sitzungen pro Seite oder Bildschirm erforderlich. Laut Hotjar (2025) liefern 500 Sitzungen eine Fehlermarge von weniger als 5 % und gelten als statistisch signifikant für Designentscheidungen.

Wie man Heatmap-Daten nutzt

Heatmap-Daten werden in drei Szenarien verwendet: Conversion-Optimierung, Verbesserung der Benutzerfreundlichkeit und Validierung von Designentscheidungen. Im ersten Fall zeigt eine Heatmap, ob Benutzer auf den CTA-Button klicken — wenn nicht, wird der Button höher verschoben oder seine Farbe geändert. Im zweiten Fall werden Elemente identifiziert, die Benutzer fälschlicherweise für interaktiv halten.

Im Validierungsszenario vergleichen Sie Heatmaps vor und nach einem Screen-Redesign. Wenn sich die heiße Zone auf das Zielelement (z. B. den „In den Warenkorb“-Button) verlagert hat, ist das Redesign erfolgreich. Laut VWO (2024) zeigen 70 % der A/B-Tests, die auf Heatmap-Daten basieren, eine statistisch signifikante Verbesserung der Conversion.

Verlassen Sie sich nicht ausschließlich auf Heatmaps — kombinieren Sie sie mit Sitzungsaufzeichnungen und quantitativen Analysen. Eine Heatmap zeigt „wo“, beantwortet aber nicht die Frage „warum“ — dafür ist eine qualitative Verhaltensanalyse erforderlich.

Heatmaps für mobile und Desktop-Anwendungen

Mobile Heatmaps unterscheiden sich in mehreren Parametern von Desktop-Heatmaps. Auf mobilen Geräten gibt es keinen Cursor, daher wird Move Heatmap durch Touch Heatmap ersetzt — eine Berührungskarte, die zusätzlich die Druckstärke (3D Touch) und die Dauer aufzeichnet. Scroll Heatmap ist auf mobilen Geräten aufgrund der begrenzten Bildschirmgröße von entscheidender Bedeutung: Inhalte „unter dem Falz“ (below the fold) können von 70 % der Benutzer übersehen werden.

Desktop-Heatmaps verwenden die Cursorbewegung als Proxy für Aufmerksamkeit — die Korrelation zwischen Cursorposition und Blickfokus erreicht 0,85 nach Angaben der Nielsen Norman Group. Auf mobilen Geräten gibt es eine solche Korrelation nicht, daher werden für die Aufmerksamkeitsanalyse Eye-Tracking-Karten oder Karten für lange Drücke verwendet. Laut UXCam (2024) benötigen mobile Heatmaps aufgrund der Variabilität der Bildschirmgrößen 40 % mehr Sitzungen für statistische Signifikanz.

Beim Einrichten von Heatmaps für eine plattformübergreifende Anwendung erstellen Sie separate Heatmaps für iOS und Android — Unterschiede in der Navigation (Gesten vs. Tasten) können die Klickverteilung grundlegend verändern. Filtern Sie auch nach OS-Version: Oberflächenelemente auf Android 12+ mit Material You können anders aussehen und positioniert sein als auf Android 11.

Beispiel für eine Heatmap-Implementierung

Um Klicks in einer mobilen Anwendung auf Android zu verfolgen, verwenden Sie den folgenden Kotlin-Code. Er fängt Berührungskoordinaten ab und sendet sie zur Erstellung einer Heatmap an das Analysesystem.

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

Nach der Datenerfassung erstellen Sie eine Heatmap in einem BI-Tool oder verwenden Sie eine fertige Plattform wie UXCam zur automatischen Visualisierung.

Vergleich von Heatmap-Plattformen

Heatmap-Plattformen unterscheiden sich in Funktionalität, Preis und Integrationstiefe mit mobilen SDKs. Hotjar ist das beliebteste Tool für Web-Heatmaps mit einer einfachen Oberfläche und einem kostenlosen Tarif von bis zu 35 Sitzungen pro Tag. Hotjar unterstützt jedoch keine mobilen Anwendungen — nur Webversionen und PWAs. Für mobile Anwendungen verwenden Sie Smartlook oder UXCam mit nativen SDKs.

UXCam ist der Marktführer bei mobilen Heatmaps: Es unterstützt Android und iOS, automatische Filterung nach Geräteklasse, Overlay-Modus für A/B-Tests und ML-Anomalieerkennung. Smartlook bietet unbegrenzte Aufzeichnungen im Growth-Tarif und unterstützt sowohl mobile als auch Web-Heatmaps in einem Projekt. Microsoft Clarity ist eine kostenlose Alternative für Web-Projekte mit unbegrenztem Traffic, jedoch ohne Unterstützung mobiler SDKs.

Bei der Auswahl einer Plattform berücksichtigen Sie die Häufigkeit der Datenaktualisierung, die Filtertiefe und die Möglichkeit, Roh-Klickkoordinaten für benutzerdefinierte Analysen zu exportieren. Laut G2 Reviews (2025) erhält UXCam die höchsten Bewertungen (4,6/5) unter den mobilen Heatmap-Lösungen und Hotjar unter den Web-Lösungen (4,4/5).

Typische Fehler bei der Heatmap-Analyse

Der erste Fehler ist die Analyse einer Heatmap ohne Filterung nach Gerät. Die Bildschirmauflösung beeinflusst die Positionierung der Elemente stark: Was auf einem iPhone 15 Pro oben ist, kann auf einem günstigen Android-Gerät in der Mitte sein. Filtern Sie Heatmaps immer nach Gerätemodell oder Bildschirmgröße.

Der zweite Fehler ist die Verwechslung von absoluter und relativer Klickzahl. Eine rote Zone kann heiß sein, nicht wegen hoher Conversion, sondern weil das Element 50 % des Bildschirms einnimmt. Verwenden Sie normierte Heatmaps, bei denen die Farbe den Prozentsatz relativ zur Elementgröße anzeigt.

Der dritte Fehler ist das Ignorieren der Verweildauer auf dem Bildschirm. Wenn Benutzer wenig Zeit auf einem Bildschirm verbringen, wird die Heatmap nicht wegen schlechten Designs, sondern wegen geringen Interesses „kalt“ sein. Analysieren Sie Heatmaps zusammen mit Engagement-Metriken — Time on Screen und Session Duration.