Wartezeit geschickt nutzen und User Experience verbessern

Niemand wartet gerne. Schon gar nicht auf einen Server, der mal wieder zu langsam ist. Am wenigsten Ihre Kunden. Doch was können Sie tun, wenn technisch keine Verbesserung in Sicht ist? Könnten Sie Ihre Applikation nicht einfach schneller erscheinen lassen als sie wirklich ist und obendrein die Wartezeit noch geschickt zu Ihren Gunsten nutzen?

‍

Ungeliebte Wartezeit

Warum wird Wartezeit überhaupt negativ gesehen? Oft liegt es daran, dass wir eine gewisse Erwartungshaltung haben, aber nicht sicher sind, ob und wann unsere Erwartungen erfüllt werden. Warten löst Unsicherheit in uns aus, weil wir diese Zeit nicht kontrollieren können und damit von außen in einen passiven Zustand der Ungewissheit gezwungen werden.

Was passiert, wenn wir dem passiven Warten zu lange schutzlos ausgesetzt sind? Wir empfinden Unbehagen, fühlen uns unserer Zeit beraubt, werden nervös, verärgert, verlieren das Vertrauen und schließlich das Interesse. Ein vielleicht anfangs positives Gefühl der Vorfreude schlägt in Frust um. Das ist pures Gift für jede digitale Applikation – egal ob Webseite, App oder Desktop Anwendung. Wenn unser Nutzer einmal das Interesse verloren hat, was bleibt dann noch? Höchstwahrscheinlich wird der Nutzer der Applikation den Rücken kehren oder zumindest den Faden verlieren, wertvolle Zeit verschwenden und sich womöglich nach einer besseren Alternative umsehen.

Eine Frage der Erwartungshaltung?

Klingt wirklich unschön, oder? Die gute Nachricht ist, dass es verschiedene Arten des Wartens gibt – und nicht jede Art wird zwangsläufig als negativ empfunden. Die Dauer des Wartens, sowie die Wahrnehmung der Zeit und ihre Manipulation tragen dazu bei, die negativen Effekte des Wartens zu dämpfen oder sogar zu eliminieren. Warten ist ebenfalls stark kontextabhängig und eine Frage der Erwartungshaltung. Sind wir darauf vorbereitet zu warten, wird das Warten als weniger negativ empfunden als wenn es unerwartet kommt. Der Coinstar Automat in den USA zählte die eingeworfenen Münzen so schnell, dass die Nutzer der Überzeugung waren, der Automat habe falsch gezählt, obwohl die Zählung absolut korrekt war.

Daraufhin wurde der Automat so eingestellt, dass das Ergebnis erst später angezeigt wurde und damit der gesamte Vorgang länger dauerte. Doch die Benutzer waren damit zufriedener, denn es entsprach ihrer Erwartung, und die Beschwerden stellten sich ein. Eine gewisse Wartezeit kann also unter Umständen ein (vermeintliches) Qualitätsmerkmal sein. Wenn sich unsere Nutzer darauf einstellen zu warten, dann kann es durchaus sinnvoll sein diese Anforderung zu erfüllen.

‍

Lohnt sich eine technische Verbesserung?

Falls Sie sich nun denken: Aber ich habe doch erstklassige Entwickler in meinem Unternehmen, die sich um die maximal mögliche Performance bemühen, warum noch andere Strategien entwickeln? Dann sollten Sie unbedingt bedenken, dass ein Zeitunterschied, der weniger als 20% beträgt, vom Nutzer nicht explizit wahrgenommen wird [1]. Ein Effekt, der auch als Weber-Fechner-Gesetz bekannt ist.

Nehmen wir an, Ihre Entwickler verbessern die Ladezeit Ihres Produkts von 12 auf 10 Sekunden, dann wird das von ihrem Nutzer kaum bemerkt werden, auch wenn Ihr Entwicklungsleiter diese technische Verbesserung als Fortschritt deklarieren kann. Wird die Ladezeit jedoch auf 8 Sekunden verkürzt, hat sich der vermutlich hohe technische Aufwand gelohnt und Ihre Nutzer werden es Ihnen danken. Doch was ist mit allen anderen Fällen? Müssen wir wirklich unserem Nutzer jede Wartezeit zumuten und auf das Beste hoffen? Die klare Antwort lautet: Nein!

„Nutze die Wartezeit” und verbessere die User Experience!

„Nutze die Wartezeit” lautet an dieser Stelle unsere magische Formel. Akzeptieren Sie, dass Warten an manchen Stellen unumgänglich ist. Wie am Anfang beschrieben, erzeugt Warten in uns Ungewissheit, wenn wir uns der Wartezeit passiv ausgeliefert fühlen. Neben diesem passiven Warten gibt es aber auch das aktive Warten (Abbildung 1). In diesem Fall läuft im Hintergrund zwar ein Prozess ab, auf dessen Ergebnis der Nutzer warten muss, doch fühlt er oder sie sich aktiv am Geschehen beteiligt. Vielleicht sogar noch besser: er oder sie kommt gar nicht erst in den bewussten Zustand des Wartens. Das hat einen sehr positiven Effekt auf die User Experience Ihrer App.

‍

‍

‍

Im Vergleich zum aktiven Warten wird passives Warten um ca. ein Drittel länger empfunden [2]. Und darum gilt es, vor allem das passive Warten zu verkürzen. Unsere Aufgabe ist es daher, einen möglichst hohen Anteil der Wartezeit in aktives Warten zu verwandeln. Einen kleinen Vorteil haben wir noch zusätzlich: es braucht eine Sekunde für das menschliche Gehirn, um zu realisieren, dass tatsächlich (passiv) gewartet wird [3]. Das heißt wir haben einen kleinen Vorsprung, um unseren Nutzern zu ersparen, in diesen unschönen Zustand zu geraten.

‍

Bleibt aufmerksam!

‍

Aufmerksamkeitsspanne im digitalen Umfeld Schauen wir uns die menschliche Aufmerksamkeitsspanne noch etwas genauer an. Welche Wartezeiten sind für unser Gehirn tolerierbar und ab wann fangen wir an geistig abzudriften? Wie in Abbildung 2 dargestellt, wird eine Wartezeit von bis zu 0,2 Sekunden nicht als solche wahrgenommen. Der Mensch empfindet diese kurze Zeitspanne als augenblicklich. Bis zu einer Sekunde nehmen wir eine Interaktion wahr, jedoch noch kein Warten. Ab einer Sekunde fangen wir dann an zu realisieren: aha, wir müssen warten, die Gedanken schweifen ab, wir werden ungeduldig. Kurz gesagt: der Zustand ist nicht mehr optimal und wir fangen an den Fokus zu verlieren. Ab 5 Sekunden wird es dann wirklich kritisch: warum dauert das so lange? Wir sind genervt und verlieren die Lust. Darum: Lassen Sie uns dem Nutzer ein Gefühl von aktiver Teilnahme, Einflussnahme, Sicherheit, Vorfreude und Vertrauen vermitteln, anstatt ihn zu verunsichern oder gar zu verprellen. Wie das geht? Die Techniken und Möglichkeiten werden wir Ihnen im Folgenden Schritt für Schritt zeigen.

Sind Fortschrittsanzeigen die Rettung?

Wer kennt sie nicht, die verschiedensten Formen der Fortschrittsanzeige? Sie vermitteln uns ein gutes Gefühl, dass etwas passiert und wir dem Ziel näherkommen. Im besten Fall wecken sie Vertrauen und Vorfreude. Neben den Klassikern wie Spinner und Ladebalken, erobert mittlerweile eine weitere, eher indirekte Art der Fortschrittsanzeige das Feld: die Transition. Hierbei wird der Übergang von Zustand A in Zustand B durch eine fließende Animation dargestellt, die dem Nutzer im besten Fall sogar noch weitere Informationen vermittelt, so dass dieser gar nicht bemerkt wie viel Zeit vergangen ist.

Durch die Animation ist der Nutzer zum Zuschauer geworden und so lange etwas “passiert”, wird diese Zeit nicht als Wartezeit empfunden, sondern als natürlicher Übergang, der nebenbei noch beispielsweise das erfolgreiche Versenden einer E-Mail kommuniziert. Die Transition eignet sich damit ideal für Wartezeiten unter einer Sekunde. Doch auch der Kreisel, oft als Spinner (Abbildung 3) bezeichnet, hat seine Daseinsberechtigung.

Er zeigt an, dass etwas passiert, auch wenn nicht klar ist, auf was und wie lange noch gewartet werden muss. Er eignet sich vor allem für kurze Wartezeiten unter 3 Sekunden, die nicht von einer Transition oder anderen Methoden abgedeckt werden können. Zudem bietet er die Möglichkeit, eine firmenspezifische Gestaltung und Unterhaltung mit Markenidentität zu vermitteln.

‍

Nun zum Klassiker unter den Fortschrittsanzeigen: dem Ladebalken. Er gibt uns direkt Auskunft über den Fortschritt und lässt uns im besten Fall die verbleibende Wartezeit abschätzen. Angereichert wird er in einigen Fällen noch mit zusätzlichen Informationen, welcher Schritt gerade ausgeführt wird. Beliebt ist der Ladebalken besonders für die vermittelte Sicherheit, dass das Warten in absehbarer Zeit ein Ende haben wird. Um diese Sicherheit noch zu verstärken, kann ein Streifenmuster hinterlegt werden, das sich in die entgegengesetzte Richtung bewegt (Abbildung 4). So entsteht der Eindruck, der Ladebalken würde sich 12% schneller bewegen als der gleiche Ladebalken ohne diesen Kniff [4]. Vergleichbar ist dieser Effekt mit einem Reisenden, dessen Zug an einem entgegenkommenden Zug vorbeifährt. Durch die gleichzeitige Bewegung in entgegengesetzte Richtung entsteht der Eindruck, sich deutlich schneller zu bewegen. Dieser UI Design Trick ist ein wahrer User Experience Booster!

‍

Um die Erleichterung und das Erfolgserlebnis des Nutzers am Ende des Wartevorgangs zu erhöhen, überschätzen manche Ladebalken absichtlich die verbleibende Wartezeit oder verzögern den Fortschritt am Anfang, um gegen Ende hin schneller zu werden. Auf diese Weise entsteht der Eindruck, der gesamte Vorgang sei unerwartet schnell gewesen. Ein netter psychologischer Trick. Doch bei aller Raffinesse: der beste Ladebalken ist der, der nie zur Anwendung kommt, denn solche Fortschrittsanzeigen machen dem Nutzer endgültig klar, dass er oder sie wartet. Doch was können wir tun, um Ladebalken überflüssig zu machen?

Erzähl eine Geschichte!

Anstatt den Nutzer zu frustrieren, können wir seine Vorfreude auf das neue Produkt steigern, indem wir ihm eine spannende Geschichte erzählen, während er wartet (Abbildung 5). Heute beispielsweise finden wir eine gelungene Umsetzung des Storytellings bei der Installation der Open-Source Linux-Distribution Ubuntu. Während die Installation im Hintergrund läuft, wird im Installationsfenster erklärt, wie großartig die neue Version ist, welche Vorteile und neue Features den Nutzer in Zukunft begeistern werden.

‍

Storytelling lenkt nicht nur den Nutzer ab, sondern es bietet gleichzeitig eine tolle Gelegenheit, das Produkt in Szene zu setzen und Mehrwert zu bieten. Die User Experience ist natürlich noch höher, wenn Wartezeit nicht als solche wahrgenommen wird, gleichzeitig auch noch Mehrwert geboten wird. Die Zeit zu nutzen, um eine Verbindung zum Nutzer auzubauen und seine Vorfreude zu steigern, ist hohe Kunst! Um das zu erreichen, sollte man sich gut überlegen, welche Informationen für den Nutzer relevant sind und wie ihm diese weiterhelfen können. Auch hier gilt – Kontext ist alles. Erklären Sie Ihren Nutzern schon mal besondere Funktionen, teilen Sie nützliche Hintergrundinformationen und zeigen Sie, welchen Mehrwert Ihr Produkt bietet. Mithilfe einer guten Geschichte unterstreicht die Ladezeit die Qualität des Produkts. Sie erinnern sich bestimmt noch an das Coinstar Beispiel weiter oben.

Ganz nach dem Motto “gut Ding will Weile haben” wird es sich das Warten definitiv lohnen. Das sollten Sie Ihren Nutzern unbedingt vermitteln. Besonders die Spieleindustrie macht sich diese Methode zu Nutze. Natürlich ergeben sich hier besonders spannende und fantasiereiche Geschichten, die den Inhalt des Spiels aufgreifen und die richtige Stimmung erzeugen. Während im Hintergrund einiges abläuft, wird der Spieler schon auf seine Mission vorbeireitet und lernt die Spielregeln kennen.

„Ich bin schon hier!” rief der Igel

Kommen wir nun zu den fortgeschrittenen Techniken, bei denen der Nutzer die Wartezeit gar nicht merkt (Abbildung 6). Das klingt für Sie nach Märchen und Magie? Daran angelehnt sind unsere Vorschläge sicherlich. Werfen wir zunächst einen Blick auf das Ende der Wartezeit. Hier stellt sich schnell die Frage: warum überhaupt bis zum Ende warten? Haben wir nicht schon viel früher etwas anzubieten? In den meisten Fällen lautet die Antwort: ja! Etwas haben wir schon und damit können wir anfangen. Warum sollte der Nutzer warten bis den allerletzten Teil der Oberfläche geladen ist, wenn er oder sie schon viel früher mit den bereits geladenen Elementen interagieren könnte?

‍

Ein gutes Beispiel hierfür ist YouTube (Abbildung 7). Sobald die ersten Sekunden des Videos geladen sind, wird es gestartet. Müssten wir erst bis zum vollständigen Laden warten, wären wir mit Sicherheit schnell über alle Berge.

Diesen Trick können wir uns auch für ganze Webseiten zunutze machen und alles Nötige bereits im HTML mitliefern. Ein gutes Hilfsmittel dafür ist Inline CSS. Hierin können wir alle nötigen CSS Regeln, auch “Critical Path CSS” genannt, mitliefern, um unsere Seite schon initial gut aussehen zu lassen - zumindest soweit sie der Nutzer sieht. Dieser Bereich wird auch als “above the fold” bezeichnet (Abbildung 8). Alles Weitere folgt dann sobald das restliche CSS geladen wurde. Für einen ersten Wurf können wir den “Critical Path CSS Generator” verwenden [5].  Durch Inline CSS kann die Zeit bis zum ersten Rendern gut und gerne um 40% gesenkt werden. Ein entscheidender Vorteil, besonders wenn Ihre Nutzer schnell an Informationen gelangen möchten.

Hellseherische Fähigkeiten entwickeln

Eine weitere Möglichkeit, Inhalte möglichst früh zu präsentieren ist eine Methode, die gerne als “Skeleton Loading” oder “Content Placeholder” bezeichnet wird (Abbildung 9). Hierbei werden die Plätze, an denen Inhalte geladen werden, schon als solche vorstrukturiert und der Inhalt schemenhaft dargestellt. So weiß der Nutzer bereits was ihn oder sie gleich erwarten wird und kann sich entsprechend fokussieren. Die schemenhafte Darstellung dient darüber hinaus als Fortschrittsindikator, der dem Nutzer vermittelt, dass die gewünschten Inhalte bald geladen sein werden.

Seien wir realistisch optimistisch!

In vielen Fällen lassen wir den Nutzer auf eine Rückmeldung vom Backend warten. Schließlich wollen wir auf Nummer sicher gehen, dass seine Daten auch wirklich korrekt gespeichert wurden. Doch nehmen wir an, dass in 99,9 % der Fälle eine vorhersehbar positive Antwort vom Server zurückkommt. Ist es dann sinnvoll jeden Nutzer warten zu lassen oder reicht es aus, sich in den seltenen 0,01% beim Nutzer zu melden? Besonders wenn die Rückmeldung vom Backend für den Nutzer nicht von wesentlicher Bedeutung ist, lohnt es sich eine optimistische Haltung einzunehmen und den Nutzer nicht weiter damit zu behelligen. Dieses Vorgehen wird auch als “Optimistic UI” bezeichnet. Besonders kleine Interaktionen wie “Likes” müssen so nicht länger auf eine Server-Antwort warten, sondern können gleich eine positive Rückmeldung geben. Sollte es doch zu Problemen kommen, können diese entweder “unsichtbar” gelöst werden, in dem weiter versucht wird die Aktion auszuführen oder der Nutzer kann mehr oder weniger auffällig darüber informiert werden.

‍

Twitter beispielsweise nimmt eine optimistische Haltung ein. Wenn der Nutzer einem Beitrag durch Klicken des Herz Symbols ein Like gibt, färbt sich dieses sogleich rot und signalisiert: “Sie haben diesem Beitrag ein Like hinterlassen”. Obwohl noch keine Rückmeldung vom Server vorliegt, färbt sich das Herzschon rot. Sollte die Antwort des Servers wider Erwarten ausbleiben, entfernt Twitter sang und klang los die Rotfärbung des Herzes, in der Annahme, dass ein Like mehr oder weniger für den Nutzer nicht essentiell sein wird.

Die Nutzer an die Hand nehmen

Wenn Ihre Applikation in unter einer Sekunde lädt, super! Da das leider oft technisch nicht umsetzbar ist, gibt es glücklicherweise eine Vielzahl an Möglichkeiten, die menschliche Wahrnehmung der Zeit für sich zu nutzen und Applikationen schneller erscheinen zu lassen, als sie in Wirklichkeit sind. Konzentrieren Sie sich dabei auf die drei wesentlichen Punkte: Schnelligkeit, Unterhaltung und Erklärung (Abbildung 10).

Zusammengefasst:

• Seien Sie so schnell Sie können.
• Zeigen Sie den Fortschritt und was im Hintergrund passiert.
• Lassen Sie keine Langeweile aufkommen.
• Erklären Sie Ihren Nutzern, warum Warten in diesem Fall nötig ist.
• Bieten Sie Mehrwert und füllen Sie die Wartezeit mit sinnvollen Inhalten.

So werden Ihre Nutzer die Wartezeit um einiges kürzer empfinden oder kaum als solche wahrnehmen. Dadurch erzeugen Sie Vertrauen und lassen Ihre Nutzer nicht länger im Dunkeln tappen.

In diesem Sinne: nehmen Sie Ihre Nutzer an die Hand und führen Sie sie durch Ihre Applikation, wie Sie auch ein Kind durch eine neue Umgebung führen würden: behutsam und vertrauensvoll.

[1] „Designing and Engineering Time: The Psychology of Time Perception in Software“ von Steven C. Seow

[2] „Perspectives on Queues: Social Justice and the Psychology of Queueing“ von Richard Larson (MIT)

[3] “Usability Engineering” von Jabob Nielson

[4] “Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations” von Chris Harrison, Zhiquan Yeo & Scott E. Hudson (Carnegie Mellon University)

[5] https://www.sitelocity.com/critical-path-css-generator