Logo UX & Usability Toolkit
DE | EN

Screenrecording & Heatmaps

Screenrecording und Heatmaps zählen zu den wichtigsten visuellen Analysetools in der UX-Forschung. Sie liefern retrospektive, quantitative und kontextsensitive Daten zur tatsächlichen Nutzung digitaler Systeme – etwa von Websites, mobilen Apps oder interaktiven Webanwendungen. Beide Methoden helfen dabei, Nutzerverhalten sichtbar zu machen und dadurch fundierte Optimierungsentscheidungen zu treffen. Besonders im Live-Betrieb, also unter realen Bedingungen und mit echten Nutzer:innen, entfalten sie ihre Stärke.


Screenrecording: Blick durchs digitale Schlüsselloch

Beim Screenrecording wird die Interaktion von Nutzer:innen mit einem Interface aufgezeichnet – meist inklusive Mausbewegungen, Klicks, Scrolling und Tastatureingaben. Die Methode eignet sich ideal zur nachträglichen Analyse realer Nutzungssitzungen, etwa zur Identifikation von Friktionen, häufigen Navigationsfehlern oder wiederholtem Zögern.

Ein Beispiel: Ein Team beobachtet, dass viele Nutzer:innen auf einer Anmeldeseite mehrfach zwischen Passwortfeld und Hilfelink wechseln. Die Videoanalyse zeigt: Der Hinweis zur Passwortanforderung ist zwar vorhanden, aber visuell unauffällig platziert. Diese Erkenntnis führt zu einer gestalterischen Anpassung – der Hinweis wird direkt neben dem Eingabefeld angezeigt.

Analyse von Screen-Recording KI
UX-Team analysiert ein Screenrecording: Wiederholte Nutzeraktionen geben Hinweise auf gestalterische Schwächen im Interface.
KI-generiertes Bild

Screenrecordings sind besonders hilfreich, wenn es darum geht, konkrete Schwachstellen in User Flows zu erkennen, z. B. in mehrstufigen Prozessen wie Checkout-Strecken oder Registrierungsformularen. Auch gerätespezifische Unterschiede – etwa zwischen Desktop- und Mobile-Nutzung – lassen sich vergleichend auswerten.

Tools: Hotjar, Microsoft Clarity (kostenlos), Smartlook, FullStory, Mouseflow
Hinweis: Bei sensiblen Inhalten sind DSGVO-konforme Lösungen wie Piwik PRO oder On-Premise-Server wichtig.


Heatmaps: Wo geklickt, bewegt und gescrollt wird

Heatmaps visualisieren aggregiertes Nutzerverhalten auf einer Seite – typischerweise farbcodiert: Rot steht für häufige Aktionen (Hotspots), Blau für seltene (Cold Spots). Es gibt unterschiedliche Arten von Heatmaps:

Ein praktisches Beispiel: Eine Scroll-Heatmap zeigt, dass nur 30 % der Besucher:innen den unteren Bereich einer Landingpage sehen – obwohl dort ein zentraler Call-to-Action („Jetzt Kontakt aufnehmen“) platziert ist. Die Schlussfolgerung: Die Botschaft wird nach oben verlagert, die Conversion Rate steigt um 18 %.

Move Heatmap
Move-Heatmap-Analyse: Farbcodierte Klick- und Scrollverläufe zeigen, welche Bereiche einer Seite Aufmerksamkeit erhalten – und welche ignoriert werden.

Heatmaps sind besonders nützlich bei Fragen wie: „Werden wichtige Inhalte überhaupt wahrgenommen?“ oder „Sind Navigationselemente am richtigen Ort platziert?“ Sie eignen sich auch hervorragend für den Vorher-Nachher-Vergleich bei Redesigns oder A/B-Tests.


Grenzen und Einordnung

Beide Methoden liefern was passiert, aber nicht warum es passiert. Sie zeigen keine Motive, Emotionen oder mentale Modelle der Nutzer:innen. Ein Click auf einen Button kann Unsicherheit, Neugier oder bloßes Ausprobieren bedeuten – ohne ergänzende qualitative Verfahren bleibt die Interpretation spekulativ.

Auch gilt: Heatmaps sind kontextspezifisch – sie müssen getrennt für unterschiedliche Seiten und Gerätetypen analysiert werden. Eine mobile Heatmap unterscheidet sich deutlich von ihrer Desktop-Version. Zudem sind datenschutzrechtliche Aspekte zwingend zu beachten: Nutzungsaufzeichnungen dürfen nur mit expliziter Einwilligung erfolgen.


Best Practices aus der Praxis


Fazit

Screenrecordings und Heatmaps bieten UX-Teams einen unmittelbaren, visuellen Zugang zur realen Nutzungserfahrung. Sie zeigen, was Nutzer:innen tatsächlich tun – und wo sie Schwierigkeiten haben. Richtig eingesetzt, liefern sie belastbare Hinweise auf Optimierungspotenziale, die sich gut an Stakeholder kommunizieren lassen. Ihr größter Wert liegt in der Kombination: mit qualitativen Insights, mit quantitativen Metriken – und mit dem richtigen Gespür für Designentscheidungen.

Häufige Fragen (FAQ)

Was ist Screenrecording in der UX-Forschung?
Screenrecording zeichnet die Interaktion von Nutzer:innen mit einem Interface auf – inklusive Klicks, Scrolls und Mausbewegungen. Es ermöglicht die nachträgliche Analyse realer Nutzungssitzungen, um Friktionen und Navigationsprobleme zu erkennen.
Was sind Heatmaps?
Heatmaps visualisieren aggregiertes Nutzerverhalten farbcodiert – z. B. Klick-, Scroll- oder Bewegungsdaten. Sie zeigen, welche Bereiche einer Seite besonders häufig oder selten genutzt werden.
Welche Arten von Heatmaps gibt es?
Click-Heatmaps (Klickverhalten), Move-Heatmaps (Mausbewegungen), Scroll-Heatmaps (Scrolltiefe) und Attention Maps (Blickverläufe, meist via Eye Tracking).
Welche Vorteile bieten diese Methoden?
Sie liefern visuelle, leicht verständliche Daten zur tatsächlichen Nutzung und helfen, Optimierungspotenziale zu identifizieren – ideal für Redesigns, A/B-Tests und Conversion-Optimierung.
Welche Grenzen haben Screenrecordings und Heatmaps?
Sie zeigen das Was, aber nicht das Warum. Motive und mentale Modelle bleiben unsichtbar. Datenschutz und DSGVO-Konformität müssen beachtet werden.
Welche Tools eignen sich?
Hotjar, Microsoft Clarity, Smartlook, FullStory und Mouseflow für Heatmaps und Screenrecordings. Für DSGVO-konforme Lösungen: Piwik PRO oder On-Premise-Varianten.

Visuelle Erhebungsmethoden: Heatmaps, Screenshots und Screenrecording

Diese Studien beleuchten die Anwendung visueller Analyseverfahren wie Heatmaps, Eye-Tracking, Screenshots und Screenrecording zur Erfassung und Interpretation von Nutzerverhalten in der UX-Forschung.

Usage and Application of Heatmap Visualizations on Usability User Testing

Umfassender Literaturüberblick zu Heatmaps. Betont das Fehlen eines Standardprozesses zur Kombination von Heatmap-Auswertung mit qualitativen Usability-Daten.

Dávila, F., Paz, F. A., & Moquillaza, A. (2023). Usage and application of heatmap visualizations on usability user testing: A systematic literature review. In Lecture Notes in Computer Science. https://doi.org/10.1007/978-3-031-35702-2_1

DOI

UX Heatmaps: Mapping User Experience on Visual Interfaces

Führt ein Tool ein, das Blickverhalten mit emotionalen Zuständen trianguliert. Ermöglicht UX-Heatmaps zur Analyse kognitiver Belastung in UI-Bereichen.

Georges, V., Courtemanche, F., Sénécal, S., Baccino, T., Fredette, M., & Léger, P.-M. (2016). UX heatmaps: Mapping user experience on visual interfaces. In CHI Proceedings. https://doi.org/10.1145/2858036.2858271

DOI

Evaluation of Strong and Weak Signifiers in a Web Interface Using Eye-Tracking Heatmaps and Machine Learning

Nutzt Heatmaps + Machine Learning zur Bewertung von Interface-Elementen. Zeigt, wie automatisierte Heatmap-Analyse zur Usability-Bewertung beitragen kann.

Koonsanit, K., Tsunajima, T., & Nishiuchi, N. (2021). Evaluation of strong and weak signifiers in a web interface using eye-tracking heatmaps and machine learning. In CISIM Proceedings. https://doi.org/10.1007/978-3-030-84340-3_16

DOI

Contextual Cropping, Collateral Data: Screenshot Methods for UX Research

Beschreibt Methode des "Contextual Cropping" – selektive Screenshots mit Metadaten zur Kontextanalyse in UX-Studien.

Reimer, C. (2018). Contextual cropping, collateral data: Screenshot methods for UX research. Communication Design Quarterly, 6(3). https://doi.org/10.1145/3282665.3282673

DOI

Process Research Screen Capture

Betrachtet Screenrecording als multimodales Forschungsinstrument – geeignet für qualitative, quantitative oder Mixed-Methods-Ansätze in UX.

Mroz, A. P. (2025). Process research screen capture. In The Encyclopedia of Applied Linguistics. https://doi.org/10.1002/9781405198431.wbeal1450.pub2

DOI

Zuletzt geändert: 17. September 2026