Um eine Website in der Tiefe zu überprüfen, werden oft lokal installierten Browser und ggf. auch eigens zu Testzwecken aufgesetzte virtuelle Systeme verwendet. “Echte Livetests” umfassen dabei nicht nur die Ansicht der Seite(n), sondern neben reinem Klicken auch vor allem die Funktionstest der Kenrprozesse.  Bei nicht zur Verfügung stehenden Systemen aber bleibt meist nur die Kontrolle anhand von Bildschirmfotos einzelner Seiten – oft leider nur der Startseite -, die mit Diensten wie browsershots.org erstellt werden.

Da die Geschwindigkeit und Zuverlässigkeit dieser Dienste aber i. d. R. deutliche Grenzen haben, kann auf diese Weise nur sehr rudimentär und zeitraubend kontrolliert werden, ob die Website auch auf anderen Systemen und in fremden Browsern “schmeckt”. Findet man einen Fehler und muss in mehreren Schritten seine Korrekturen erneut auf diesem Weg kontrollieren, steigt der Zeitaufwand nocheinmal um das Vielfache an. Kein Wunder also, dass man sich (beruhigt durch die geringen Zahlen einzelner exotischer Kombinationen aus der Webanalyse) lieber auf vielvesprechendere Optimierungsmaßnahmen konzentriert. Ein Webdienst von Adobe kann hier ein wenig Abhilfe schaffen - selbst, wenn man sonst keine (installierten, kostenpflichtigen) Produkte des Herstellers einsetzt. Unter browserlab.adobe.com kann jeder, der eine Adobe-ID besitzt (die auch Zugang zu den anderen “CS Live”-Diensten im Web gewährt) seine Website in mehreren Browsern auf Windows- und Mac-Basis testen. Die Registrierung für eine ID ist derzeit bis Ende April 2011 frei möglich; der kostenfreie Zugang zum Browserlab ist limitiert… allerdings für ein volles Jahr. Für einen Test reicht es also problemlos.

Kontrolle in verschiedenen Windows- und OS X – Browsern

Es wäre zwar wünschenswert, dass die Auswahl von Browsern und Systemen noch erweitert wird, denn derzeit reicht das Angebot lange nicht die Tiefe von browsershots.org, aber dafür können mehrere Seiten nacheinander sehr zügig abgerufen werden, so dass man deutlich tiefer kontrollieren und eine Menge Zeit sparen kann.  Dennoch ist die Kontrolle für die bestehenden Browser in der sehr angehehm bedienbaren und an die Desktop-Produkte erinnernde Oberfläche mehr als sinnvoll, wenn man keinen echten Mac und Windows-PC einsetzen kann. Und selbst dann sind die Vergleichsfunktionen eine effiziente Erleichterung, wenn nicht nur Stabilität, sondern möglichst eine identische Darstellung das Ziel sein sollte. Aktuell stehen folgende Kombinationsmöglichkeiten zur Verfügung:

Praktisch: Aus dieser Liste lassen sich unter “Browsersätze” verschiedene Auswahlen speichern, die zu unterschiedlichen Zwecken (z. B. “Schnelltest”, “Tiefentest” etc.) schnell aktivieren lassen. Ist ein Satz unter “Testen” aktiviert und wird eine Adresse eingegeben, lädt der Dienst Bildschirmfotos der angeforderten Seite und zeigt diese an. In der Wartezeit sehen Sie, wenn für einen bestimmten Browser bereits eine Darstellung vorliegt, Ein Klick aktiviert die Ansicht der Website anhand des Bildschirmfotos.

“Navigation” zwischen den Seiten

Da es sich um Grafiken handelt, ist eine echte Navigation durch Klicken nicht möglich… oder besser: eigentlich nicht. Denn wer den Dienst z. B. direkt aus Adobe Weaverslave heraus nutzt, kann durch einen Trick dennoch durch Klick auf einen Link die Seite wechseln. Aber auch ohne diese Erleichterung können Links z. B. schnell aus einer Liveansicht in einem weiteren Tab kopiert werden, wenn Seitenadressen zu komplex sind, um sie schnell selbst in die Adresszeile von Browserlab einzugeben. Die angeforderte Seite wird dann wiederum zügig in der aktuellen Ansicht geladen und die Kontrolle kann fortgesetzt werden. Selbst wenn es sich also nicht “anfühlt” wie ein echter Browser und logischerweise auch Interaktivität per JavaScript etc. nicht in einen Test einfließen können, ist das deutlich mehr, als andere Dienste derzeit – vor allem in einer vergleichbaren Geschwindigkeit – möglich machen.

Vergleich mehrerer Browser

Dank breiter Bildschirme ist es zudem meistens kein Problem, zwei “Browserfenster” nebeneinander zu betrachten. Das ermöglicht z. B. mit Hilfe von Linealen oder auch eines parallel in beiden Browsern an der gleichen Position angezeigten Cursors eine sehr genaue Kontrolle der Platzierung und Dimensionen einzelner Elemente.

Das geht besonders schnell durch Hotkeys, mit deren Hilfe man zwischen Einzel- und Doppelansicht umschalten, den Cursor einblenden, den Browser wechseln und einige andere hilfreiche Funktionen schnell aktivieren kann. Die Liste der Abkürzungen kann über den Link “Hotkeys” oben rechts eingeblendet werden. Dort ist auch eine sehr überschaubare Hilfe zu finden.

Ebenfalls per Hotkey – oder über die Auswahlliste “Ansicht” kann eine Überlagerung zweier Versionen einer Seite gewählt und deren Aussehen gesteuert werden. Wer genau hinsehen will, kann zusätzlich einen Zoomfaktor wählen.

Die Kombination dieser Funktionen erlaubt schon heute eine Menge sehr sinnvoller und vor allem schneller Kontrollen, wenn entsprechende “echte” Systeme nicht zur Verfügung stehen. Wenngleich man sich dabei allein auf das Layout beschränken muss und nicht auch Funktionen testen kann, hat zwar auch Browserlab seine Grenzen, aber sicher kommen im Lauf der Zeit noch ein paar hilfreiche Funktionen hinzu, die den Dienst weiter aufwerten. Da ein ausgiebiger Test ohne Kosten möglich ist, besteht kaum ein Grund, warum Webmaster, die sich mit der Browserstabilität Ihrer Website befassen wollen, nicht darauf zurückgreifen sollten. Oder vielleicht doch? Kennen Sie vergleichbare oder auch bessere Dienste? Kommentare als Ergänzung sind jederzeit willkommen!

Ein “Disclaimer” muss her…

Vorab: Unabhängig davon, dass die Ergebnisse zweifelsfrei ordnungsgemäß erhoben wurden und die große Darstellung des Verlaufs daher auf zuverlässigen Zahlen beruht, ist der mit einer überlagerten Grafik zu gewinnende Rückschluss aus diesen allgemeinen Daten auf einzelne, konkrete Websites bestenfalls etwas mehr als  gutes  “Raten”.  Denn zu unterschiedlich sind denkbare Layouts, die den untersuchten Bereich benutzen. Erschwerend kommt hinzu, dass auf jeder Seite die Zusammenstellung des Inhalts i. d. R. zu ganz eigenen Verteilungsverhältnissen führt und auch die individuelle Erfahrung des einzelnen Besuchers mit dem Web im Allgemeinen und der jeweiligen Website im Speziellen eine Rolle spielen. Daher ist ein Raster für die Aufmerksamkeit deutlich weniger zuverlässig als z. B. an anderer Stelle vorgestellte Werkzeuge wie BrowserSize o. Ä.

Dennoch ist die Idee, die Werte aus der Untersuchung in einen grafisch nutzbaren “Aufmerksamkeitsfilter” zu verwandeln und über die Inhalte einzelner Websites zu legen, einfach zu verlockend… und außerdem ist so zumindest eine einfache Visualisierung der jeweiligen Zonen im Kontext der eigenen Inhalte möglich. Welche Schlüsse daraus für den Einzelfall gezogen werden können, mag jedem selbst überlassen sein und eigene Erfahrungen mit diesem “Werkzeug” stehen freilich noch aus…

Der Verlauf als Graustufenbild

Da es nicht auf die Stelle nach dem Komma (und auch nicht wirklich auf exakte Werte davor) ankommt, wurden die Werte zunächst in Graustufen umgesetzt. Sprich: Der Bereich mit der meisten Aufmerksamkeit bekommt ein fast reines Weiß zugeordnet und i. A. des Kurvenverlaufs entstehen dann weitere Grauflächen. Aus der Grafik im Alertbox-Beitrag entstehen so in etwa folgende Stufen, wenn man nur ca. 5% “Schwärzung” für die größte Aufmerksamkeit verwendet und dann bis zu ca. 85% einschwärzt. Der Verlauf sieht dann in etwa so aus:

Über eine Webseite gelegt, kann man hiermit bereits die einzelnen Zonen erkennen. Unschön ist allerdings, dass die harten Übergänge unnötige Linien erzeugen – und schließlich hat sich die reale Verteilung ja auch nicht in 100 Pixel-Schritten verändert.

Horizontaler “Aufmerksamkeitsfilter” als Grafik

Harmonisiert man diese Übergänge und behält den Grad der Schwärzung bei, ergibt sich ein recht anschauliches Bild, welches mit den o. g. Einschränkungen als weitere Perspektive dient, unter denen man seine Website oder z. B. einzelne Landingpages betrachten kann:

Wer sich selbst ein Bild anhand der eigenen Site machen möchte, kann die verwendete Grafik hier herunterladen. Da nicht jede Website mit den eingesetzten Graustufen besonders gute Ergebnisse liefert, gibt es auch noch eine rote und eine blaue Fassung des “Aufmerksamkeitsfilters” (rote bzw. blaue Variante für Amazon-Beispiel). Alle drei Versionen als transparente png-Dateien im Format 1100 x 810 Pixeln und eine GIMP-Datei mit allen Varianten und dem Amazon-Beispiel können hier gepackt (ZIP < 0,5 MB) heruntergeladen und in Grafikprogrammen wie z. B. GIMP, Photoshop etc. als neue Ebene über ein Abbild der zu untersuchenden Webseite gelegt werden. Die Anpassung der Grafik in der Höhe ist dabei unkritisch – in der Breite verwässert man die Aussagekraft bei Skalierung allerdings noch weiter.

“Typische” Optimierung der Conversionrate

Conversionoptimierung wird mittlerweile auch in “kleineren” Shops ernstgenommen. Oft deswegen, weil steigende Klickpreise den Betreiber dazu zwingen, sich mit der Effizienzsteigerung seines Shopsystems auseinanderzusetzen. Und weil viele Shopbetreiber sich in mehr oder weniger engen Grenzen hinsichtlich der Funktionalität des eingesetzten Standard-Shopsystems bewegen,  ist der erste (und oft nicht schlechteste) Ansatzpunkt meistens die Produktdetailseite…

Tests unterschiedlicher Varianten des folgenden Checkoutprozesses in Form von zusammengefassten, entfallenen oder umgestellten Prozess- Schritten, reduzierten Formularen oder unterschiedlich platzierten Zusatzoptionen zum Cross- und Upselling hingegen scheitern hier meistens an mangelnder einfacher und kostengünstiger Umsetzbarkeit. Wie sieht es aber mit dem Schritt dazwischen aus? Ist da wirklich kein Spielraum mehr für Verbesserungen?

Was passiert nach dem Klick auf den Kauf-Schalter?

Ein kritischer Moment im Einkaufsprozess – und damit ebenso potentieller Ansatzpunkt zur Optimierung der Warenkorb-Konversionrate – erfolgt direkt nach dem Klick auf einen Kauf-Schalter; also ein Aktionselement auf der Produktdetailseite oder direkt aus der Kategorieübersicht. Was passiert als nächstes? Nicht immer ist dies dem Besucher auch wirklich klar und verschiedene Systeme handhaben diesen Punkt in durchaus unterschiedlicher Weise. Mit möglichen Ansatzpunkten zur Optimierung der Warenkorbanzeige – und der darauf folgenden Schritte – werden sich spätere Beiträge befassen; dieser Beitrag aber hat den Fokus auf dem Verhalten eines Shops direkt nach dem Klick.

Was soll eigentlich erreicht werden?

Idealerweise sollte der Besucher zunächst einmal klar vermittelt bekommen, dass die Aktion, die er durch seinen Klick initiiert hat, erfolgreich abgeschlossen wurde. Zudem muss klar werden, was als nächstes zu tun ist. Da dies nicht immer der direkte Gang zur Kasse sein muss, ist die direkte Anzeige des Warenkorbs nicht “automatisch” die beste Option.  Denn: Kauft der typische Benutzer mehr als einen Artikel, mag er sich von den ständigen Blicken in den Warenkorb beim Fortfahren gestört fühlen – mit negativen Folgen für den durchschnittliche Warenkorbwert und / oder die Abbruchrate. Aus diesem Grund gibt es mehrere Lösungsansätze, die entweder im Shop unveränderlich feststehen oder auch per Option für den Adminstrator wählbar sind.

Abgesehen von exotischen Lösungen oder technischen Varianten zeigt ein Shop hauptsächlich die folgenden Verhaltensweisen nach dem Ablegen eines Artikels im Warenkorb:

Direkte Anzeige des Warenkorbs

Der Warenkorb wird nach dem Klick direkt auf der nächsten Seite eingeblendet. Der Besucher sieht also in der Regel sofort, dass die Aktion erfolgreich abgeschlossen wurde (abhängig von der Übersichtlichkeit und dem Umfang des Warenkorbs) und wird mehr oder weniger gut in Richtung Kasse gedrängt. Ansatzpunkte zur Optimierung sind hier hauptsächlich (neben vielen funktionalen Aspekten der Warenkorbpflege wie Löschen etc. und dem Umfang des Warenkorbs) die Aktionsflächen zum Fortfahren mit dem Einkauf oder dem Gang zur Kasse.

Aktualisierte “Warenkorb-Kleinansicht” in Randspalte

Eine Warenkorbanzeige, die in der rechten oder linken Randspalte platziert ist, enthält eine aktualisierte Liste oder Anzahl der Artikel oder zumindest eine neue Summe der Bestellung. Diese Vorgehensweise hat den Vorteil, dass direkt weiter eingekauft werden kann. In der Regel ist es auch kein Problem für die meisten Anwender, einen solchen Link zum Warenkorb zu finden, wenn er in der Randspalte platziert ist -zudem befinden sich oft auch redundante Links zur Kasse, Warenkorb etc. an anderen Stellen oder in der Navigation. Hauptsächlich besteht die Gefahr bei dieser Maßnahme also nicht darin, dass der Einkaufswagen nicht mehr gefunden werden könnte. Vielmehr ist es denkbar, dass nicht ersichtlich ist, dass auch wirklich etwas nach dem Klick passiert ist. Zu unauffällig ist mitunter (wie in obiger Montage) die Anzeige des Mini-Warenkorbs und / oder zu subtil dessen Veränderung, so dass z. B. unnötigerweise mehrfach geklickt wird. Ebenso besteht nun die Notwendigkeit, dass sich der Besucher – jetzt oder später – selbst entscheiden muss, sich in die Schlange zu stellen und den Einkauf abszuschließen. Achten Sie also darauf, dass die Veränderung möglichst augenfällig ausfällt. Speziell wenn dies die einzige Aktion ist, die auf den Kauf-Klick folgt.

Da je nach Gestaltung einer Detailseite nicht immer gewährleistet sein kann, dass die Aufmerksamkeit des Besuchers auf diese Veränderung gelenkt wird, da der Fokus noch im Bereich des gerade geklickten Aktioinselements liegt, kann neben der Änderung von Farben auch zu unterschiedlichen Hilfsmitteln gegriffen werden:

Statusmeldung des Warenkorbs

Eine gut sichtbar oben im Hauptinhalt einer neu geladenen Seite platzierter Hinweistext, der zudem eine auffällige Formatierung aufweist, kann nicht nur eine klare Rückmeldung geben, sondern auch gleich Informationen zum Umfang des Warenkorbs und Links zum Kaufabschluss anbieten. Das Beispiel zeigt eine eher einfache Variante der Meldung. Oft sieht man diese auch durch einen Schalter Link zum Schließen der Meldung ergänzt. Das sieht zwar modern aus, hat aber den Nachteil, dass der Besucher sich dazu aufgefordert fühlt, diese Meldung auch wirklich zu bestätigen, obschon der ein- oder übergeblendete Bereich (Layer) auch von selbst verschwinden würde, wenn der Einkauf fortgesetzt wird.

Dieser Zwang ist nicht zuletzt auch darauf zurückzuführen, dass Meldungen dieser Art nicht immer eingebettet in eine Seite daherkommen, sondern mitunter tatsächlich aktives Bestätigen erfordern, weil ein Dialog (z. B. mit JavaScript) vom Browser über die Seite gelegt wird:

Solche Statusmeldungen als Dialog oder Popup sind weniger selten, als man denken mag und finden auch heute noch in großen Shops Anwendung. Je nachdem, wie hilfreich diese gestaltet sind (hauptsächlich inhaltlich), sind diese auch durchaus dazu geeignet, nicht nur die erforderliche Rückmeldung  zu geben sondern auch effektiv auf die möglichen nächsten Schritte hinzuweisen.

Auch “modernere” Mittel wie Animationen können wirkungsvoll dazu beitragen, dem Besucher sowohl das erforderliche Feedback zu seiner ausgelösten Aktion als auch die nötigen Hinweise zum weiteren Vorgehen zu geben.

Sonstige Optionen

Neben den vorgestellten Möglichkeiten, die hauptsächlich aus einer direkten Anzeige des Warenkorbs oder einer mal mehr und mal weniger “unterstützten” Anpassung einer Miniaturanzeige des Warenkorbs in einer Randspalte bestehen, gibt es noch andere Optionen. Nach einem Klick kann z. B. auf vorher nicht angezeigte Cross- oder UpSelling-Angebote verzweigt werden. Oder es werden Hinweise zur Lieferung, Verstärker wie Gratisangebote oder sonstige Inhalte angezeigt, die nach Ansicht des Betreibers noch vor dem “Verlassen” des Shops  – möglichst durch die Kasse – angezeigt werden sollten.

Alternative: Weg mit dem Warenkorb!

Wer einen Shop betreibt, in dem typischerweise nur ein Artikel gekauft wird (oder auch nur ein einziger Artikel angeboten wird), ist ein Warenkorb ggf. auch komplett überflüssig. In solchen Fällen führt ein Klick direkt zum nächsten Schritt des Checkout-Prozesses… oder es sind bereits alle erforderlichen Angaben direkt auf der Zielseite gesammelt worden, so dass ein Klick bereits zum Abschluss des Kaufs führt. Es besteht zwar in diesem Fall überhaupt keine Notwendigkeit, sich um Warenkorb-Conversions Gedanken zu machen; dennoch ist die Optimierung der Formulare auf der Zielseite und des folgenden Prozesses nicht unbedingt einfacher, als bei der Vorgehensweise mit Warenkorb. Grundsätzlich sollte man sich als Anbieter aber die Frage stellen, ob man einen Warenkorb nur deshalb anbietet, weil der Shop dies nun mal so vorsieht…

Was ist nun die beste Wahl?

Keine der Möglichkeiten ist hinsichtlich einer maximalen Ausschöpfung des möglichen “Erfolges” einer Website von sich aus optimal und den anderen damit überlegen. Zu unterschiedlich sind einerseits die Rahmenbedingungen wie Klientel, Angebot und individuelle Gestaltung des Shops, andererseits hängt der Erfolg nicht zuletzt von der verwendeten Kennzahl ab: Anzahl der Verkäufe, durchschnittlicher Bestellwert; einmalig oder periodisch betrachtet, Wechselwirkungen mit anderen Zielen der Website u. v. a. m.

Umso wichtiger ist es, nach Möglichkeit mehrere Varianten des Verhaltens und des Layouts / Designs auszutesten, wenn das Shopsystem dies zuläßt oder die Ressourcen / Mittel bestehen, diese Option nachzurüsten.  Auch derjenige, der keine Möglichkeit hat sich für eine Verhaltensweise des Shops zu entscheiden, sollte innerhalb der existierenden  Umsetzung versuchen, durch die oben genannten Parameter zu Platzierung, Layout und Design seiner Lösung ggf- vorhandene Ecken abzuschleifen und so die Rate derer, die den Weg zur Kasse antreten, zu optimieren.

Google zeigt die Auswirkungen unterschiedlicher Fenstergrößen auf die eigene Seite

Die zu Grunde liegenden Werte stammen vom Durchschnitt aller Nutzer bei Google. Diese sind zwar (derzeit) nicht nach geografischen oder anderen Kriterien filterbar und die Darstellung berücksichtigt wahrscheinlich auch nicht den Anteil der Nutzer, die Seiten mit mobilen Endgeräten betrachten, dennoch kann man sich damit sehr anschaulich einen Überblick  verschaffen, wo genau Inhalte sich ggf. bei einer nennenswerten Anzahl von Besuchern hinter einem Scrollbalken verbergen… und welche Inhalte dies sind.

Damit man dies bei einer Darstellung nutzen kann, die zentriert ausgerichtet ist, sollte man allerdings daran denken, dass das Design entweder temporär (z. B. für eine separate Testseite) linksbündig ausgerichtet werden oder der Browser so verkleinert werden muss, dass die Ergebnisse nicht durch linken Freiraum fehlinterpretiert werden. Auch ist zu beachten, dass spätestens bei der Verteilung in der Höhe des Browserfensters zu berücksichtigen ist, dass unterschiedlich hohe Werkzeugleistenbereiche dafür sorgen, dass es größere individuelle Abweichungen gibt als in vertikaler Richtung.

Wer sich aber damit – und der Einschränkung,  dass die hierüber zu “prüfenden” Seiten zwingend online sein müssen (lokale Dateien testet dieses Tool leider nicht) – abfinden kann, sollte sich einige seiner wichtigsten Seiten mit Google Browser Size ansehen. Ungeachtet der unvermeidlichen Ungenauigkeit in der Höhe des Sichtbereichs findet man so mitunter Seiten, die man inhaltlich umstellen oder straffen sollte, um dem Hauptinhalt auch bei kleineren Viewports ausreichend Aufmerksamkeit zu verschaffen…

Heapmap von 3M VAS

(Klick zum Vergrößern)

Der sich derzeit in einer offenen Betaphase befindliche Service dient zwar nur “nebenbei” auch als Werkzeug für Webdesigner und ist in der derzeitigen Fassung auch noch recht weit von einem leicht zu bedienenden Webservice entfernt, dennoch sind die Ergebnisse offenkundig nicht sehr weit von realen Eyetracking-Ergebnissen entfernt (mit den im letzten Artikel bereits beschriebenen und nicht unwesentlichen Einschränkungen). Der 3M VAS als Gesamtpaket soll nicht nur dazu dienen, Webseiten zu optimieren, sondern zielt viel allgemeiner auf die Aufmerksamkeitsverteilung (und Reihenfolge) für Bilder aller Art – z. B. Printwerbung, Plakate etc. – und auch Videos ab.

Regions + Reihenfolge lt. VAS

(Klick zum Vergrößern)

Im Test steht freilich “nur” die Analyse statischer Abbildungen zur Verfügung. Auch ist die derzeit erlaubte Dateigröße deutlich beschränkt und der Service “hakt” an einigen Stellen noch, so dass ggf. mehrere Anläufe erforderlich sind, bis die gewünschen Ergebnisse vorliegen… für die Beispielwebsite, die auch in den anderen Diensten unter die Lupe genommen wurde, und andere Testkandidaten sind die Ergebnisse aber durchaus brauchbar und lassen hoffen, dass der Service nach Fertigstellung nicht nur mehr Stabilität, sinnvolle Funktionserweiterungen und Flexibilität bei den Eingabeformaten liefern wird, sondern auch das Versprechen einlöst, kosteneffektiv zu bleiben (nicht nur im Vergleich zum realen Eyetracking, sondern auch zum Wettbewerb im Bereich der Simulation).

Da die Benutzung derzeit noch kostenfrei ist und Feedback und sinnvolle Verbesserungsvorschläge zum UI des Dienstes mitunter recht schnell umgesetzt werden, besteht eigentlich kein Grund, diesen Service nicht in Betracht zu ziehen. Die größte Einschränkung ist derzeit die Tatsache, dass die Ergebnisse nur in sehr geringer Auflösung vorliegen und nur per Copy/Paste aus dem Browser geholt werden können. Nicht nur in dieser Hinsicht, aber eben auch in Bezug auf die Präsentationsfähigkeit der Ergebnisse kommt derzeit kein Dienst an EyeQuant heran. Oder doch?

Eyetracking gehört zweifelsfrei zu den Methoden, die ganz besonders oft mit Benutzertests und Usability für Websites in Zusammenhang gebracht werden. Ungeachtet der Tatsache, dass je nach Durchführung des Tests nicht immer todsichere Schlussfolgerungen aus einer so erhaltenen Heatmap oder dem dahinter liegenden Zahlenmaterial gezogen werden können, ist Eyetracking ein extrem hilfreiches Werkzeug bei der Analyse bestehender Websites, Prozessen oder der Planung und Evaluierung veränderter Designs.

Dummerweise haben nicht nur das entsprechende Equipment und die damit verbundenen Dienstleistungen ihren Preis, sondern es kommen noch weitere Hürden wie die für möglichst aussagekräftige Ergebnisse erforderliche sorgfältige Vorbereitung, die Auswahl der Probanden, die Durchführung und Auswertung der Ergebnisse hinzu. Kein Wunder also, dass es einen gewissen Bedarf für Alternativen gibt, die sowohl günstiger als auch unkomplizierter und vor allem zeitsparender ausfallen.

Denn nicht nur kleine Budgets oder beschränkte Ressourcen, sondern vor allem der Faktor Zeit ein denkbarer Grund, warum man ggf. in bestimmten Fällen lieber auf ander Mittel zurückgreifen möchte. Sinnvoller Einsatz ist dort denkbar, wo Ergebnisse nicht nur schnell erwünscht sind, sondern auch die Möglichkeit bestehen soll, mehrere alternative Fassungen, die ggf. auf den Ergebnissen der ersten Studie basieren, unmittelbar einer Voruntersuchung zu unterziehen, – z. B. bevor diese im Rahmen eines Live-Experiments auf der Website oder echter Benutzertests zum Einsatz kommen.

Da zudem auch

• der Umfang einer “echten” Studie
• die konkrete Aufgaben- bzw. Fragestellung und vor allem
• das individuelle Vorwissen (sowohl im Bereich Web / Internet als auch ggf. im Themenumfeld der konkreten Site) der Probanden

massgebend dafür sind, ob die Schlussfolgerungen, die aus den Ergebnissen gezogen werden, auch wirklich mit der Realität übereinstimmen, kann es im konkreten Fall möglicherweise in der Tat simpler sein, sich “Annäherungswerte” oder zumindest Anhaltspunkte aus anderen Quellen wie der Simulation von Eyetracking-Studien zu besorgen und zunächst anhand dieser Daten zu versuchen, die richtigen Ansatzpunkte für relevante Verbesserungen auf der konkreten Seite zu finden. Schon im Beitrag zum Mouse-Tracking wurden einige Tools angesprochen, die in einem gewissen Rahmen genau dies leisten sollen. Hier soll es besonders um Systeme gehen, die als “Eyetracking-Alternativen” verstanden werden dürfen, ohne Eyetracking für alle denkbaren Anwendungsfälle ersetzen zu können.

EyeTracking-Simulatoren: Kleine Auswahl, deckungsarme Ergebnisse

Schaut man sich im Web nach Alternativen um, stößt man wahrscheinlich zuerst auf “Feng Gui“. Die Verwendung ist denkbar einfach: Es wird ein Bild hochgeladen und anschließend erhält man eine neue, einer Heatmap ähndelnden Grafik, die eine “Aufmerksamkeitsvorhersage” für die einzelnen Elemente bzw. Bereiche auf der Seite darstellt.

Aufmerksamkeit laut Feng Gui
(Klick zum Vergrößern)

Die Qualität der Ergebnisse ist allerdings sehr stark davon abhängig, welches Design man dem Tool präsentiert (und in welcher Größe). Tatsächlich ist der Anteil von Grafik und vor allem das gezeigte Motiv in der Regel offenbar weitaus stärker dafür verantwortlich, wie der prognostizierte Blickverlauf verläuft, als es in echten Eyetracking-Studien mit den gleichen Varianten nachvollziehbar wäre. So ist gerade für den Bereich Web das Tool zwar “nett”, aber i. d. R. wenig aussagekräftig, so dass man nur bei sehr wenigen (zumeist sehr aufgeräumten) Seiten allein von den Ergebnissen einer Feng Gui – Vorhersage zu konkreten Anpassungen verleiten lassen sollte. Entsprechende Beispiele sind auch direkt bei Feng Gui im Bereich FAQ zu finden. Wirklich positiv ist wohl unter dem Strich nur die Tatsache, dass die Nutzung kostenfrei ist.

Heatmap in EyeQuant
(Klick zum Vergrößern)

Nach einem ähnlichen Prinzip, wahrscheinlich aber auf weitaus umfangreicheren in Programmcode umgewandelten Modellen basierend, liefert EyeQuant dem zahlenden Benutzer nicht nur Heatmaps, die auf Abbildern einer Webseite oder einer realen Seite basieren, sondern auch Untersuchungen zur Wahrnehmung im ersten Augenblick sowie die Möglichkeit, vor der Analyse einzelne Bereiche wie den Warenkorbschalter, die Hauptüberschrift etc. zu definieren und für diese Regionen separat darzustellen, wie die Aufmerksamkeit für diese Elemente vom Durchschnitt der ganzen Seite abweicht.

Aufmerksamkeit in EyeQuant
(Klick zum Vergrößern)

Damit hat man nicht nur mehr Optionen, sondern für die meisten Fälle wohl auch validere Ergebnisse. Der Vergleich mehrer Durchläufe, Varianten oder auch Ergebnisse vollkommen unterschiedlicher Sites ist direkt im Browser möglich. Vor allem , wenn Ergebnisse eines ersten Tests dazu genutzt werden sollen, Varianten mit einer verbesserten Aufmerksamkeitsverteilung zu erstellen (z. B. mehr Sichtbarkeit für Handlungsaufforderungen, Aktionselemente etc.), bietet EyeQuant schnelle Ergebnisse, die sich in anschließenden Tests dann erproben lassen. Diese sind – zumindest in dem Umfeld, in dem die untersuchten Daten erhoben wurden – nach Herstellerangaben sehr nahe an echten Eyetracking-Ergebnissen. Trotzdem sollte man nicht vergessen, dass zu den Einschränkungen, die echtes Eyetracking bereits mit sich bringt, in einer solchen Simulation noch weitere Faktoren hinzukommen, die von Automaten nicht (oder nur sehr rudimentär) berücksichtigt werden können.

Blickverlauf in AttentionWizard
(Klick zum Vergrößern)

Ein weiterer, noch im Betastadium steckender Kandidat ist der AttentionWizard. Dieses Tool, liefert prinzipiell ähnliche Ergebnisse wie Feng Gui (also den Blickverlauf inkl. einer durch Zahlen erkennbaren Reihenfolge der Aufmerksamkeitspunkte), ist aber (wahrscheinlich) wesentlich genauer auf Webseiten als auf normale Grafiken zugeschnitten, da es aus einer der Landingpageoptimierung zu 110% verschriebenen Feder stammt. Aktuell kann in einer Betaphase nach Anmeldung eine Analyse pro Tag durchgeführt werden; bezahlte Varianten ohne Wasserzeichen und Volumenbeschränkung werden nach Abschluss der Tests verfügbar sein.

Update: 3M bietet mit VAS bald einen ähnlichen Dienst an – Infos dazu in einem separaten Beitrag.

Scrutinizer: Was liegt im Fokus?
(Klick zum Vergrößern)

Es gibt weitere ergänzende Produkte wie z. B. den Scrutinizer, welcher der direkten Analyse von Seiten dient – z. B. hinsichtlich der Frage, ob alle Elemente am rechten Platz sind oder Veränderungen nach einem Klick vielleicht vollkommen außerhalb der Wahrnehmung eines Benutzers liegen. Sicher sehr hilfreich, aber nicht zur Eyetracking-Simulation geeignet. Andere Produkte liegen wiederum näher an Mousetracking-Systemen und / oder basieren auf Interaktion mit echten Benutzern, so dass ein Vergleich mit “100% Eyetracking-Simulation” schwerfällt (wer andere Systeme kennt: Ein Kommentar wäre nett!).

Vergleicht man die Kandidaten anhand mehrerer Testwebsites / Grafiken, zeigt sich schnell ein enormer Unterschied in den Ergebnissen. Will man die “Genauigkeit” dieser Systeme weitergehend beurteilen, hilft nur der Vergleich mit Ergebnissen einer wirklichen Eyetracking-Studie zu konkreten Testfällen. Und auch dann hat man schlussendlich nur Anhaltspunkte zur Realitätsnähe der Systeme in Bezug auf die konkret untersuchten Seiten und deren Einsatzzweck, die sich nicht unbedingt in jeden Wirtschaftszweig, auf jede Website und alle denkbaren Ziele von Betreiber und Besucher übertragen lassen.

Gezwungenermaßen ungenauer als die Blickverfolgung?

Gründe, warum eine Simulation sich nicht mit dem Original messen kann, existieren reichlich. Da wäre z. B. der Kontext einer Seite. Echte Benutzer, die sich bis zu einer Produktdetailseite durchgeklickt haben, kennen den Rahmen, das Layout und den Aufbau einer Seite so z. B. bereits recht gut und blendet daher vieles schon im Vorfeld aus, während das System all diese Bereiche in die Analyse einbeziehen muss. Auch ist der Simulation weder bekannt, was auf der Seite genau für ein Ziel erreicht werden soll, noch ist die Aufgabe oder gar die Intention des “simulierten Benutzers” Teil der Berechnungen. Ob eine Überschrift inhaltlich ansprechend und relevant ist oder nicht… oder ob es sich überhaupt um eine Überschrift oder ein anderes hervorgehobenes Element handelt… wird ebenso vorerst wohl nicht zum Wissensschatz einer solchen Simulation gehören.

Verschiedene Besuchertypen (und deren typengemäß sehr unterschiedliches) Verhalten, die aktuelle Phase im Entscheidungsprozess, gerade zuvor besuchte andere oder ähnliche Seiten, Weberfahrung, Zielgruppenzugehörigkeit etc. sind weitere Faktoren, die in einer echten Studie je nach Ausprägung für sehr unterschiedliche Ergebnisse sorgen können; in einer Simulation aber weitestgehend unberücksichtigt bleiben. Während der Feind bei Studien oder der Auswertung von massenhaften Daten aus der Webanalyse also oft “Durchschnittswerte” heißt (was mitunter zu ausgesprochen unrichtigen Erkenntnissen führen kann), ist es im Fall der Simulation eher die “Nichtberücksichtigung” vieler Faktoren. Welche Methode die genaueren Ergebnisse liefert, ist dennoch nicht immer so einfach zu beantworten, wie es auf den ersten Blick scheinen mag.

Verbesserungen der Genauigkeit durch wählbare Eigenschaften von Benutzern, Zielgruppe und Aufgabenstellung sind außerdem denkbar und werden in einem gewissen Rahmen künftig für genauere Ergebnisse sorgen. Wo Simulation als Hilfmittel dient, z. B. zur zusätzlichen Absicherung bereits auf anderem Weg erlangter Erkenntnisse, ist der Einsatz sicherlich auch jetzt schon gerechtfertigt. Auch in allen Fällen, in denen eine aufwändigere Datenerhebung entweder nicht möglich oder (z. B. wirtschaftlich) nicht sinnvoll ist, sind Anhaltspunkte mit einer bekannten Unsicherheit allemal besser als reines Raten.

Ergebnisse direkt in Verbesserungen umwandeln?

Wer innerhalb einer Minute zu Ergebnissen kommen kann, auf die er bei einer echten Studie mehrere Wochen wartet und – Unterschiede in der Sicherheit der Ergebnisse ignorierend – gleich dazu übergeht, die Erkenntnisse gleich in Live-Veränderungen seiner Startseite, der Produktdetailseiten oder Landingpages für Kampagnen umzumünzen, kann böse Überraschungen erleben, die sich in rückläufigen Umsätzen oder verschlechterten Kennzahlen in der Webanalyse niederschlagen. Natürlich muss das nicht zwingend so sein – aber selbst dort, wo sicherere Hinweise darauf existieren, dass irgendetwas nicht so läuft, wie es gewünscht ist, müssen die resultierenden Veränderungen nicht immer automatisch auch Verbesserungen darstellen. Guidelines, BestPractices, Ergebnisse von realen oder simulierten Studien… alles sind schlussendlich nur “unscharfe” Wegweiser auf der Suche nach Optimierungspotential. Ob sich konkrete Maßnahmen aber im Rahmen einer Website wirklich in die richtige Richtung entwickeln, wird sich schlussendlich nur am realen Benutzer erweisen. Wer also keine Gelegenheit hat, echte User mit Testsystemen, Prototypen zu konfrontieren und dadurch mehr Sicherheit zu gewinnen, sollte wenigstens den letzten und eigentlich immer erforderlichen Schritt des Tests mit kontrollierten Besucherströmen auf der eigenen Website durchführen, bevor folgenschwere Anpassungen an wesentlichen Stellen der eigenen Website für 100% der Besucher wirksam werden.

Neben Aufmerksamkeitsvorhersagen in Form von Bilderanalysen oder simulierten Eye-Tracking-Studien, Fünfskundentests, Masenbefragungen und anderen Dingen, die in Zukunft sicher noch einige eigene Beiträge wert sind, stößt man vor allem auf Lösungen zum Klick- / und Mouse-Tracking, dem Verfolgen der Bewegung und / oder Aktion der Maus auf der eigenen Website. Einige dieser Dienste sind zumindest in einer Basisversion kostenfrei oder sehr preiswert und daher für einen ersten Einstieg besonders geeignet, im Leistungsumfang gibt es aber deutliche Unterschiede, die in gewisser Weise auch den daraus generierbaren Nutzen mitbestimmen.

Wozu selbst Mouse-Tracking nutzen?

Dieser Beitrag stellt einige der Dienste vor, die Sie nicht nur im Bundle mit der Auswertung durch eine professionelle Agentur erhalten, sondern auch in Eigenregie nutzen können. Ob und wenn ja mit welchem Anbieter Sie sich aber “allein” auf die Spur der Maus machen sollten, hängt aber schlussendlich nicht nur vom jeweiligen Preismodell ab, sondern vor allem davon, was Sie konkret mit dem System zu messen gedenken und wie viel Zeit Sie selbst in die Analyse der gewonnenen Daten investieren können. Ähnlich wie WebAnalytics sind Click- und Mouse-Tracking Werkzeuge, welche nicht “von sich aus nützlich” sind, sondern nur im Kontext von konkreten Fragen im Rahmen von Tests verschiedener Versionen einer Seite, einzelner Seitenelemente oder im Rahmen der Untersuchung von Trends und Ausreißern einen Wert entwickeln.

Sie können zwar durch die gezielte Beobachtung eines einzelnen Besuchers in einem solchen System auf Ihrer Warenkorbseite auf gravierende Probleme hingewiesen werden… die Regel ist dies aber nicht. Auch hängt der Nutzen davon ab, welche Stellen Ihrer Website Sie auf diese Weise näher betrachten oder ob Sie “nur” einzelne Besucher, oder auch konsolidierte Daten in Form von so genannten “Heatmaps” betrachten können, die auf der Auswertung vieler Besucher und deren Mausbewegungen, Scrollverhalten und / oder den erfolgten Klicks basieren. Klick-Tracking ist zudem nicht gleich Mouse-Tracking, sondern nur “verwandt” und in manchen Systemen wird beides – kombiniert oder einzeln – geboten, andere liefern nur eine bestimmte Variante. Ansichten, die auf mehr als einem Besucher basieren, können weitere Hinweise über die “Aufmerksamkeitsverteilung” auf Ihrer Website liefern, die mit der Auswertung reiner Web-Analytics-Daten nicht (oder besser: kaum) ermittelbar sind, da der Fokus nun auf dem Verhalten während der Betrachtung einer einzelnen Seite liegt. Systemen gelingt dies mit einer Unschärfe, über deren Höhe sicher für jeden Kandidaten einzeln diskutiert werden kann… dennoch darf vereinfacht auch hier der Grundsatz gelten: Lieber nur einen Teil der Wahrheit sehen, als sich ausschließlich mit der Eigensicht zu befassen. Das soll aber kein Freibrief sein, voreilig Schlüsse aus der Beobachtung weniger Sessions zu ziehen und dann Warenkorbdarstellungen, Produktdetailseiten oder den Bestellabschluss ohne weitere Tests und die erforderliche Rücksicht auf die eigenen Umsätze komplett umzustellen.

Einige Systeme im Überblick

Vorab: Die folgende Übersicht stellt weder einen echten Vergleich aller Funktionen dar (Hinweise zu vielleicht existierenden detaillierten Vergleichstabellen auf Funktionsebene als ergänzende Kommentare sind herzlich willkommen), noch sind darin wohl alle Systeme enthalten, die existieren oder vielleicht morgen schon neu im Web entstehen. Die Auflistung versteht sich also nur als Anregung für den Einstieg, wenn Interesse an diesem Thema besteht bzw. entsteht. Links zu Anbietern sind frei von Affiliatecodes; Kritik wurde im Vorfeld weder abgesprochen noch bezahlt

M-Pathy

Dass diese Liste weder nach Preis noch nach Funktionsumfang sortiert ist, wird sich im Verlauf noch zeigen. Dennoch ist die unter m-pathy.com beheimatete Lösung wohl so etwas wie die “Referenzklasse” im Bereich des Mouse-Trackings. Der klare Vorteil liegt im hohen Funktionsumfang… was allerdings auch bedeutet, dass eine professionelle Auswertung aller generierbarer Daten – und selbst die Implementierung der möglichen aufwändigeren Testszenarien – nicht nur eine optionale Leistung ist, sondern im vielen Fällen der bessere Weg zur maximalen Ausschöpfung der generierten “Rohdaten”. So kann z. B. auch eine detallierte Auswertung von Formularen erfolgen, die das Verhalten einzelner Benutzer (oder als Durchschnittswert) anhand von Bearbeitungsdauer einzelner Felder, erfolgten Korrekturen etc. recht genau wiederspiegeln kann. Darüber hinaus sind sowohl “Clickmaps” als auch “Movementmaps” (also die Mausbewegung) generierbar und es können einzelne der aufgezeichneten Sessions direkt im Browser abgespielt werden, wobei man lange Zeiten der “Untätigkeit” von Maus und Scrollrad nicht erraten muss, sondern erkennen und übergehen kann.

Nicht alle Funktionen lassen sich im Rahmen eines Testzugangs nutzen und die Demo beantwortet nicht alle denkbaren Fragen, aber dennoch lohnt sich ein Test sicher auch für den kleinen Webmaster – selbst, wenn das System und die damit verbundenen Leistungen vielleicht im Einzelfall das Budget sprengen mögen. Denn da der Fokus bei M-Pathy nicht auf Usern liegt, die das Tool dauerhaft und selbst einsetzen, ist der Nutzungspreis in einem PDF verborgen und auch auf den ersten Blick ganz schön happig: Im besten Fall bezahlt man derzeit knapp 300 Euro netto / Monat, wenn man ausgesuchte Daten einer Domain über ein ganzes Jahr auswerten will. Da der Einsatz aber in der Regel eher “projektweise” und inkl. Auswertung durch den Anbieter geschieht (damit nicht wie bei der Webanalyse nur Daten gesammelt, aber keine Schlüsse daraus gezogen werden), bietet sich M-Pathy ohnehin wohl nicht als Dauerlösung an, wenn man sich selbst (und allein) mit den Daten befassen muss. Verfügen Sie jedoch über interne Ressourcen, die sich mit WebAnalyse, Usability und / oder der Erprobung von neuen Inhalten oder Varianten befassen, erhalten Sie hier wahrscheinlich derzeit die meisten und wertvollsten Daten.

Crazyegg

Ein Anbieter, der sich ausschließlich mit Klicks befasst, ist crazyegg.com. Die (wenigen) Funktionen sind einfach im Browser zu nutzen und die direkt angebotenen Auswertungen sind im Rahmen der Möglichkeiten des Systems sinnvoll und anschaulich aufbereitet. Wem das nicht genügt,  kann Rohdaten exportieren und Filter nach Keywords, Referer etc. nutzen, um die Daten ansatzweise zu segmentieren.

Natürlich gibt es hier deutlich weniger zu sehen – und ggf. daraus zu lernen – als bei M-Pathy. Auch ein kostenloser Test auf der eigenen Domain wird nicht angeboten, dafür kann man in einer Demo aber alle bestehenden Kern-Funktionen (allerdings nicht das Dashboard oder die RSS- /Mail- oder benutzerdefinierten /Reportingfunktionen) anhand von Beispieldaten betrachten. Da die Preise bereits bei 9,– Dollar für 10 Seiten beginnen und der Account jederzeit monatlich kündbar ist, lohnt sich das Ausprobieren auf jeden Fall; gezahlt wird ausschließlich mit Kreditkarte.

Userfly

Wie so oft: wer den geringsten Umfang anbietet, hat auch die kleinsten Hürden. Bei Userfly (userfly.com) werden nur Einzelsessions aufgenommen und können auch nicht konsolidiert ausgewertet werden. Jede Session kann man einzeln im Browser abspielen und dabei Mausbewegungen und Klicks verfolgen. Es existiert auch keine “Bitmapversion” mit Linien und Klickpunkten o. Ä. für die jeweilige Sessions, so dass man sich schon alles ansehen will, wenn man etwas herauszufinden hofft. Die Darstellung ist je nach Codierung der Seite nicht immer 100% richtig und somit sind dargestellte Klicks nicht immer exakt auf dem richtigen Link… in der Regel ist das aber nicht tragisch.

Dafür kann in einem kostenlosen Account die Auswertung von 10 Sessions erfolgen, danach geht es ab 10,– Dollar / Monat für 100 Sessions los. Denken Sie aber daran, dass sich die 100 Sessions auch jemand anschauen muss, wenn Sie unbedingt Geld ausgeben wollen. Sinnvoll ist dies also auch hier wieder nur bei Vorhandensein entsprechender Ressourcen und vor allem dem Bedarf der Aufzeichnung von mehr Nutzen / Monat -z. B. weil man mehr als eine Seite untersucht. Die Anzahl der Domains ist zu diesem Zweck auch praktischerweise unlimitiert, so dass auch einzelne Seiten an beliebigen Orten in einen Test aufgenommen werden können. Exportieren kann man die Daten nicht; die Aufnahmen der Benutzer-Sessions wird zudem je nach Account nach 30 bis 90 Tagen gelöscht. Die Anmeldung ist simpel und man kann direkt anschließend ein und denselben Code auf beliebig vielen Seiten unterbringen. Dabei sind 10 Sessions / Monat zwar schnell verbraucht und durch die limitierte Speicherung kann man sich auch keinen Vorrat anlegen…. auf der anderen Seite spricht auch nur wenig dagegen, sich wenigstens testweise einmal ein paar User auf kritischen Seiten anzuschauen und auf Erkenntnisse zu hoffen. Oder zumindest zu beobachten, wie viele Besucher wohl tatsächlich auf der Seite scrollen; ein Formular ausfüllen, aber nicht absenden o. Ä.

Clickdensity

Deutlich umfangreicher ist das Angebot bei clickdensity.com: Heapmaps, Klickmaps, Hovermaps (also auch die Auswertung von nicht klickbaren Elementen) und ein kostenloser Account für eine einzelne Seite bietet vieles, was man bei M-Pathy auch bekommt; zudem ist die Oberfläche nicht ganz unähnlich Wer über den kostenlosen Account hinaus mehr nutzen will, kann ab knapp 4,– Dollar; gestaffelt nach Klicks, die ausgewertet werden, mehr buchen und die Nutzung ausweiten. Zur Formularmessung oder der Ansicht einzelner Sessions muss dann allerdings auf andere Mittel zurück gegriffen werden. Dafür können über dieses Tool auch A/B-Tests durchgeführt werden, was Clickdensity zu einer ansatzweise brauchbaren Alternative zum Google Website Optimizer für alle macht, die ein ideologisches Problem mit Google haben (wenn hingegen Datenschutz-Policies den Einsatz verbieten, wird auch Clickdensity kaum eine Lösung darstellen).

Vistrac

Irgendwo zwischen Analytics- und “Aktionstracking” liegt vistrac.com. Denn hier können nicht nur “normale” Analytics-Mertiken erhoben und ausgewertet werden, sondern z. B. auch das Klick- und Scrollverhalten von Usern – praktischerweise eben auch im Fall des Scrollens in konsolidierter Form über mehrere Besuche. Wer nur 10 Seiten tracken will und mit 500 Besuchern auskommt, bezahlt auch hier nichts im kleinsten Account. Ebenso kann man hier auch (wie bei m-pathy) “Formulare durchmessen”, was dieses Tool prinzipiell für jeden Shop (und jedes Kontaktformular) interessant macht.

Weitere Vertreter dieser Zunft von “Hybridlösungen” zwischen WebAnalytics und Klick- und oder Mousetracking finden sich z. B. unter clixpy.com und ebenso bei clicktale.com, wo Analytics und “Interaktionsverhalten” im weitesten Sinne in die Messungen und Auswertungen eingehen.

Serversysteme

Wer Daten auf dem eigenen Server sammeln will oder muss, kann sich nach Alternativen umschauen, die ohne Fremdanbieterbeteiligung auskommen. Auch in diesem Bereich gibt es Systeme, die nicht zwingend vom Anbieter installiert werden müssen und für hohe einmalige oder laufende Kosten sorgen… aber auch solche existieren selbstverständlich und haben Ihren Markt eher bei größeren Sites. Zu den Alternativen gehören Projekte wie z. B. SMT oder ClickHeat. Die Hürde für einen schnellen Einstieg und einen Test aus reinem Interesse liegt allerdings naturgemäß weitaus höher als bei einem Webdienst, der meistens über die simple Implementierung eines Tags in die betreffenden Seiten genutzt werden kann.

Datenschutz egal?

Nicht nur bei der Auswahl des Anbieters sollte man selbst in die Datenschutzbestimmungen des jeweiligen Dienstes schauen, sondern sich im Fall eines Einbaus in die eigene Webseite – und sei es nur zu Testzwecken – vor allem selbst um dieses Thema kümmern und dem Besucher der betroffenen Seiten mitteilen, dass ein Trackingwerkzeug eingesetzt wird. Da man dies für sein Web-Analytics-System ohnehin i. d. R. im Rahmen einer überall verlinkten Datenschutzbestimmung erledigt, sollten Sie also zumindest dort eine entsprechende Ergänzung unterbringen und vorzugsweise auch das oder die eingesetzten Systeme benennen, damit sich der interessierte oder besorgte Benutzer selbst weiter informieren kann.

Denn eine explizite Einwilligung des Besuchers in die Erfassung durch solche Systeme wird zumindest derzeit von keinem der Anbieter unterstützt, so dass Sie dies entweder selbst technisch im Rahmen Ihrer Website lösen oder zumindest eben fairerweise ansprechen sollten.

Einfach loslegen?

Es gibt also eigentlich kaum Argumente gegen die Einbindung solcher Tools, weil für fast jedes Zeit- und Kostenbudget eine passende Lösung zu finden ist. Das Hauptargument neben dem Datenschutz ist zugleich ein Aspekt, der gern vergessen wird: Performance. Genau wie bei der Auswahl eines ASP-Anbieters für das “normale” Tracking Ihrer Besucher zur WebAnalyse ist auch bei der Wahl eines solchen weiterführenden Systems zu bedenken, dass das jeweilige Tracking-Script aktiv mit dem Server des Anbieters kommuniziert und damit Lade- und Antwortzeiten beeinflusst. Es kann ganz sicher mehr als nur ärgerlich sein, wenn Sie durch den Ausfall eines Servers bei einem vermeidlich “kostenlosen” Anbieter zeitweise erhebliche Verzögerungen in den Bestellabschluss-Prozess einbauen, nur um vielleicht einige Besucher aufzuzeichnen und später einmal anzusehen… oder vielleicht auch nicht. Leichtfertig können Sie solche Tests also nur bei eher “unspannenden” Seiten machen, die nichts mit dem Umsatz zu tun haben, der über Ihre Website generiert wird. Alles andere erfordert  – wie so oft  – ein bewusstes Abwägen zwischen Kosten (aller Art) und Nutzen…

Haben Sie einen wirkungsvollen Spamschutz aber einmal implementiert, ist er kein Garant für ewige Ruhe vor Spam. Grundsätzlich sollten Sie einen Spamschutz auch nur dort einbauen, wo er wirklich gebraucht wird. Messen Sie zudem die Auswirkungen und versuchen Sie über verschiedene Varianten, ein möglichst gutes Verhältnis aus Schutz und Akzeptanz beim Besucher zu finden.

So genannte CAPTCHAS (Das Akronym “Completely Automated Public Turing Test To Tell Computers and Humans Apart”) sind seit vielen Jahren schon im Einsatz und haben inzwischen verschiedenste Formen angenommen. Während es zuvor mehr oder weniger gut erkennbare Bilderrätsel waren, werden heute verschiedenste Formen von kleinen Frage- und Antwortspielen veranstaltet, die auf Zufall (z. B. Zahlen- / Buchstabenkombinationen, simple Rechenaufgaben) oder auch den konkreten Angaben eines Benutzers in anderen Formularfeldern basieren.

Detailfragen zum Einsatz

Grundsätzlich ist an deren Einsatz auch nichts auszusetzen, denn in der Regel sind die Aufgaben ja (theoretisch) leicht lösbar und so sollte der Benutzer eines Formulars kaum gestört oder gar davon abgehalten werden, das Formular auch zu benutzen. Aber:

• Ist die Darstellung des verzerrten Bilderrätels auch wirklich noch (für den einzelnen, echten Besucher) zu erkennen?
• Weiß der Benutzer überhaupt, was man von ihm will und ist vollkommen klar, wie man das Rästel löst und seine Antwort geben kann?

Dann bleibt da noch die Frage nach dem “Warum“. Nicht jeder Besucher einer Site ist sich darüber im Klaren, dass der Betreiber sich hier nur vor Missbrauch des Formulars schützen will und keinen Intelligenztest veranstalten will. Und selbst wenn er den Sinn (er-)kennt, bedeutet es nicht, dass er es für angemessen hält…

Auch die Form der Rückmeldung nach einem Lösungsversuch kann durchaus entscheidend dafür sein, ob ein CAPTCHA nutzt oder schadet. Wie “verzeihend” (z. B. Groß- / Kleinschreibung, Einsatz von Leerzeichen etc.) ist die Website und was passiert, wenn die Antwort nicht stimmt?

Technische Unterschiede wie die Form des Rätsels (Audio, Video, Bild… wählbar oder vorgegeben?), Darstellung / Kontrast, Größe und inhaltliche Variablen wie Anbringung von Hinweisen, Platzierung etc. beeinflussen darüber hinaus die Akzeptanz eines Spamschutzes.

Ist der Einsatz wirklich erforderlich?

Diese Frage sollten Sie sich auf jeden Fall zuerst stellen, bevor Sie einen geeigneten Kandidaten wirklich in Ihre Website einbauen. Die Antwort kann für unterschiedliche Formulare durchaus  abweichend ausfallen: Im Kontaktformular brauchen Sie wegen tatsächlich stattfindender Angriffe vielleicht wirklich einen Schutz; bei der Bestellung des Newsletters hingegen möglicherweise nicht.

Grundsätzlich sollten Sie sich einer Tatsache deutlich bewusst sein: Solche Spamschutzmechanismen – auch die besten, effektivsten und einfachsten – lassen den Umfang der Formulare anwachsen, bilden eine mal mehr und mal weniger große Hürde für den einzelnen Anwender und haben in der Regel einen direkten (negativen) Einfluss auf die Abschlussrate des jeweiligen Prozesses.

Bedenken Sie also erstens die Konsequenzen und messen Sie vor allem den Erfolg: Erhalten Sie z. B. normalerweise täglich 20 Anfragen über Ihre Website, von denen 5 potentieller Spam sind und wird nach Installation des Spamschutzes zwar kein Müll mehr in den Postfächern gefunden, dafür aber auch keine 10 Anfragen / Tag, hat sich die Maßnahme ganz sicher nicht gelohnt – lieber löschen Sie 5 Mails am Tag und nutzen das höhere Potential an Anfragen für mehr Umsatz.

Überhaupt sollten Sie beim Einsatz eines Spamschutzverfahrens – wie so oft, wenn es um das Thema “Conversions” geht – ruhig einmal mehrere Varianten austesten. Verschiedene Platzierungen, zusätzliche Hinweise, Größen, Grade der Verzerruung der Bilder bei Grafik-CAPTCHAs etc. sind gute Ansatzpunkte, um eine Variante zu finden, die möglichst viel der erwünschten Nutzer auch wirklich noch “durchlässt”.

Auch sind nicht alle Spamschutzmittel gleich wirksam, denn auch die Spammer schlafen nicht. Ist ein bestimmtes Mittel z. B. frei verfügbar, so dass es eine gewisse Verbreitung findet, kann es seine Aufgabe so lange erfüllen, bis es sich aus Spammersicht lohnt, einen Weg daran vorbei zu suchen. Auf diese Weise sind viele vormals wirkungsvolle CAPTCHAs mit der Zeit vollkommen nutzlos geworden; andere sind bereits vom Start weg mit einfachen Mitteln zu umgehen, so dass nicht nur potentielle Conversions verloren gehen, sondern auch der eigentliche Zweck verfehlt wird.

Ausnahmen haben aber mitunter durchaus ihre Berechtigung und werden auch von den meisten Besuchern frag- und klaglos akzeptiert. So sind Schaltflächen zur Bestückung eines Warenkorbs oder dem “Aufruf zum Aufruf” einer bestimmten Seite, Information oder dem Einstieg in einen Prozess (der technisch nichts anderes als jede andere Seite ist) oft eingesetzt und auch angeklickt. Und so lange man sich zumindest einheitlicher Mittel bedient und Klickflächen eine ausreichende Größe und aussagekräftige Linktexte bieten, können Links auch “Befehlscharakter” haben.

Grundsätzlich scheinen Buttons dennoch auch im Web ihrem Image als “Befehls- / Aktionsschaltflächen” gerecht zu werden.Daher sind sie auch technisch gesehen im Web i. d. R. Bestandteil eines Formulars (Scripte einmal zur Vereinfachung vernachlässigt). Ob Anmeldung, Absenden eines Kontaktformulars, Fortsetzen bzw. Abschluss eines Einkaufsprozesses oder Bestätigung von Änderungen in einem persönlichen Profil… es gibt zahlreiche Anwendungsfälle in Websites und vor allem Portalen, bei denen Benutzer “Befehle” an eine Website / Webanwendung geben oder in irgend einer Form einen Prozess steuern. Auch wenn Sie Befehle dynamisch aktivieren oder deaktivieren wollen, sind Buttons durch die Tatsache, dass sie von üblichen Anwendungen in beiden Formen i. d. R. bekannt sind, Links unbedingt vorzuziehen, denn ein “grauer Link” ist nicht für jeden Besucher automatisch nicht anklickbar; unverlinkter Text kann kein Signal “ich bin eigentlich ein inaktiver Link” senden…

Grenzfälle

Wenn man versucht, ausschließlich mit den relativ einfachen Regeln “Navigation=Link; Aktion/Befehl=Button” den kompletten Inhalt einer Website umzusetzen, stellen sich schnell Detailfragen, wenn die Grenzen zwischen den Differenzierungsmerkmalen verwischen. Ist z. B. ein Download die “Navigation zu einer Datei” oder der Abschluss eines Prozesses? Oder dessen Einleitung?

Auch technisch gesehen können Links und Schalter miteinander verwoben werden – z. B. durch Verwendung einer Button-Grafik als Klickfläche. Ist das nun ein Link (technisch) oder ein Schalter (mit den Augen des Anwenders gesehen) und wann ist der Einsatz sinnvoll? Eine globale Antwort auf diese Fragen gibt es nicht und auch Erfahrungswerte, die zeigen, dass Buttons für Befehle nach wie vor besser funktionieren, bedeuten im konkreten Fall nicht, dass Festhalten an diesem Prinzip zwingend die optimale Lösung erzeugt.

Solange die Umsetzung als Button oder Link in der Lage ist, klar zu kommunizieren, was nach einem Klick passiert, ist die Aufgabe ja prinzipiell erfüllt. Generell ist es im Zweifelsfall also immer die beste Option, mehrere Varianten von Links und Buttons in überschaubaren Tests gegenüberzustellen und sich für die Option zu entscheiden, die besser angenommen wurde. Und wenn es um den Abschluss einer Aktion geht, die massgeblich für den Erfolg Ihrer Website verantwortlich ist (z. B. im Fall von Shops), sollten Sie diese Tests nicht erst im Livebetrieb, sondern idealerweise schon vorher durchführen.

Links und Buttons?

Handlungsaufforderungen, die sich z. B. im Einleitungstext einer Produktvorstellung oder der Zielseite einer Marketingkampagne befinden, bieten den Vorteil, dass sich im Kontext des Links viele Informationen zum Ziel bzw. der Zielaktion unterbringen lassen. Schalter hingegen haben meistens den Vorteil höherer Aufmerksamkeit auf ihrer Seite. Nicht überraschend also, dass beide Mittel mitunter gemischt werden, obschon es aus Sicht der Benutzerfreundlichkeit eigentlich nicht wünschenswert ist, mehrere Wege zum gleichen Ziel anzubieten. Diese Regel dient aber vor allem dazu, den Anwender nicht zu verwirren. Wer es also schafft, Link(s) und Schalter so zu mischen, dass dennoch klar ist, dass immer das gleiche Ziel dahinter steht (wenn wirklich die ganze Seite mit der dazu erforderlichen Ruhe wahrgenommen wird), mag damit erfolgreich sein… das wird aber ebenso Tests erfordern, die im Zweifelsfall wirklich nur mit einer größeren Anzahl von realen Besuchern und Conversions Ergebnisse liefern können.

Wie umsetzen?

Grundsätzlich muss eine Website, die Buttons zur Navigation einsetzt, genausowenig automatisch “benutzerunfreundlicher” sein als eine andere, wie eine Navigation mit Links allein sicherstellt, dass die Site auch benutzerfreundlich ist. Da sind eher andere Faktoren wie Größe, Design und vor allem der Text maßgeblich. Dennoch ist es auch hier (wie so oft) eine gute Idee, die Erwartungen der Anwender möglichst großflächig zu erfüllen und dafür zu sorgen, dass bei jedem Klick – sei es auf einen Link oder einen Button – möglichst keine Überraschungen lauern, wenn das Ziel geladen oder die Aktion ausgeführt wird. Wer in Web-Anwendungen Links statt Buttons einsetzt, wird nicht automatisch scheitern, wenn dennoch eine zügige Benutzung möglich ist und “Aktionslinks” als solche klar erkannt werden können. Nicht umsonst findet man auch in Desktopanwendungen mitunter Links statt Schaltern – z. B. wenn es dadurch möglich ist, mehr Informationen über die Aktion (das “Ziel”) hinter dem Link in Erfahrung zu bringen.

Bei Websites hingegen sind es letztendlich die Conversions, die den Erfolg messbar machen und daher ist es grundsätzlich eine gute Idee, an wesentlichen Stellen nicht nur eine Grundsatzentscheidung für oder gegen Buttons zu treffen, sondern mehrere Varianten aktiv zu testen und zu beobachten, mit welchen Mitteln Prozesse nicht nur betreten, sondern auch erfolgreich abgeschlossen werden. Hierbei dürfen es ggf. auch schon mal Kombinationen sein, wenn der Erfolg diese Abweichung von der Regel rechtfertigt… nur “auf gut Glück” sollte bei ernsthaftem Interesse am Abschluss bestimmter Zielaktionen keine Option sein. Darüber hinaus ist die Faustregel, bevorzugt Links zur Navigation zu verwenden und auf Buttons zu setzen, wenn es im Fall von Kontaktformularen, Datenbearbeitung oder Kauf- und Anmeldeprozessen i. d. R. auch vom Benutzer erwartet wird, keine schlechte Leitlinie.

Ein simples Mittel, dass speziell bei Optionen und Feldern mit Auswahlschaltern (in HTML gesprochen: checkbox- oder radio - Inputelemente) die Benutzbarkeit verbessert, sind label-Elemente im Formular. Selbst diejenigen, die sich nicht darum scheren, ob und wie ein Formular nutzbar ist, wenn kein typischer Browser zum Einsatz kommt, sollte es zu schätzen wissen, dass durch die Definition von Labels für die relativ kleinen Klickflächen der vorgenannten Eingabeformen ein Verhalten erzeugt wird, wie man es aus Windows-Anwendungen gewohnt ist: Man kann so z. B. auf den Titel klicken, um eine Option zu aktivieren oder zu deaktivieren.Zur Verdeutlichung hier zwei Elemente, die sich unterschiedlich verhalten, wenn Sie auf den Text klicken:

Wenn Sie wissen wollen, ob sich die Mühe wirklich lohnt, dann versuchen Sie sich zu erinnern, wie oft Sie selbst schon in Webformularen auf solche Titel geklickt haben, ohne dass etwas passiert ist. Hier geht es also nicht um Sorgfalt, sondern darum, die (unbewussten) Erwartungen des Anwenders zu erfüllen. Er wird es ihnen nur im Einzelfall explizit danken und die Mühe erkennen, die Sie sich gemacht haben… fehlt die Kennzeichnung der Labels hingegen, ist das eine potentielle Quelle für “Miniärger”, der sich bekannterweise im Lauf eines Besuchs Ihrer Site zu einem Absprungbedürfnis addieren kann.

Sanfte Verbesserungen per Script

In der Regel ist es nicht das Hauptanliegen eines Besuchers, der Ihr Kontaktformular ausfüllt, Ihnen jede Menge über sich zu verraten: Name, Vorname, Maildresse, Anschrift etc. Dennoch sind diese Angaben mitunter eben wichtig für die Abwicklung einer Anfrage oder der Erfüllung des mit dem Formular verbundenen Prozesses. Speziell im Fall eines “normalen” Kontaktformulars aber will der Benutzer Ihnen etwas mitteilen. Mit seinen eigenen Worten. Der Tipp, das Eingabefeld daher nicht zu klein zu gestalten und ggf. auch schon vor die persönlichen Daten zu stellen, ist daher in der Regel auch auf fast alle Kontaktformulare anwendbar.

Um dennoch nicht zu viel Platz zu “verschwenden” und das Formular nicht zu groß wirken zu lassen, sind mitunter Kompromisse erforderlich. Sparen Sie z. B. nicht in der Breite, wenn es denn schon in der Höhe recht knapp wird und nutzen Sie bedenkenlos auch Scripte, die eine automatische Größenanpassung bei der Eingabe erlauben – verlassen Sie sich nur nicht darauf, dass diese auch zwingend genutzt werden können. Sprich: Auch ein Benutzer ohne JavaScript sollte das Formular ausfüllen, bedienen und absenden können – alle Komfortfunktionen wie Vorabvalidierung im Browser, Größenanpassungen, ausgeblendete Bereiche, die per Mausklick vergrößert werden können etc. sind erlaubt, solange diese Benutzern, welche kein JavaScript zulassen, nicht im Wege stehen.

Machen Sie Vorgaben nur dann, wenn diese sinnvoll sind

In manchen Formularen sieht man eher unglücklicher Natur sind. So ist es faktisch niemals sinnvoll, ein Geburtsdatum, Altersangaben oder andere individuelle Daten mit Vorgaben zu versehen, nur um zu demonstrieren, wie man sich eine Eingabe vorstellt. Beispiele sind toll, aber bitte außerhalb der Eingabefelder. Anderenfalls müssen Sie sich damit begnügen, dass ein groter Teil der Anwender Ihre Vorgaben aus “Faulheit” übernimmt und Sie dann falsche Angaben in Ihrer Datenbank speichern… und im Extremfall dann auch für Selektionen und Marketingaktionen heranziehen. Wer sich solcher Vorgaben bedient, darf sich also z. B. nicht wundern, wenn er jedes Jahr am 01.01. einem Haufen unzustellbarer Geburtstagsgrüße an mail@meinedomain.de o. Ä. sendet…

Brechen Sie nicht mit Konventionen, wenn es nicht absichtlich geschieht

Auch wenn es im Web oft darum geht, die Aufmerksamkeit des flüchtig vorbeisurfenden zu erhaschen, indem man ungewöhnliche Elemente auf der Website einsetzt: Dieses “Stilmittel” sollte spätestens da, wo es um die Herausgabe persönlicher Daten in einem Formular geht, lieber über Bord geworfen werden. Sie haben die Aufmerksamkeit ja bereits… oder zumindest so viel, wie ein typischer, gehetzter und querlesender Internetnutzer gerade aufbringen kann. Und genau deshalb sollten Sie alles möglichst so gestalten, dass er beim flüchtigen Überfliegen alles findet, was er braucht.

• Ein übersichtliches Formular gehört genau so dazu wie möglichst
• einfach zu identifizierende Erklärung zur Verwendung der Daten / Schutz der Privatsphäre.
• Gruppieren Sie, wenn nötig, gleichartige Angaben zu Blöcken
• Machen Sie Eingabefelder und vor allem den Schalter zum Absenden des Formulars leicht erkennbar
  

Ebenso wichtig ist es, dass der Besucher keine falschen Signale erhält, die missinterpretiert werden. Zum Abschluss dieses Beitrags soll ein Beispiel aus der Praxis dazu dienen, diesen Punkt zu verdeutlichen:

Sieht doch ganz vernünftig aus, oder? Es wird dennoch mitunter vielleicht nicht so gut funktinieren, wie es könnte, denn hier wird mit einer unformulierten Konvention gebrochen, die die meisten Anwender aus dem Web kennen: Pflichtfelder sind mit einem Stern markiert. Dass es hier genau umgekehrt ist, kann nur dann erfasst werden, wenn man sich etwas genauer mit dem Formular befasst. Wer allerdings nach einem flüchtigen Blick auf die “Pflichtfelder” entscheidet, dieses Formular sei zu neugierig, um lediglich einen Newsletter zu  abonnieren, wird ggf. nicht zum Ziel kommen.

Tipp: Um bei Formularen die Gefahr der eigenen Betriebsblindheit als Faktor bei Optimierungsbemühen auszuschließen, ist es ein gutes Mittel, sich bei Dritten (das darf hier ausnahmsweise auch mal das eigene Umfeld sein) Anregungen für Varianten mit weniger Feldern, weniger Pflichtfeldern, anderen Formen der Buttons oder einem anderen Aufbau zu holen und diese dann in Form von A/B- oder multivariaten Tests konkret auf der eigenen Website auszutesten.  Nur so wird es gelingen einen Aufbau und Umfang zu finden, der für den Großteil der Besucher Ihrer Website die höchste Wahrscheinlichkeit bietet, dass das von Ihnen beabsichtige Ziel erreicht wird.