Heatmap-Analyse: So vi­sua­li­sie­ren Sie das Verhalten Ihrer Besucher

Wer sein Web­an­ge­bot dauerhaft im Netz eta­blie­ren möchte, steht in erster Linie vor der Aufgabe, re­gel­mä­ßig Besucher auf seine Seite zu führen. Die Qualität der Website-Inhalte zu sichern und zu ver­bes­sern sowie die Such­ma­schi­nen­op­ti­mie­rung zählen daher zu Beginn be­rech­tig­ter­wei­se zu den wich­tigs­ten Schritten. Ein hoher Traffic allein reicht al­ler­dings noch lange nicht aus, denn irgendwie will das Projekt schließ­lich auch fi­nan­ziert werden. Egal, ob Sie einen On­line­shop führen und Produkte verkaufen oder In­for­ma­tio­nen anbieten und auf kos­ten­pflich­ti­ge Abon­ne­ments oder Werbung bauen: Sie sind darauf an­ge­wie­sen, dass Ihre Besucher auch zur Tat schreiten und die ent­schei­den­den Klicks machen. Folglich gilt es neben einer Erhöhung des Be­su­cher­auf­kom­mens ebenso, diese so­ge­nann­ten Con­ver­si­ons, in denen In­ter­es­sen­ten zu Kunden werden, gezielt her­vor­zu­ru­fen.

Eines wirkt sich besonders stark auf die Zahl dieser Um­wand­lun­gen aus: die Usability Ihrer Website. Je be­nut­zer­freund­li­cher Sie Ihre Seite gestalten, desto größer ist die Er­folgs­chan­ce. Oftmals bleiben ge­wünsch­te Con­ver­si­ons aus, weil der Großteil der Besucher die ent­spre­chen­de Schalt­flä­che schlicht­weg übersieht. Eine in­ter­es­san­te Mög­lich­keit, um die Nut­zer­freund­lich­keit des eigenen Web­pro­jekts zu ana­ly­sie­ren, ist die Durch­füh­rung einer so­ge­nann­ten Heatmap-Analyse.

Die Heatmap-Analyse stellt eine spezielle Form der Un­ter­su­chung dar, um User und ihr Website-Verhalten zu ana­ly­sie­ren. Zu diesem Zweck wird eine Heatmap (dt. „Wärme-Karte“) erstellt, die das Verhalten der Website-Besucher mithilfe ver­schie­de­ner Farben vi­sua­li­siert und somit die Stärken und Schwächen der Web-Usability der ge­tes­te­ten Seite aufzeigen kann. Wie bei einer Wär­me­bild­ka­me­ra stehen die Farben für un­ter­schied­li­che Tem­pe­ra­tur­ab­stu­fun­gen: Die klas­si­sche Heatmap besteht aus den Farben Rot (heiß), Gelb (warm) und Blau (kalt). Ab­stu­fun­gen wie Orange (mit­tel­heiß) oder Grün (kühl) bilden die Übergänge zwischen den einzelnen Wär­me­stu­fen.

Heatmaps sind kei­nes­wegs eine Erfindung des On­line­mar­ke­tings. Schon im 19. Jahr­hun­dert ver­öf­fent­lich­te der Pariser Sta­tis­ti­ker Toussaint Loua eine ta­bel­la­ri­sche Übersicht der Pariser Stadt­tei­le, in der spezielle Merkmale der Be­völ­ke­rung zunächst noch in Schwarz-Weiß, später auch farblich un­ter­schie­den wurden. Heute sind die nütz­li­chen Vi­sua­li­sie­run­gen nicht nur in der Web­ana­ly­se, sondern zum Beispiel auch bei der Prä­sen­ta­ti­on von Wet­ter­kar­ten, in der En­er­gie­be­ra­tung oder bei der Analyse von Fuß­ball­spie­len gefragt.

Die vor­aus­sicht­li­chen Tem­pe­ra­tur­wer­te des morgigen Tages er­schei­nen auf Basis si­mu­lier­ter Daten in einer Heatmap zu­sam­men­ge­fasst. Bei den Laufwegen der Fuß­ball­spie­ler liegt die Quelle für die Vir­tua­li­sie­rung in Werten, die über GPS-Tracking gewonnen werden. In Sachen Website und Be­su­cher­ver­hal­ten stellt sich jedoch schnell die Frage, woher hier die In­for­ma­tio­nen für eine aus­sa­ge­kräf­ti­ge optische Dar­stel­lung kommen. Dies geschieht durch diverse Tracking-Me­cha­nis­men, die bestimmte Aktionen der User erfassen, wobei es vor allem die folgenden vier Methoden zu un­ter­schei­den gilt.

Klick-Tracking

Eine weitere effektive Mög­lich­keit, um das Verhalten der User fest­zu­stel­len, ist die Auf­zeich­nung und Analyse der Maus­klicks. Dabei geht es vor allem darum fest­zu­stel­len, welche Links, medialen Inhalte oder Me­nü­punk­te besonders häufig an­ge­klickt werden. Gleich­zei­tig lassen sich aber auch Er­kennt­nis­se über In­ter­es­sen an Bereichen des Web­an­ge­bots gewinnen, die über keinerlei funk­tio­na­len Hin­ter­grund verfügen. Oft klicken Nutzer auch in diese Bereiche – teilweise unbewusst, teilweise aber auch, um z. B. Text­pas­sa­gen zu markieren oder zu kopieren. Um die Klicks der Nutzer zu re­gis­trie­ren, fügt man dem Quellcode der Website einen so­ge­nann­ten Event-Handler hinzu, weshalb man auch von Event-Tracking spricht. Dieser Er­eig­nis­ver­wal­ter weist den einzelnen Elementen und Po­si­tio­nen eine ein­deu­ti­ge Objekt-ID zu, mit deren Hilfe die genutzte Analyse-Software die User-Klicks zuordnen kann.

Das End­ergeb­nis erhalten Sie in der Regel nicht als Heatmap prä­sen­tiert, sondern als so­ge­nann­te Clickmap. Diese Vi­sua­li­sie­rungs­form zeigt punkt­ge­nau, wo ein Nutzer geklickt hat. Dabei können die Punkte abhängig von dem gewählten Tracking-Anbieter bzw. der ver­wen­de­ten Software auch in ver­schie­de­nen Farben dar­ge­stellt werden, um Be­su­cher­ty­pen zu un­ter­schei­den. So ist z. B. eine Ein­ord­nung nach Her­kunfts­sei­te oder eine Dif­fe­ren­zie­rung von neuen und wie­der­keh­ren­den Besuchern möglich. Eine weitere Mög­lich­keit sind Clickmaps, die in Zahlen prä­sen­tie­ren, wie oft Ihre User einzelne Links an­ge­klickt haben. Schließ­lich ist aber auch die the­ma­ti­sier­te Heatmap ein mögliches An­zei­ge­for­mat.

Scroll-Tracking

Wenn Sie ein Web­pro­jekt betreiben, das sich durch besonders lange Beiträge aus­zeich­net, kann sich Scroll-Tracking als erst­klas­si­ge Lösung erweisen, um die Wirkung dieser um­fang­rei­chen Seiten zu testen. Denn während ge­wöhn­li­che Web­ana­ly­se-Tools Ihnen zwar verraten, wie lange sich ein Nutzer auf einer be­stimm­ten Seite auf­ge­hal­ten hat, geben sie keinerlei Auf­schluss darüber, ob er auch bis zum Ende gescrollt oder nur den oberen Bereich wahr­ge­nom­men hat. Diese so­ge­nann­te Scroll-Tiefe kann ein wichtiges Kenn­zei­chen dafür sein, wie gut Ihre Inhalte bei den Website-Besuchern ankommen. Ver­zeich­nen Sie beim Scroll-Tracking un­ver­hält­nis­mä­ßig schlechte Werte für die unteren Ab­schnit­te, kann das ein Zeichen dafür sein, dass die all­ge­mei­ne Qualität von Texten und anderen Inhalten ver­bes­se­rungs­wür­dig oder die Länge nicht optimal gewählt ist.

Das Tracking der Scroll-Ak­ti­vi­tä­ten der User funk­tio­niert auf jeder Seite mit normaler Scroll-Funktion. Ähnlich wie das Click-Tracking nutzen Sie zu diesem Zweck Events, indem Sie den einzelnen Sei­ten­ab­schnit­ten jeweils spe­zi­fi­sche Objekt-IDs zuweisen bzw. zuweisen lassen. Stan­dard­mä­ßig sind die Er­geb­nis­se der Scroll-Tracking-Analyse in einer ta­bel­la­ri­schen Übersicht und in Prozent angezeigt. Auf diese Weise erfahren Sie z. B. genau, wie viele Ihrer User die jeweilige Seite zu 25, 50, 75 oder 100 Prozent gesehen haben. Auch die Vi­sua­li­sie­rung mithilfe der Heatmap-typischen Farb­ver­läu­fe ist möglich – beginnend mit Rot für den Start­punkt und Blau für den am wenigsten wahr­ge­nom­me­nen Bereich der Seite. Die Er­geb­nis­se können sowohl den Anstoß dafür geben, die Po­si­tio­nie­rung wichtiger Elemente zu über­den­ken als auch einer grund­sätz­li­chen Prüfung Ihres Content-Konzepts dienen.

Mouse-Movement-Tracking

Um her­aus­zu­fin­den, in welcher Rei­hen­fol­ge ein Besucher die Bereiche Ihres Web­an­ge­bots wahrnimmt, bietet sich die Ge­ne­rie­rung einer Mouse-Movement-Heatmap an. Diese Vi­sua­li­sie­rungs­form des Nut­zer­ver­hal­tens basiert nicht auf den Au­gen­be­we­gun­gen, dem Scroll-Verhalten oder den Klicks, sondern auf den Be­we­gun­gen, die der jeweilige Nutzer mit seiner Maus ausübt. In der Regel liefern diese nämlich ein sehr genaues Bild, welche Bereiche sich ein User zu einem be­stimm­ten Zeitpunkt an­ge­schaut hat. Wie auch das Eye-Tracking bedarf diese Ana­ly­se­me­tho­de natürlich der kom­plet­ten Auf­zeich­nung einer Nutzer-Sitzung. Al­ler­dings benötigen Sie keine besondere Hardware, sondern nur eine geeignete Software-Lösung, die Sie bei der Aufnahme und Aus­wer­tung der Be­we­gun­gen un­ter­stützt.

Es exis­tie­ren ver­schie­de­ne tech­ni­sche Mög­lich­kei­ten, eine Heatmap zu erzeugen, die sich vor allem in der In­ten­si­tät und den Tracking-Methoden, die Ihnen zur Verfügung stehen, un­ter­schei­den. Das spiegelt sich natürlich auch im Preis wider, weshalb die Suche nach dem ge­eig­ne­ten Werkzeug für die Analyse des Nut­zer­ver­hal­tens in erster Linie eine Kos­ten­fra­ge ist.

• Skripte und Plug-ins: Mithilfe von Skripten und Er­wei­te­run­gen für Ihr CMS, die Sie auf dem eigenen Server ausführen, haben Sie die volle Kontrolle über die Auf­zeich­nung von Maus­be­we­gun­gen und Klicks. Mit dem not­wen­di­gen Know-how lassen sich solche Tracking-Lösungen sogar selbst pro­gram­mie­ren. Al­ter­na­tiv können Sie auf fertige Werkzeuge wie heatmap.js zu­rück­grei­fen. Die Ja­va­Script-Bi­blio­thek liefert Ihnen die not­wen­di­ge Basis inklusive einer sehr aus­führ­li­chen Do­ku­men­ta­ti­on, um mit wenigen Zeilen Code Mouse-Tracking für Ihr Web­pro­jekt zu kon­fi­gu­rie­ren, um an­schlie­ßend mithilfe der auf­ge­zeich­ne­ten Daten eine Heatmap zu erzeugen. Für die Nutzung entstehen keinerlei Kosten, al­ler­dings sind die Res­sour­cen von Webserver und Datenbank infolge des Trackings zu­sätz­lich gefordert.

• Heatmap-Si­mu­la­tio­nen: Wenn Sie einer um­fang­rei­chen Analyse aufgrund des hohen Kosten- und Zeit­auf­wands eher abgeneigt sind, kann eine Tracking-Si­mu­la­ti­on für Sie die geeignete Wahl dar­stel­len. Ver­schie­de­ne Anbieter of­fe­rie­ren On­line­ser­vices wie zum Beispiel EyeQuant oder Feng-GUI, die das po­ten­zi­el­le Verhalten Ihrer Besucher auf Basis von Daten, Al­go­rith­men und Er­fah­rungs­wer­ten si­mu­lie­ren. Sie laden zu diesem Zweck einfach nur einen Screen­shot der zu testenden Seite hoch und erhalten innerhalb kürzester Zeit die ent­spre­chen­de Heatmap prä­sen­tiert.

• Kos­ten­pflich­ti­ge Heatmap-Analyse-Tools: Wenn Sie eine pro­fes­sio­nel­le Vi­sua­li­sie­rung des Nut­zer­ver­hal­tens benötigen, die weder Ihre Pro­gram­mier­küns­te be­an­sprucht, noch auf theo­re­ti­schen Werten aufbaut, werden Sie im Netz ebenfalls fündig. Diverse kos­ten­pflich­ti­ge Web­diens­te bieten eigene Ja­va­Script-Programme zur Auf­zeich­nung an und über­neh­men darüber hinaus auch die Aus­wer­tung der Daten. Sie buchen einzig ein Abon­ne­ment nach Wahl, binden die ent­spre­chen­den Code­zei­len in Ihr Web­pro­jekt ein und de­fi­nie­ren, was getestet werden soll. Je nach Anbieter stehen Ihnen nach der Durch­füh­rung des Trackings (oder auch in Echtzeit) Vi­sua­li­sie­run­gen von User-Klicks, Maus­be­we­gun­gen oder Scrolling-Ak­ti­vi­tä­ten zur Verfügung. In­ter­es­san­te Beispiele mit um­fang­rei­chen Heatmap-Analyse-Angeboten sind Crazy Egg, Clicktale und Mouseflow.

Indem Sie Heatmaps erstellen, um Nutzer und ihr Website-Verhalten zu ana­ly­sie­ren, können Sie wertvolle Er­kennt­nis­se über die Funk­ti­ons­fä­hig­keit und Nut­zer­freund­lich­keit von Layout und Design gewinnen. Al­ler­dings gilt es, wie so oft bei der Web­ana­ly­se, die Er­geb­nis­se im richtigen Kontext ein­zu­ord­nen und zu bewerten. Denn während Sie zwar recht aus­sa­ge­kräf­ti­ge Eindrücke davon erhalten, wie oft ein Link an­ge­klickt wurde, verrät eine Heatmap Ihnen nicht, ob der Nutzer nach dem Klick auch das gefunden hat, was er gesucht hat. Auch die Be­weg­grün­de für den Mausklick (Plat­zie­rung oder Auf­fäl­lig­keit des Elements, Zufall) bleiben Ihnen verborgen.

Aus diesem Grund sollten Sie eine Heatmap-Analyse immer auch mit anderen Daten ver­knüp­fen. Ins­be­son­de­re die Ab­sprungra­te oder die Ver­weil­dau­er auf der ver­link­ten Seite sind hierbei zu nennen. Eine hun­dert­pro­zen­tig zu­ver­läs­si­ge Aussage darüber, ob ein be­stimm­tes Element Ihres Web­pro­jekts die ge­wünsch­te Usability besitzt, erhalten Sie letztlich aber nur, indem Sie Ihre Besucher direkt befragen.

Eine weitere Schwach­stel­le offenbart sich bei Websites mit einem geringen Be­su­cher­auf­kom­men: Je geringer der Traffic Ihrer Seite ist, desto weniger Aus­sa­ge­kraft haben die Er­geb­nis­se der Heatmap-Analyse und desto größer ist die Chance einer Fehl­in­ter­pre­ta­ti­on – ähnlich wie es z. B. auch beim A/B-Testing der Fall ist. Da jeder Besucher in der Be­ur­tei­lung und Nut­zungs­wei­se Ihrer Web­prä­senz un­ter­schied­lich ist, benötigen Sie eine Fülle an Daten, die über einen längeren Zeitraum gesammelt wurden, um am Ende auch von einem ein­deu­ti­gen Trend sprechen zu können. Pro­ble­ma­tisch ist der Einsatz von Heatmaps darüber hinaus bei dy­na­mi­schen Web­pro­jek­ten, deren Inhalt sich re­gel­mä­ßig ändert. Sie können sich bei der Analyse zwar auf po­si­ti­ons­treue Elemente wie Na­vi­ga­ti­ons­leis­ten kon­zen­trie­ren, können den Einfluss des sich ändernden Contents al­ler­dings nur schwer messen.

Wenn Sie wissen wollen, an welcher Stelle Ihrer Web­prä­senz der wich­tigs­te Content stehen sollte oder in welche Bereiche und Elemente Sie besonders viel Mühe stecken sollten, kann eine Heatmap-Analyse Ihnen die passenden Antworten liefern. Dank der Vi­sua­li­sie­rung des Be­su­cher­ver­hal­tens bleibt es nicht bei ober­fläch­li­chen Daten wie der absoluten Ver­weil­dau­er oder ob eine Con­ver­si­on erzielt werden konnte oder nicht. Die Er­geb­nis­se von Klick-Tracking, Eye-Tracking, Mouse-Movement-Tracking und Scroll-Tracking geben de­tail­liert Auskunft darüber, wie Ihr Web­an­ge­bot wahr­ge­nom­men und genutzt wird. Kom­bi­nie­ren Sie die Er­kennt­nis­se, die Sie aus erzeugten Heatmaps gewonnen haben, mit ge­wöhn­li­chen Web­ana­ly­se-Methoden, haben Sie eine große Chance, Ihre Con­ver­si­on-Rate zu erhöhen.