Nutze Heatmaps, um die UX deiner Website zu verbessern: 5 Tipps für den Einstieg

Der Name sagt es schon: Bei der UX (User Experience, Nutzererlebnis) dreht sich alles um deine Nutzenden. Je nutzerorientierter du Daten erhebst, desto besser kannst du deine Website für die Bedürfnisse deiner Nutzenden optimieren.

Wahrscheinlich hast du schon einige Anhaltspunkte über das Nutzerverhalten aus traditionellen UX-Analysedaten (z. B. Absprungrate, Seitenaufrufe, Conversions). Aber woher weißt du, was du als Erstes tun musst, wenn du ein Problem entdeckst? Und wo fängst du an, wenn du deine Conversions steigern möchtest?

Wenn du als UX-Designer:in, Entwickler:in oder Marketer:in daran arbeitest, die User Experience zu verbessern, können dir Heatmaps dabei helfen, Daten darüber zu sammeln, wie Menschen mit deiner Website interagieren.

Was ist eine Heatmap?

Eine Heatmap (oder Heat Map, Wärmekarte) ist eine Datenvisualisierung, wie Nutzende klicken, scrollen und sich bewegen. Das „heat“ (Hitze) im Namen kommt von der Farbskala: Rot zeigt beliebte (heiße) Bereiche der Seite an, blau weniger beliebte (kalte) Bereiche.

Du kannst Heatmap-Daten für jede beliebige Website auf Desktop- und Mobilgeräten sammeln und auf verschiedene Arten visualisieren:

• Click-Heatmaps zeigen, wo die Nutzenden mit der Maus klicken (oder auf Mobilgeräten tippen)

• Scroll-Heatmaps zeigen, wo Nutzende auf einer Seite scrollen

• Move-Heatmaps heben die Mausbewegungen der Nutzenden hervor (ohne zu klicken)

Möchtest du eine Heatmap in Aktion sehen? Probiere die Hotjar-Heatmaps-Demo aus, um ein Gefühl für das Tool zu bekommen. Wechsle in der rechten Seitenleiste zwischen den verschiedenen Heatmap-Typen hin und her, um zu sehen, welche Erkenntnisse du aus ihnen gewinnen kannst.

5 Möglichkeiten zur Verwendung von Heatmaps, um deine UX zu bewerten

Wenn ein Bild mehr sagt als tausend Worte, dann bringt eine Heatmap tausend Erkenntnisse. Aber eine Liste mit tausend Erkenntnissen wäre vielleicht etwas zu lang für diesen Artikel! Um dir den Einstieg zu erleichtern, findest du hier fünf Möglichkeiten, wie du verschiedene Arten von Heatmaps nutzen kannst, um UX-Daten zu sammeln, deine Ideen zu überprüfen und Optimierungsmöglichkeiten zu erkennen.

1. Präsentiere deine besten Designs

Deine Webseiten mögen für sich genommen schon beeindruckend aussehen, aber mit Heatmaps kannst du deinem Team und den Stakeholder:innen zeigen, wie gut sie tatsächlich performen.

Heatmaps sind auf den ersten Blick leicht zu verstehen und helfen dir, deine Arbeit auch Nicht-Designer:innen zu erklären, damit du die Zustimmung zur Neugestaltung von Websites erhalten oder deine erfolgreichsten UX-Design-Projekte präsentieren kannst. Das ist besonders nützlich, wenn deine Seiten besser performen sollen.

Bei Spotahome, einer Online-Plattform für Immobilienvermietung, verwendet die Customer Knowledge Managerin Sara Parcero-Leites Heatmaps, um sicherzustellen, dass ihr Team die UX-Bereiche kennt, die verbessert werden müssen.

Bei ihren regelmäßigen Hotjar-„Partys“ stellt Sara drei bis vier interessante Heatmaps zusammen mit Erkenntnissen aus anderen Hotjar-Tools vor, um Diskussionen anzuregen und gemeinsam an Lösungen zu arbeiten.

Sara erzählte uns, dass die meisten Entwickler:innen und Produktmanager:innen noch nie gesehen hatten, wie Nutzende mit den von ihnen entwickelten Funktionen interagierten. Deshalb fing sie an, diese Partys zu veranstalten und ihnen visuelle Nachweise wie Heatmaps zu zeigen – jetzt verlassen sie jede Party mit konkreten Informationen und Fehlern, die sie beheben müssen.

2. Finde die CTAs mit den meisten (und den wenigsten) Klicks

CTAs (Calls-to-Action) sind Handlungsaufforderungen – meist Buttons oder Links – und können so gestaltet werden, dass sie angeklickt werden, um Anmeldungen oder Verkäufe zu steigern.

Click-Heatmaps zeigen, welche CTAs am häufigsten angeklickt werden und welche ignoriert werden. Vielleicht stellst du fest, dass andere Seitenelemente die Nutzenden davon ablenken, deinen Haupt-CTA zu sehen. Oder du erkennst eine Möglichkeit, einen neuen CTA in einem Bereich zu testen, der mehr Nutzende anzieht.

Hier ein Beispiel: Bei der Einführung von Hotjar-Tools entdeckte Conan Heiselt, ein UX-Designer beim Softwareunternehmen Techsmith, dass Nutzende nicht wie beabsichtigt mit den Produkt-CTAs interagierten – das erkannte er beim Betrachten einer Click-Heatmap.

Nachdem sie eine Click-Heatmap auf ihrer Service-Seite eingesetzt hatten, stellten Conan und sein Team fest, dass viele Nutzende die CTA-Textbuttons ignorierten und lieber auf die Produktbilder klickten. Also machten sie bei ihrem Redesign den gesamten Bereich klickbar. Mit diesen konkreten visuellen Anhaltspunkten, die aus einer einzigen Click-Heatmap gewonnen wurden, konnte das Team den Nutzenden eine intuitivere User Experience bieten.

3. Miss, wie weit Nutzende scrollen

Nicht jede Person, die auf deiner Website landet, scrollt bis ganz nach unten, was bedeutet, dass sie möglicherweise wichtige Informationen verpasst. Außerdem wird deine Website von vielen verschiedenen Geräten und Browsern aus besucht, sodass nicht alle dieselben Informationen im „above-the-fold“-Bereich (der Teil der Seite, der ohne Scrollen sofort sichtbar ist) sehen können.

Scroll-Heatmap-Tools zeigen dir, wo der durchschnittliche Fold auf Mobil- und Desktop-Geräten liegt. So kannst du wichtige Informationen und CTAs dort platzieren, wo sie am meisten gesehen werden. Du kannst auch herausfinden, wie weit die Nutzenden auf der Seite nach unten scrollen und Elemente auf der Seite nach oben verschieben, damit sie von mehr Menschen gesehen werden.

Du solltest aber nicht nur die Scroll-Daten allein ansehen, sondern sie mit deinen Click-Heatmaps vergleichen, um ein vollständiges Bild davon zu erhalten, wo deine Nutzenden das Interesse verlieren.

Und mit Hotjar musst du nicht hektisch zwischen zwei oder drei Heatmaps hin- und herschalten: Die übersichtliche Engagement-Zonen-Heatmap kombiniert Klick-, Bewegungs- und Scrolldaten in einer Ansicht, damit du sehen kannst, mit welchen Bereichen deiner Seite am meisten interagiert wird.

4. Erkenne problematische Klicks

Manchmal klicken Nutzende auf Elemente (z. B. Bilder oder Überschriften), von denen sie glauben, dass es sich um Links handelt. Das können zwar auch Fehlklicks sein, aber Heatmaps sammeln Daten von genügend Nutzenden, um Zufälle auszuschließen und dir allgemeine Klickmuster aufzuzeigen.

Anhand einer Click-Heatmap kannst du falsche Klicks erkennen und das Problem beheben, indem du dort Links hinzufügst oder unwichtige Elemente so veränderst, dass sie weniger klickbar sind.

Vielleicht findest du sogar Website-Bugs oder Designfehler, die deine Nutzenden frustrieren und sie zum Abbruch veranlassen. Um das zu visualisieren, gibt es eine spezielle Heatmap: Die Wutklick-Map von Hotjar deckt auf, welche Elemente zu Irritationen führen, indem sie zeigt, wo die Menschen innerhalb eines kurzen Zeitraums wiederholt klicken – das ist das perfekte Tool, wenn du vermeiden möchtest, dass sich Nutzende auf deiner Website ärgern.

5. Optimiere deine Website für Mobil- und Desktopgeräte

Responsives Webdesign (Seiten, die sich an verschiedene Bildschirmgrößen anpassen) ist eine schnelle und effiziente Methode, um allen Nutzenden Inhalte zur Verfügung zu stellen. Dabei solltest du bedenken, dass das, was auf einem Desktop wie ein paar Zeilen aussieht, auf Mobilgeräten viel mehr Scrollen erfordert.

Vergleiche die Heatmaps von Mobil- und Desktopgeräten, um Unterschiede im Verhalten zu erkennen und festzustellen, ob die Nutzenden der mobilen App wichtige CTAs oder andere Elemente übersehen. Möglicherweise musst du unterschiedliche benutzerfreundliche Oberflächen für Mobile und Desktop entwerfen, um eine gute UX auf allen Geräten zu gewährleisten.

Durch den Einsatz von Heatmaps zur Optimierung von Seiten für mehrere Geräte konnte Materials Market, eine Website, die Baumateriallieferanten mit Kund:innen in Großbritannien verbindet, seine Conversions deutlich steigern.

CEO Andrew Haehn nutzte die Scroll-Heatmap von Hotjar und fand dabei heraus, dass nur wenige Nutzende auf der Seite weit genug nach unten scrollten, um den wichtigsten CTA zu sehen. Diese einfache Änderung trug zu einem Anstieg der Conversion-Rate um 1,1 % bei, was zu über 10.000 £ mehr Umsatz pro Jahr führte.

Heatmaps mit anderen UX-Tools verwenden

Heatmap-Daten sehen beeindruckend aus und geben dir viele Einblicke, aber du kannst noch mehr aus ihnen herausholen, wenn du sie mit anderen Analyse-, Feedback- und UX-Design-Tools kombinierst. Sehen wir uns vier Beispiele an:

1. Heatmaps + traditionelle Analyse

Traditionelle Web-Analyse-Tools (wie Google Analytics) geben dir eine Menge quantitativer Daten wie Seitenaufrufe, Traffic-Quellen und Absprungraten, aber sie können nicht erklären, warum oder wie sie entstehen.

Durch die Kombination herkömmlicher Analysen mit Heatmap-Analysen kannst du deine Vermutungen bestätigen und herausfinden, warum bestimmte Messwerte auftreten. Du hast eine Seite mit viel Traffic, die nicht konvertiert? Dann erstelle eine Heatmap und finde heraus, was die Leute dazu bringt, die Seite zu verlassen.

Mit Hotjar Trends kannst du bei deiner Heatmap-Analyse noch einen Schritt weiter gehen. Richte eine Heatmap ein, um das Nutzerverhalten vor und nach dem Launch oder der Neugestaltung einer Seite zu analysieren, und wechsle dann direkt von der Heatmap zu Diagrammen, um zu sehen, wie sich das Engagement im Lauf der Zeit entwickelt.

2. Heatmaps + Session-Aufnahmen

Eine Session-Aufnahme (oder Session-Recording, Sitzungsaufzeichnung) ist eine Wiedergabe einer Nutzersitzung, mit der du die Aktionen einer einzelnen (anonymisierten) Person über mehrere Seiten hinweg beobachten kannst.

Während Heatmaps dir helfen, die Daten all deiner Nutzenden auf einmal zu visualisieren, werden Session-Aufnahmen für jede einzelne Person erstellt. Anstatt Vermutungen über das Klicken und Scrollen auf einer Heatmap anzustellen, solltest du dir ein paar Session-Aufnahmen ansehen, um herauszufinden, wie echte Menschen mit der Seite interagieren.

Angenommen, du entdeckst während einer Session-Aufnahme eine problematische Nutzerinteraktion und möchtest wissen, ob es sich um einen Einzelfall oder ein größeres Problem handelt. Mit der Zoom-Out-Funktion von Hotjar kannst du dir eine auffällige Session-Aufnahme ansehen und dann direkt zur Heatmap dieser Seite wechseln, um zu sehen, ob andere Nutzende das gleiche Problem haben.

Hier ein konkretes Beispiel, wie Hotjar Recordings in Verbindung mit Heatmaps der Agentur für digitales UX-Design Turum-burum geholfen hat, die Conversion-Rate des Schuhhändlers Intertop um 55 % zu steigern.

Die Session-Aufnahmen zeigten zunächst, dass die Leute Probleme mit den Produktfiltern von Intertop hatten – sie gingen auf viele verschiedene Seiten, um ihre Schuhgröße zu finden.

Nach der Analyse einer Click-Heatmap stellte das Turum-burum-Team fest, dass viele Nutzende bei der Suche nach einem Produkt auf „alles anzeigen“ klickten, weil ihnen die nötigen Filter fehlten, um das zu finden, was sie suchten.

Mit den Erkenntnissen aus den Session-Aufnahmen und Heatmaps konnte Turum-burum eine optimierte Filterfunktion einführen, indem es klare Produktkategorien identifizierte und priorisierte – ein wesentliches Navigationselement im E-Commerce-Einkaufserlebnis. Die Verbesserung von Turum-burum führte zu einer besseren UX und einer Steigerung der Verkaufszahlen für den Kunden.

3. Heatmaps + Onsite-Feedback

Quantitative (numerische) Daten sind enorm wichtig, um datenbasierte UX-Entscheidungen zu treffen. Du solltest aber auch den Wert von qualitativen (nicht-numerischen) Daten nicht übersehen.

Nachdem du mit Heatmaps Designprobleme auf bestimmten Seiten aufgedeckt hast, kannst du deine Nutzenden um UX-Feedback zu jeder Seite bitten, um herauszufinden, was ihrer Meinung nach fehlt oder was du ändern solltest, damit sie ihre Ziele erreichen können.

Website-Feedback darf für die Nutzenden nicht störend sein: Eine einfache, unaufdringliche Umfrage mit nur einer Frage kann ausreichen, um Verbesserungen an der Benutzeroberfläche anzustoßen, an die du noch nicht gedacht hattest.

Zusätzlich zu den Erkenntnissen der Click-Heatmap, die das Softwareunternehmen Techsmith dazu veranlassten, durch die Neugestaltung ihrer Produkt-CTAs eine bessere UX zu bieten, nutzte UX-Designer Conan Heiselt Hotjar Surveys, um ein tieferes Verständnis für die Bedürfnisse seiner Kund:innen zu bekommen.

Mit einer einfachen Onsite-Umfrage stellte Conan Nutzenden, die bestimmte Interaktionen ausgeführt hatten, eine offene Frage: „Was ist deine größte Frustration mit dieser Seite?“ Er konnte genug Antworten sammeln, um 15 allgemeine Themen zu identifizieren und Maßnahmen zu ergreifen, um auf spezifische Nutzerbedürfnisse einzugehen.

Wenn du nicht genug Zeit hast, um wie Conan einen ausführlichen UX-Forschungsbericht zu erstellen, probiere AI for Surveys von Hotjar und lass dir einen automatischen Bericht mit wichtigen Erkenntnissen und Vorschlägen für die nächsten Schritte auf der Grundlage des echten Feedbacks deiner Nutzenden erstellen.

4. Heatmaps + A/B-Tests

Heatmap-Daten und A/B-Tests gehen Hand in Hand: Du kannst Heatmap-Daten verwenden, um eine Testhypothese aufzustellen, und du kannst Heatmaps auf A/B-Testvariationen anwenden, um nützliche Daten darüber zu sammeln, warum eine Seitenvariation erfolgreich ist (oder nicht).

Das UX-Design-Team des Bannerdesign-Unternehmens Bannersnack verwendet zum Beispiel Heatmaps auf wichtigen Landingpages, um herauszufinden, wie die Leute mit ihnen interagieren. Anhand der Daten erstellt das Team ein alternatives Design und führt A/B-Tests mit der alten und der neuen Version durch. In einem Test konnte Bannersnack durch die Kombination von Heatmaps und A/B-Tests die Zahl der Anmeldungen um 25 % steigern.

So kannst du mit Heatmaps starten

Ein Website-Heatmap-Tool wie Hotjar kannst du ganz einfach nutzen, indem du ein simples Tracking-Skript einfügst. Du kannst schnell eine Heatmap einrichten und jedes Mal, wenn Nutzende deine Website besuchen, werden Daten gesammelt.

Ganz gleich, ob du Heatmaps verwendest, um deine Arbeit zu präsentieren, Conversions zu steigern oder Ideen für neue Tests zu sammeln – die wertvollen Einblicke, die du durch diese regenbogenfarbenen Grafiken erhältst, werden deiner UX wahrscheinlich den nötigen Frischekick geben, um noch erfolgreicher arbeiten zu können.