Wissenswertes / Leitfäden / Heatmaps-Leitfaden
3 Beispiele für echte Heatmaps
Im Zeitraum von Januar 2019 bis Januar 2020 wurde Hotjar für die Erstellung von 1.715.313 Heatmaps für fast 350.000 Organisationen genutzt – das wären natürlich eine Menge authentischer Beispiele, aber wir respektieren die Privatsphäre unserer Nutzenden und geben keine ihrer Daten öffentlich weiter (es sei denn, sie haben zugestimmt, in einer Fallstudie vorgestellt zu werden).
Also haben wir drei echte Beispiele von unserer eigenen Website ausgewählt, denn wir erstellen nicht nur Heatmaps – wir nutzen sie auch oft selbst! Anhand dieser Beispiele kannst du dir ein Bild davon machen, wie Heatmaps aussehen, wie einfach es ist, Optimierungsmöglichkeiten zu erkennen und wie du sie auf deiner Website einsetzen kannst.
Engagement Zone maps (in English)
Rage click maps (in English)
Registriere dich für ein kostenloses Hotjar-Konto, füge den Tracking-Code zu deiner Website hinzu und beginne noch heute mit der Nutzung von Heatmaps.
Beispiel 1: Eine Scrollmap zeigt, dass wichtige Inhalte ignoriert werden
Die obige Heatmap ist eine Scrollmap, die anzeigt, wie weit die Besuchenden auf der Seite nach unten scrollen. Sie wurde auf der langen Karriereseite von Hotjar platziert, um zu sehen, wie potenzielle Bewerber:innen mit dem Inhalt interagieren.
Wenn du dir die Scrollmap anschaust, kannst du sofort zwei starke Änderungen im Farbverlauf erkennen: eine am oberen Rand der Seite (von rot zu gelb) und eine im unteren Viertel (von grün zu dunkelblau). In einer Scrollmap ist allgemein zu erwarten, dass die Farben im Verlauf nach unten allmählich kälter werden. Eine starke Veränderung ist ein Hinweis darauf, dass ein signifikanter Prozentsatz der Nutzenden das Scrollen an einem bestimmten Punkt abbricht.
Konzentrieren wir uns auf den Wechsel von grün zu blau am unteren Rand. Aufgrund der Gestaltung des Inhalts können wir zwei Hypothesen aufstellen:
Entweder
a) die Besuchenden denken, dass die Karriereseite mit dem Abschnitt „Aktuelle Stellenangebote“ endet, und verlassen sie deshalb, oder b) potenzielle Bewerber:innen interessieren sich für die offenen Stellen und klicken, um zur nächsten Seite zu gelangen.
In beiden Fällen wird das untere Ende der Seite nur von etwa 20 % der Gesamtbesucherzahl gesehen.
Die Glassdoor-Arbeitgeberbewertung von Hotjar mit 5 von 5 Punkten (was weit über dem Durchschnitt liegt) ist ein hervorragendes Social-Proof-Element für potenzielle Bewerber:innen, aber 80 % der Personen, die auf die Seite gelangen, schauen sich diese nicht einmal an.
Wenn du die Effektivität dieser Seite allein auf der Grundlage dieses Scrollmap-Beispiels verbessern möchtest, hast du mindestens zwei Möglichkeiten:
Füge unter dem Abschnitt mit den offenen Stellen ein Element hinzu, um anzuzeigen, dass es weitere Inhalte gibt.
Platziere das Social-Proof-Element weiter oben auf der Seite.
💡Pro tip: we combined numerical data from Heatmaps with qualitative insights from Hotjar Feedback to make even more improvements to the page.
For example, a user pointed out they couldn’t filter openings by roles or location. So we added that option:
User insights like these are a gold mine for your site, product, or service.
Beispiel 2: Eine Clickmap zeigt, dass die Benutzenden ein Video ignorieren
Die Heatmap oben ist eine Clickmap, die auf einer alten Version der Homepage von Hotjar platziert wurde, um die Interaktion mit den Hauptelementen zu untersuchen.
Die Seite verfügte über eine Abspieltaste „Above the Fold“ (Bereich der Seite, der ohne Scrollen beim Öffnen der Seite sichtbar ist), auf die Besuchende klicken konnten. Nur haben sie es nicht getan:
Siehst du den einsamen, nicht angeklickten „Play“-Button in der Mitte der beiden Heatmaps? Die Desktop-Clickmap ist besonders aufschlussreich: Von fast 7.000 aufgezeichneten Klicks entfielen 3 (drei!) auf das Video.
Wäre dies deine Seite, könntest du also mit Sicherheit davon ausgehen, dass sich praktisch niemand das Video angesehen hat. Und wenn das Video an sich wertvolle Informationen enthält, die nicht in schriftlicher Form an anderer Stelle auf der Seite wiedergegeben werden, liefert allein diese Clickmap deinem UX-Team genügend Beweise dafür, dass die Seite korrigiert werden muss.
Das haben wir übrigens auch getan: Kurz nachdem wir diese Clickmap gesehen hatten, begannen wir mit der Gestaltung und dem Testen einer Reihe neuer Homepages – keine davon mit einem Video „Above the Fold“:
💡Pro tip: conducting user interviews with Hotjar Engage could also help us get direct feedback from users on why they don’t click on the video. This preliminary product research step would inform the type of change we need to make to the section before setting up an experiment.
Beispiel 3: Eine Movemap zeigt, wohin Benutzende ihre Maus bewegen
Die obige Heatmap ist eine Movemap, die die Mausbewegungen von Nutzenden während ihrer Navigation auf der Seite anzeigt.
Sie wurde im Blog von Hotjar in einem Beitrag über Heatmaps veröffentlicht (ja, das ist sehr meta). Die aus dieser Art von Heatmap gesammelten Informationen geben dir eine klare Vorstellung davon, was die Aufmerksamkeit der Besuchenden am meisten fesselte:
Die Besuchenden bewegten den Mauszeiger viel häufiger zu dem Bild als zu allen anderen Bereichen der Seite. Was sagt uns das? Zum einen zeigt dies, dass dieser Bereich die Aufmerksamkeit vieler Menschen erregt, sodass wir dafür in Zukunft eine Erweiterung oder eine eigenständige Seite in Betracht ziehen könnten. Bevor wir jedoch konkrete Entscheidungen treffen, müssen wir den Kontext dieses Verhaltens analysieren und unsere Hypothese bestätigen – in diesem Fall ist die Movemap ein hervorragender Ausgangspunkt für weiterführende und vertiefende Untersuchungen.
💡Pro tip: a content feedback survey can also help us determine whether readers are satisfied with the content on the page, what might be missing, or whether the layout isn’t to their liking.
4. Engagement Zone maps show how users interact with the page
Engagement Zone maps combine data sets from clicks, moves, and scrolls for desktop—or taps and scrolls for mobile and tablets—into a single view. It’s the go-to heatmap analytics tool for data visualization.
What engagement zones highlighted
When looking at the testimonial section of our About us page, the heatmap tool shows that users engage with the cards (yay!).
The Glassdoor logo and the ‘Current Hotjar employee’ component get the most engagement, as though users want to click through to see the review on Glassdoor… but neither of these components is clickable (uh oh).
Worse: the ‘Read the review’ CTA, which is clickable, gets totally ignored (uh-oh).
Why were engagement zones insightful for this use case?
User behavior on this section hints at the users’ desire to check the authenticity of the Glassdoor reviews. After all, it’d be fair to assume that a company that doesn’t link to the testimonials simply made those testimonials up.
We certainly don’t want users to get that impression—especially since we do link to the reviews on Glassdoor.
Engagement Zone maps have highlighted a potential source of mistrust. With this actionable insight, we can revisit the design of our testimonial cards to confidently improve UX by:
Making the Glassdoor logo and the bottom-left element clickable, and/or
Making the CTA to ‘Read the review’ more visible
💡Pro tip: before making any changes, we could use a concept testing survey to run a preference test and gauge which of two (or more) designs would most resonate with users.
Example of a preference test for the Hotjar logo
5. Rage click maps help pinpoint exactly where users are getting frustrated on the page
As you might have guessed, a rage click map shows you where rage clicks occur on a page. Rage clicks are essential signs of user frustration—they indicate friction that hinders conversion rates.
What a rage click map highlighted
When looking at the pricing table, one thing that stands out in the rage click pattern is how it’s focused on the features included in each plan.
It suggests that users don’t understand what those features mean or would like more details. Users might expect each feature to link to an explanation, on the same page or a different one.
Why was a rage click map insightful for this use case?
The rage click pattern on this page tells us that our pricing page’s tables might need some extra work to improve user experience. Some options include:
Making the info bubbles more visible
Displaying the content of the info bubbles when users hover over the copy (not just the bubbles)
Replacing the info bubbles with a drop-down component instead
Renaming the features to make them more explicit
Adding a link to the features to send the users further down the page, where they’ll find a more detailed explanation
By pinpointing objects of user frustration, the rage click map has provided UX improvement opportunities. We can now A/B test what changes best resonate with our users.
Pro-Tipp:
Wenn Sie nach weiteren Beispielen suchen, können Sie im Kapitel heatmaps case study Erfolgsgeschichten von Marketern, UX-Designern und & E-Commerce-Managern lesen, die Website-Heatmaps zur Verbesserung ihrer Websites eingesetzt haben.
Gather more insights with the different types of heatmaps
Now that you know how to use each type of heatmap, there’s nothing to keep you from gathering actionable user behavior insights. Start collecting data to improve user experience on your site and increase conversions.
Registriere dich für ein kostenloses Hotjar-Konto, füge den Tracking-Code zu deiner Website hinzu und beginne noch heute mit der Nutzung von Heatmaps.
