Die kurze Antwort darauf ist sehr einfach: Gezielte Reduktion in allen Belangen lautet die Zauberformel. Denn viele Dinge, die bei einer DSL-Verbindung auf dem Notebook und Desktop nur eine geringe Rolle spielen, können auf dem mobil verbundenen Smartphone und Tablet echte Spielverderber sein. “Reduktion in allen Belangen” bedeutet daher:

• Weniger Requests. Wer die Anzahl der Requests deutlich minimieren kann, hat dem größten Feind mobiler Performance einen harten Schlag versetzt. Denn Latenz ist meistens der größte Zeitfresser. Und da die übermäßig hohe Latenz bei nicht parallelisierbaren Requests in Summe in die Ladezeit eingeht, ist z. B. durch Zusammenfassung von mehreren Scriptdateien, CSS-Dateien und vor allem auch den meistens eingesetzten vielen kleinen Bildern in wenige CSS-Sprites gerade auf Mobilgeräten eine Menge herauszuholen.
• Weniger Domains. Während auf dem Desktop die Parallelisierung von Downloads verschiedener Ressourcen über CDNs eine prima Idee ist, um schnellere Seiten auszuliefern, kann (nicht: muss) diese Idee nach hinten losgehen, wenn es um mobile Sites geht. Das ist zwar streng genommen ein Unteraspekt von “Weniger Requests”, aber auch die Anzahl der beteiligten Domains können wegen des trägen Verbindungsaufbaus und der damit einhergehenden besonders hohen Latenz für den ersten Zugriff der mobilen Site mehr Schaden als Nutzen bringen. Hier hilft im Zweifelsfall nur die Messung verschiedener Varianten, wenn die Minimierung der Anzahl der Ressourcen abgeschlossen ist und man verschiedene Verteilungsszenarien durchspielen und messen kann.
• Weniger Bytes. Die Optimierung von Scripts, CSS und dem Seitenquellcode durch Filter oder in Form physikalisch bereits von formatierenden Leerzeichen und Umbrüchen befreiter Inhalte macht sich durch die mobil auch deutlich schlechteren Durchsatzraten deutlich bemerkbar. Je Verbindung mag das mal mehr mal weniger Gewicht haben… da aber mobil immer deutlich langsamere Übertragung als per DSL & Co. zu erwarten ist, sind minimierte Dateien, optimierte (und für die mobile Site passend skalierte) Grafiken (z. B. via “Responsive Images”) für schnelle Darstellung unabdingbar. Auch der vollständige Verzicht auf Grafik zu Gunsten von CSS3 für Farbverläufe, Schatten usw. ist dank der auf Mobilgeräten voraussetzbaren modernen Browsern mit der Fähigkeit zum Umgang mit CSS3 eine relativ sichere Option. Da ohnehin eine simplere Darstellung auf dem Smartphone erforderlich ist und “bildschirmfüllende” Teaser hier das Ziel verfehlen, ist “weniger” gleich mehrfach “mehr”.
• Weniger Content. Unabhängig davon, dass das ein ganz anderes Thema ist und mobile Websites nicht nur aus technischen idealerweise nicht den gleichen Umfang wie die komplette Desktop-Browser-Version haben sollte (und das auch nicht muss), ist weniger Content auch weniger zu laden.
• Weniger Scripts (und einfacheres CSS). Nicht nur aus nacheliegenden Gründen der Verkleinerung der zu übertragenden Datenmenge, sondern als Konzession an die normalerweise der dem Desktop nach wie vor unterlegenen mobilen Hardware (CPU, Speicher, Rechenleistung) ist JavaScript einfach langsamer und benötigen viele durch CSS-Anweisungen erforderliche “Reflows” im Browser mehr Zeit. Die direkte Auslieferung einer optimierten CSS-Fassung für Mobilgeräte ist und ein Minimum an Script (vor allem, wenn dadurch der DOM manipuliert wird, was wiederum jeweils einen Neuaufbau im Browser erfordert) sind daher aus mehr als nur einem Grund wünschenswert.

Nicht alle Faktoren sind auf allen mobilen Plattformen gleich stark an der Ladezeit beteiligt. Da man aber keine Site nur für das iPad2, iPhone3 oder Android 2.3 – Tablets oder einzelne Smartphones optimiert, bleibt daraus nur ein Schluss: Man muss sich allen Faktoren widmen, wenn man im Gesamtdurchschnitt auf allen beteiligten / relevanten Geräten möglichst schnelle Seiten ausliefern will.

Ansatzpunkte zur Optimierung

Oben bereits angesprochen wurden für folgenden Punkte:

• Optimierte Grafiken,
• Mimimierung von Scripts, CSS und HTML;
• Zusammenfassen von Dateien,
• CSS-Sprites und
• CSS3 statt Grafik

Davon kann man nun aber – um die Verwirrung perfekt zu machen – teilweise wieder einen Schritt zurück machen und so z. B.für einzelne Ressourcen, die umfangreich und für eine grundsätzlich komplette und funktionierende “erstaufgebaute” Seite nicht wesentlich sind, eine Auslagerung in Betracht zu ziehen. Denn wenn diese asynchron nachgeladen werden können, ist hierdurch sowohl eine initial schnellere Seite zu realisieren als auch so die Gefahr eines möglichen Stillstands beim Seitenaufbau durch übermäßigen Paketverlust zu minimieren. Bei stark ausgelasteten Mobilfunkzellen in Ballungsgebieten / zu Spitzenzeiten ist dieses Gefahr leider nicht nur theoretischer Natur. Also: Gezielte Parallelisierung von Ressourcenzugriffen ist ganz und gar nicht schlecht für mobile Seiten (siehe auch “HTTP Pipelining“). Denn je früher eine “erste Version” der Seite dargestellt werden kann, desto besser ist die gefühlte Performance für den mobilen Besucher.

Ein ähnlicher Ansatz: Bilder nur laden, wenn benötigt. Bei langen Seiten können weiter unten platzierte Bilder erst dann nachgeladen werden, wenn diese in den Sichtbereich des Viewports gescrollt werden. Spart ggf. Requests und Bytes. Oder nach Erreichen des “onload”-Events der Seite in der ersten Fassung ohne zusätzliche Grafiken. Spart nichts, stellt aber schneller eine Seite im Browser bereit.

Nicht auf den Cache verlassen: Bei aller Minimierung darf nicht vergessen werden, dass der Cache (sowohl flüchtiger als auch persistenter Speicher) bei Mobilgeräten kleiner als auf dem Desktop ist. Oder im schlimmsten Fall auch gar nicht vorhanden. Sicherheit, dass alle Ressourcen beim nächsten Laden einer weiteren Seite also aus dem Cache kommen können, ist je nach Umfang der Ressourcen, Anzahl offener Tabs im Browser etc. nicht gegeben. “CSS-Riesensprites”, die 10 Varianten aller Headergrafikvarianten enthalten, sind also aus Mobilsicht genau so “am falschen Platz optimiert” wie 100 Symbole, von denen auf 80% der Seiten nur 20 Stück benötigt werden. Sinnvolle Aufteilung in mehrere Dateien ist also durchaus angesagt. Für kleinere Ressourcen wie Scripts und CSS kann als Ersatz der persistente Speicher von “HTML5 localStorage” verwendet werden, auf dessen Existenz man sich glücklicherweise bei den modernen mobilen Browsern verlassen kann. Für viele Bilder sind die dazu i. d. R. verfügbaren 5 MB allerdings selten eine brauchbare Lösung.

Auch hier gilt: Messen heißt wissen!

Verschiedene Varianten testen, besten Kompromiss für alle wichtigen Geräte – iPhone, iPad, Android Tablets und Smartphones – durch messen ermitteln. Dazu dienen idealerweise echte Geräte, auf denen die Messungen z. B. mit PCApPerf durchgeführt werden können. Ersatzweise kann auch ein Webdienst wie blaze.io eingesetzt werden, um sich schrittweise der besten Lösung zu nähern. Welche Geräte heute schon besonders wichtig sind, zeigt ggf. die eigene Webanalyse. Aber Vorsicht: Nur weil ein bestimmtes, ansatzweise prominentes Gerät durch die Zahlen aus der eigenen Webanalyse nicht relevant erscheint, muss das nicht bedeuten, dass das in Zukunft so bleibt. Sich hier am lokalen Marktdurchschnitt zu orientieren und den Fokus primär auf iOS-Geräte und wenige ausgesuchte Androids, speziell Smartphones, zu richten, kann eigentlich kaum falsch sein.

Wer sich konkret an die Arbeit machen möchte, findet eine hilfreiche Zusammenfassung vieler Faktoren und Optimierungsmöglichkeiten bei Youtube in einem (nicht mehr ganz neuen)  Google TechTalk von Guy Podjarny (englisch, ca. 1 Stunde Laufzeit).

Beispiel: Remote Testing mit rapidusertests.com

Wenn Sie sich für die Durchführung eines Remote Usability Tests entscheiden, benötigen Sie zur Vorbereitung erfreulich wenig. Umso wichtiger ist es, sich ausreichend Zeit mit der Formulierung der konkreten Aufgabenstellung, des Testszenarios und der begleitenden Fragen zu nehmen, denn das ist alles, was der Tester neben der zu testenden Seite(n) von Ihnen bekommt. Unklare Formulierungen können sonst dazu führen, dass der Test am eigentlichen Ziel vorbei geht und Sie so – wenn überhaupt – nur zufällig Feedback erhalten, das wirklich zur Optimierung des gewünschten Bereichs Ihrer Website beitragen kann.

Vor der Aufgabenstellung müssen Sie sich aber noch für einen Anbieter entscheiden. Exemplarisch soll hier der Ablauf für rapidusertests.com gezeigt werden. Andere geeignete Kandidaten finden Sie schnell, wenn Sie der Einleitung folgen und die Suchmaschine Ihres Vertrauens befragen. Da es fast überall besondere Angebote für Neukunden gibt, können und sollten Sie zudem bei gesteigertem Interesse an diesem Thema einfach mehr als eine Plattform ausprobieren und sich erst später für ein Angebot entscheiden.

Test erstellen

Bei der Anlage eines neuen Tests geben Sie zunächst die Zielseite an, auf der der Proband einsteigen soll. Das kann eine einseitige Landingpage für aus Suchmaschinen oder per Banner “eingekaufte” Besucher, eine Detailseite Ihres Shops oder auch die Startseite Ihrer Domain sein – je nach Aufgabenstellung. Wenn Sie anschließend auswählen, wie viele Tester diese Aufgabe erfüllen sollen, können Sie eigentlich schon mit der Aufgabe starten.

Sollten Sie aber konkrete Anforderungen an die Tester stellen wollen, blenden Sie per Klick die “Zielgruppen-Anforderungen” ein und beschreiben Sie so genau wie möglich, wer für die Durchführung dieses Tests geeignet ist. Eine Auswahl der vom Anbieter rekrutierten Tester erhält Ihren Test nebst Beschreibung und Anforderungen per Mail und jeder entscheidet dann selbst, ob er diesen Test durchführen will. Sprich: Bei Portalen, die ein gesundes Verhältnis von Testern zu Nutzern haben, ist die Gefahr unpassender (unehrlicher) Tester zwar kleiner (da diese regelmäßig “Testangebote” erhalten und nicht darauf angewiesen sind, jeden Test durchzuführen), dennoch bleibt hier ungeachtet der Qualität Ihrer Anforderungsformulierungen stets ein Restrisiko und der Proband weitestgehend auch anonym.

Im nächsten Block beschreiben Sie den Einstieg in den Test und die Aufgabe(n). Je nachdem, wie komplex die einzelnen Schritte sind, können Sie beruhigt auch mehr als nur eine Aufgabe definieren, die vor oder nach der Hauptaufgabe (z. B. dem Einkauf im Shop) ausgeführt werden können, solange dies realistisch in einer Maximalzeit von ca. 20 Minuten zu schaffen ist. Mehrere Eingabefelder bedeuten aber nicht, dass Sie zwingend mehrere Aufgaben beschreiben müssen: Bedenken Sie, dass jeder Tester nur eine begrenzte Zeit motiviert für sein “Festgehalt” arbeiten wird, das unabhängig von der Komplexität Ihrer Aufgabe ist.

Tipp: Wissen Sie, dass die Aufgabe in wenigen Minuten abgeschlossen ist, kann es hilfreich sein, den Probanden vorher zum “Stöbern” aufzufordern (vor allem, wenn dies auch dem Verhalten der rechten Besucher aus Ihrem Einstiegsszenario entsprechen würde). Denn die Kommentare zum Inhalt und das Verhalten rund um die Kernaufgabe können mitunter vollkommen unerwartete Ergebnisse und Denkanstöße (für naturgemäß schnell betriebsblind gewordene Webmaster) liefern. Als Hilfestellung können Sie beim Ausfüllen nicht nur vorgefertigte Beispielaufgaben zur Inspiration nutzen, sondern z. B. auch per Live-Chat oder Telefon direkte Unterstützung vom Betreiber anfordern, wenn Sie sich bei der Formulierung schwer tun sollten.

Abschließend können Sie noch Fragen definieren, die Sie den Probanden stellen möchten. Hierbei gelten die gleichen Hinweise wie zuvor: Nutzen Sie diese Möglichkeit, um gezielt nach durchgeführtem Test abschließende Beurteilungen einzuholen. Übertreiben Sie es aber nicht und fügen Sie nur Fragen hinzu, wenn die Beantwortung im Zeitlimit möglich ist und Sie mit den Antworten auch wirklich etwas vorhaben!

Wenn Sie die Beschreibung Ihres Tests, die Anmeldung und Bestellung abgeschlossen haben, besteht der nächste Schritt aus “warten”. Normalerweise erhalten Sie aber schon innerhalb eines Tages erste Ergebnisse, die Sie bereits sichten und auswerten können, während ggf. noch weitere Probanden ausstehen.

Tests auswerten

Die Auswertung der Sessions aller Probanden startet i. d. R. damit, dass Sie sich die Videos fertiger Tests einzeln ansehen und dazu gleich Notizen erfassen. Um nachzusehen, wie viele Tester bereits Ergebnisse geliefert haben, dient ein Dashboard, in dem Sie nach Auswahl eines Tests (wenn Sie bereits mehrere durchgeführt haben) eine Auflistung der Testsessions mit Angaben zum Probanden und der Länge der Session erhalten.  Auch die Antworten auf alle Abschlussfragen, die Sie bei der Definition der Aufgabe hinzugefügt haben, werden hier für alle Tester gesammelt.



Um die Ergebnisse eines Probanden einzusehen, dient der Link “Video auswerten”. In dieser Einzelansicht sammeln Sie Ihre Notizen und daraus resultierenden Schlussfolgerungen in separaten (einfachen) Textfeldern.

Tipp: Dabei bestimmte Konventionen einzuhalten, die sowohl Notizen als auch Schlussfolgerungen für alle Probanden in ein einheitliches Format zwingen, ist spätestens dann hilfreich, wenn mehr als eine Person zur Auswertung beiträgt oder die Daten später in einem wohlgeformteren Dokument weiterverarbeitet werden sollen. Laufzeiten bei Notizen, die das Auffinden der passenden Stelle im Video erleichtern, sind ebenso eine gute Idee wie fortlaufende Nummerierungen (z. B. “1-3″ für die dritte Notiz beim ersten Probanden) für eindeutige Referenzierung. So behalten Sie später in der konsolidierten Ansicht auf alle Schlussfolgerungen und Handlungsempfehlungen den Überblick und finden bei Bedarf schnell die richtige Stelle im passenden Video wieder.

Zusätzlich zu den Ergebnissen, die Sie in Bild und Ton konsumieren können, stehen Ihnen die Antworten des Probanden auf Ihre Fragen zur Verfügung – auch diese sollten Sie bei der ersten Sichtung einschließen und Anregungen oder Besonderheiten in Ihre Notizen übernehmen. Bleibt die Auswertung nicht nur ein ander Person hängen, ist Sorgfalt besonders wichtig. Denn wer hier lieber etwas mehr – auch “Kleinigkeiten” – notiert, hat zwar bei der Auswerung später mehr Arbeit, die Daten wieder zu konsolidieren und zu bestimmen, für wieviele Probanden ein bestimmter Aspekt (ggf. in untersdchiedlichem Maß) problematisch war…  dafür erhält man aber einen möglichst umfangreichen Blick sowohl auf die Anzahl als auch das “Gefahrenpotential” jedes identifizierten Kritikpunktes.

Testabschluss

Unter “Nachbefragung” und “Ihre Auswertung” finden Sie die Antworten auf Ihre Fragen sowie Ihre Notizen und Schlussfolgerungen in einer konsolidierten Ansicht, so dass Sie z. B. die Antworten aller Probanden auf eine bestimmte Frage im Zusammenhang sehen. Nun beginnt also die eigentliche Aufgabe, aus diesen Rohdaten und den Schlussfolgerungen nach Einschätzung und Priorisierung konkrete Verbesserungen Ihrer Website abzuleiten. Dass dieser Prozess ggf. schwieriger und fehleranfälliger als bei anderen Methoden ausfällt, ist bereits angesprochen – vergessen Sie es nur nicht. Es hilft bei der Auswertung, den Zugang zu den Ergebnissen mit anderen zu teilen und gemeinsam zu besprechen bzw. die Notizen mehrerer Personen miteinander abzugleichen und Punkte zu priorisieren. Entwickeln Sie daraus (gemeinsam) Ideen, wie eine Optimierung der identifizierten Schwachstellen aussehen könnte… und auf welchem Weg (und mit welchen Kennzahlen) man eine tatsächliche Verbesserung bei der geplanten Veränderung sicherstellen kann (weitere Tests, alternative Methoden etc).

Fazit

Ob als Lieferant für Hypothesen, die später in Tests erprobt werden, zur Qualitätssicherung Ihres neuen Checkoutprozesses oder zum letzten Schliff Ihrer Landingpages: Mit…

• einer sorgfältigen Beschreibung der Aufgaben,
• kritischer Begutachtung der Ergebnisse im Einzelnen und einem
• Konzentration auf gemeinsame Probleme mehrerer Tester im Überblick

können Sie aus solchen Tests mit wenig Zeit und bei geringen Kosten eine ganze Menge herausholen. Außerdem sind je nach Reifegrad der getesteten Site bzw. des Entwurfs einige bei der eigenen Qualitätssicherung übersehene technischen Probleme (siehe Teil 1), die in einem solchen Test aufgedeckt werden, mitunter echte Spaßbremsen, die man sonst ggf. erst “teuer” im Echtbetrieb gefunden hätte.

Ist man sich der Grenzen und Einschränkungen bewusst und erliegt nicht dem Drang, aus jeder Kleinigkeit, die in einem der Videos beobachtet wurde, gleich konkrete Änderungen auf der Website ableiten zu müssen, können interessierte Webmaster auch in Eigenregie zur besseren Website “im Discountverfahren” gelangen. Der Spielraum für Fehlinterpretationen ist potentiell höher als üblich. Die Gefahr einer in die falsche Richtung führenden Auswertung ist daher real, aber je nach Fall nicht unbedingt wesentlich größer als bei anderen Verfahren. Sie ist weiter minimierbar, wenn eigenes oder eingekauftes Expertenwissen im Spiel ist.

Die Nachteile sollten den interessierten Betreiber also nicht gleich abschrecken. Außerdem gibt es fast überall die Option, sich Hilfe ins Boot zu holen, wenn man sich bei der Erstellung und / oder Auswertung des Tests unsicher ist. Am Ende bleibt die Binsenweisheit, dass “ein wenig Testen” besser ist, als gar nichts für die Qualitätssicherung und Optimierung zu tun.

Die theoretische Möglichkeit, die Site durch die abgeleiteten Maßnahmen noch schlechter zu machen als zuvor kann man durch A/B-Tests & Co. in Grenzen halten. Wer den Kernprozess seiner Site kennt, eine Stunde Zeit für die Vorbereitung und Interesse an der Optimierung seiner Website hat, kann durch Remote User Testing mit minimaler finanzieller Belastung in das Thema einsteigen – und dabei ja ggf. auch einen gesunden Appetit auf mehr entwickeln. Nutzen Sie selbst diesen oder andere Dienste und möchten Ihre – guten oder auch schlechten – Erfahrungen teilen? Die Kommentarfunktion wartet auf Sie!

Kurzprofil: So geht Remote Testing

“Remote” Tests bedeutet zunächst einmal nur, dass der Proband i. d. R. nicht in einem Testlabor sitzt, sondern Aufgaben in (s)einer realen Arbeitssituation oder am eigenen Rechner löst. Das kann sowohl mit als auch ohne “online anwesenden” Testleiter geschehen. Die Nutzung eines Remote Testing Service bedeutet, dass Sie sich nicht selbst um Probanden, Infrastruktur, Software und Technik kümmern müssen, sondern ein Anbieter dafür zuständig ist. Sie steuern nur die Website, eine Aufgabenbeschreibung und ggf. einige Fragen und Anforderungen an die Probanden bei. Das vereinfacht vieles für den Auftraggeber, dafür muss aber auch ein gesteigertes Ungenauigkeitspotential in Kauf genommen werden. Remote Tests sind also weder ein vollständiger Ersatz für die o. g. Methoden, noch sind sie wirklich etwas Neues. Letzlich ist aber vor allem die Palette an deutschsprachigen Angeboten deutlich gewachsen und so erleben günstige Remote Tests derzeit trotz aller evtl. Einschränkungen einen wachsenden Zulauf. Der Ablauf für einen solchen Test ist bei den meisten Plattformen vergleichbar aufgebaut:

1. Sie melden sich bei einem Dienstanbieter im Web an und definieren online die konkrete Aufgabe, welche auf Ihrer Website erfüllt werden soll, stellen ein paar begleitende Fragen zusammen und wählen die Anzahl der gewünschten Tester aus
2. Danach wählt der Anbieter aus seinem Pool (idealerweise möglichst gegeignete) Tester aus und weist diesen Ihre Aufgabe zur Erledigung am eigenen Rechner zu
3. Die Tester erfüllen “laut denkend” Ihre Testaufgabe und nehmen parallel dazu den Bildschirm auf;  anschließend werden ggf. noch ergänzende Fragen zur Aufgabe / Website beantwortet
4. Sie erhalten über den Webdienst Zugriff auf die Video-Aufzeichnungen aller Test-Sessions, Antworten auf Ihre Fragen und ggf. weitere Infos wie Bewertungen o. Ä. zu Ihrer Site
5. Optional kann aus diesem “Rohmaterial” bereits eine Experten-Analyse durch den Anbieter gegen Aufpreis erstellt werden, die konkrete Handlungsempfehlungen aus den Testergebnissen ableitet… anderenfalls bleibt diese Aufgabe am Auftraggeber hängen

Daraus läßt sich schon an mehreren Stellen absehen, wo Missverständnisse und Fehlinterpretationen lauern, die den Wert eines solchen Tests sehr unterschiedlich gestalten können. Trotzdem: Wer bisher gar nichts getan hat, weil Ressourcen und Mittel für UX-Labs, Expertenanalysen, Eyetracking & Co. nicht vorhanden waren, kann zumindest ein geringes Budget und etwas Zeit in Remote Tests investieren und seine Chancen verbessern, die großen Probleme dennoch zu finden.

Auch dort, wo ausführlichere Methoden zur Analyse eingesetzt werden, können Remote Tests sinnvoll als Ergänzung dienen; z. B. zur preiswerten Kontrolle von durchgeführten Änderungen nach einem umfangreichen Test. So oder so ist es sowohl bei der Planung als auch der Auswertung eines Remote Tests empfehlenswert, sich über die Besonderheiten und Einschränkungen dieses Verfahrens im Klaren zu sein, um Missverständnisse und Fehlinterpretation zu vermeiden.

Besonderheiten: Darauf sollten Sie achten

Remote Tests nach diesem Schema unterscheiden sich in vielen Belangen von anderen Methoden. Die hier aufgelisteten Vor- und Nachteile wirken sich aber je nach Aufgabe unterschiedlich auf die Qualität und Nützlichkeit der Ergebnisse aus. Daher ist eine individuelle Betrachtung für jeden einzelnen Test sinnvoll, um potentielle Stolpersteine bei der Nutzung der Ergebnisse frühzeitig zu erkennen… und möglichst bei der Aufgabenstellung bereits zu berücksichtigen.

Vorteile

• Ressourcensparende und kurzfristige Vorbereitung von Tests möglich
• Geringe Kosten und schnelle Verfügbarkeit der Rohergebnisse
• Tester arbeiten an Ihrem eigenen Arbeitsplatz, was Störungen durch eine ungewohnte Umgebung minimiert
• Tests können bei unklaren Ergebnissen schnell mit weiteren Probanden und / oder angepassten Aufgabenstellungen bzw. Websites wiederholt werden
• Eignet sich daher besonders zur Kontrolle von geplanten Veränderungen auf einer Website oder Varianten für einen Test nach einer bereits (auf anderem Weg) erfolgten Analyse
• Durchführung des Tests und Auswertung ist ortsunabhängig; alle Daten stehen im Browser zur Verfügung

Nachteile

• Eine gezielte Auswahl der Probanden (Formulierung von technischen oder demografischen Voraussetzungen, Kontrolle der Zugehörigkeit zur tatsächlichen Zielgruppe) ist je nach Anbieter nur eingeschränkt oder gar nicht möglich
• Nicht alle Probanden sind gleichermaßen dazu in der Lage (oder durch die Vergütung ausreichend motiviert), sich in die beschriebene Situation und Aufgabenstellung einzudenken und “realistische” Ergebnisse zu liefern. Da Anbieter aber i. d. R. eine Vorselektion der Probanden durchführen, ist zumindest sichergestellt, dass jede Testperson grundsätzlich technisch ausreichend ausgestattet und in der Lage ist, laut bei der Lösung der Aufgabe zu denken… und das ist bereits mehr, als man bei “selbstrekrutierten Freiwilligen” voraussetzen kann
• Es besteht – z. B. bei der Aufgabenstellung – keine Gelegenheit, Rückfragen direkt zu klären oder notwendiges Verständnis sicherzustellen
• Bisweilen bei allen guten Vorsätzen nicht vermeidbares Eingreifen in den Test ist durch die räumliche und zeitliche Distanz zwischen Durchführung und Auswertung nicht möglich; meist auch keine Befragung mit Rückfragen / im echten Dialog nach dem Test
• Man erhält als Ergebnis nur die Antworten des Probanden auf zuvor gestellte Fragen, seine Anmerkungen während des Tests als Ton und seinen Bildschirminhalt (Browser) als Bild. Reaktionen des Users selbst wie Augenbewegungen, Mimik und Gestik bleiben auf der Strecke

Diese Aufzählungen sind sicher beide nicht komplett, beinhalten aber wesentliche – und oft auch maßgebliche – Punkte, die einen Remote Usability Test für viele Anwendungsfälle interessant  machen… und zugleich Grenzen aufzeigen, die berücksichtigt werden wollen. Dennoch: Auch wenn die Nachteile optisch überwiegen sollten, müssen die für einen konkreten Test relevanten Punkte nicht automatisch bedeuten, dass dieser keinen Wert haben kann. Denn bei aller “Ungenauigkeit” bleiben oft Punkte übrig, die kaum Spielraum für Interpretation lassen. Ein paar Beispiele:

• Technische Probleme: Wenn z. B. die Website unter bestimmten Rahmenbedingungen (Betriebssystem, Browser, Auflösung, Gerät) bei Testern nicht wie gewünscht funktioniert oder wahrgenommen werden kann, ist die Qualifikation des Probanden irrelevant
• “Grobe Fehler”: Nicht selten setzt sich auch hier das Pareto-Prinzip durch und Sie finden zu einem Bruchteil üblicher Kosten einen großen Anteil der wirklich großen Schwachstellen eines Entwurfs oder einer bereits “lebenden” Website. Fehlen z. B. wesentliche Angaben wie Versandkosten o. Ä. in einem Shop, sind solche Patzer auch mit Probanden zu finden, die kein aufwändiges Auswahlverfahren durchlaufen haben. Oder: Übersehen 4 von 5 Testern den Warenkorbschalter und klicken “versehentlich” auf die viel prominentere Schaltfläche zum Checkout bei PayPal, wird das vermutlich auch Besuchern passieren, die Sie per Suchmaschinenmarketing als Kunden für Ihren neu gestalteten Shop gewinnen wollen
• Unvoreingenommenheit ist wertvoll: Kein auf diese Weise rekrutierter Tester wird Sie aus Angst vor Konsequenzen schonen – Kollegen, Verwandte und Freunde, die die gleiche Aufgabe erfüllen sollen, aber schon. Wenn Sie also schon löblicherweise andere Meinungen einholen, liefert Remote Usability Testing potentiell realistischere Ergebnisse als andere LowBudget- (oder “NoBudget”-) Ansätze

Nicht zu testen ist auch keine Lösung!

Es gibt also gute Gründe, die für einen Remote Usability Test sprechen… solange Sie bei der Auswertung der Ergebnisse für jeden Punkt möglichst genau spezifizieren, wie groß die potentielle Ungenauigkeit durch die Einschränkungen des Verfahrens ausfallen. Die gute Nachricht: Kein Verfahren liefert 100% und so ist stets Vorsicht geboten, wenn konkrete Änderungen an wesentlichen Inhalten oder Prozessen auf aktiven Websites vorgenommen werden. Rücksprache mit Experten, Webcontrolling, kontrollierte Tests auf der Website mit einem Teil Ihrer Besucher oder weitere Remote Tests mit veränderten Varianten – es gibt fast immer einen Weg, eine Hypothese zu stützen, statt sich bei unklarem Effekt einer Anpassung nur auf das Bauchgefühl zu verlassen.

Freddy Grahl von der Remote Usability Testing Plattform rapidusertests.com bringt es auf den Punkt: “Jeder Usability-Test der eigenen Webseite, egal wie umfangreich und mit welcher Methode, ist besser als nicht zu testen. Jeder Test bringt Erkenntnisse und beugt der eigenen Betriebsblindheit vor – das an sich ist bereits höchst wertvoll.” Wenn Sie sich bisher noch nicht an das Thema gewagt haben, finden Sie hier eine “Kurzanleitung”, mit der Sie in spätestens einer Stunde Ihren ersten eigenen Test starten können:

Lesen Sie im zweiten Teil dieses Beitrags, die Sie einen Remote Usability Test vorbereiten, durchführen und auswerten.

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.

Update 02/2012: Sollten Sie vergleichsweise wenig Besucher auf Ihrer Website haben, kann es sinnvoll sein, zumindest zeitweise mehr Messungen als von Google vorgesehen anzufertigen. Dazu kann die Rate durch Anpassung des Trackingcodes manipuliert werden. Für den derzeit aktuellen asynchronen Trackingcode und eine Anpassung auf 100% wäre z. B. folgende Ergänzung erforderlich: _gaq.push(['_setSiteSpeedSampleRate', 100]); Weitere Infos hierzu finden Sie in der Dpkumentation zu Google Analytics.

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.

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.

Zielgruppe weibliche Surfer

Wie sieht es überhaupt mit dem Anteil der Internetnutzung bei Frauen aus? 1997 waren es noch nur knapp 5%, so dass sich hier eine Fokussierung auf weibliches Publikum gar nicht gelohnt haben mag. Heute sieht das anders aus und je nach Untersuchung beträt die “Internetisierungsrate” bei Frauen mehr als 60%. Geht man ein wenig mehr in´s Detail, steigt diese Rate (nicht überraschend) auf fast 100% im Segment der Studentinnen. Genrell ist die Nutzungsrate bei jüngeren Frauen höher, was nicht unbedingt gegen Chancen von Web-2.0 Themenportalen für Frauen spricht. Die “Zielgruppe Frau” sieht also offenbar vielversprechend aus und viele Themen bieten buhlen folgerichtig auf zahlreichen Sites bereits um die Aufmerksamkeit der Surferinnen.

Um sich abzusetzen, sollte man also möglichst die Bedürfnisse und Besonderheiten kennen. Die erste davon ist schnell erzählt, aber auch folgenschwer: Frauen tendieren zu kürzerem Surfen als Männer. Der Unterschied ist auch hier je nach Segment und Studie nicht immer konstant, aber die Tendenz klar. Muss man sich daher auf Websites für (primär) weibliches Publikum einfach nur besonders kurz fassen? Wenngleich Kürze im Web fast nie falsch ist, ist die Lösung leider nicht ganz so einfach. Zudem hängt das richtige Konzept auch von der Anwendung ab.

Wozu wird das Web genutzt?

Generell kann man sagen, dass es kaum signifikante Unterschiede zu Männern gibt – wohl aber in der Verteilung, was genau in welchem Umfang genutzt wird. So ist auch bei Frauen internetbasierte Kommunikation per E-Mail die Nummer 1. Jüngere Nutzerinnen sind zudem genau wie ihre männlichen Altersgenossen moderneren Kommunikationsformen wie Instant Messaging und selbst Twitter etc. zugetan. Soziale Netzwerke haben je nach Angebot zudem einen Überschuss an weiblichen Nutzern – zumindest je nach Betrachtungsweise. So sind mitunter Frauen die aktiveren bzw. engagierteren Nutzer auf vielen Portalen, die hauptsächlich der Kommunikation mit Freunden, Gleichgesinnten oder dem gemeinsamen Spielen (freilich in diesem Fall weniger Shooter, sondern friedlicher und zumeist gestalterisch motiviert) dienen.

Gern und oft nutzen Surferinnen das Internet zur Informationssuche, besonders in den Bereichen Freizeit, Shopping, Aus-und Weiterbildung. Produkterecherchen, die sich auf Angebote beziehen, die weibliches Publikum adressieren, werden zwar häufiger als erwartet von Männern angestoßen (besonders zu Geschenktopzeiten wie Weihnachten etc. ), aber dennoch liegt hier ein Schwerpunkt bei der Recherche. Frauen suchen vergleichsweise  weniger nach Nachrichten als Männer – vielmehr werden diese gern aus einer überschaubaren Anzahl von Quellen bezogen, wo sie dafür auch eine besondere Aufmerksamkeit erhalten.

Usability speziell für Frauen?

Schlechte Websites sind für Männer wie für Frauen zumeist einfach genau das, was sie sind: Schlecht. Wer zu viele Fehler macht, fällt also bei beiden Geschlechtern durch. Dennoch gibt es einige feine Unterschiede, die sich in verschiedenen Studien gezeigt haben. So ist z. B. weiblichen Nutzern tendentiell eine kurze Ladezeit  wichtiger als Männern. Generell gibt es eine größere “Usability- und Contentfokussierung”, was z. B. bedeutet, dass schlecht lesbare, zu kleine oder mit zu wenig Abständen ausgestattete  Texte, zu viele Wechsel von Schriftarten und -schnitten oder weniger Übersicht bei der Inhaltsgestaltung Surferinnen potentiell schneller abschreckt.

Besonders fatale Wechselwirkungen mit der im Web nachweislich existierenden Vorliebe für´s Shopping haben unklaren Prozesse in Shops. Hier verzeihen Frauen deutlich weniger als Männer und zeigen oft eine weitaus höhere Absprungrate, wenn Vertrauen, Performance oder Erklärungen im Prozess Hürden aufwerfen.

Ebenso besonders für Shops interessant sind zwei weitere Aspekte: Aktualität und persönliche Beratung als Ergänzung zum Webangebot sind Frauen meist besonders wichtig. Callbackfunktionen, leicht zugängliche Kontaktinformationen für Support bzw. Pre-Sales-Beratung und stets aktuelle Produktdetails sind unabhängig davon aber ohnehin für jeden Shop ratsam.

Auch Ausnahmen von üblichen Regeln kann man sich ggf. erlauben, wenn sich eine Site direkt an weibliches Publikum richtet. So wird eine ausgefallene Navigation u. U. durchaus akzeptiert, wenn sie zielgruppengerecht ist – z. B. also besondere grafische Navigationsformen, die üblicherweise auf nicht direkt an Frauen gerichteten Sites problematisch wären. Intuitivität ist aber auch in solchen Fällen erforderlich, damit kein Bedienungsfrust aufkommt, wie man ihn z. B. auch von einigen Websites für Kinder kennt, die allzusehr aus Erwachsenensicht versuchen, eine kindergerechte Navigation anzubieten.

Vertrauensbildung

Unvollständige oder unklare Angaben auf Websites, speziell im Kontaktbereich oder auf Startseiten, werden von allen Surfern mit mangelndem Vertrauen zurückgezahlt. Wie sieht es aber mit der Gestaltung zusätzlicher Vertrauensbildungsmaßnahmen aus? Lieber grafisch, lieber viel oder lieber wenig Text?

Eine recht junge GfK-Studie hat gezeigt, dass Männer eher durch “harte Fakten” wie z. B. nachvollziehbare Referenzen (möglichst beeindruckender Kunden) überzeugt werden können. Bei Frauen hingegen ziehen eher auf Bildern transportierte Botschaften. Passt ja prima zur eingangs erwähnten kürzeren Surfzeit, so dass die Lösung viele Siegel und Bilder sind und auf Referenzen und lange Texte verzichtet werden kann, wenn Frauen das Ziel einer Site sind? Nein. Denn die gleiche Studie gibt an, dass über 65% aller weiblichen Teilnehmer der Umfrage nur durch ausführliche Erklärungen in Textform zu ihrem Vertrauen finden.

Fazit: “Text-Usability”, klare Strukturen und Prozesse, ein gutes Angebot an aktuellen, ausführlichen Informationen sowie aussagekräftige Bilder scheinen genau so wie annehmbare Performance und angemessene Navigation relevante Punkte zu sein, wenn Surferinnen zur Conversion kommen sollen. Da dies auch für Männer gilt, kann auf dieser allgemeinen Ebene kaum eine “Sonderempfehlung” gegeben werden, wenn eine Site speziell auf Usability für Frauen achten will.

Wird dieser allgemeine Level aber verlassen und stattdessen ein konkretes Webangebot betrachtet, lassen sich aus existierenden Studien zu vergleichbaren Sites und verfügbaren Messdaten zum konkreten Benutzerverhalten oft signifikante Unterschiede herauslesen, die Potential für ebenso bedeutsame Verbesserungen haben – im Einzelfall lohnt sich die Untersuchung daher definitiv.

Mit Schlangen leben…

Nicht nur bei Umwegen über andere Sites, sondern auch auf Ihrer Website selbst, wo vielleicht eher untypische Pfade gefunden wurden, ist ein “typischer” Wiederkehrer mit einmal als funktionierend Erlerntem unreflektiert zufrieden und macht nimmt dabei teilweise regelmäßig seltsamste Umwege – eben Schlangenlinien. Er wird auch nicht auf geradere Wege ausweichen… es sei denn, ein Hinweis wie Breadcrumbs, Texthinweise oder Links in übergeordnete Seiten zeigen kürzere Wege ganz offensichtlich auf. Oder die interne Suchfunktion ist erfreulicherweise so gut, dass künftig hierüber die gesuchte Seite wieder aufgerufen wird.

Wenn aber jemand gern einen Link an Stelle x verwendet, der eine Abkürzung darstellt oder eine Listbox gefunden hat, die schnell zum Ziel führt, werden kürzere Wege zum gleichen Ziel in der Regel definitiv nicht mehr aktiv gesucht. Daher werden bedauerlicherweise oft auch beim nächsten Besuch alle anderen Inhalte auf solchen “Brückenseiten” (aus der Sicht des Anwenders) eher ausgeblendet, denn sie sind nicht wichtig. Das werden sie erst dann wieder, wenn der einmal gefundene Umweg plötzlich nicht mehr da sein sollte.

…aber Sterne vermeiden!

Damit die Suche nach einem funktionierenden Weg zu einer gewünschten Information aber nicht allzu sehr in Frust endet, kann der Webmaster, der – z. B. zur Erhöhung der Conversionwahrscheinlichkeit (und im Gegensatz zum mitunter umstrittenen Leitsatz, möglichst nur einen Link pro Ziel je Seite anzubieten) – mehrere alternative Linkplatzierungen / -gestaltungen auf einer Seite verwendet, um auf eine andere Seite zu verweisen, selbst einiges unternehmen. Dazu gehört z. B. die entsprechende Kennzeichnung der Links mit ähnlichen, verwandten oder auf andere Weise möglichst deutlich als “ähnlich” erkennbare Ankertexte. Vor allem aber die Erkennbarkeit bereits besuchter Links vermeidet, dass man dieselbe Seite mehrfach besucht und dies erst merkt, wenn man sich durch die ersten Absätze gelesen hat. Und nur dieses Mittel ist auch dann wirksam, wenn mehrere Seiten Links zu zentralen Inhalten aufweisen, die über die normale Navigation hinausgehen; also z. B. durch Deeplinks in Textabschnitten, Promotionsblöcken, Eigenbannern etc. denn ohne aktive Vermeidung solcher Bewegungsmuster, die im Gegensatz zur Schlangenlinie eher “Sternen” gleichen, welche nur eine einzige Seite (oder wenige) als Ausgangspunkt haben und deren Zacken mitunter sogar mehrfach besucht werden, ist enorm wichtig. Gelangt man immer wieder in die selbe, aber eben falsche Seite, ist dies für den Benutzer irgendwann so frustrierend und offenkundig nicht “vorwärtsbringend”, dass er gar nicht anders kann, als seine Erkundung abzubrechen.  Denn die Suche nach einem – zur Not auch geschlängelten – Weg zu einer interessanten (oder konkret gesuchten) Information funktioniert nur so lange, wie der Suchende den Eindruck hat, dem Ziel näher zu kommen… und sei dieses Ziel noch so unkonkret.

Besuchstiefe für “Stöberer” erhöhen

Die Tatsache, dass man sich auch (oder gerade) im Web mit funktionienden, aber möglicherweise nicht unbedingt effizienten Wegen zufrieden gibt und alles, was man als funktionierend kennen gelernt hat, nicht zwingend hinterfragt, kann man unter bestimten Umständen sogar zu seinem Vorteil nutzen. Denn wenn jemand ausreichende Zeit bei einem erneuten Besuch im Gepäck hat und sich kaum Gedanken um das Erforschen Ihrer Navigationsstuktur macht, wird er möglicherweise gern ein paar weiteren Links auf der bereits kennen gelerten Seite folgen. Denn ist er nicht gerade auf der Jagd nach bestimmten Informationen, begibt sich der internetaffine(re) Leser auch gern auf Streifzug… und benutzt dann vielleicht als wiederkehrender Besucher auch Ihre Site als Ausgangspunkt. Es kann ja auch nichts Schlimmeres passieren, als ein Klick auf “Zurück” und einem neuen Versuch… und man findet mitunter zudem in der Tat in diesem “unspezifischen Suchmodus” Dinge, die man vielleicht (irgendwann) mal gebrauchen kann

Da dieses Muster also nicht immer zu vermeiden ist, sollte es besser gleich durch die interne Verlinkungsstruktur unterstützt werden. Oft finden Sie so z. B. in Blogs Verweise auf Artikel der gleichen Kategorie in “Siehe auch“, “Ähnliche Artikel” o. Ä. überschriebenen Bereichen, Tagclouds und dergleichen mehr. Diese Elemente dienen nicht nur der Optimierung der internen Verlinkung, die man bzgl. Suchmaschinen im Auge haben mag, sondern sie fördern genau den Typ Besucher, der gerade Willens ist, eine Umleitung zu weiteren interessanten Inhalten zu suchen…

Ein so erstelltes Design für eine Printfassung kann entweder in den Metadaten jeder Seite für das entsprechende Medium “print” deklariert (als separate Datei) eingebunden werden. ALternativ stehen die Anweisungen direkt in der “normalen” CSS-Datei in einem speziellen Block (@media print {…}) . Auch im Fall eines CMS, das automatisch Druckfassungen aller Seiten zur Verfügung stellt, wird in der Regel der gleiche Inhalt wie auf einer “normalen” Seite ausgegeben und nur durch zusätzliche Stilanweisungen per CSS in ein anderes Format gebracht.

Folgende Besonderheiten sollten Sie bei der Erstellung eines Drucklayouts beachten:

• Ideal ist schwarze Schrift auf weißem Hintergrund. Passen Sie also Farben an und entfernen Sie auch Hintergrundgrafiken besser explizit aus der Druckansicht, wenngleich diese in der Regel heute automatisch beim Druck über den Browser entfernt werden.
• Wenn Sie eine “Webschrift” im Web einsetzen, kann in einer Printfassung eine separate Druckschrift verwendet werden, die zu Ihrem CI paßt.
• Dabei können Sie auch gleich die Zeilenhöhe ggf. wieder reduzieren, wenn diese zu Gunsten der guten Lesbarkeit im Web vergrößert wurde.
• Bereiche, die eine vorgegebene Breite haben, sollten den Rahmen des Papierausdrucks nicht sprengen. Das Ausblenden von Randspalten und die Neuformatierung des Hauptinhalts mit entsprechenden Außenabständen auf ca. 80% der Breite paßt auf die meisten Fälle und läßt Platz genug für spätere Lochung der Seiten.
• Wenn Sie Randspalten, den Kopf und andere Standardelemente nicht komplett ausblenden können, denken Sie zumindest daran, dass die Navigation, umfangreiche Grafiken, Banner und Eingabemasken wie eine Suchfunktion o. Ä. keinen Wert auf einem Ausdruck haben und daher entfernt (display: none) werden können.
• Ebenso ist es eine gute Idee, die Ziele von Links in einem Druckdesign als sichtbaren Zexz in Klammern an einen Link anzuhängen, um ihn auch offline wertvoll zu machen.
• Sind Bilder mit sprechenden Titeln versehen, die als Ersatz für eine Bildunterschrift im Web dienen, können auf ähnliche Weise wie bei Links auch die Bildtitel (oder ALT-Texte) lesbar zur Abbildung ausgedruckt werden.
• Im Fuß einer Seite ist es eine gute Idee, die üblichen Links zum Impressum etc. auszublenden und ersatzweise einen weiteren Bereich einzublenden, in dem Kontaktinformationen die Haupt-Webadresse, Anschrift, Telefonnummer etc. des Anbieters zu finden ist. Wenn Ihre Seiten potentiell zum Wettbewerbsvergleich oder der Weitergabe an einen Entscheider dienen, kann dies ein nachvollziehbarer Vorteil gegenüber anderen Ausdrucken sein, bei denen der Kontakt erst auf der Website wieder online herausgesucht werden muss.

Argumente gegen neue Fenster

• Allen anderen Argumenten voran steht der hohe Anteil an Benutzern, die sich weniger auf die Navigation der Website konzentrieren, sondern die Navigationselemente des Browsers als “das Internet zeigende Anwendung” konzentrieren. Hier ist es insbesondere der “Zurück”-Button der Schaltflächenleiste aller gängigen Browser, die oft dazu verwendet wird, zu zuvor betrachteten Seiten zurückzukehren. Dabei eher nicht beachtet werden die Positionsmarkierungen  in Menüs  oder Brotkrumen. Während Brotkrumenspuren (“Breadcrumbs”) zumindest auch bei späterem Hinsehen noch in gewisser Weise dabei helfen können, einen einmal gegangenen Weg wieder zu finden, ohne die “Zurück”-Taste zu verwenden, sieht das bei der reinen Markierung des aktiven Menüpunkts schon anders aus.  Wenn Sie ein neues Fenster öffnen, kann diese Methode aber nicht mehr benutzt werden. Im einfachen Fall verärgert dies den Anwender “nur”, es ist aber auch denkbar, dass die Orientierung komplett verloren geht.
• Besonders verstärkt wird die Verwirrung durch neue Browser bei maximierten Fenstern. Denn in einem solchen Fall  merkt der Besucher es oft gar nicht, dass ein neuer Browser aktiviert wurde oder ein neuer Reiter erschienen ist. Gerade bei Browsern, die Reiter unterstützen, ist die Hilflosigkeit oft groß, wenn bereits mehrere Seiten geöffnet sind. Der neue Reiter am Ende führt eigentlich nur durch Schließen sicher zum zuvor verwendeten Reiter zurück (…was zum Vorteil für Nicht-Web-Dokumente wird, siehe unten). War in diesem Browser (oder diesem Reiter) zuvor die angezeigte Website, muss diese nun aus der Historie oder Erinnerung neu angesurft werden. Sprich: Der Besucher ist erst einmal verloren.
• Wird ein spezielles / mobiles Lesegerät oder eine bereichsbezogene Vergrößerung eingesetzt, um eine Seite zu betrachten, erschweren außerhalb der Lesehilfe geöffnete Fenster die Erkennung.
• Ebenso gehen bei neuen Browsern in der Regel individuell für die Site gefundene Einstellungen verloren und müssen vom Anwender wiederholt werden. Passiert dies mehr als einmal, ist der Besuch mit fast hundertprozentiger Sicherheit beendet.
• Popupblocker sind ein Feind neuer Fenster und können u. U. die Anzeige der neuen Information ganz verhindern.

Ausnahme Office-Dokumente

Wo PDF-Dokumente und Word- oder Excel-Dateien im Browser dargestellt werden, verzögern Sie die Antwortzeit der Website enorm und liefern oft nicht das, was der Anwender eigentlich erwartet hat – nämlich den Download der Information. Viele unerfahrene Anwender denken in einem solchen Fall an einen Absturz des Browsers und beenden die Ausführung zu Gunsten eines neuen Anlaufs – der dann ebenso “scheitern” wird. Durch die häufig anzutreffende Integration des Office-Pakets und des Readers in den Browser werden aber heute fast überall Dokumente dieser Art nicht mehr heruntergeladen und in einem installierten Programm “außerhalb” des Browsers geöffnet. Viele Anwender wünschen dennoch eine Bearbeitung z. B. einer Excel-Datei in einem “vollwertigen” Excel. Auch werden viele Klicks auf solche Links mit dem Ziel durchgeführt, die Datei auf dem lokalen Rechner zu archivieren. Daher wird auch – nicht oft, aber aus genau diesem Grund – das Ausliefern solcher Daten durch entsprechende Kennzeichnung im Header der Antwortseite das anhängende Dokument als “Attachment” deklariert, so dass automatisch ein Download erfolgt, statt das Linkziel im Browser zu öffnen.

Wo dies nicht geschieht, ist es in der Regel ausnahmsweise eine gute Idee, ein neues Fenster für die Darstellung der Produktinfos als PDF, Word oder Excel-Datei bzw. die Präsentation zu verwenden. Denn wenn die Betrachtung des Dokuments abgeschlossen ist, erfolgt in vielen Fällen reflexartig das übliche Schließen der Anwendung… in diesem Fall also des Browsers. Der Besucher ist damit für die Website erstmal verloren und muss, wenn er denn seine Sitzung wieder aufnehmen will, erneut den Browser starten und die Adresse eingeben oder den Weg neu suchen. Ist Ihr Besucher also wahrscheinlich nicht am Ziel seines Besuchs angelangt, wenn er die verlinkten Office- oder PDF-Dokumente betrachtet hat, sollten Sie darüber nachdenken, hier eine Ausnahme von der Regel zu machen.

Auch Websites, die nicht “direkt” zum Gewinn eines Unternehmens beitragen, können mitunter saisonale oder anlassbedingte Veränderungen aufweisen. Über den (oft sehr unpassend implementierten) zur Weihnachtszeit auf vielen Websites fallenden “Java-Script-Schnee” hinaus können bestimmte Dekorationselemente durchaus Ihren Zweck erfüllen. Denn diese erinnern den Benutzer daran, dass andere Menschen die von Ihnen besuchten Websites für Menschen machen und offenbar doch noch “in der gleichen Welt” leben. Mit einer subtilen und unaufdringlichen Verquickung eines aktuellen Anlasses mit der eigenen Site rückt man so also “virtuell” ein Stück zusammen.

Was ist wirklich angemessen?

Um den gewünschten Effekt zu erzielen gehört unbedingt, dass eine solche Veränderung dezent ist und nicht das Hauptangebot der Website oder der dekorierten Einzelseite überdecken. Anderenfalls wird Ihr “Special” (wenn es mehr als nur eine Dekoration ist) das eigentliche Angebot temporär nicht nur ergänzen, sondern “überbieten”). Ebenso darf die Dekoration nicht zu sehr aus dem Rahmen fallen oder gar das Thema einer Website torpedieren. Im Zweifelsfall sollten Sie  daher lieber mindestens zwei oder drei möglichst neutrale Dritte nach der Wirkung befragen, die nichts mit Ihrer Website zu tun haben, bevor Sie eine solche Anpassung “live” stellen. Es müssen nicht die “Lustigen Osterhasen auf der Startseite des Bestattungsunternehmens” sein… auch weniger offensichtliche Stilbrüche mögen den typischen Besucher eher verstören, obwohl Ihnen selbst hauptsächlich die Abwechslung vom seit Jahren unveränderten Design auffällt und daher auch schnell gefällt.

Zu einer erfolgreichen Implementierung gehört auch eine passende Zeitplanung. Mit einem angemessenen, kurzen Vorlauf (man freut sich nicht schon im August auf Weihnachten) kann die Anpassung oder Aktion dann auf der Startseite oder bestimmten Bereichen der Website aktiviert werden. Denken Sie auch unbedingt an eine sofortige Beendigung, wenn die entsprechenden Feiertage vorbei sind! Nichts ist ein deutlichereres Zeichen für eine veraltetete Site, wenn noch Ende Januar Kerzen und Kränze die Startseite schmücken!

Wer es richtig macht, bekommt möglicherweise nicht nur das unterschwellige positive Gefühl des Besuchers als zusätzliche Stütze, um einen Interessenten vielleicht zu einem geneigen und wiederkehrenden Kunden zu machen, sondern vor allem eben den offensichtlichen Anstrich der Aktualität, wenn die Website sich am Rande genau mit den gleichen Feiertagen oder Großereignissen auseinandersetzt wie der Besucher selbst.

Oft gibt es bestimmte Dinge auf einer Website, die sich für eine magelnde Aktualisierung geradezu anbieten und die man gern vergisst. Im einfachsten Fall ist eine mangelhafte Aktualisierung für den Besucher “nur” ein Zeichen mangelnder Sorgfalt. Im schlimmeren Fällen kann eine veraltete Information aber sogar den Kunden kosten. Oder den guten Ruf… oder beides. Dabei sind nicht nur Telefonnummern, Anschrift und andere Angaben im Impressum, Preis- und Versandangaben im Shop oder die veraltete Fassung der AGB gute Kandidaten, sondern z. B. auch individuelle Aussagen in einzelnen Abschnitten einer Produktbeschreibung.

Veraltete Testberichte, nicht aktualisierte Statistiken oder „stillgelegte“ bzw. „eingeschlafene“ Bereiche Ihrer Website, die von nicht mehr existierenden Produkten, aufgelösten Geschäftsbereichen oder nicht mehr angebotenen Dienstleistungen künden, können ab einer gewissen Größe überall “lauern”. Durchforsten Sie daher im CMS oder Browser regelmäßig Ihr eigenes Angebot, wenn es einen größeren Umfang erreicht hat und korrigieren, aktualisieren oder löschen Sie falsche oder veraltete Angaben, wenn diese nicht wie in einem Blog sinnvoll mit einem „Ablaufdatum“ versehen sind und wie eine Nachricht oder Pressemitteilung in einem chronologisch nachvollziehbaren Zusammenhang stehen – denn ansonsten sind die Steuertipps von gestern schnell zum folgenschweren Fehler von morgen geworden… und auch das ist definitiv nicht benutzerfreundlich.

Ein kleiner Tipp: Oft findet man auf Webseiten im Fuß einen Copyrightvermerk. Wenn der schon acht Jahre zurück liegt, sagt dem Besucher das zwar, dass es diese Site offenbar schon länger gibt (was gut ist), aber auch, dass man schon seit Jahren nicht mehr auf der eigenen Startseite bis nach ganz unten gescrollt hat (was nicht so gut ist). Wenn Sie dies nun lesen und lachen müssen, da der Hinweis auf dieser Domain ggf. inzwischen auch veraltet ist: Lachen Sie ruhig zu Ende und senden Sie uns dann bitte eine kurze E-Mail

Welche Arten von Breadcrumbs gibt es?

In der Praxis finden sich Breadcrumbs häufig über dem Inhalt und mit der Bemerkung: „Sie sind hier:“ eingeleitet. Über Links zu allen durchschrittenen Kategorien erhält der User jederzeit die Möglichkeit auf “seinem Pfad” an beliebige zuvor besuchte Stellen zurück zu kehren. Sie beantworten somit die ungestellte Frage nach dem: „Wo bin ich?“. Die typische Form der Brotkrümel wird daher “Location Breadcrumb” gennannt. Sie geht davon aus, dass man genau auf einem Weg zu einer speziellen Seite kommt, so dass jede angezeigte Seite einen definierten Pfad von der Startseite über ein Segment der Hauptnavigation und ggf. weitere Schritte bis zur aktiven Seite anzeigen kann. Sie zeigen somit den aktuellen Standpunkt, an dem sich der User gerade befindet und bieten ihm einen besseren Überblick über die Struktur und Tiefge der Seite.

Alternative Formen sind ebenso im Gebrauch, wennauch eher unüblich. So kann z. B. die Frage nach dem „Wo komme ich her?“ bei der Generierung von Breadcrumbs im Vordergrund stehen. Diese Variante zeigt dem User also seine tatsächlich erfolgten letzten Klicks an, die ihn an die Stelle geführt haben, an der er sich gerade befindet. Wird also z. B. eine Abkürzung von der Startseite zu einer tiefer liegenden Unterseite verwendet, fehlen hier ggf. die Schritte, die “auf normalem Weg” einer Location Bradcrumb – Anzeige dazwischen stehen würden. Eher unüblich sind hingegen so genannte “Attribute Breadcrumbs“. Diese zeigen z. B. unterschiedliche Stichworte, mit der ein Besucher über die Suche oder andere Navigationselemente wie “TagClouds” zu dieser Seite gelangen könnte. Besonders bei Sites, die vorwiegend Suchergebnisse bieten und diese auch nach vorgefertigten und ggf. auch kombinierbaren Filtern anzeigen können (“Autos unter 500,– Euro, 50 km Umkreis”), nutzen diese Form der Standortsanzeige. Aber auch in dieser Tippsammlung werden, wenn überhaupt – eher attributbezogene Hinweise (hinsichtlich der Kapitel) angebracht (mehr dazu am Ende des Beitrags).

Wo und wie sollten Breadcrumbs umgesetzt werden?

Eine Breadcrumb-Navigation sollte im Idealfall über dem Hauptinhalt der Webseite oder (abhängig vom Design) sogar über dem Kopf platziert sein. Da man Breadcrumbs zwar finden soll, diese aber den Inhalt nicht dominieren dürfen, ist hier ausnahmsweise auch eine kleine Schriftart erlaubt – zumindest kleiner als die Schrift im Hauptinhaltsbereich. Die Worte: „Sie befinden sich hier:“ sind ein guter Begleiter, wenn Sie sicherstellen wollen, dass auch unerfahrenere Besucher erkennen, worum es sich bei diesem Block handelt. Ansonsten kann es auch ausreichen, die Pfadanzeige mit “Startseite” oder “Home” zu beginnen – je nachdem, wie Sie die Homepage Ihrer Domain in der Navigation benannt haben. Idealerweise enthalten also auch die tieferen Ebenen die gleichen Bezeichnungen wie in den Navigationsmenüs. Jeder dieser Texte wird als Link zur jeweiligen Seite ausgelegt, damit die Pfadanzeige auch tatsächlich zur Navigation genutzt werden kann.

Die einzelnen Ebenen müssen voneinander also sinnvoll getrennt sein. Dazu hat sich ein „»“ (“&raquo;” im Quellcode) als beste Option erweisen, da durch dieses Zeichen am ehesten klar wird, dass ein “Weg” von einer Seite zur nächsten dargestellt wird. Am Ende des Pfads steht dann die Bezeichnung (bei tieferen Ebenen ohne direkte Navigation auch schon mal der Titel) der aktiven Seite. Dies ist die einzige Stelle des Pfads, die sie nicht als Link ausstatten sollten, da dieser nur zur schon angezeigten Seite führen würde und den Besucher nur einen unnötigen Klick kosten kann. Achten Sie darauf, dass Sie auch dann, wenn Sie aus ästhetischen Gründen auf die Unterstreichung der Links in der Breadcrumb-Anzeige verzichten sollten (diese sollte aber spätestens beim Überfahren mit der Maus erscheinen), auf eine optische Unterscheidung zwischen den klickbaren Elementen und dem Endpunkt der Breadcrumb-Pfadanzeige.

Solche Zusatznavigationen werden bereits seit Jahren als kleine Helfer auf Webseiten erfolgreich genutzt. Selbst ungeübte User finden sich mit Hilfe einer guten Brotkrumen-Navigation schnell zurecht. Eine Breadcrumb-Navigation ist folglich dann sinnvoll, wenn ein gewisses Maß an Orientierung notwendig ist. Sie sollten jedoch nicht als Ersatz für eine schlüssige und schlanke Webseitenstruktur verwendet werden. Auch können Sie auf Breadcrumbs verzichten, wenn Ihre Website eine flache Struktur mit einer oder zwei Ebenen besitzt, so dass Sie durch auffällige Markierung des aktiven Menüpunkts bereits ausreichende Orientierungshilfen geben. Hier in den Usability-Tipps finden Sie Breadcrumbs nur dort, wo die Haupt- und Detailnavigation nicht mehr ausreichen, um die Position ausreichend zu kennzeichnen. Da dies ausschließlich in Beiträgen der Tippsammlung der Fall ist, wird lediglich das Kapitel eines Beitrags im Kopf angegeben, wenn dieser in einer Übersicht, als Einzelseite oder in Suchergebnissen angezeigt wird. Es handelt sich also eher um “Attribute Breadcrumbs” als um die klassische Variante.

Wer ein schönes Beispiel für gut platzierte und mit der Navigation übereinstimmende Breadcrumbnavigation sucht, wird hier also leider nicht direkt fündig. Als Ersatz soll hier die Gestaltung der Brotkrümel bei Heise online dienen:

Durch die Bezeichnung des Startpunkts und den genauen Pfad bis zum Titel der aktuellen Seite direkt unter der Hauptnavigation (rot markiert) ist sogar mit dem anderen Trennzeichen und ohne einführenden Text schnell klar, wozu dieser Block dient und wo man – zu welchem Zweck – klicken kann.

• Zweck der Websiste allgemein
• Natur und Kontext der speziellen Seite
• Konkurrierenden Angeboten
• Absicht, Vorkennnissen und Gemütszustand des Users
• …

sehr unterschiedliche Antworten auf die Frage nach dem optimalen Umfang gibt. Denn ein “angemessener” Umfang einer Seite ist noch recht leicht zu beschreiben und lautet ausnahmsweise mal anders als sonst: So viel wie möglich – ohne zu ermüden. Immer unter der Voraussetzung, der der Besucher scrollen kann, will und sieht, das er es soll.

Welche Seiten werden gescrollt?

Das Scrollen – also das aktive Anfordern weiterer Inhalte über das, was auf den ersten Blick zu sehen ist, hinaus – erfordert zunächst einmal, dass der User erkennen kann, dass eine Seite gescrollte werden kann. Am Einfachsten ist es, wenn Sie dabei auf einfach erkennbare Standardelemente wie der Scrollbalken des Browsers oder un-”verschönerte” Scrollbalken in auf andere Weise erzeugten Seitenbereichen zurückgreifen und auf alle Experimente verzichten, eigene Scrollelemente zu etablieren. Das kann zwar in einzelnen Fällen funktionieren, scheitert aber leider viel häufiger als dass es klappt. Und ja: Es muss auch ein Scrollbalken vorhanden sein. Auch das ist leider nicht immer der Fall.

Dann muss auch erkannt werden, dass es noch Inhalte gibt, die weiter unten zu finden sind. Hier ist das Hauptproblem, dass Sie nicht wissen können, wo genau die “Falz” (als Analogie zur Zeitungswelt) des Browsers verläuft. Verschiedene Auflösungen, unterschiedliche Browser und deren Bestückung mit zusätzlichen Toolbars machen es notwendig, mehrere “Falzkanten” in Betracht zu ziehen und wie immer alles, was wichtig ist, auch wirklich oben zu platzieren.  Um die übrigen Inhalte zumindest “erahnbar” zu halten, sind zudem die Abstände zwischen einzelnen Blöcken nicht zu großzügig zu gestalten. Auch Werbung (oder wie Werbung wirkende Elemente) können das falsche Signal senden: Hier kommt nichts mehr… oder zumindest nichts, was mich noch interessieren könnte. Aber der Rest der Seite muss ja erkannt und “erscrollt” werden…

Wie viel wird gescrollt?

Das kann eine ganze Menge sein und eine Seite kann durchaus einiges an Scrollen vertragen, ohne zu ermüden, wenn der Aufbau stimmt (zu Unterbrechungen weiter unten mehr). Viele Informationen auf einer Seite können zudem auch bedeuten, dass es viele Links zu weiteren Seiten gibt, die weiterführende Informationen zum gleichen Thema enthalten. Prinzipiell scrollen Besucher nie gern. Und erfahrene Webnutzer scrollen mehr als andere. Außerdem ist der Aufbau einer Site mit dafür verantwortlich, ob überhaupt gescrollt wird oder nicht (siehe unten). Dennoch kann es je nach Typ der Seite und Aufbau des Inhalts durchaus sein, dass bis zu 80% der User mehr als eine “Bildschirmseite” betrachten. Typisch sind aber eher Werte, die deutlich darunter liegen. Ein wirklich typischer Wert ist allerdings nicht leicht zu bestimmen. Damit das Problem aber nicht zu klein erscheint, nehmen Sie einfach die folgende “Faustformel” für Unterseiten: Die Hälfte der Besucher wird nicht sehen, was nicht auf den ersten Blick gesehen werden kann. Die andere scrollt eine weitere Bildschirmseite nach unten. Davon kommt wiederum nur noch etwa ein Viertel noch weiter. Mehr als drei Bildschirmseiten sieht nur noch derjenige, der sich entschlossen hat, den gesamten Inhalt zu konsumieren (wie hoffentlich der eine oder andere in dieser Tippsammlung). Auf der Startseite Ihrer Domain (siehe unten) sind diese Werte sigar noch zu halbieren und verschlechtern sich ab dem zweiten Besuch noch weiter.

All diese Hinweise gelten allerdings für vertikales Scrollen. In horizontaler Richtung hingegen sollten Sie definitiv möglichst keinen User zum Scrollen zwingen. Genau deshalb sind flexible Layouts und Mindestbreiten oder eine an typische Auflösungen angelehnte und nicht zu groß gewählte feste Breite Grundvoraussetzung dafür, dass sich der Besucher auf das Scrollen einläßt. Mehr Hilfe zur Wahl des passenden Layouts finden Sie in einem eigenen Beitrag dieser Tippsammlung.

Generell ist aber gegen die Befüllung einer Seite mit vergleichsweise viel Inhalt zu einem Thema nichts Verwerfliches. Im Gegenteil, Besucher lesen gern mehr auf einer Seite, ohne sich durch viele Links selbst zur Fortsetzung zu bewegen – solange die Fülle der Informationen nicht entmutigt oder abschreckt. Und leider nur unter der Voraussetzung, dass sie auch wirklich auf der Suche nach relativ ausführlichen Informationen sind.

Das ist aber dummerweise nur selten der Fall. Daher haben Sie schon an mehreren Stellen gelesen, dass man das Querlesen und Überfliegen der Texte erleichtern und unterstützen soll. Außerdem gibt es durchaus Seiten, auf denen zu viel Content genau das Gegenteil von dem bewirkt, was gewünscht ist. Nicht nur beim Besucher: Auch Suchmaschinen lieben Content… aber lieber weiter oben. Wirklich Wichtiges kann auch für eine Suchmaschine nur noch bedingt durch entsprechende Strukturierung des Quellcodes / Inhalts mit einiger Wichtigkeit versehen werden. Zudem ist die Tatsache, dass inter gewissen Umständen auch mehr als eine Bildschirmlänge gelesen wird, kein Freibrief für Übertreibungen.

Das Aufstellen eines Regelwerks jensets von “Wichtiges nach oben, möglichst nicht mehr als drei Bildschirmseiten” ist also schwierig. Ob eine Seite wirklich rigoros eingekürzt werden kann und sollte, oder ob mehr Inhalt an gewissen Stellen sogar benutzerfreundlicher ist, als die überschaubare Variante, sollten Sie nicht unbedingt nur mit vorgefertigten Meinungen im Hinterkopf betrachten, sondern im Zweifelsfall lieber je Seite individuell entscheiden. Halten Sie dabei aber auf jeden Fall – auch auf Seiten mit geringerem Umfang – an die bereits bei der Textgestaltung genannten Regeln zur Vereinfachung des Querlesens, damit ein Besucher überhaupt einen Anreiz finden kann, an der einen oder anderen Stelle in den Inhalt einzusteigen – denn die wenigsten Besucher beginnen ganz oben und nehmen sich dabei vor, bis zum Ende zu lesen.

Einstiegspunkte für detaillierteres Lesen bieten

An welcher Stelle ein Besucher also in den Inhalt einsteigt, hängt von der Auffälligkeit einzelner Elemente, der Anordnung und dem Gesamteindruck jeder einzelnen Seite ab – und dem bereits betrachteten Kontext auf anderen Seiten und dem dadurch bereits Erlernten über den Aufbau. So kann ein Anwender einen Bereich, von dem er weiß, dass dort hauptsächlich Navigationselemente zu finden sind, bei der Betrachtung einer gerade neu geöffneten Seite unbewusst so stark ausblenden, dass selbst auffällig gestaltete Banner oder andere gewollte Störungen nicht mehr zur Kenntnis genommen werden.

Auch der als „Bannerblindheit“ bekannte Effekt, der den Besucher sowohl für bestimmte Bereiche als auch für bestimmte Formate „unempfänglich“ machen kann, betrifft nicht nur Werbung, sondern auch werbeähnliche gestaltete Elemente einer Webseite. Sorgen Sie daher unbedingt mit den aus dem Abschnitt „Gliederung der Inhalte“ bekannten Mitteln für Übersichtlichkeit, Ankerpunkte für die Augen des Betrachters und eine gut lesbare Darstellung, wenn sie mehr als nur ein paar Sätze schreiben. Und denken Sie vor allem “in Falznähe” (siehe oben) an diesen Effekt.

Sonderfall Startseite

Speziell auf der Startseite – und anderen “wesentlichen” Seiten für Ihre Zielprozesse – müssen Sie stets bedenken, dass es eine nennenswerte Anzahl von Besuchern gibt, die mit kleineren Auflösungen und einer natürlichen Abneigung gegen Scrollen daherkommen. Während noch ein messbarer Anteil von für Startseiten typischerweise ca. 25% zumindest eine (und und ca. 10% bis zwei “Bildschirmseitenhöhen”) scrollt, wenn dies einfach ist und man erkennt, dass es weiter unten noch interessante Informationen gegen könnte, konzentriert sich ein Großteil der Besucher auf das, was er ohne Scrollen von Ihrer Startseite zu sehen bekommt. Außerdem kommt erschwerend hinzu, dass spätestens beim zweiten Besuch weiter unten keine Dinge mehr erwartet werden und meistens gar nicht mehr gescrollt wird, während Unterseiten eine höhere Aufmerksamkeit bekommen. Vergessen Sie also den Newsblock ganz unten, wenn dieser nicht nur für Suchmaschinen interessant sein sollte.

Auf Ihrer Homepage müssen Sie möglichst den “schlimmsten” Fall annehmen: Der User hat mehrere Toolbars im Browser aktiviert und kommt mit einer Auflösung von 1024 x 768 oder 1280 x 1024 Punkten daher (was für Ihre Site typischer ist, erfahren Sie durch Webanalysetools). So oder so haben Sie für die meisten User weniger als 1000 Pixel Höhe, um neben einer prägnanten Kurzvorstellung (“Elevator Pitch” /  “Welcome Blurb” – dazu an anderer Stelle in einem späteren Beitrag mehr) ggf. die Kernelemente Ihrer Startseite unterzubringen. Und da auf Startseiten – wie gerade gelesen- scrollen besonders unpopulär ist, sind Sie ganz besonders hier auf Konzentration auf das Wesentliche angewiesen.

Kann es nicht auch zu wenig Inhalt geben?

Klar kann es das. Wenn Sie (auf Unterseiten) weniger als ein paar Sätze schreiben, müssen Sie z. B. verstärkt über die Gestaltung Ihres Inhalts nachdenken. Nicht nur, weil Webseiten mit wenig Text wenig Chancen in Suchmaschinen haben, sondern weil  die Gefahr besteht, dass der Inhalt durch Standardelemente und Navigation so dominiert wird, dass er nicht mehr wahrgenommen werden kann.  Im Zeitalter gut gefüllter Blogs und Portale voll frischer Information (deren Nutzbarkeit steht hier nicht zur Debatte) aus der Web 2.0 – Gemeinde ist ansonsten überdies fast überall mehr Informationen zu Ihrem Thema, Ihrem Produkt, Ihrer Informationswelt stehen, als auf Ihrer eigenen Seite.

Daher ist es auch bei schön gefüllten Produktbeschreibungen per Auflistung von Fakten auch für Shops inzwischen unerlässlich, alle Möglichkeiten zur Generierung weiterer hilfreicher Inhalte wie (zur Not moderierter) Kundenrezensionen, Erfahrungsberichte, Testergebnisse oder sonstige Angaben, die der Besucher sonst auf anderen Seiten suchen müsste, auszunutzen. Warum Content also “King” ist, wird auch hier ein wenig besser deutlich… Lesen Sie in einem eigenen Beitrag, wo und wie Sie die Gratwanderung zwischen Usability und Suchmaschinenoptimierung meistern können.

Gute Fragen. Außerdem wird dieser Text immer länger, ohne endlich mal wieder mit einer Zwischenüberschrift aufgefrischt, unterbrochen, mit Struktur bedacht wird. Also los, was hindert uns? Ehrlich gesagt: Keine Ahnung. Es macht einfach so viel Spaß… und außerdem ist es ein prima, klasse(!), einwandfreies; ja aus dem echten Leben gegriffenes Beispiel, dass man im Web (Sie wissen schon, dieses Internet… das was Sie sehen, wenn Sie durch den Browser schauen) jede Menge Text ablegen kann, der eigentlich überhaupt keinen Zweck erfüllt.

Ein Beispiel: Übersichtsseiten

Die Technik im Shop hat eine Übersichtsseite erfordert, das Marketing aber keinen Text geliefert. Nur ein paar Links sind zu wenig und ein “Klicken Sie auf eine der Kategorien auf der linken Seite in der Übersicht” wollte so allein auch nicht unter der allmächtigen Hauptüberschrift gefallen. Also wird Text angefordert oder einfach auf die Schnelle produziert. So lange, bis in der zufällig gerade herrschenden Auflösung des zur Befüllung der Seite Verdammten das Ganze “irgendwie schlüssig, formschön… befüllt” aussieht.

Der User, der diese Übersichtsseite durch Klick auf die Hauptnavigation erreicht, muss nun die Aufgabe lösen herauszufinden, was für ihn relevant ist (wahrscheinlich nichts) und wendet sich dann ganz von selbst der Navigation, einem auffälligen Element oder dem “Zurück”-Button zu. Je nach Laune und Leidensfähigkeit.

Während der Ausweg hier vielfältig ausfallen kann und z. B. Topseller, Abkürzungen zu den Hauptprodukten der Kategorie etc. sinnvoller Inhalt solcher Seiten sind, kann auch die Einkürzung und das Entfernen aller Füllbegriffe und ganzer unnötiger Absätze hier schon viel zur Benutzerfreundlichkeit beitragen. Wo dies nicht geht, helfen die üblichen Mittel wie Zwischen-Überschriften, Aufzählungen, Hervorhebungen, um den Text möglich auch für Querleser – also faktisch alle – nutzbar(er) zu machen.

Kürzen Sie an den wesentlichen Stellen

Viele Seiten eines Webauftritts sind oft durchaus kürzbar. Vor allem auf der Startseite konkurrieren oft nicht nur zu viele, sondern auch zu umfangreiche Angebote um die Aufmerksamkeit des Besuchers.

Ein Hauptbestandteil ist die Kurzvorstellung des Zwecks Ihrer Website und / oder Ihres Unternehmens. Auch dort findet sich bei vielen Startseiten entweder das Potential zum Einkürzen oder zur Verbesserung der Lesbarkeit durch Hervorhebung, Umstellung, Strukrur… oder alles auf einmal.

Als Faustregel darf gelten: Kürzen Sie zunächst an den wesentlichen Stellen. Das sind z. B. die folgenden Kandidaten:

• Startseite
• Unternehmensvorstellung
• Einstiegsseiten in die Hauptbereiche
• Übersichten
• Einleitungen, Erklärungen, Zusammenfassungen

Ergänzung zum letzten Punkt: Bleiben Sie Begriffen wie “Kurzbesschreibung” oder “Zusammenfassung” dort treu, wo es ausführlichere Inhalte gibt, die jeder Interessierte dann ausführlicher studieren kann. Dazu sollte es das Thema des Inhalts aber auch hergeben: Während Blogs, Informationssammlungen, Forenbeiträge etc. gern etwas ausführlicher sein dürfen und der Leser sich darauf eingestellt hat, ganze Sätze zu lesen (meistens zumindest), sollte eine Funktionsbeschreibung zu einem Anmeldeprozess, die Einleitung zu einem Kontaktformular etc. möglichst wenig Zeit des Benutzers beanspruchen. Denn er liest diese Abschnitte – wenn überhaupt – nur Bruchstückhaft und Ihnen zuliebe. Eigentlich will er ja etwas ganz anderes: Einkaufen, eine Nachricht senden, eine Frage stellen oder was auch immer. Aber eben nicht lesen, wie das geht. Ist eine Funktion also nicht selbsterklärend, sollten zumindest die Anweisungen kurz und hilfreich sein.

Pyramiden, die auf dem Kopf stehen

Speziell dort, wo längere Erklärungen zwar erforderlich sind, aber nur von wenigen Benutzern auch in aller Ausführlichkeit benötigt werden, ist zusätzlich zu einer schnell erkennbaren Zusammenfassung auch ein entsprechender Schreibstil hilfreich für den Benutzer. Wenn Sie z. B. in einem FAQ als Besucher eine passende Frage zu Ihrem Problem finden und ein Klick eine mehrseitige Antwort  zu Tage fördert, sind Sie dankbar für jede Möglichkeit, Zeit zu sparen. Beispielsweise dabei herauszufinden, ob die Antwort wirklich hilfreich für Sie ist. Ein beliebes Mittel, um neben Querlesbarkeit und Kurzfassungen weitere Hilfestellung anzubieten, ist die so genannte “umgekehrte Pyramide”. Das Prinzip besagt, dass Sie die wesentlichen Informationen, Fakten oder Angaben direkt in den ersten Absatz - also die Einleitung eines längeren Abschnitts – packen. So kann oft schon nach dem Lesen von wenigen Worten entscheiden werden, ob sich das Weiterlesen lohnt.

Wenn der Essenz einer langen Passage am Anfang nach diesem Aufbau immer unbedeutendere oder detailliertere Informationen folgen, kann ein zu langer Text mehr oder weniger gefahrlos von hinten nach vorn gekürzt werden, ohne das die Kernaussage des Textes verloren geht. Da dies besonders bei Zeitungstexten häufiger erforderlich ist, sind speziell diese Informationen nach dem Prinzip der umgekehrten (oder invertierten) Pyramide geschrieben. Passen Sie in den textlastigen Bereichen Ihrer Website die Inhalte an diese Regel an, schlagen Sie zudem gleich zwei Fliegen mit einer Klappe: Erstens erhält der Besucher einen schnellen Überblick über den Inhalt und kann sinnvoll entscheiden, ob sich ein tieferer Einstieg in den Seiteninhalt lohnt… und zweitens sorgen Sie dafür, dass die potentiell wichtigen Informationen und Begriffe dort stehen, wo Suchmaschinen ihnen die meiste Bedeutung zumessen.

Wertvoller und übersichtlicher Content is King!

Auf der anderen Seite ist es weder verboten,  noch für Webbenutzer unzumutbar, wenn Ihr Webauftritt auch außerhalb des integrierten Blogs oder Forums umfangreiche Informationsangebote enthält, die ausführlich einzelne Aspekte Ihrer Produkte und Leistungen o. Ä. beschreiben oder Anleitungen, Hilfestellung oder aktuelle Informationen anbieten. Zumeist passiert dies aber nicht unbedingt in den Haupteinstiegsseiten in die Segmente Ihrer Website – also der ersten Navigationsebene, sondern in tiefer liegenden Inhaltsbereichen. Hier ist es auch in der Regel kein Problem, genug Inhalt anzubieten, der für Suchmaschinen ausreichend “schmackhaft” ausfällt, um Suchtreffer zu erzeugen. Solange auch diese eher größeren Textanteile gut strukturiert und “querlesbar” sind, wird sich der ggf. so erhaltene neue Besucher auch mit anderen Inhalten Ihrer Site beschäftigen. Dies wird begünstigt, wenn ihm Navigation, Breadcrumb-Navigation und Layout gut signalisieren, wo er sich befindet ist und was es sonst noch zu finden gibt.

Navigierbarkeit

Im Zusammenhang mit der Navigation wird ausschließlich von “herkömmlichen Links” ausgegangen. Es gibt aber auch noch einige andere Möglichkeiten, um eine Webseite (im Browser) navigierbar zu gestalten. Navigationen, die ausschließlich auf JavaScript, Flash oder anderen Technologien basieren und keine „gewöhnlichen“ Links anbieten, sind aber durchaus gebräuchlich. Wenn Sie eine solche Navigation einsetzen, sollten Sie sich aber im Klaren darüber sein, dass diese Links nicht von Benutzern von Lesegeräten, deaktivierten Scriptfunktionen oder einiger mobiler Browser verwendet werden können. Ist das benutzerfreundlich? In diesem Fall sicherlich nicht, also sollten Sie es entweder generell ändern oder eine Alternativnavigation schaffen, die auch für diese Anwender nutzbar ist. Und verlinken Sie diese möglichst dann direkt in der Skiplinknavigation.

AJAX, JavaScript und andere zweischneidige Schwerter

Kaum ein Webangebot hat nicht zumindest einzelne Teile, in denen Seiten existieren, die einzelne Informationen oder komplette Folgeinhalte per AJAX oder anderen Mitteln „nachladen“. Das kann auch nicht verboten sein oder grundsätzlich etwas Schlechtes bedeuten, aber fragen Sie ruhig mal nach, ob es auch für Benutzer (oder das Lesegerät) ohne JavaScript die alternative Möglichkeit gibt, an die jeweiligen Informationen per Klick auf einen Link zu erreichen, der bei anderen Benutzern im Browser automatisch nachgeladen wird.

Darstellung und Kontrast

Auch auf die Wirkung von Kontrasten, Unterschieden in Farbton und Sättigung; Helligkeit etc. wurde an anderer Stelle Bezug genommen. Im Hinblick auf Benutzer mit Sehschwächen sind aber viele Kombinationen „unglücklich bis unsichtbar“, die von Betrachtern mit normaler Sehkraft vollkommen problemlos erkannt werden können und daher im Web oft verwendet werden. Speziell bei monochromen oder variantenarmen Designs sind einzelne Bereiche einer Seite oder gar die komplette Navigation oder der Hauptinhalt sehr schlecht für Anwender mit speziellen Sehschwächen zu erkennen. Hier kann ein entsprechender Validator zumindest ersten Aufschluss über den Umfang des Problems geben.

Simulation ist besser als gar nichts

Simulieren Sie mit geeigneten Mitteln selbst einmal das Erlebnis Ihrer eigenen Website mit anderen Augen. Dazu dient z. B. das Tool „Fangs“, das Sie als kostenloses AddOn für Firefox installieren und damit einen Eindruck Ihrer Website erhalten, der ansatzweise dem entspricht, was ein Screenreader wahrnimmt. Noch einfacher ist es aber, Sehschwächen statt Blindheit als Anhaltspunkt zu nehmen: Können Sie Ihre Website als Brillenträger ohne Brille bzw. mit einer geliehenen Brille, die Ihren Blick verschlechtert noch bedienen? Schlechte Beleuchtung nebst Sonnenbrille, leicht zugekniffene Augen, vorher Zwiebeln schneiden… lassen Sie sich was einfallen

Multimedia-Inhalte

Nochmal: Multimedia ist weder verboten noch schlecht, wenn es um Barrierefreiheit geht. Ganz im Gegenteil kann ein Audiostream in einem Blog, ein Flashvideo als Produktpräsentation oder Ausschnitte aus einem Film direkt bei der Rezension sogar das Informationsangebot zugänglicher machen als ohne diese Inhalte. Allen Beispielen gemein ist aber die Tatsache, dass es sich (hoffentlich) um ein Angebot handelt, das bestehende Inhalte ergänzt und nicht ersetzt. Fragen Sie sich also bei jedem Beitrag oder Informationsblock, der von Multimediainhalten begleitet wird, ob der Sinn auch dann noch erfasst werden kann, wenn das Video nicht abgespielt, die mp3-Datei nicht gehört oder das Bild bzw. die Animation nicht betrachtet werden können.

Zudem ist eine semantisch nachvollziehbare Auszeichnung von Textinhalten erforderlich, die mit entsprechenden HTML-Mitteln auch abseits von Fettschrift und größeren Fonts klar machen kann, was eine Überschrift ist, wo ein Absatz beginnt und wo er aufhört; welche Erklärung zu welcher Abkürzung gehört oder zu welchem Bild eine Unterschrift gehört – und was darauf zu sehen ist. Machen Sie also regen Gebrauch von den TITLE und ALT-Attributen für Bilder – und nutzen Sie zumindest dort, wo es sinnvoll erscheint und Bilder wirklich relevante Informationen transportieren und das auch nicht geändert werden kann, zusätzlich das LONGDESC – Attribut.

Wenn Sie fremdsprachliche Begriffe verwenden, sollten diese für Vorlesegeräte mit einer Sprache gekennzeichnet werden, damit das Gerät das nachvollziehen kann, was Sie im Kopf beim Lesen selbst tun: richtig interpretieren und übersetzen; anderenfalls wird die Aussprache das Wort möglicherweise bis zur Unkenntlichkeit verzerren. Die gute Nachricht ist, dass ein großer Teil der Aktionen zur Verbesserung der Quellcodelesbarkeit auch Suchmaschinen besonders gut gefällt und es daher doppelt lohnend ist.

Bei Formularen verwenden Sie das LABEL-Tag, damit auch ohne Kenntnis der Darstellung nachvollziehbar ist, welcher Titel sich auf welches Eingabefeld bezieht (ein separater Beitrag hierzu folgt). Und auch die nun mehfach angesprochenen Skiplinks und Accesskeys gehören zum Quellcode und bieten Möglichkeiten zur Alternativen Navigation oder hinfreiche Abkürzungen.

Validierbarkeit

Wenn Sie den Quellcode „aufgeräumt“ haben, muss er noch lange nicht fehlerfrei sein. Machen Sie daher vorzugsweise nach jeder Veränderung einen kurzen Check mit einem Validator (z. B. http://validator.w3.org/), um sicherzustellen, dass die Seiten technisch einwandfrei interpretiert werden können und nicht durch vergessene Tags komplette Teile unterschlagen werden. Dies ist zwar keine Grundvoraussetzung dafür, dass ein Text auch vollständig erfasst werden kann, es schadet auf der anderen Seite auch nicht. Behalten Sie aber im Gedächtnis, dass eine fehlerfreie Validierung keine Garantie dafür ist, dass alle Inhalte auch wirklich in der von Ihnen angedachten Form von Screenreadern oder anderen assistiven Werkzeugen verarbeitet werden können. Auch  andere existrierende Validatoren, dich sich Quellcode und / oder CSS einer Seite gesondert hinsichtlich der Anforderungen an eine barrierefreie Website unter die Lupe nehmen, können im Einzelfall zwar Hinweise liefern, was evtl. nicht in Ordnung sein könnte; dennoch ist gerade hier eine Abwesenheit von Fehlermeldungen alles andere als eine Garantie dafür, dass es keine Probleme gibt. Setzen Sie Validatoren für Farben, Struktur etc. (wie z. B. der nun nicht mehr frei verfügbare “Bobby”; eine Liste von Tools finden Sie u. A. hier) oder Emulatoren wie Fangs & Co. gern ein. Lassen Sie sich von beruhigenden Ergebnissen nur nicht allzusehr in Sicherheit wiegen, sondern versuchen Sie nach Möglichkeit einmal, Ihre Seite mit einem echten Screenreader von jemandem benutzen zu lassen, der darauf angewiesen ist.

• Es gibt nicht nur einen Zielprozess, sondern oft leich mehrere. Ein Besucher muss ggf. erst einmal vom „Rest“ der Site in den Shop gelenkt werden; ein Artikel muss in den Warenkorb, ein Warenkorb muss gekauft und bezahlt werden.
• Ein Shop im Web steht immer in einem ergänzenden oder konkurrierenden Zusammenspiel mit Offline-Varianten wie Katalogen und echten Ladengeschäften – den eigenen und denen der Konkurrenz. Zusätzlich zu den weiteren existierenden Shops und großen Plattformen.
• Besucher kommen teilweise aus anderen Quellen wie Preissuchmaschinen und Produktportalen und sind daher viel gezielter auf der Suche nach einem ganz bestimmten Artikel.
• Ein hoher Anteil an angebundenen Diensten und Prozessen muss beachtet werden, möglichst ohne dass dies Auswirkungen auf den Verkaufsprozess im Internet hat.
• Aktualisierungsfrequenzen sind oft höher; die Lebensdauer einzelner Seiten ist dafür möglicherweise geringer.
• Es bestehen zusätzliche gesetzliche Verpflichtungen und zudem starke regionale Abhängigkeiten – anders als bei reinen Informationsangeboten oder anfragezentrierten Websites.
• Es besteht generell ein weitaus höheres Bedürfnis an Sicherheit als bei anderen Sites.

Nicht jeder Unterschied hat direkte Auswirkungen auf die Usability, aber sehr wohl indirekten Einfluss auf die Gestaltung eines Shops – und die generelle Nutzbarkeit für einen gewissen Anteil der Besucher. Ein Shop, mit dem Sie z. B. prima innerhalb Deutschlands verkaufen können, ist für einen Besucher aus Übersee nicht nur mit sprachlichen Barrieren ausgestattet – und es gibt auch weitere Besonderheiten, die die obige Liste nicht nennt. Während einige der Punkte im Prinzip bereits in den vorangegangenen Kapiteln theoretisch gelöst sind, hat die Natur eines Shops trotzdem Auswirkungen, die Sie auch aus Sicht der Benutzerfreundlichkeit zu weiteren Maßnahmen anregen sollte. Aus der Liste kann z. B. die möglicherweise kürzere Lebensdauer von Seiten genannt werden. Ist eine „normale“ Seite mehr oder weniger ersatzlos gestrichen, kann schlimmstenfalls über einen veralteten Eintrag im Index einer Suchmaschine oder einen eingehenden Link eine Anforderung der Seite stattfinden, die dann mit der in einem eigenen Beitrag beschriebenen Fehlerseite relativ gut aufgefangen ist. Die zahlreichen toten Einträge in einer Preissuchmaschine, die regelmäßigen Traffic auf die Fehlerseite lenken, statt z. B. mit sauberen serverseitigen Weiterleitungen auf ein möglichst passendes Ersatzziel zu lenken, haben durchaus Potential, die Nutzbarkeit einer Seite nachhaltig zu schädigen.

Über die folgenden Besonderheiten soll diese kleine “Serie” informieren:

• Suche und Verlinkung
• Gestaltung von Detailseiten
• Hilfreiche und erforderliche Zusatzinformationen
• Versand und Zahlungsarten
• Visualisierung des Verkaufsprozesses
• Der Kaufabschluss

Suche nach Artikeln

Dieser kurze Abschnitt dient hauptsächlich als Platzhalter für all das, was allgemein zu einer guten Suchfunktion gehört. Denken Sie an den Besucher, der bereits eine genaue Produktbezeichnung oder eben nur einen (Kategorie-) Oberbegriff bei einer Preissuchmaschine eingegeben hat und als Empfehlung in Ihrem Shop gelandet ist. Bietet der Shop keine Möglichkeit einer direkten Verlinkung einer Artikeldetailseite (davon gibt es mehr, als Sie ahnen), landet der arme User zwangsweise auf der Startseite und muss suchen. Findet man den Artikel nun entweder nur nach der Artikelbezeichnung oder der genauen Kategoriebezeichnung, geht hier bereits ein Teil frustrierter Besucher verloren. Der Nutzen einer guten Suche ist daher nicht zu unterschätzen (es passiert aber dennoch ständig).

Deeplinks, Empfehlungen, Merklisten

Der Direktaufruf zu einem Artikel, der so genannte “Deeplink”, ist demnach nicht nur für Suchmaschinen, sondern auch für Besucher wichtig. Die Anbringung der Keywords zu einer Produktbeschreibung in einem solchen Deeplink ist zwar für den Besucher nicht so wichtig, aber ohne eine solche Funktion können Sie weder von statischen Seiten Ihres „übrigen Webauftritts“, der in der Praxis allzu oft getrennt vom Shop existiert, direkt auf einen Artikel im Shop verlinken, noch können dies andere in Blogs, Foren oder sonstige Quellen für Sie erledigen, wo vielleicht genau nach dem gesucht wurde, was Sie anbieten. Und weil dies schon unwahrscheinlich genug ist, sollten Sie wenigstens dafür sorgen, dass es leicht ist, einen Artikel in Form einer Detailseite per Link in einer Mail (möglichst über ein kleines – möglicherweise per Klick nachgeladenes – Formular auf der Seite) weiterzuempfehlen („Tell-A-Friend“-Funktion) und ein persönliches Lesezeichen – oder neudeutsch „Bookmark“ – im Browser und / oder den etablierten Bookmarksystemen im Web zu erzeugen.

Dazu müssen aber Deeplinks funktionieren und auch nach Ablauf einer ggf. darin enthaltenen Session-ID wenigstens noch zum richtigen Artikel führen. Und auch, wenn es dem Wunsch nach einem möglichst zügigen Kaufabschluss entgegen wirken mag: erlauben Sie das Führen einer persönlichen Wunsch- oder Merkliste für alle, die im Kaufprozess aussteigen wollen, aber eine Absicht zur Rückkehr haben, denn Gründe gibt es viele und es ist nicht nur freundlich, sondern auch umsatzförderlich, wenn die einmal schon ausgesuchten Artikel wenigstens (leicht!) zwischengespeichert werden können. Ein Cookie ist dabei nur die zweitbeste Idee, denn viele Kunden werden u. U. von einem anderen Rechner aus wiederkommen und haben vielleicht nur deshalb den Kaufprozess unterbrochen, um genau das zu tun. Deshalb verwenden auch viele Shops eine Mischlösung, die zwar Cookies erkennt, wenn diese vorhanden sind, aber auch immer eine “Ummeldung” mit anderen Benutzerfaten ermöglicht. Also ja: Personalisierung, wenn gewünscht. Dass ein Shop auch ohne Erzeugung von Anmeldedaten funktionieren sollte, steht auf einem ganz anderen Blatt (ist aber dennoch wahr. Echt!).

Welcher Natur hingegen die klare Handlungsaufforderung zur Ablage im Warenkorb ausfällt, ist hauptsächlich für die Conversions wichtig, nicht aber für die Usability einer Website. Außer natürlich, der Verweis ist so unauffällig oder gar erst nach umfangreichem Scrollen ganz unten unter dem kompletten Datenblatt des Artikels zu finden, denn dann ist von Benutzerfreundlichkeit nicht mehr viel zu merken. Ob also…

• In den Warenkorb
• Bestellen
• Kaufen
• Jetzt Kaufen
• …

…oder etwas ganz anderes auf Ihren Schaltern steht, ist für den Besucher weitaus weniger wichtig, wie möglicherweise für den Erfolg Ihres Shops… Das Ausprobieren mehrerer Varianten über eine angemessen lange Zeit zum Vergleich der resultierenden Verkäufe schafft Sicherheit. Generell ist die Reihenfolge der Vorschläge in der obigen Liste aber nicht nur willkürlich. Es gibt laufend neue Untersuchungen, was in welchem Shop und bei welcher Zuelgruppe wirklich am besten funktioniert. Der Kandidat “In den Warenkorb” ist aber nicht nur oft der Sieger, sondern etabliert sich so langsam zum Standard, so dass bei erprobteren Usern inzwischen mehr oder weniger erwartet wird, dass Sie diese Bezeichnung verwenden…

Vergleichbarkeit und Übersicht

Den Spagat, möglichst viele Angaben zu einem Artikel zu machen und dennoch einen Vergleich einzelner Artikel / Alternativen zu begünstigen, erreichen Sie oft mit einer Mischung aus “Fließtext” und Tabellen. Eigenschaften der Produkte,die zum Vergleich anregen (Farben, Größen, Speichervolumen, Lebensdauer…) bringen Sie also entweder in einer übersichtlichen Liste oder einer Tabelle unter.

Eine weitere Produktbeschreibung in Textform liefert nicht nur Futter für Suchmaschinen, sondern auch hilfreiche Informationen für den potentiellen Käufer. Denken Sie nur daran, den Preis und den Bestellknopf nicht im Text untergehen zu lassen.

Bei umfangreicheren Beschreibungen ist es daher üblich, den Bestellbutton und den Preis mehrfach zu wiederholen, z., B. über und unter den Produktinformationen.

Multimedia… jetzt aber?

Endlich mal eine Stelle, an der Sie mit mehr als einem Bild (als platzsparende Miniaturauswahl) und / oder Videos zu den Produkten fast nichts falsch machen können. Solange man nicht ohne Text und nur mit Bildern dasteht oder die Videos auf einer Plattform wie youtube.de gezeigt werden, die geradezu zum Vergessen des zuvor besuchten Shops gebaut wurden (sondern direkt auf der eigenen Seite), darf es hier ausnahmsweise mal etwas mehr sein. Denn jede Methode, den realen Einkauf in einem Ladengeschäft zu ersetzen, ist im Web erlaubt. Nutzen Sie dieses Mittel aber bitte nur für Artikel, bei denen es erforderlich ist. Ein Video zur Verwendung eines Kugelschreibers wird Ihnen wahrscheinlich keine neuen Kunden bringen. Wenn Sie aber ein ferngesteuertes Flugzeug loswerden wollen, dann darf es auch mal im Flug gezeigt werden.

Ein Wort noch zur Mehrsprachigkeit: Internationale Lieferung per Onlineshop bedarf einer sorgfältigen Prüfung und Erfüllung der rechtlichen Rahmenbedingungen und ist daher u. U. mit viel Arbeit verbunden. Machen Sie sich diese Arbeit nicht, wenn Sie nicht auch gewillt sind, alle Texte und Informationen auch wirklich in jeder Sprache anzubieten, denn nur halb übersetzte Shops sind weder benutzerfreundlich noch erfolgreich.

Bevor ein Besucher nach Sprachauswahl und der Versicherung, dass er an seinem Standort auch beliefert wird auch wirklich nach Produkten sucht – oder spätestens wenn er welche gefunden hat und nun ernsthaft kaufen will – benötigt er weitere Angaben, die alle Fragen rund um den Verkaufsprozess klären. Diese gehören zwar im Detail auf eine oder mehrere eigene Seite(n), die Verlinkung nehmen Sie aber vorzugsweise sowohl in der Hauptnavigation als auch in einem FAQ-Bereich und ggf. weiteren Stellen wie Detailseiten; im Verkaufsabschlussprozess (einige davon müssen sogar angezeigt werden) und zur Not an weiteren Stellen, wenn die Abbruchrate und die Besucheranalyse den Schluss zulassen, dass Besucher aus dem Ausland die gewünschten Informationen nicht finden. Geben Sie daher jedem Besucher die für sein Land passenden Angaben zu…

• Versandkosten: Alle verfügbare Varianten je Lieferland (Express o. Ä.) inkl. ggf. anfallende Zoll- oder sonstige Zusatzkosten. Eine Tabelle hilft dabei, die Übersicht zu wahren. Denken Sie bei Zoll und Co. auch daran, bei jedem Artikel darauf hinzuweisen, wenn der Benutzer bereits eine entsprechende Sprache gewählt oder per Login dokumentiert hat, dass er voraussichtlich nicht im Inland bestellt
• Versanddauer: Durchschnittswerte wenn möglich gleich in obige Tabelle aufnehmen
• Rückgaberecht: Fristen, Kosten, Rückgabeprozess und Bedingungen
• Weitere Informationen, die eher artikel- als shopabhängig sind, sind ebenso für viele Besucher von Belang und sollten daher möglichst einfach gefunden werden:
  • Garantiebedingungen: können auch je nach Lieferland unterschiedlich sein und müssen dann auch differenziert ausgewiesen werden. Da diese auch vom Hersteller abhängig sind, ist eine Verlinkung der passenden Bedingungen beim Artikel statt an zentraler Stelle möglicherweise erforderlich, machen Sie dann in einer Übersicht wenigstens auf die Existenz der Bedingungen und deren Verlinkung aufmerksam
  • Verfügbarkeit: Geben Sie sowohl die generelle Verfügbarkeit („auf Lager“, „Lieferzeit: 1-2 Wochen“, „bis x.x. nicht lieferbar“) , als auch die Regionen an, in die der Artikel geliefert wird – als Positiv- oder Negativliste.
  • Währungsauswahl: Ärgerlich ist es, wenn ein internationaler Besucher alle Preise selbst umrechnen muss. Lassen Sie die Währung entweder wählen und rechnen Sie dynamisch mit Tageskursen um oder bieten Sie zumindest eine Berechnungsfunktion bei jedem Preis an, um keine Besucher an CALC.EXE zu verlieren…
  • Einheiten: Bei „Meterware“ oder theoretisch auch allen anderen Dimensionen sollten Sie zudem bedenken, dass manchen Besuchern die verwendeten Einheiten nicht geläufig sind- Das muss also ebenfalls bei der Abfassung der jeweiligen Sprachvariante berücksichtig werden, wenn keine Wählbarkeit zu realisieren ist.

Wird ohnehin in der Regel nur ein Artikel gekauft, können Sie nämlich getrost alle Umwege sparen und direkt in die Detailansicht des Warenkorbs verzweigen, damit der Kunde ohne Hindernisse selbst zum nächsten Schritt des Abschlusses klicken oder wahlweise weiter einkaufen kann – gut, wenn er dafür auch einen Schalter, einen Link oder sonst was findet. Gibt es eine realistische Chance, dass noch weitere Artikel gekauft werden, machen Sie es dem Benutzer so leicht wie möglich, indem Sie zu den Topsellern, sinnvollen Erweiterungen oder sonstigen Angeboten verzweigen und zum Fortsetzen des Abschlusses die oben beschriebene Informationsanzeige zum Warenkorbinhalt und dem „zur Kasse“ – Button vertrauen.

Sobald er aber genug zusammengesucht hat und den Warenkorb aufruft, ist die Anzeige der noch folgenden Schritte absolute Pflicht, denn nur Transparenz – und eine angemessene Kürze und zügige Bedienung des Gesamtprozesses – halten so viele Besucher wie möglich auf dem Endspurt Richtung Bestellbestätigung im Rennen. Nutzen Sie dazu eine Nummerierung der Schritte („Schritt 1 von 3“) oder noch besser eine informativere Variante, in der die einzelnen Schritte wie „Adresse + Lieferanschrift –> Versand + Zahlungsart –> Kontrolle + Bestätigen“ per Titel bereits ankündigen, was in welcher Reihenfolge geschieht. Dies kann grafisch unterstützt oder wie eine Navigation aufgebaut werden, in der der aktuelle Schritt entsprechend hervorgehoben wird. Machen Sie auch kein Geheimnis daraus, ob der Abschluss bei Betreten des Schritts „Bestätigen“ bzw. des letzten Schritts oder erst danach erreicht ist.

Dass speziell diese Anforderung besonders wichtig ist, obschon leider keine Patentlösung zum “Wie” existiert, werden Sie vermutlich erst dann glauben, wenn Sie sich die durchschnittliche Ausstiegsrate in Ihrem Prozess heute vor Augen führen und dann mit mehreren Varianten ausprobieren, den Fortschritt erkennbar zu machen. Unter der Voraussetzung, dass Sie nicht zu viele Schritte visualisieren, die gleich beim Einstieg klar machen, dass kaum jemand am Ende ankommen kann, werden Sie möglicherweise signifikante Veränderungen messen können. Probieren Sie es also unbedingt aus!

Bei den Zahlungsarten, die auch Auswirkungen dieser Art haben können, kommt noch hinzu, dass spätestens hier nochmals alles aufgefahren werden muss, was an Vertrauensförderung möglich ist. SSL-Verschlüsselung, Prüf-Zertifikate… einfach alles, was möglicherweise immer noch existierende Bedenken bei Seite räumen kann. Denn jetzt geht es an das Geld es Besuchers und bis hier war alles nur Trockenschwimmen. Wenn Sie die Eingabe der Zahlungsinformationen überstanden haben, können Sie anschließend eigentlich nur noch mit einem Serverausfall oder ähnlichen Unglücken verhindern, dass es zur Conversion kommt. Ja, richtig gedacht: Per Rechnung kann hier vieles einfacher machen, wenn Sie sich das – bzw. die resultierende Rücksende- und Stornoquote – erlauben können.

Als Tipp an absichtlich gewählter Stelle: Wenn Sie einen Mindestbestellwert haben und diesen erst gegen Ende des Verkaufstrichters ins Spiel bringen, wundern Sie sich bitte nicht, warum ausgerechnet hier so viele aussteigen, bevor der Abschluss erfolgt. Mindestbestellwerte sind Hürden; genau wie zu hohe Versandkosten. Hürden, die beim Wettbewerber und oder den Ladengeschäften nicht bestehen. Wenn es also ein Mindestbestellwert sein muss, weisen Sie bei Unterschreitung schon vor der Adresseingabe darauf hin und lassen Sie weitere Artikel auswählen oder den zugehörigen Zuschlag hier akzeptieren und vertrauen Sie nicht darauf, dass der Nutzer nur, weil er schon ein paar Felder ausgefüllt hat, die Mehrkosten schluckt und fortfährt. Einzelne tun dies, der Großteil findet das aber ganz und gar nicht benutzerfreundlich und steigt ohne Bedenken hier aus um spätestens mit dem übernächsten Klick bei Ihrem Mitbewerber zu sein.Es sei denn, Sie haben das Monopol in Ihrem Bereich. Haben Sie?

Versuchen Sie nicht, jeden Kunden, der diese Seite erreicht, auch wirklich zu halten und die Bestellung abschließen zu lassen. Das wird ohenhin nicht funktionieren. Und da vor allem hier sehr subtile Veränderungen sehr weitreichende Konsequenzen haben, kann diese Tippsammlung (leider) nur ein paar Anregungen geben, die auf allgemeinen Erfahrungen mit Shops basieren. Diese müssen nicht zwingend auf Ihren Shop anwendbar sein. Abr die Wahrscheinlichkeit, dass eine Orientierung an bereits gefundenen funktionierenden Lösungen Verbesserungen bringt, ist in der Regel für jeden Shop recht hoch.

Zusammenfassung der Bestellung und Bestelldaten

Wenn Sie es wirklich schaffen, die Darstellung der bestellten Positionen aus dem Warenkorb sinnvoll zu kürzen, dann versuchen Sie es gern. Auf jeden Fall aber muss eine Bestätigungsseite die Positionen der Bestellung nebst aller Nebenkosten nochmal aufführen und eine Verändeurng entweder direkt hier zulassen oder entsprechende “Zurück-Links” bieten.

Dies gilt auch für die Bestelleradresse und ggf. die Lieferanschrift – geben Sie diese möglichst platzsparend aus, lassen Sie sie aber nicht weg. Und bieten Sie auch hier möglichst direkte Mittel zur Anpassung. Wenn Sie einzelne Benutzer aussperren oder Umwege gehen lassen müssen, anderen dafür aber die Korrektur direkt auf der Seite ermöglichen können (Stichwort: AJAX), dann sollten Sie es hier ausnahmsweise zumindest testweise tun.

VIP-Schalter, wiederholt

Denken Sie daran, dass dieser Schalter trotz aller Dinge, die Sie auf dieser Seite noch anzeigen wollen oder müssen – erneut der Warenkorbinhalt nebst Positionen für Lieferung und Nebenkosten, Adresse(n), Gesamtbetrag, AGB – Checkbox und Widerrufsbelehrung – noch gut zu sehen sein muss. Wenn überhaupt irgendein Schalter die Bezeichnung „prominent“ verdient hat, dann hoffentlich dieser, denn alles andere, was auf der Seite angezeigt wird, muss aus den vorherigen Schritten bekannt sein oder Sie haben einfach nur die Pflicht, es hier anzuzeigen. Der Besucher hat hier aber nur noch eine Pflicht: Er soll diesen einen Knopf noch drücken, dann kann er tun, was er will. Hat er das geschafft, erwartet er eine Bestellbestätigung, eine Trackingnummer oder Ähnliches, Kontaktinformationen und ggf. die Bankverbindung für die gewählte Vorkasse… also rundum die Bestätigung, dass er nicht gerade eine Riesendummheit gemacht hat. Tun Sie ihm also den Gefallen und lassen Sie ihn alles auf der Seite wissen, was in diesem Zusammenhang hilfreich sein könnte.

Weiterleitung zu einer Abschlusseite

Wenn der finale Klick erfolgt ist, sollte der Anwender an einer Stelle landen, an der er unmissverstänndlich mitgeteilt bekommt, dass der Einkauf

• erfolgreich
• beendet

wurde. Er braucht beide Informationen. Und vorzugsweise auch Hinweise dazu, was als nächstes passiert 8Bestellbestätigungen. Lieferzeiten, Infos zur Bankverbindung bei Vorauskasse etc.). Gern können Sie nun auch versuchen, noch nachträglich zusätzliche Positionen auf die gerade getätigte Bestellung zu bekommen; über entsprechende Aktionsangebote etc. Denken Sie nur daran, dass sonnenklar sein muss, dass der Einkauf nun keine weiteren Schritte mehr (im Web, auf Ihrer Site) erfordert.

Es ist daher ein großer Unterschied, ob eine Meldung dem Anwender mitteilt, was er tun soll – und vor allem warum das erforderlich ist – oder ob lediglich weitere Angaben gefordert werden. Transparenz schaffen Sie daher nur selten mit kurzen Aufforderungen. Ausnahmen bestätigen die Regel: Wenn ein Kontaktformular zur allgemeinen Anfrage ausgefüllt werden soll, ist ein knappes „Bitte geben Sie eine gültige Mailadresse zur Beantwortung Ihrer Anfrage“ vollkommen ausreichend. Und sicher wird auch ein „Mailadresse fehlt“ verstanden. Welche Variante benutzerfreundlicher ist, wird aber nicht vom Ton, sondern vom Inhaltsgehalt bestimmt – für das „Bitte“ sollte aber trotzdem eigentlich immer Zeit sein. Herrscht hingeben ein rauer Kasernenton vor, mag das den einen oder anderen Besucher nachhaltig vergraulen.

Bei der Darstellung einer Meldung sollten Sie darauf achten, dass diese auffällig gestaltet und in der Nähe der Problemquelle erscheint, wenn eine Eingabe erforderlich ist – mehr dazu finden Sie im Beitrag zu Formularen.

Und auch im Verkaufsprozess oder dem Studium von Leistungsbeschreibungen in der Entscheidungsphase, ob Sie der richtige Anbieter sind, können Werbebanner und Fremdangebote weitaus mehr kosten als sie einbringen und die Conversionrate drastisch beeinflussen. Legen Sie die Werbung also entweder an Stellen, die als „Ausgangsseite“ aus Ihrem Webangebot dienen (Bestätigungsseite nach Bestellabschluss, Danke-Seite nach Kontaktanfrage, Ende des Downloads…) oder bringen Sie sie wenigstens nicht in unmittelbarer Nähe von gewünschten Aktionen wie „in den Warenkorb“ & Co. an.

Und auch Banner bzw. gewollte Störer für eigene Angebote können den gleichen Effekt erzielen. Bedenken Sie also auch, wo Sie den leuchtenden Hinweis, dass das Produkt xyz nun zum Sonderpreis erhältlich ist, anbringen. Vielleicht nicht unbedingt auf einer Seite, auf der der Kunde seine Adresse zum Kauf der gerade ausgewählten weitaus teureren Alternative eingibt, denn das kann zu nichts führen, was Sie sich als gesund denkender Unternehmer wünschen sollten.

Die Validierung muss auch hier die Anforderung erfüllen, aussagekräftige Hinweise zu geben und den Prozess zu unterstützen und nicht zu hemmen. Ob das nun per JavaScript – Hinweisen, neu geladenen Teilen einer Seite oder ganz neu aufbauten Seiten gelöst wird, bleibt zwar nicht nur dem Geschmack überlassen, in allen Varianten lassen sich aber genau so gut anwendergerechte wie benutzerunfreundliche Lösungen schaffen. Eine gewisse Sicherheit bringt hier die Auswertung von Benutzerdaten des hoffentlich betriebenen Trackingsystems, aus denen Sie die Abbruchraten für die Seiten ermitteln können.

Meistens sind es ungewollte Hürden

Möglicherweise ist es auf Grund des Inhalts (kostenpflichtig, exklusiv, geschützt) nicht in Ihrem Interesse, dass Inhalte auf diese Weise weiterverwertet werden und Sie greifen daher absichtlich zu Mitteln, um die Extraktion oder Speicherung zu erschweren. In den meisten Fällen aber haben Anbieter prinzipiell gar nichts gegen eine solche Nutzung, erschweren diese aber dennoch. Druckfreundlich ist eine Webseite z. B. nur dann, wenn das Layout entweder so auf den Hauptinhalt reduziert und ausgerichtet ist, dass eine unveränderte Ausgabe auf einem Drucker gut lesbare und vollständige Fassungen ergibt. Und weil das fast unmöglich ist, sollte es ein alternatives (CSS-) Layout geben, welches wahlweise über den Browser, einen Link am Ende der Seite oder automatisch beim Druck gewählt werden kann. Hierbei sollten Navigationselemente und ablenkende Banner etc. nicht ausgegeben und Links in einer druckfreundlichen Formatierung ausgegeben werden. Auch kann z. B. die gesamte Textformatierung, der Abstand der Zeilen und andere Merkmale druckfreundlich gestaltet; Grafiken mit einem sichtbaren Titel und Links mit erkennbaren Linkzielen ausgestattet werden.

RSS: Ein Thema für Sie?

Wenn Sie redaktionelle Inhalte bereitstellen, die auch an anderer Stelle publiziert werden sollen, so ist eine Verteilung der Texte per RSS eine häufig gewählte Form der Weitergabe. Nutzerfreundlichkeit – z. B. in einem Blog – bedeutet in diesem Zusammenhang auch, dass dem Besucher möglichst einfach erkennbar signalisiert wird, dass er die Meldungen auch als RSS-Feed erhalten kann, um diese z. B. in einem Feedreader zu abonnieren. Und ohne auf das Thema an dieser Stelle weiter eingehen zu wollen, ist bei bestimmten Inhalten inzwischen durchaus auch die Frage berechtigt, wie gut diese auf mobilen Endgeräten wie Handys oder PDAs empfangen und dargestellt werden können. Das Beispiel der Aktienkurse sei Ihnen erspart; Sie werden es sicher selbst wissen, wenn diese Art der Nutzung für Ihr Geschäft relevant ist (oder?).

Separate Druckfassungen und “schönere” Versionen als Alternative

Da es noch lange nicht möglich ist, jeden Inhalt als statische lokale Seite sinnvoll zu speichern, wenn viele dynamisch erzeugten Elemente im Spiel sind, sollten Sie gerade hier besonders viel Sorgfalt bei der Erarbeitung und Pflege eines geeigneten Drucklayouts / Druckdesigns (oder gar der alternativen dynamischen Ausgabe von Seiten als PDF) legen.

Ist das alles zu kompliziert oder aus technischen Gründen nicht realisierbar, bieten Sie selbst eine Druckfassung als PDF zum Download an oder verlinken Sie zumindest ausgesuchte Teile des Inhalts auch als Grafik, Excel-Tabelle oder Word-Dokument zum Herunterladen für interessierte Besucher, die das Material weiter verwenden wollen (und dürfen).

Vorschlag: Erlauben Sie doch einfach explizit, was nicht zu verbieten ist

Und für alle alternativen Nutzungsformen außerhalb des Browsers und Kontext Ihrer eigenen Website sollten Sie unbedingt klare Statements auf der Webseite (z. B. im Impressum und „in der Nähe“ der Links zu Druckfassungen) hinterlassen, die dem Benutzer erläutern, was er mit dem Material anfangen darf – und was nicht! … soweit dies nicht auf der Hand liegt. So müssen Sie bei der Verlinkung und Veröffentlichung von Bildern (für die Sie die entsprechenden Rechte haben müssen!) nicht unbedingt bei jedem Bild einen Copyrighthinweis hinterlassen, da generell ein Schutz dieser Materialien besteht; genauso wie es auch – rechtlich gesehen – klar ist, wer das Recht zur Veröffentlichung aller Inhalte hat, die auf Ihrem eigenen Mist gewachsen sind. Im Zeitalter von Contentklau und erlaubter Publikation per Feed verbreiteter Inhalte ist im Zweifelsfall ein Wort zuviel besser, als ein Satz zu wenig.

Wenn Sie diese Fragen selbst nicht kennen, weil Sie keinen direkten Kontakt zum Kunden haben, dann holen Sie sich sowohl die Fragen als auch die Antworten dort, wo dieser Kontakt stattfiundet. Beim Vertrieb, bei den Vertretern, bei den Callcenter-Agenten… wo auch immer.

Präsentation der Antworten und Hilfestellungen

Zunächst einmal muss ein FAQ, wenn Sie eines anbieten, gefunden werden. Dazu sollten Sie nicht nur einen Bereich wie “Fragen und Antworten” oder “Hilfe” (weil kürzer) in die Servicenavigation aufnehmen, sondern auch dort, wo sich potentiell Fragen stellen (bei Produktbeschreibungen, im Warenkorb, bei der Anmeldung…), Verweise zum FAQ schaffen. Vorzugsweise natürlich gleich zur richtigen Antwort. Oder zunächst zur richtigen Frage und von dort aus zur Antwort – je nachdem, wie der Bereich aufgebaut ist.

Es ist in der Regel eine gute Idee, Antworten nach Kategorien zu sortieren. Da aber Kategorien nie eindeutig sind und jeder Besucher ggf. an anderer Stelle sucht, als eine Antwort abgelegt wurde, sollte es auch immer eine Suchfunktion oder Zugriffsmöglichkeit geben, die alle Antworten zur Auswahl stellt. Trennen Sie dennoch nach Möglichkeit zwischen FAQ zur Website, zu Produkten, zum Shop ö. Ä., wenn Sie einen gewissen Umfang erreicht haben, der nicht auf einen Blick überschaubar ist (hoffentlich).

Die einfachste Möglichkeit der Darstellung von Fragen und Antworten sind Listen. Zum Beispiel mit aufgelisteten Fragen und Links zu den auf separaten Seiten oder weiter unten liegenden Abschnitten befindlichen Antworten. Aber selbst ein schlechtes FAQ ist ausnahmsweise besser als gar nichts, denn ist oft die letzte Chance, einen bereits im Kopf abwandernden Besucher doch noch auf die rechte Spur zu bringen. Dazu müssen Sie aber auch wirklich hilfreiche Antworten liefern. Das erfordert manchmal mehr Ehrlichkeit, als man auf den ersten Blick zu investieren bereit sein mag. Tun Sie es trotzdem. Was nutzt es, fehlende Versandarten, Zusatzkosten, Mindestbestellmengen oder die offensichtlichen Schwächen Ihrer Produkte oder Leistungen zu verschweigen und die Probleme damit auf später zu vertagen? OK, das ist leichter gesagt als getan, aber fangen Sie doch einfach mit den Top 10 Fragen Ihrer Kunden an und bleiben Sie am Ball.

Denken Sie aber auch daran, dass es u. U. “tagesaktuelle” Ereignisse gibt, die in einem FAQ gut untergebracht sind. Wo ist Ihr Stand auf der Messe xyz? Wann endet eine bestimmte Frist? Tragen Sie ggf. auch diese Dinge in ein FAQ ein, statt diese Frage eine Woche lang jeden Tag ausschließlich am Telefon zu beantworten. Vielleicht verringern Sie das Volumen dadurch nicht, aber Sie geben den wenigen Kunden, die in Ihr FAQ schauen, nicht nur eine Antwort, sondern auch das Gefühl, dass man mit einer Firma zu tun hat, die mitdenkt. Und das kann manchmal viel mehr wert sein, als ausgefeilte Marketingaktionen…

• Unterbrechen diese Links den Textfluss beim Lesen oder fügen Sie sich harmonisch in den Text ein? (falls ja, ist das gewollt oder nicht?).
• Ist ein Klick auf einen Link erforderlich, um den folgenden Text überhaupt zu verstehen oder kann er auch nachträglich angeklickt werden? Das ist entscheidend dafür, ob die Seite überhaupt noch ganz gelesen oder gleich – ohne Rückkehrabsicht – weggesurft wird…
• Sind die Ankertexte der Links so gewählt, dass der Benutzer genau weiß, was ihn bei einem Klick darauf erwartet (und ist dieser überhaupt lang genug, um als Link erkannt und getroffen werden zu können)?
• Habe ich selbst das Gefühl, dass hier mehr Links als begleitender Text zu finden sind (sprich; würden Sie sich die Mühe machen, die Seite zu lesen)?

Seiteninterne Links

Eine Webseite mit längeren Textpassagen oder aus mehreren Inhaltsmodulen, bei der man zum Weitersurfen erst wieder nach oben zur Navigation scrollen muss, ist leichter und schneller zu bedienen, wenn mittels passend platzierter so genannter „Anker“ eine seiteninterne Navigation erzeugt wird, mit der an den Anfang einer Seite bzw. von oben aus direkt an den Start einer bestimmten Passage springen kann. So ist es auch möglich, von anderen Seiten aus weitaus genauer zu einem Detail auf einer umfangreichen Seite zu verweisen, ohne dass der Besucher die passende Stelle lange selbst suchen muss.

Linkgestaltung

Mit welcher Farbe Sie Links markieren, ist keinesfalls vorgeschrieben. Es ist natürlich immer eine gute Idee, einen Blauton zu verwenden, da diese Farbe dank der Verwendung auf „unformatierten“ Webseiten per Vorgabe oft mit klickbaren Links assoziiert wird, ohne dass Sie dazu beitragen müssen. Aber auch grüne, weiße, gelbe oder schwarze Links können genau so gut funktionieren wie alle anderen Farben, wenn der Zweck der Erkennbarkeit durch die Kombination aus gewählter Textfarbe, Hintergrund und Umfeld stimmt. Zunächst einmal sollten sich Links nicht nur im Stil, sondern möglichst auch in der Farbe absetzen – und wenn es nur ein anderer Farbton der gleichen Vordergrundfarbe ist, die auch für gewöhnlichen Text eingesetzt wird. Apropos Stil: da bleiben Sie am Besten gleich bei der Unterstreichung und fügen diese nicht erst hinzu, wenn zufällig eine Maus über den Text bewegt wird!

Sie dürfen als Ersatz gern eine weitere Farbe definieren, die für Links verwendet wird, wenn die Maus ihren Bereich kreuzt. (a:hover). Soll die Tastaturbedienbarkeit der Site verbessert werden, können Sie auch eine abweichende Farbe für den gerade fokussierten Link mittels a:focus definieren, so dass beim Navigieren per Tabulatortaste klar ersichtlich wird, welcher Link gerade fokussiert ist. Auf dieser Site sind solche Links z. B. rot.

Ebenso erleichtert es die Orientierung, wenn bereits besuchte Links eine eigene Farbe (a:visited) aufweisen. Gerade dort, wo mehrere Links mit unterschiedlichen Ankertexten zum gleichen Ziel führen, ist eine gesonderte Kennzeichnung aller Verweise, die zu einem bereits besuchten Ziel führen, sehr hilfreich, um die Geduld eines interessierten Besuchers nicht unnötig auf die Probe zu stellen. Aus diesem Grund ist auch für bereits besuchte Links i. d. R. eine separate Farbe im Standard eines Browsers vordefiniert, wenn keine eigenen Angaben per CSS definiert wurden.  So sehen entsprechende Testlinks ohne eigenes Format z. B. so aus:

Verwenden Sie nun eine eigene Definition für focus und hover, zeigt die Seite auch optisch den Unterschied zwischen den Links an:

Um diese Form der zusätzlichen Kennzeichnung zu erzielen, genügen folgende Anweisungen:

Generell ist aber vor allem die auch im Standard enthaltene Kennzeichnung der bereits besuchten Inhalte besonders wichtig für eine möglichst benutzerfreundliche Website. Vor allem für ältere Menschen ist ein Fehlen dieser Kennzeichnung – neben zu kleinen Linktexten oder schwer zu treffenden Navigationselementen – eine besondere Hürde bei der Verwendung von Webangeboten. Interessierte Leser finden mehr Details zu Usability für vielzitierte “Fünfzigplus-Surfer” bei Jakob Nielsens “Alertbox”.

Externe Ziele, besondere Dateitypen

Hilfreich ist auch eine zusätzliche Kennzeichnung von externen Links mit einer Grafik, die solche Links von internen Verweisen unterscheidet, ohne sehr auffällig zu sein. Und wenn hinter einem Link etwas anderes als eine HTML-Seite (egal, ob statisch oder dynamisch per ASP, PHP oder anderen Techniken erzeugt) liegt, müssen Sie darauf aufmerksam machen; sei es durch eine weitere Grafik, die per CSS auch automatisch an entsprechende Links zu PDF, Word-, Excel- oder anderen Dokumenten anhängen kann oder im Ankertext eines Links selbst. Produktinformationen ist ein schöner Text für einen Link – wenn es aber wider erwarten dauert, bis das mehrere 100 Kilobyte große PDF Dokument geladen ist, ist ein großer Teil der anklickenden Besucher schon wieder weg. Steht im Linktext aber Produktinformationen (PDF), kann sich ein guter Teil der Besucher schon denken, dass es etwas dauern wird – oder er klickt gleich zum Download der Information mit der rechten statt der linken Taste auf den Verweis.

Der richtige Linktext

Die verlinkte Information ist klasse, der Link ist als solcher gut zu erkennen, die verlinkende Seite wird oft aufgerufen und es steht auch nicht alles, was es auf dem Linkziel zu lesen gibt, ohnehin schon auf der Seite. Dennoch klickt fast keiner auf den Verweis. Wie kann das sein? Wahrscheinlich wissen die Besucher entweder nicht, was sich hinter dem Link verbirgt oder sie vermuten etwas ganz anderes dort, weil der Linktext nicht eindeutig ist. Ist der doch? Dann versuchen Sie es doch mal mit einem auffordernden Text. Also satt z. B. „Weitere Informationen“ ein Text wie „Klicken Sie hier, um die konkreten Zahlen der Studie abzurufen“. Das hat gleich zwei Vorteile, denn erstens rufen Sie den Besucher aktiv zum Klick auf, zweitens weiß er nun genau, warum er das tun soll und was er dafür erhält. Sicher, dieses Beispiel ist konstruiert und passt überhaupt nicht auf Ihre Site. Sind Sie aber sicher, dass alle Linktexte wirklich eindeutig sind?

Leider ist eine eindeutige Beantwortung dieser Frage aus der Sicht eines einzelnen oder vergleichweise weniger Begutachter kaum möglich. Probieren Sie es daher unbedingt mit verschiedenen Varianten! Ändern Sie einzelne Linktexte und beobachten Sie, ob und wie sich dies auf die Verteilung der Besucherströme auswirkt. Wenn Sie es genau wissen wollen, können auch Trackingverfahren eingesetzt werden, die die Klicks auf solche Links verfolgen. Selbst Google Analytics bietet eine kostenfreie Methode, diese Tests genau messbar zu gestalten.

Denken Sie aber dennoch auch bei der Wahl des Linktextes daran, dass zwar genug “verlinkter Text” da sein sollte, um den Link zu erkennen und einfach anklicken zu können (was auch eine ausreichende Schriftgröße bedingt), der Linktext aber dennoch lieber knapp als zu lang sein sollte. Spätestens dort, wo auf einer Seite mehrere komplette Sätze als Link ausgelegt sind oder Links gar über mehrere Zeilen laufen, geht die Übersicht verloren und der Text wird nur mit Mühe zu konsumieren sein.

Tastaturbedienung selbst testen

Normalbetrieb: Legen Sie zunächst einmal die Maus zur Seite und versuchen Sie allein mittels TAB und ENTER, Ihre Website zu bedienen, indem Sie sich durch die Navigation hangeln, Detailseiten aufrufen und Links verfolgen, die direkt im Text untergebracht sind. Das geht doch eigentlich ganz gut, oder? Vielleicht ist hier oder da die Reihenfolge unlogisch, alles in allem aber scheint die Site (hoffentlich) bedienbar.

Kleiner Viewport: Verkleinern Sie doch mal das Browserfenster auf Maße jenseits der üblichen Dimensionen, so dass die sonst ganz praktische Breite von z. B. 1000 Pixeln deutlich unterschritten wird. Zweck der Übung ist es, einen horizontalen Scrollbalken zu erzwingen; also einen Teil der Seite nach rechts aus dem unmittelbar sichtbaren Bild zu schieben, wenn dies das Design Ihrer Website nicht durch stets “volle Breite” verhindert. Wie sieht es jetzt mit der Bedienbarkeit aus? In der Regel kommt es nun zu ersten Verwirrungen durch TAB-Sprünge auf “unsichtbare” Ziele… oder einen ständig hin und her ruckelnden Bildschirm.

CSS aus: Nicht nur einige mobile Geräte, sondern vor allem Screenreader & Co. zeigen nicht unbedingt das, was mühselig per HTML und CSS in die gewünschte Reihenfolge gebracht wurde. Wiederholen Sie also den Test mit deaktiviertem CSS-Layout, indem Sie z. B. ANSICHT – WEBSEITEN-STIL – KEIN STIL in Firefox wählen. Wenn hier nun die Reihenfolge der Inhalte und auch der Links ganz anders daher kommt als beim ersten Test, liegt das entweder an Tabellen, die für die Herstellung des Layouts verwendet wurden, und / oder an CSS-Techniken wie Float oder absolute Positionierung, die es erlauben, Informationen am Bildschirm und im Quellcode vollkommen unterschiedlich anzuordnen.

Typische Probleme und Lösungen

Üblicherweise scheitert die zügige Bedienung in der Regel an drei verschiedenen Dingen, die Sie in der einen oder anderen Form ggf. beim Test selbst festgestellt haben:

• falsche Reihenfolge von Links / Linkblöcken oder auch Eingabefeldern in Formularen
• unlogische Anordnung der Inhalte
• “lange Wege” aufgrund von ständig gleichen Kopfbereichen der Seiten bis zum Hauptinhalt

Außerdem erscheint die Bedienung per Tastatur oft unnötig schwerfällig im Vergleich zu einer Desktopanwendung, da es dort erlernbare Hotkeys gibt, die eine zügige Aktivierung bestimmter Kommandos begünstigen.

Je nachdem, wie viel Wert Sie auf eine bessere Tastaturbedienung legen und aus welchem Grund Sie dies tun, können Sie verschiedenste Mittel zur Verbesserung einsetzen. Ob aber echte Barrierefreiheit, bessere Konsumierbarkeit mittels mobiler Geräte, ein allgemein leichterer Zugang für Menschen mit Behinderungen oder was auch immer Ihre Motivation ist – oder weil Ihre Website eine echte Anwendung darstellt, die viel und täglich genutzt werden soll -, die Grundlage für gute Ergebnisse und möglichst wenig Aufwand ist ein Seitenquellcode, der möglichst aufgeräumt ist und die natürliche Reihenfolge des Inhalts beibehält. Und wenn Sie sich auch bei Formularen darum bemühen, möglichst ohne Tabellen auszukommen, stimmt in der Regel auch die logische Reihenfolge der Felder.

Für den Fall, dass speziell bei Formularen diese Reihenfolge nicht stimmt, setzen Sie das Attribut tabindex ein. Das kann z. B. dadurch zu Stande kommen, dass Sie einen mehrspaltigen Aufbau des Formulars mittels float hergestellt haben. Bei Links hingegen sollte dieses Attribut kaum erforderlich sein, solange Sie für Haupt- und Unternavigation auf Listen gesetzt haben, die ebenso per CSS nach Wunsch ausgerichtet werden. Wenn Sie dennoch Links per tabindex in eine gewünschte Reihenfolge bringen wollen, testen Sie die Auswirkungen unbedingt selbst und in mehr als einem Browser, indem Sie vorwärts (TAB)  und rückwärts (UMSCHALT+TAB) durch die Links wandern. Gerade dort, wo Links und Anker auch zur internen Navigation auf einer Seite eingesetzt werden, wird nicht immer das gewünschte Ergebnis mit tabindex erzielt…

Für eine zügige Bedienung ist es zudem wünschenswert, einzelne Abschnitte wie einen Kopfbereich überspringen oder direkt zu bestimmten Abschnitten einer Seite springen zu können. Dazu dienen z. B. Skiplinks, die in sichtbarer oder verdeckter Form auf der Seite möglichst weit oben im Quellcode untergebracht werden.

Um einzelne Links auch direkt bedienbar zu gestalten, ohne dass diese per TAB “annavigiert” werden müssen, kann das Attribut accesskey verwendet werden. Hierüber können Sie sowohl bestimmte Standardinhalte wie Startseite, Kontaktformular, Impressum etc. jederzeit per Tastatur zugänglich machen als auch spezielle Links mit “Abkürzungen”  versehen. Auch die oben angesprochenen Skiplinks können mit möglichst auf allen Seiten konstanten Accesskeys versehen werden, so dass der Benutzer auf jeder Seite immer mit der gleichen Tastenkombination zur Navigation oder dem Hauptinhalt, der Sucheingabe etc. springen kann. Das Hauptproblem ist hierbei, dass diese Hotkeys für Websites auch kommuniziert werden müssen, damit der Besucher diese verwenden kann. Dem Einsatz von Accesskeys widmet sich daher ein separater Beitrag.

Frames

Wenn Ihre Seite Frames nutzt, besteht neben der Tatsache, dass sich eine Suchmaschine nicht nur mit der Indexierung Ihrer Site, sondern auch mit der Erkennung der Seiteninhalte im Zusammenhang schwer tut, ein entscheidender Nachteil für den Anwender. Dieser ist nämlich gezwungen, so in die Website einzusteigen, wie Sie es vorgesehen haben; möglichst per Eingabe der Domain im Browser. Wenn aber Inhalte einzelner Frames relevante Informationen für Suchmaschinen beinhalten und ein Besucher per Klick auf einen Treffer auf Ihre Seiten gelangt, wird in der Regel nicht das Frameset und damit der gewünschte Aufbau der Seite geladen, sondern nur die Seite, die den Teil des Gesamtaufbaus liefert, der den Treffer erzeugt hat. In der Praxis bedeutet das zumeist, dass Seiten „nackt“ als reiner Inhalt, ohne Kopf, Navigation, Fuß oder Sonstiges angezeigt wird, so dass die Seite „nicht bedienbar“ und auf keinen Fall geeignet ist, das Vertrauen des Besuchers zu wecken. Können Sie aus irgendeinem Grund nicht von Frames weg zu einem reinen (X)HTML / CSS – Gerüst, sorgen Sie auf jeden Fall dafür, dass fehlende Framesets nachgeladen werden, wenn eine Seite aufgerufen wird. JavaScript bietet entsprechende Möglichkeiten, die Sie im Web unter Suchbegriffen wie „frameset nachladen javascript“ leicht finden. Eine davon wird im Abschnitt “Inhalte linkfähig machen” bei den Hinweisen zur Optimierung von Frames im Suchmaschinenland beschrieben, wo Sie auch detaillierte Hinweise zu Frames und deren Verwendung finden.

Popups

Sie wollen Aufmerksamkeit mit maximaler Gewalt erzeugen, indem Sie Popups verwenden, die als separates Fenster geladen oder als zusätzliche Ebene per CSS über den Seiteninhalt gelegt wird? Dann sollten Sie ganz sicher sein, dass die Nachricht eine solche Aufmerksamkeit auch verdient, denn wenn Standardnavigation oder Inhalt dadurch verdeckt werden, ist der Durchschnittsbesucher nicht aufmerksamer als ohne Popup, sondern eher verärgert. Nur, wenn die transportierte Information für ihn interessant ist oder in irgendeiner Weise eine „gute Nachricht“ für ihn darstellt, wird er das Popup akzeptieren und den Klick vollziehen. Klicks, die „aus Versehen“ erzeugt werden, weil dem Anwender suggeriert wird, er könne dort irgendein Steuerelement bedienen oder das Popup entfernen, bringen am Ende nichts außer einem Klick ins Nirvana und einen verlorenen Kunden.

Popups zu eigenen Zwecken sind also unter Umständen durchaus erlaubt und sinnvoll; dieses Mittel aber zur Bewerbung von Drittangeboten zu nutzen und zu hoffen, dass durch die Vergütung mehr hängen bleibt als durch einen Besucher, der ggf. zu Ihrem Kunden hätte werden können, ist in den meisten Fällen eine Rechnung, die nicht aufgeht. Und Sie sollten auch bedenken, dass ein Popup beim ersten Erscheinen durchaus anders wahrgenommen werden kann als beim zweiten bis zweihundertsten Mal. Sie sollten also immer erwägen, das Popup nur dann zu zeigen, wenn der Besucher es noch nicht gesehen oder eine überschaubare Anzahl von Einblendungen erlebt hat.

Unmotivierte Aktionen oder Bewegungen

Bewegung sorgt für Ablenkung – das haben Sie vielleicht auch schon an anderer Stelle in dieser Tippsammlung gelesen. Aber auch ohne Laufschriften & Co. kann Verwirrung erzeugt werden, wenn Aktionen ausgeführt werden, ohne dass der Benutzer diese bewusst ausgelöst hat. Grundregel: Benutzer klickt, Webseite verändert sich. Heute werden aber auch gern andere Ereignisse wie das „Betreten“ eines Steuerelements mit dem Eingabefokus, das „Drüberfahren“ mit dem Mauszeiger und andere Aktionen verwendet, um Effekte auszulösen. Wenn diese Effekte der Orientierung dienen, kann das auch durchaus hilfreich sein. Ändert sich aber der Eindruck / Aufbau / Inhalt der Seite nur dadurch, dass die Maus bewegt wurde, wird das selten vom Anwender gedankt. Bildergalerien, die neue Bilder in den Detailbereich laden, wenn die Maus über die Abbildung einer Vorschau bewegt wird, sind Ausnahmen, wenn diese so gestaltet sind, dass es kein Erschrecken des Anwenders die Folge ist. Achten Sie bei Verwendung solcher Aktionen also auf möglichst sparsame Veränderung und teilen Sie dem Anwender an geeigneter Stelle im Text mit, welche Aktionen er mit welchen Mausbewegungen auslösen kann. Ebenso „rühmliche Ausnahmen“ sind typische Web 2.0 – Elemente wie das Erscheinen einer dynamisch nachgeladenen Liste von Vorschlägen beim Tippen in Eingabeformularen und ähnliche Eingabehilfen oder die Darstellung von Prüfungsergebnissen für Feldinhalte, wenn das Eingabefeld verlassen wird.

Robustheit und Browserunabhängigkeit

Nicht jedes Layout ist gleich „robust“, wenn es um die beliebige Skalierung der Darstellung durch Anpassung der Browsergröße oder Schriftgröße etc. geht. Auch sollten Sie neben der Veränderung des Schriftgrads auch unbedingt kontrollieren, ob die Darstellung in allen gängigen Browsern lesbar ist, oder ob die Seite nur ordentlich im Firefox oder Internet-Explorer in der aktuellen Version, nicht aber in älteren, aber noch weit verbreiteten Browsern dargestellt wird. Und was ist mit Browsern auf anderen Systemen wie Safari (Mac) oder Konqueror (Linux) und anderen? Wenn Sie Benutzer einzelner Browser oder Systeme ausschließen wollen, ist das OK – aber es sollte bewusst geschehen und nicht nur auf dem Versäumnis einer Kontrolle basieren. Weiteren Hinweisen zur Browserkompatibilität ist ein eigener Beitrag gewidmet

Denken Sie auch daran, dass JavaScript, AJAX und andere Techniken sehr gut geeignet sind, eine möglichst benutzerfreundliche Oberfläche zu erstellen, aber nicht immer vorausgesetzt werden können. Simulieren Sie einen Nutzer ohne JavaScript, indem Sie die Verwendung in den Optionen des Browsers abschalten. Kann dieser Ihr Webangebot mit vertretbaren Einschränkungen dennoch nutzen oder bleibt er komplett ausgesperrt?

Grafik, Flash und Multimedia

Informationen, die mittels grafischer oder aktiver Elemente wie z. B. per Flash oder eingebetteter Videosequenzen vermittelt werden, wirken oft „professioneller“ als reine Textinhalte. Allerdings sind diese Inhalte weder für Suchmaschinen, noch für Sehbehinderte (denke: Barrierefreiheit) unmittelbar zugänglich. Allein schon aus diesem Grund sollten Sie sparsam mit Grafik und Flash umgehen, wenn Sie Ihre Seiteninhalte gestalten. Flash erlebt zwar derzeit durch die Erfassbarkeit durch Suchmaschinen einen neuen Aufschwung… weder für wirklich suchmaschinenoptimierte Inhalte, noch für barrierefreie Kommunikation ist Flash aber ein besonders gut geeignetes Mittel.

Diese Mahnung soll auch nicht bedeuten, dass nun Grafik generell verboten ist – vielmehr dient sie oft dazu, einen geeigneten Rahmen und ein gefälliges Layout für die Informationen zu liefern. Und auch zur Auflockerung können grafische Elemente genau so gern eingesetzt werden, wie Flash, Audiostreams, Videos & Co dazu geeignet sind, Informationen auf einem alternativen Weg für einzelne Besucher anzubieten. Wenn Sie sich daran halten, dass es für alle Informationen, die auf diese Weise dargestellt werden, einen Ersatz oder zumindest eine Zusammenfassung in Textform anbieten, können Sie abgesehen von einer Überladung mit solchen Inhalten nur noch wenig falsch machen. Wenn Sie jetzt denken: “Warum soll ich mir vergleichweise viel Mühe für vergleichweise wenige Besucher machen, die diese Alternativen benötigen?”, dann haben Sie vergessen, dass es auch noch Suchmaschinen gibt, die ebenso wenig mit “nichttextlichen” Inhalten anfangen können. Auch hier soll auf das Suchmaschinenland verwiesen werden, wo Sie weitere Details zu Suchmaschinen und Grafik / Multimedia finden können.

“Bereichweise konsistent”

So ist es nicht verboten, in einer Pressemitteilung Pressesprache zu reden und im Blog direkt daneben den Ton komplett zu wechseln, während der Rest des Webauftritts auf einer anderen Ebene mit dem Anwender kommuniziert, denn hier sind verschiedene Bereiche mit verschiedenen Aufgaben im Spiel. Ist aber die Produktbeschreibung für Produkt A so reißerisch, dass sie auch auf dem Fischmarkt eine realistische Chance hat, während bei Produkt B nüchterne Fakten datenblattgleich aufgezählt werden und Produkt C außer einem Preis kaum weitere Informationen bietet, ist das goldene Gesetz der Konsistenz gleich mehrfach gebrochen.

Tun Sie das nicht, sondern sorgen Sie für eine ansatzweise einheitliche Ansprache, Qualität und Inhaltsdichte bei vergleichbaren Teilen Ihres Webangebots. Und welche sprachliche Basis Sie auch wählen: orientieren Sie sich möglichst nie an Ihrer eigenen Begriffswelt, sondern verwenden Sie die Sprache des Benutzers, solange das nicht bedeutet, in Jargon abrutschen zu müssen. Das passt nicht nur besser zu den wahrscheinlich formulierten Suchanfragen Ihrer Besucher, die zur Website geführt haben, sondern vereinfacht es dem Besucher auch, die Inhalte zu verstehen. Zugleich zeugt eine angemessene Ansprache des Besuchers von einer gewissen Sorgfalt, so dass das Gefühl, die richtige Site gefunden zu haben, verstärkt wird.

Rechtschreibung

Auch die grammatisch korrekte Wiedergabe von Inhalten einer Website ist aus Sicht der Benutzerfreundlichkeit wichtig. Kleine und einzelne(!) Fehler sind nie zu vermeiden und werden weder der Erfassbarkeit der Inhalte noch Ihrem Ansehen schaden, aber wenn die Fehlerquote zu sehr steigt, verjagt das den Besucher nicht nur, weil er an Ihrer Kompetenz zweifelt, sondern unterwandert auch nachhaltig die Glaubwürdigkeit der Inhalte. Erschwerend kommt hinzu, dass fehlerträchtige Textpassagen ungleich schwieriger zu lesen sind, als sorgfältig korrigierte Webseiten. Und da es ja jedem Besucher so einfach wie möglich gemacht werden soll… lassen Sie neue Inhalte Korrekturlesen. Machen Sie es nicht ausschließlich selbst, sondern lesen Sie ein- oder zweimal sorgfältig selbst nach der Erstellung durch, korrigieren Sie, was zu finden war und lassen Sie dann jemand anderen den Text lesen. Der findet nicht nur Fehler, sondern stellt vielleicht auch Fragen zu einzelnen Passagen, die Sie dann gleich noch überarbeiten können – denn was Ihrem ersten Leser passiert ist, wird wahrscheinlich auch einer nennenswerten Anzahl weiterer Leser als Frage in den Sinn kommen oder beim Lesen auffallen.

Die moderneren Zoomfunktionen von InternetExplorer 7ff. und Firefox ab Version 3 gleichen Nachteile einer “unzoombaren” Seite zwar oft aus, bringen aber für die Reihenfolge und Anordnung in der Darstellung der Inhalte je nach eingesetzter Technik neue Probleme mit sich. Auch bieten diese Browser über entsprechende Optionen nach wie vor auch die Mögglichkeit der Skalierung über die Schriftgröße, wenngleich in diesen Fall eben nicht unbedingt die ganze Seite vergrößert wird; inkl. Abmessungen der einzelnen Bereiche und unter Berücksichtigung vorhandener Grafiken etc. Es gibt also fast so viele Möglichkeiten der fehlerhaften vergrößerten Darstellung wie es unterschiedliche Browser, Verfahren zur Vergrößerung… und vor allem Methoden zum Gestalten einer Webseite gibt.

Die Anforderung der Skalierbarkeit hingegen ist mehr oder weniger einfach formulierbar: Wenn Sie eine “ausreichend” große Schrift im Normalfall einsetzen, sollte die Darstellung eine Vergrößerung auf eine doppelte Schriftgröße möglichst überleben. Zumindest lesbar sollten die Inhalte noch sein. Abgeschnittene oder verdeckte Texte oder Textpassagen sind Grund genug, hier Hand an zu legen und zu versuchen, die Skalierbarkeit zu optimieren.

Ganze Kapitel in Büchern über Webdesign und CSS widmen sich daher diesem Thema. Wenn Ihre Site nicht ordentlich vergrößert werden kann, müssen daher im Zweifelsfall zunächst die eingesetzten Mittel untersucht werden, um eine Lösung zu finden.