Ironischerweise kann das Weglassen der Seitenauffrischung zu einer erfrischenden interaktiven Erfahrung führen. Allerdings ist das Umgehen der Refresh-Funktion nicht umsonst zu haben. Wann lohnt sich die Investition?
Amazons hilfreiche Rezensionen
Von den 5.424 Rezensionen zu J. K. Rowlings „Harry Potter und der Stein der Weisen“ auf Amazon.com wird das Review einer Dame namens Victoria Tarrani vom Juli 2002 zuerst angezeigt. 443 von insgesamt 533 Leuten haben ihre Kritik als „hilfreich“ eingeschätzt. Amazon positioniert die hilfreichsten Kritiken oben und möchte so verhindern, dass sie unter neueren, aber weniger nützlichen Reviews begraben werden.
Unter jeder Rezension wird der Leser gefragt, ob er sie als hilfreich empfunden hat. Wer sich zu einer Antwort bemüßigt fühlt, kann nun zwischen schlichten Ja- und Nein-Buttons wählen. In Anbetracht dessen, dass Amazon seit 2002 Millionen Exemplare dieses Buches abgesetzt hat, haben sehr wenige User ihre Meinung zu Frau Tarranis Beurteilung abgegeben. Trotzdem: Schon durch die verhältnismäßig wenigen Votes ist ein sinnvoller Service für künftige Harry-Potter-Leser entstanden.
Das Interessante an diesen Buttons ist, dass sie die Seite nicht aktualisieren. Stattdessen erscheint nach dem Klick die Nachricht, dass die Bewertung gespeichert wurde, gefolgt von einem Dankeschön für das Voting.
Das Amazon-Team verwendet Ajax für diese Aktion. Nach dem Klick auf den Button wird eine Nachricht an den Server gesendet, der den Eingang bestätigt. Wenn die Javascript-Funktion diese Bestätigung erhält, stellt sie die Dankesnotiz dar. All das geschieht in Sekundenschnelle, eine stabile Verbindung vorausgesetzt. Praktisch ohne Unterbrechung kann der User zur nächsten Aktivität übergehen.
Zwei optionale Möglichkeiten hätte Amazon gehabt, um diese Funktionalität zu verwirklichen. Beispielweise hätte das Team – um bei der traditionellen Button-Interaktion zu bleiben – eine Frage in ein HTML-Formular einbauen können. Beim Klick auf den Button geschähe quasi dasselbe wie mit Ajax, der Server würde lediglich eine neue Seite zurücksenden.
Hinsichtlich der Implementierung ist die Kommunikation mit dem Server fast identisch. Aus Sicht des Users allerdings würde sie sich auf dramatische Weise verändern. Er könnte nicht mit der Seite interagieren, bis die neue Seite geladen wäre. Ihn zur selben Stelle auf der Seite zurückzubringen wäre schwierig und würde für Verwirrung sorgen. (Anker-Tags könnten den Browser dazu bewegen, den User wieder im ursprünglichen Seitenbereich abzusetzen, aber wahrscheinlich würde sich die Seitenkonfiguration ändern.)
Die Amazon-Entwickler wollten die Aktion raffiniert ausgestalten. Eine weitere Option wäre die Verwendung von Radio-Buttons für jede Rezension gewesen. Ein Klick auf Ja oder Nein würde keinen Refresh aktivieren, zum Registrieren der Votes jedoch müssten die User schließlich einen Absenden-Button klicken. Viele User würden dies aber wahrscheinlich vergessen, während andere vielleicht annehmen könnten, dass ihre Bewertungen bereits übermittelt wären. Diesen Nutzern bliebe der Sinn der Funktion verborgen.
Für Amazon ist Ajax die richtige Lösung. Die Entscheidung, wann der Page-Refresh mit Ajax umgangen werden soll, fällt jedoch nicht immer leicht.
Bei Netflix verhilft Ajax zur Spitzenposition (manchmal)
Die Entwickler von der Online-Videothek Netflix.com sind große Fans von Ajax bzw. der Möglichkeit, mithilfe dieser Technologie den Seiten-Refresh zu umgehen. Netflix hat auf diesem Gebiet Pionierarbeit geleistet und Ajax schon in den Anfangstagen eingesetzt, um die von Usern an Filme vergebenen Sterne zu registrieren.
Interessanterweise nutzen sie diese Technik nicht immer, zum Beispiel nicht in der Liste für vorgemerkte DVDs. Kunden fügen Filme, die sie gerne ausleihen möchten, dieser Liste hinzu und können jederzeit auch die Versandreihenfolge verändern.
Diese Liste verfügt über drei Möglichkeiten zur Änderung der Reihenfolge. In den früheren Versionen der Page gaben Kunden eine Ziffer in ein Formularfeld ein und klickten auf den Update-Button. Durch die Ziffer 2 wurde zum Beispiel der dritte Film in der Übersicht auf die zweite Position verschoben.
Da die am häufigsten genutzte Aktion die Auswahl des nächsten auszuleihenden Films war, fügte das Team einen TOP-Button hinzu, mit dem ein Film an die Spitze der Liste gesetzt werden kann. In der neusten Version können User Filme zudem auch auf eine neue Position verschieben.
Es ist interessant, dass die originale Ziffer-und-Button-Operation nach wie vor in einem Seiten-Refresh mündet. Gleichzeitig kommt die Bewertung eines Films auf derselben Seite ohne Refresh aus, das Löschen eines Films wiederum nicht.
Das ist kein Unfall – die Entwickler haben sich dabei sehr wohl etwas gedacht.
Ein Vergleich zwischen Orbitz und Kayak: Flüge sortieren
Machen Sie zuhause doch mal ein kleines Experiment: Öffnen Sie zwei Browser-Fenster (oder Tabs). In einem rufen Sie die Reisereservierungs-Site Orbitz.com auf, im anderen die Seite des Konkurrenten Kayak.com. Fangen Sie jeweils an, einen, sagen wir, Vier-Tage-Trip von Boston (BOS) nach Las Vegas (LAS) irgendwann im November zu buchen. (Ein einige Monate entfernter Zeitpunkt ergibt die meisten Flugoptionen.)
Auf beiden Sites lassen sich die Flugoptionen nach mehreren Kriterien wie Preis, Abflugszeit oder Reisedauer sortieren. Das wollen wir einmal vergleichen und uns ansehen, wie lange die Neusortierung der Listen dauert, wenn wir ein anderes Kriterium wählen.
Als ich das getan habe, brauchte Orbitz sechs bis sieben Sekunden für den Sprung, Kayak dagegen meist weniger als zwei Sekunden. Orbitz führt einen Refresh durch, Kayak organisiert die Daten ohne Auffrischung um. (Interessanterweise stellt Orbitz nur Daten für 45 Flüge auf einer Seite dar, während Kayak die Daten von allen 532 verfügbaren Flügen auf eine Page lädt. Die anfängliche Ladezeit war bei Kayak deshalb unwesentlich länger.)
Was machen zwei Sekunden aus?
Als wir User bei der Reisebuchung beobachtet haben, ist uns aufgefallen, dass sie die Sortieroptionen von Kayak viel lieber erkundet haben als die von Orbitz. Ich bin sicher, der Refresh bei Orbitz wirkt sich negativ auf das interaktive Erlebnis der Nutzer aus.
Kann der Refresh auch zu schnell sein? Aber sicher. Interessanterweise erscheint bei Kayak eine große Übergangs-Box („Ergebnisse werden sortiert“), die die Aufmerksamkeit der User auf sich zieht. In früheren Versionen ohne diese Box dürften viele Nutzer das Neuladen gar nicht mitbekommen und gedacht haben, es wäre überhaupt nichts passiert.
Wann sollte auf den Refresh verzichtet werden?
Wenn das Ergebnis einer Aktion den User wieder auf dieselbe Seite bringt, lohnt sich die Überlegung, den Refresh zu unterbinden. Nehmen wir das Beispiel eines Hinweises auf ein schlecht gewähltes Passwort: Statt dem User dieselbe Registrierungsseite erneut zu präsentieren, könnte das Feedback mithilfe einer Javascript-Funktion unmittelbar nach der Eingabe erfolgen und so zu einer netteren Web-Erfahrung beitragen.
In den meisten Browsern friert der Refresh die aktuelle Seite ein, wartet auf neue Daten, löscht die alte Seite, lädt die Seite neu und springt, sofern spezifiziert, zum Ankerpunkt. Das Einfrieren und Wieder-Aufblitzen der Page kann eine verwirrende Erfahrung für den User sein. Hat er eine andere Seite erwartet, wird er der neu geladenen Page kaum Aufmerksamkeit schenken. Wenn sie auf etwas klicken, erwarten die Leute in der Regel eine neue Seite.
Trotzdem wird in manchen Fällen – wie bei Amazon, Netflix und Kayak – ein etwas raffinierterer Effekt angestrebt. Eine einfache Änderung der Daten ist jedenfalls sinnvoller als das Geblinke bei einem Refresh und ermutigt den User mit Sicherheit eher zur weiteren Interaktion.
Natürlich gibt es auch Nachteile. Nicht jeder vermag problemlos mit Javascript und Ajax zu arbeiten. Um Browser-Inkompatibilitäten zu vermeiden, muss das System stets auf dem neuesten Stand sein. Auch das Speicher-Management in Javascript ist mitunter chaotisch und kann Performance-Probleme verursachen, wenn weitere Daten in den Browser geladen werden. (Googles neuer Browser Chrome ist auf die Handhabung dieses Problems optimiert; Google verwendet Ajax liebend gern in seinen Applikationen.)
Zudem müssen Entwickler all ihre Erfahrung in die Waagschale werfen, etwa wenn der Browser eines Users nicht mit Javascript zusammenarbeiten mag. Ist Javascript deaktiviert, führt der Browser nach dem Klick auf Amazons Hilfreich-Button zum Beispiel die klassische Button-und-Refresh-Routine aus. Also sind verschiedene Formen der Implementierung erforderlich. (In Jeremy Keith’ Artikel über Progressive Enhancement finden sich zahlreiche Tricks zum Thema.)
Die Unterbindung des Refreshs kann zu einer angenehmeren Surf-Erfahrung führen. Die Kunst besteht darin, dieses Werkzeug an der richtigen Stelle aus dem Koffer zu holen.
-
Dieser Artikel wurde im Original am 8. September 2008 unter dem Titel „Refresh, or Not to Refresh“ von Jared M. Spool veröffentlicht. Jared M. Spool gehört zu den führenden Usability-Experten unserer Zeit. Seine Website erreichen Sie unter http://www.uie.com/. Weitere Artikel von Jared M. Spool finden Sie im Usability-Special von //SEIBERT/MEDIA.
