Wenn Sie sich daher bisher noch gar nicht mit dem Thema befasst haben, werfen Sie ruhig mal einen Blick in die o. a. Statistik aus den Google Webmaster Tools, um einen ersten Eindruck zu erhalten, wo Sie “ungefähr” stehen. Die Werte stammen hauptsächlich aus Quellen wie der Google Toolbar oder dem Chrome-Browser, sind also als “echte Ladezeiten” zu verstehen und beinhalten alle Aspekte wie das Laden der Grafiken, Ausführen von Scripts etc.

Unabhängig von den Ergebnissen können Sie dann auch für die Startseite und ihre wichtigsten / langsamsten Seiten mit Page Speed ermitteln, wo genau die Ansatzpunkte zur Optimierung liegen und ggf. auch ein paar kleine Veränderungen mit großen Auswirkungen vornehmen (wie z. B. die Aktivierung der Kompression o. Ä.), die die gesamte Website betreffen und sich damit zufrieden geben. Oder auch Google oder anderen Anbietern die dynamische Optimierung aller Inhalte vor der Auslieferung zu überlassen (was aber meistens mit laufenden Kosten verbunden ist)

Besser ist es daher, sich ein vollständigeres Bild zu machen und eine Messung zu etablieren, die auch bei umfangreicheren Webangeboten möglichst alle relevanten Seiten betrifft und die Werte regelmäßig zu nutzen, um die Performance dauerhaft zu nutzen und Ausreißer möglichst schnell zu identifizieren. Dazu dient die Ladezeitenmessung in Google Analytics.

Ladezeiten in Google Analytics messen

Wer Google Analytics einsetzt, um das Verhalten “seiner” Besucher zu messen, kann durch eine recht simple Anpassung des Trackingcodes dafür sorgen (Update: Die Anpassung ist nicht mehr erforderlich, sondern der Bericht steht automatisch nun für jede Seite zur Verfügung), dass bei einem Bruchteil der Seitenladevorgänge Messwerte ermittelt werden, die dann zusammen mit allen anderen Kennzahlen in Google Analytics auf Seitenebene ausgewertet werden können. Dazu genügt es im ersten Schritt, die Anweisung “_gaq.push(['_trackPageLoadTime']);” (bzw. “pageTracker._trackPageLoadTime();” bei Verwendung des alten Trackingcodes) beim Analytics-Code in Ihren Seiten (idealerweise an einer einzigen Stelle im Template) zu ergänzen… und dann abzuwarten. Denn dadurch, dass nicht jeder Seitenaufruf zu einer Messung führt (die dann wiederum die Performance Ihrer Site dauerhaft leicht verschlechtern würde), wird es einige Zeit dauern, bis Sie ansatzweise verlässliche Zahlen für mehr als die Startseite bzw. prominente Landingpages Ihrer Domain zu sehen bekommen, sollten Sie nicht eine ganze Menge Besucher jeden Tag auf Ihrer Site haben. Sie finden die Reports auschließlich in der neuen Oberfläche von Google Analytics (die Sie bei Bedarf durch Klick auf den Link “Neue Version” oben rechts aktivieren können) im Bereich “Content -> Website-Geschwindigkeit”.

Wenn Sie hier alle Seiten ausfiltern, deren “Ladezeiten-Beispiel” – das ist die schlechte Übersetzung der Anzahl der Seitenaufrufe, bei denen die Geschwindigkeit auch wirklich gemessen wurde – einen ansatzweise zuverlässigen Wert hat (z. B. mehr als 10, 20, 50, 100 Messpunkte; je nachdem, wie viel Traffic Ihre Seite beglückt), können Sie durch einfaches Sortieren nach der Ladezeit schnell herausfinden, ob, wo und wie viele Ausreißer vorhanden sind, denen Sie sich noch einmal gesondert optimierend widmen sollten.

Denn beispielsweise durch besonders große Grafiken, JavaScript oder andere Ressourcen, die nicht überall, sondern nur an bestimmten Stellen zum Einsatz kommen, kann es signifikante Abweichungen zum eigenen Durchschnitt kommen. Bei einer Auswertung nach Browser statt nach einzelnen Seiten sehen Sie zudem, ob es ggf. Browser gibt, die mit Ihrer Website wesentlich schlechter zurechtkommen als andere. Und wenn dies keine Exoten sind, sondern häufig von Besuchern Ihrer Site eingesetzt werden, ist ggf. dauch dazu eine gezielte Optimierung möglich (meistens bei dynamischen Anteilen Ihrer Site; sprich JavaScript).

Damit ist dieser Bericht zwar vielleicht nicht so wichtig, dass Sie sich jeden Tag damit befassen müssen, aber trotzdem lohnt sich eine regelmäßige Kontrolle in einer großzügigeren Frequenz. Denn wenngleich man die absoluten Angaben allein schon dadurch, dass die Messung selbst das Ergebnis verfälscht, nicht unbegingt bis auf die zweite Nachkommastelle genau nehmen darf, sind auffällige Unterschiede zwischen einzelnen Seiten ernst zu nehmen und oft ein guter Ansatzpunkt zur gezielten Suche nach den Ursachen… zumindest wenn mehr als nur eine Handvoll Surfer diese Seite regelmäßig besuchen.

Es geht genauer als nur “Text”…

Dank HTML5 können auch heute schon – u. a. in Formularen – einige neue Mittel eingesetzt werden, die das Verhalten von vollwertigen Browsern auf Smartphones und Tablets beeinflussen, ohne Wechselwirkungen mit älteren Browsern auf einem PC oder Notebook befürchten zu müssen.

Dazu gehören unter anderem neue Typen von Eingabefeldern für

• Webadressen
• E-Mailadressen
• Telefonnummern
• Zahlen
• Suchanfragen

Die Gemeinsamkeit aller genannten Elemente ist ein spezielles Verhalten der Screentastaturen auf dem iPhone, iPad & Co. – ganz ohne zwingenden Einsatz von HTML5, sondern problemlos auch auf einer normalen und ansonsten in keiner Weise für Mobilgeräte optimierte Website in HTML4 oder auch XHTML.

Wer sich aber auf einem Mobilgerät bis zu einem Formular durchgewühlt hat, wird beim Ausfüllen von Eingabefeldern sicher dankbar sein, wenn er die Tastatur nicht erst zur Eingabe des “@”, die Ziffern einer Telefonnummer oder den Slash für eine Internetadresse die Ansicht der virtuellen Tastatur umstellen muss. Denn genau das ist es im Wesentlichen, was diese neuen Eingabefelder von “normalen” Texteingabefeldern in Webformularen unterscheidet (mit Ausnahme des Suchfelds; mehr dazu siehe unten). Kennt ein Browser diese Typen von Eingabefeldern nicht, werden sie wie normale Textfelder (type=”text”) behandelt und so sind keine Kompatibilitätsprobleme zu erwarten.

Die folgenden Abbildungen zeigen das Ergebnis auf einem iPad, um die Unterschiede des Tastaturlayouts beim Betreten der jeweiligen Texteingabefelder zu verdeutlichen.

Webadressen

Verwenden Sie in einem Formular ein ganz normales Eingabefeld mit einer Definition als type=”text”, sieht das Ergebnis auf dem iPad so aus:

Für die meisten Informationen (wie hier den Vornamen) ist das auch genau richtig. Das Problem bei der Eingabe einer Internetadresse ist aber, dass man hier selten ohne Slash (das Zeichen “/”) auskommt und dieses erst zum Vorschein holen muss. Wird nun aber der neue Typ url eingesetzt, passt sich die Tastatur direkt beim Betreten des Feldes an. Einige Unterschiede (nicht alle) sind in dieser und der folgenden Abbildungen rot markiert (ein Klick öffnet eine größere Ansicht):

Dazu ist im Quellcode des Formulars die Definition von type=”url” statt type=”text” erforderlich:

<input type=”url” id=”homepage” name=”homepage”>

Die Anpassung dazu ist also – wie bei den folgenden Punkten auch – nur mit einem minimalen Aufwand verbunden… vermeidet aber je nach Umfang der Nutzung Ihrer Site auf mobile Geräten jeden Tag eine Menge überflüssiger Klicks (bzw. Berührungen verschiedenster Touchscreens…).

E-Mailadressen

Nach gleichem Vorbild können Sie dafür sorgen, dass das “@”-Zeichen gleich zur Hand ist, wenn eine Mailadresse in einem Formular eingegeben werden soll. Wo sich Benutzer also z. B. mit einer Mailadresse regelmäßig (auch mobil) einloggen, kann diese Anpassung sehr kundenfreundlich sein.

Verantwortlich dafür ist der Typ email. Der Code dazu ist passend zu obigem Beispiel:

<input type=”email” id=”mail” name=”mail”>

Telefonnummern und Zahlen

Tauschen Sie den Wert “text” des type-Attributs Ihrer bestehenden Eingabefelder für Telefonnummern gegen type=”tel“ aus, wird auch hier die Tastatur angepasst:

Ähnlich funktioniert auch type=”number“ – Eine eigene Abbildung ist zur Verdeutlichung wohl nicht mehr erforderlich.

Suchanfragen

Etwas anders fällt der Effekt des Typs “search” statt “text” aus. Denn hierbei ändert sich eigentlich nichts an der Tastatur selbst… es wird aber in Browsern wie z. B. Chrome ein “Löschbutton” innerhalb des Feldes eingeblendet, mit dessen Hilfe man eingegebenen Inhalt bei einer erneuten Suchanfrage mit einem Klick löschen kann, ohne die Löschfunktion der Tastatur mehrfach verwenden zu müssen. Diese Anpassung hilft also auch potentiell beim Zeitsparen, wenngleich auf eine etwas andere Weise.

Platzhalter einfügen

Eine weitere sinnvolle Anpassung für ein Suchfeld betrifft die so genannten “Platzhalter” die bei der Verwendung des Feldes verschwinden und Platz für die Eingabe machen. Sie sind also nur dann sichtbar sind, wenn das Feld gerade nicht den Fokus hat und “eigentlich” leer ist. Hinweise wie “Suchbegriff eingeben…“, Muster für die Eingabe eines Datums oder einer Telefonnummer und andere Beispiele finden sich auf vielen Websites. In den meisten Fällen ist dafür eine mehr oder weniger komplexe JavaScript-Lösung verantwortlich.

Mit HTML5 kann dazu das neue placeholder-Attribut verwendet werden. Der gewünschte Text wird damit einfach direkt beim Formularelement angegeben:

<input type=”search” placeholder=”Suchbegriff eingeben…”>

In Browsern auf Mobilgeräten, Tablets oder auch z. B. in Safari sieht das Eingabefeld dann in etwa so aus:

Der Text verschwindet (und erscheint bei leerem Feld beim Verlassen) automatisch, ohne dass JavaScript dazu erforderlich wäre.

“Nebenwirkungen” minimieren

Sollte es sich als problematisch erweisen, dass Felder vom Typ url oder email in modernen Browsern wie z. B. Firefox und Chrome auf dem Desktop wie beschrieben eine Validierung beinhalten, kann diese Eingabeprüfung auch explizit für ein Formular abgeschaltet werden, indem dieses das Attribut novalidate erhält. Alle evtl. störenden Fehlermeldungen bei falschen Mailadressen oder z. B. deshalb als “falsch” angesehenen Webadressen, weil diese ohne “http://” eingegeben wurde, können damit vermieden werden. Denn speizell bei Webadressen ist die Validierung in diesem Punkt sehr streng und nicht immer praxisgerecht – je nach Einsatzzweck des Formulars. Sollten Sie die Eingabeprüfung abschalten wollen, verwenden Sie also:

<form novalidate action=”…” method=”…”>

Noch mehr?

Weitere Attribute wie autofocus und required oder Vorgabelisten via datalist sind derzeit noch nicht in einem nennenswerten Umfang in alle Browser und Systeme implementiert, so dass es hierfür wohl für die meisten Sites zu früh sein wird. Auch die zusätzlichen Input-Typen range, date, month, color etc. werden nur in Einzelfällen interessant sein. Dennoch lohnt es sich spätestens bei einer Umstellung der Seiten auf HTML5 / CSS3 und seine “bedeutungsvolleren” Container, auch auf diese und andere Aspekte von HTML5 zu blicken.

Mit den hier beschriebenen Änderungen muss man aber weder warten, noch setzt man die Bedienbarkeit in älteren Browsern auf´s Spiel. Also: Nur zu

Ausfallzeiten fast unvermeidbar

Unabhängig davon, welche Variante Sie gewählt haben, wird Ihnen wohl kein Anbieter eine einhundertprozentige Erreichbarkeit der Website garantieren. Warum das relevant ist? Weil 99% (was faktisch sogar ein niedriger Wert ist) so genannte „Uptime“ eben bedeutet, dass Sie an 1% von 365 Tagen im Jahr unerreichbar sein können. Selten aber nimmt sich ein Server diese Auszeit „am Stück“. Viel eher werden geplante Wartungszeiten oder unerwartete, aber vom Provider schnell behobene Ausfälle der Grund sein, warum eine Website nicht erreicht werden kann. Die Ausfälle können sich aber schnell zu mehreren Stunden im Monat summieren.

Kurze Perioden ohne Erreichbarkeit sind mehr oder weniger unvermeidlich und auch nur selten ein echtes Problem. Selten ist aber nicht: „nie“. Freundlicherweise in die Nachstunden gelegte geplante Wartungsarbeiten an einem Server können so z. B. in einem der Zielmärkte einer international ausgerichteten Website genau in die „Prime Time“ fallen.

Server da, CMS eingeschlafen?

Zudem ist nicht garantiert, dass Ihre Website auch wirklich funktioniert, nur weil der Server erreicht werden kann. Probleme mit der Datenbank, Ausfall einzelner Serverkomponenten oder auch gezielte Angriffe auf Ihr Content Management System mit der Absicht, Ihre Website  lahmzulegen, können auch bei funktionierendem Server zum gleichen Problem führen: Ihre Site „funktioniert“ nicht korrekt, der Shop verkauft nicht.

Besonders übel: Teilausfälle

So richtig böse wird es, wenn Ihr Server funktioniert und auch Teile der Website einwandfrei erreicht werden können, aber bestimmte Funktionen ausgefallen sind. Das kann im „einfachsten“ Fall der Newsbereich sein, der in der ansonsten durch ein anderes CMS oder als statische Seiten gepflegten Website eingebunden ist und auf einem gerade nicht mehr funktionierenden Blogsystem basiert. Viel schlimmer ist es hingegen, wenn Sie in Ihrem Shop z. B. Zahlungssysteme von Drittanbietern eingebunden haben und ausgerechnet die zur reibungslosen Anbindung erforderliche „Brücke“ nicht mehr funktioniert. Denn das bedeutet übersetzt: Die Kunden kommen mit dem gefüllten Einkaufswagen und geöffneter Geldbörse an die Kasse und dort geht es nicht mehr weiter.

Die “Lösung”: Messen

Für jeden dieser Fälle gibt es verschiedene Methoden, den Ausfall so schnell wie möglich selbst mitzubekommen und eine Korrektur einzuleiten. Im einfachsten Fall können Sie sich „direkt“ von Ihrem selbst betriebenen Server bei Problemen per Mail oder SMS benachrichtigen lassen. Oft wird ein gewisses Monitoring in irgendeiner Form auch direkt vom Provider angeboten.

Für alle anderen Fälle existieren verschiedene Dienste, die in wählbaren Intervallen Ihren Server überprüfen, Dienste auf Ihrem Server aufrufen und die Antworten checken, Inhalte von Seiten auf bestimmte Begriffe abprüfen oder sogar Formulare ausfüllen.

Je nachdem, im welchem Umfang man diese externen Prüfdienste (auch „Sonden“ genannt) nutzen will, gibt es verschiedene kostenlose oder auch kommerzielle Anbieter, die von verschiedenen Standorten regelmäßige Verfügbarkeits-Kontrollen, durchführen und daraus Statistiken über Ausfallzeiten etc. erstellen. In der Regel werden Sie auch bei einem Ausfall direkt per Mail, Twitter, SMS oder einer Kombination verschiedener Kanäle darüber informiert, dass Ihr Server, ein bestimmter Dienst oder ein Teil Ihrer Website nicht mehr antwortet oder zumindest nicht die erwartete Antwort geben. Ein Beispiel dafür ist eine gehackten Startseite, auf der plötzlich Begriffe erscheinen, die dort garantiert nichts zu suchen haben (ja genau, Sie können einen Alarm konfigurieren, sobald „Viagara“, „Poker“ oder „Partnertausch“ etc. auf Ihrer Website erscheinen, wenn das nicht gerade Ihr Kerngeschäft ist.

Auswahl verschiedener Anbieter

Ob Sie einen der kostenlosen Dienste nutzen oder besser ein Premium-Paket buchen sollten, hängt maßgeblich vom Umfang der geplanten Messungen ab und auf welche Art die Prüfungen erfolgen sollen. Generell bieten aber auch die kostenpflichtigen Überwachungsdienste Ihre Leistungen für eine gewisse Testphase kostenlos an, so dass man nirgends die Katze im Sack kaufen kann. Generelle Empfehlungen sind allein deshalb schon sehr schwierig, weil jede Website unterschiedliche Anforderungen hat:

• Was soll genau geprüft werden (“nur” die HTTP-Serverantwort, Inhalte / Schlagworte, Formulare, andere Dienste / Protokolle) 
• Wie oft muss geprüft werden?
• Welche Länder (passend zu den Zielgruppen) sind relevant, so dass von passenden Standorten aus geprüft werden kann
• Welche Maßnahmen müssen im Problemfall konfiguriert werden können (Verteiler, Kanäle etc.)?
• Welche Reports müssen ggf. regelmäßig erstellt werden oder gar per API abrufbar sein? In welchem Format?
• Was darf der Spaß kosten?

Je nach dem, wie Ihre Antworten ausfallen, kann die Antwort nach dem “besten Anbieter” sehr unterschiedlich ausfallen. Für einen Einstieg eignen sich z. B. die folgenden Kandidaten. Wer weitere Dienste kennt und / oder nutzt, kann gern über die Kommentarfunktion zusätzliche Anbieter ergänzen.

Lokalmatador: Livewatch

Unter livewatch.de finden Sie eine Überwachung, die auch kostenlos eingesetzt werden kann,  nachdem Sie Ihre Site per Scriptcode “verifiziert” haben. Das Intervall von 10 Minuten und die spätestens nach 4 Wochen bestehende Bannerpflicht sind in diesem Umfeld nicht unüblich. Diese kostenfreie Variante eignet sich aber eher für kleine (und auf keinen Fall umsatz- bzw. lebenswichtige) Projekte. Verschiedene Preismodelle erlauben aber auch kürzere Überwachungszeiten von bis zu einer Minute und mehrere Server. API-Zugriff für die Einbindung der Informationen in eigene Monitoring-Dashboards, das interne Reporting oder zur Fernkonfiguration ohne Browser und wählbare Standorte für die Überprüfung sind Features, die den Einsatz in Unternehmen faktisch jeder Größenordnung ermöglichen. Ein weiterer Vorteil, der relevant sein kann: Es gibt eine deutsche Oberfläche.

Urgestein: Pingdom

Der “Opa unter den Sonden” heißt Pingdom. Der unschlagbare Vorteil für Webmaster, die nur eine Site überwachen wollen und sich mit der einfachen Prüfung der HTTP-Antwort zufrieden geben, ist der Preis für die Überwachung – selbst im Minutentakt: kostenlos. Das Verhalten im Fehlerfall kann recht individuell eingestellt werden; Benachrichtigungen gibt es nicht nur per Mail, SMS & Co. sondern zeitgemäß wahlweise auch per iPhone- oder Android-App direkt auf das Mobiltelefon. Wer für die Dienstleitung bezahlt, kann auch hier deutlich mehr prüfen bzw. per API zugreifen.

Alleskönner: Internet Vista

Selbst wenn für den eigenen Geschmack die Preise für die kostenpflichtigen Varianten bei internetvista.com zu hoch ausfallen sollten, ist der kostenlose 60-Tage-Test empfehlenswert… Allein schon deshalb, weil man so zumindest über eine gewisse Zeit mehrere Dienste ohne Mehrkosten parallel betreiben und so einen Eindruck über die Verläßlichkeit der Meldungen gewinnen kann. Denn der Funktionsumfang und auch die Vielfalt der Prüfmethoden sind beeindruckend; die Reports ebenso umfangreich wie nützlich. Mehrere Sprachen erleichtern den Einsatz für internationale IT-Teams, solange es nicht explizit “deutsch” sein muss, denn diese Sprache fehlt in der Liste.

Sparfuchs: UptimeRobot

(Noch) gänzlich ohne Preismodell funktioniert der recht junge UptimeRobot. Bis zu 50(!) Sites können hier im 5-Minuten-Intervall überprüft werden, ohne dass Kosten entstehen. Die Checks sind inzwischen auch nicht mehr nur auf HTTP und Port 80 beschränkt, so dass man eine ganze Menge sinnvoller Prüfungen umsetzen kann, ohne Kosten zu verursachen. Zumindest für den Fall, dass es nicht unbedingt Checks im Minutenabstand sein müssen. Dazu gehören auch hier “Keywordchecks”, die den Inhalt einer Seite kontrollieren.

Eyecandy: Sitealert

Optik ist nicht die einzige Stärke von Sitealert, einem weiteren Vertreter aus Deutschland. Aber die Auswertungen im Browser zählen dennoch zu den Besonderheiten. Neben den mehr oder weniger mit anderen Anbietern vergleichbaren Funktions- und Preismodellen liegt der Fokus zudem auch auf Ladezeiten (die auch bei InternetVista nicht zu kurz kommen). Für die kostenlose Variante steht zwar nur eine Prüfung pro Stunde zur Verfügung, aber “Dauerfeuer” können Sie in einer kostenpflichtigen Variante (oder Pingdom im Paralleleinsatz) ja immer noch geben.

Und noch mehr

Wenngleich dies eine Auswahl und kein Marktüberblick sein soll, können ein paar weitere Links zu Anbietern sicher nicht schaden. Es ist sowieso sinnvoll, sich mehrere Kandidaten anzusehen und je nach Wichtigkeit der Website (gemessen am Risiko und den Folgen eines Ausfalls) ggf. auch dauerhaft mit mehr als einem Dienst zu arbeiten. Auch die folgenden Kandidaten bieten in irgend einer Form eine kostenlose Variante (meist gegen Banneranbringung) oder einen Testaccount.

• watchmouse.com
• serverguard24.de
• uptrends.com
• hyperspin.com
• host-tracker.com

Einsteigen und passende Lösung finden

Es gibt eine große Auswahl und für jeden Anwendungsfall findet sich eine passende Messmethode. Die Vielfalt bedeutet auch, dass selbst ohne Budget ein recht hohes Maß Sicherheit gewonnen werden kann. Außerdem ist “irgendwie” messen immer besser als nur zu hoffen, dass der Server und die Website gerade funktionieren. Bedenken Sie aber, dass der “Sondentraffic” auf jeden Fall zusätzlich zu den normalen Besuchern und Suchmaschinencrawlern weitere Spuren in den Logs Ihres Servers hinterlassen. Ein- und Ausschalten von Sonden bemerken Sie also ggf. in der Logfileanalyse.

Probleme wie “durch Messung überlastete Server” oder Überschreiten des maximalen Trafficvolumens bei kleinen Hostingpaketen müssen Sie hingegen auch bei kleinen Intervallen und mehreren parallel betriebenen Sonden kaum befürchten – zumindest dann nicht, wenn Sie sich auf vergleichsweise “normale” Überwachungsfunktionen beschränken.

Eigenschaften wie Farben, Größen etc. werden in einem – ebenso wie die Objektvorlagenliste frei platzierbaren – Inspektor definiert. Einzelne Elemente können erfreulich leicht “magnetisch” an anderen Elementen ausgerichtet werden; mehrere markierte Elemente sind mit der Maus oder noch präsziser per Tastatur frei platzierbar. Einer Desktopanwendung steht der Editor so kaum nach. Selbst an die Anordnung und Änderung der Objektreihenfolge per Kontextmenü ist hier gedacht worden.

Das alles allein hebt diesen Dienst zwar nicht von anderen Anbietern ab – aber ungeachtet der Tatsache, dass man für “aufwändigere” Mockups vielleicht nicht alles findet, was andere Lösungen bieten, scheint Cacoo sehr geeignet, um vor allem in direkter Online-Zusammenarbeit mit Partnern oder dem Auftraggeber gerade bei kleinen Projekten schnell zu Ergebnissen zu kommen. Außerdem ist der Einsatz nicht auf Wireframes allein ausgerichtet. Und obwohl auch Mitstreiter wie z. B. MockFlow mit kostenlosen Zugängen locken (hier allerdings auf einen Entwurf mit insgesamt 4 Seiten beschränkt), hat sich Cacoo mit leicht niedrigeren Preisen für die unbeschränkte Nutzung und wenigen, aber wesentlichen Details im Editor, die die Arbeit auch im Browser einfacher und schneller machen, offenbar nicht schlecht platziert. Oder?

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.