• Facebook
  • Google+
  • Twitter
  • XING
25.10.2014

Fortschrittsanzeigen machen ein langsames System erträglicher

Animationen, die den Fortschritt anzeigen informieren Nutzer über den aktuellen Status. Dadurch machen Sie den Warteprozess erträglicher, weil sie die Unsicherheit der Nutzer reduzieren. Nutzer sind zufriedener mit einer Website und sind auch bereit, länger zu warten, wenn die Website eine dynamische Fortschrittsanzeige verwendet.

© Di Studio - Fotolia.com

 

by Katie Sherwin (deutsche Übersetzung) - 26.10.2014

 

Als eine der ursprünglichen 10 Heuristiken der Internet-Usability (engl.), zählt die Sichtbarkeit des Systemstatus zu den wichtigsten und universell anwendbaren Grundsätzen beim Design von Nutzeroberflächen. Ziel ist es, den Nutzer innerhalb eines angemessenen Zeitraums darüber zu informieren, was gerade im System oder auf der Nutzeroberfläche passiert, und - laut der Interaktionstheorie von Norman - somit den "Gulf of Evaluation" zu überbrücken. (Anmerkung der Übersetzung: Der Gulf of Evaluation beschreibt a) die Schwierigkeit, den Zustand eines Systems richtig einzuschätzen und b) wie gut Artefakte die Entdeckbarkeit des jeweiligen Zustandes unterstützen (Norman, 1991).)

Eine der häufigsten Formen des Systemfeedbacks auf Webseiten und in Anwendungen ist eine Animation als Fortschrittsanzeige. Dieses Designelement zeigt "dynamisches" Feedback an, während die Seite lädt oder während Informationen verarbeitet werden. In diesem Artikel beleuchten wir die wichtigsten Arten von Fortschrittsanzeigen und geben Empfehlungen ab, wann welche Art verwendet werden sollte.

Die Macht des Feedbacks: Geben Sie Nutzern das Gefühl, ihnen zuzuhören

Durch angemessenes Feedback versichert die Nutzeroberfläche, dass das System die Handlungen und Eingaben des Nutzers verstanden hat und es bereits am Verarbeiten der Eingaben ist. Das ist kein neues Konzept, trotzdem lohnt sich, es zu berücksichtigen, um die User Experience zu erhöhen.

Leider wenden zahlreiche Websites und Computersysteme eine andere Taktik an. Sie zeigen die Rückmeldung erst an, wenn der ganze Prozess abgeschlossen ist. Das sorgt für sehr viel Unsicherheit, da der Nutzer nicht weiss, ob der Computer die Eingabe erhalten hat oder ob das System vielleicht sogar abgestürzt ist. Zahlreiche Zusatzklicks und doppelte Bestellungen sind das Resultat eines derart nutzerunfreundlichen Designs.

Obwohl schnelle Antwortzeiten immer zu bevorzugen sind, gibt es manchmal Situationen, in denen es unmöglich ist, Empfehlungen in Bezug auf die Reaktionszeiten einzuhalten, selbst wenn Sie Server-Upgrades durchführen. In solchen Fällen müssen Sie Nutzern versichern, dass die Anfrage derzeit am bearbeitet ist. Falls es länger als 10 Sekunden dauert, bis das Resultat angezeigt wird, sollten Sie den Nutzern auch eine geschätzte Endzeit anzeigen.

Hier ist ein Beispiel für ein Nutzererlebnis aus der Offline-Welt: Vor kurzem kontaktierte ich das kalifornische Department of Motor Vehicles (DMV) wegen eines Problems, das ich über die Webseite nicht lösen konnte. Da ich annahm, dass die Wartezeit unendlich sein würde, nahm ich mir den Nachmittag frei, setzte meine Kopfhörer auf und stellte mich auf einen langen Aufenthalt in der Warteschleife ein.

  • Das erste Feedback war wie erwartet eine Anrufbeantworter-Aufnahme mit dem Text, dass derzeit alle Kundenservicemitarbeiter beschäftigt sind.
  • Die Musik, die in der Warteschleife zu hören war, entsprach zwar nicht meinem Geschmack, war aber eine Form des Feedbacks, die mir mitteilte, dass die Verbindung aufrecht war und mein Gespräch nicht unterbrochen wurde. Ausserdem lenkten mich die Momente, in denen ich mich über die Musik lustig machte, vom Warten ab.
  • Danach informierte mich die Aufnahme, dass die Wartezeit zwischen 15 und 20 Minuten betragen würde. Diese Information eliminierte die Unsicherheit und gab mir die Kontrolle darüber, wie ich mein nächsten 15 Minuten verbringen würde.
  • Zu meiner Überraschung gab mir das DMV-Tonband schliesslich die Möglichkeit, meine Telefonnummer zu hinterlassen, um vom DMV zurückgerufen zu werden, sobald ein Mitarbeiter zur Verfügung steht - dabei wurde mir versichert, dass ich meinen Platz in der Warteschleife behalten würde. Jetzt, da ich wusste, wie lange die Wartezeit ungefähr sein würde, konnte ich andere Dinge erledigen, ohne mein Telefon mit mir herumtragen oder ständig auf die Uhr sehen zu müssen.

Aufgrund dieser verschiedenen Feedbacks war ich beruhigter, während ich darauf wartete, mit dem DMV verbunden zu werden. Insgesamt war ich vom Service beeindruckt. Diese wenigen Verbesserungen des Warteschleifen-Systems waren für das Unternehmen sicherlich wesentlich günstiger, als die doppelte Anzahl Kundenservicemitarbeitern einzustellen. (Und während der Stosszeiten können mehr Mitarbeiter den Ansturm sowieso nicht bewältigen).

Fortschrittsanzeigen teilen Nutzern mit, (a) dass das System mehr Zeit benötigt, um die letzte Eingabe des Nutzers zu verarbeiten (zum Beispiel, um eine Datei zu laden oder ein neues Update zu installieren) und (b) mit wie viel Wartezeit noch ungefähr zu rechnen ist. Sie haben 4 Hauptvorteile:

  1. Sie versichern Nutzern, dass das System funktioniert und reduzieren daher die Unsicherheit. In meinem DMV-Beispiel war es beruhigender, zu wissen, dass alle Mitarbeiter besetzt sind, als gar keine Nachricht zu erhalten.
  2. Sie geben Nutzern etwas, das sie sich während des Wartens ansehen können, was die Wartezeit erträglicher macht. Die Warteschleifen-Musik spielte im DMV-Beispiel diese Rolle.
  3. Sie geben dem Nutzer einen Grund, zu warten, bis das System fertig ist - einfach, da etwas zu passieren scheint. Ich wusste, dass das DMV 15 Minuten benötigt, um meinen Anruf entgegenzunehmen, daher war ich bereit, 15 Minuten lang zu warten.
  4. Sie können das Zeitgefühl des Nutzers beeinflussen: Nutzer investieren kognitive Ressourcen (engl.) für das angezeigte Feedback und achten weniger genau auf die Wartezeit. Während ich der DMW-Musik zuhörte und darüber nachdachte, vergass ich, dass Warten unangenehm ist.

Website-Studien haben gezeigt, dass grafische Fortschrittsanzeigen - genau wie Warteschleifen-Musik und Nachrichten auf dem Anrufbeantworter des DMV - die negativen Effekte des Wartens abschwächen und die Aufmerksamkeitsspanne des Nutzers Ihrer Webseite verlängern. In einer Studie, die an der University of Nebraska-Lincoln durchgeführt wurde, untersuchten Forscher, wie lange Menschen warten, bis eine Webseite geladen ist. Nachdem sie auf einen Link geklickt hatten und darauf warteten, dass sich die Seite öffnete, sah eine Teilnehmergruppe einen fortlaufende Fortschrittsbalken (ständig animiert), wären die Kontrollgruppe keinerlei Fortschrittsanzeige sah. Die Forscher fanden heraus, dass die Teilnehmer mit den laufenden Fortschrittsbalken zufriedener waren und rund 3-mal so lang warteten, als jene Teilnehmer, die keine Fortschrittsanzeige sahen. (Mehr über derartige Studien erfahren Sie in unserem ganztägigen Kurs über User Interface Principles (engl.))

Animationen als Fortschrittsanzeigen

Obwohl die Verbindungsgeschwindigkeit (engl.) jedes Jahr steigt, sind langsame Antwortzeiten (engl.) von Webseiten immer noch Realität. Sie nerven Nutzer und erhöhen die Wahrscheinlichkeit, dass Menschen ihr Vorhaben abbrechen oder die Webseite verlassen. Die Bereitschaft eines Nutzers, zu warten, bis ein System eine Aktion abgeschlossen hat, hängt von mehreren Faktoren ab. Dazu gehören:

  • Die Dringlichkeit und Komplexität des Ziels oder der Aufgabe.
  • Der Kontext der Verwendung, z.B. Zeit am Handy totschlagen versus schnell ein wichtiges Projekt hochladen.
  • Die Erwartungen des Nutzers basierend auf früheren Erfahrungen mit der Webseite oder ähnlichen Prozessen.

Obwohl wir diese Umstände nicht vorhersagen oder kontrollieren können, können wir die Wahrscheinlichkeit erhöhen, dass der Nutzer bleibt und wartet, bis die Informationen geladen worden sind wenn wir folgende Richtlinien befolgen:

Stellen Sie sicher, dass sofort eine Form von Feedback angezeigt wird.

Die Wartezeit des Nutzers beginnt in dem Moment, in dem er/sie eine Aktion initiiert - egal ob es sich um ein Tippen auf den Bildschirm, einen Mausklick, einen Tastendruck oder einen Sprachbefehl handelt. Das System sollte sofort ein visuelles Feedback liefern, um zu bestätigen, dass es die Anfrage erhalten hat. Eine Schaltfläche könnte zum Beispiel "gedrückt" aussehen oder die Seite könnte aktualisiert werden. Ohne visuelle Änderung nehmen die meisten Menschen an, dass die Aktion nicht registriert wurde, und versuchen es noch einmal.

Verwenden Sie eine Fortschrittsanzeige für Aktionen, die länger als rund 1,0 Sekunden dauern.

Nach wenigen Sekunden lenkt der Nutzer seine Aufmerksamkeit auf andere Dinge - und könnte Ihre Webseite verlassen. Es gibt zwei Haupttypen von Fortschrittsanzeigen: sich wiederholende Animationen und Prozentanzeigen. Die gewählte Art hängt vor allem davon ab, wie lange der Vorgang dauern wird.

1. Sich wiederholende Animationen: Nur für schnelle Aktionen geeignet.

Eine animierte Grafik, die sich ständig wiederholt, liefert das Feedback, dass das System funktioniert. Sie enthält allerdings keine Informationen darüber, wie lange der Nutzer warten muss. Das animierte Spinner-Symbol ist ein Beispiel für diese häufig verwendete Fortschrittsanzeige.

Animation-Fortschrittsanzeigen

Beispiel für sich wiederholende Animationen als Fortschrittsanzeige, welche normalerweise in Form von runden Spinnern oder sich wiederholenden Fortschrittsbalken angezeigt werden: United.com (links), Evernote (Mitte), Facebook (rechts).

Dieser Indikator sollte nur für Aktionen verwendet werden, die zwischen 2 und 10 Sekunden dauern. Falls Dinge in weniger als 1 Sekunde geladen werden, ist eine sich wiederholende Animation verwirrend, da Nutzer nicht verstehen was gerade passiert und sich fragen, was am Bildschirm aufgeblitzt ist.

Von einer Entwicklungsperspektive aus kann es verlockend sein, sich wiederholende Fortschrittsanzeigen für alle Arten von Verzögerungen, inklusive langen Wartezeiten, zu verwenden, da es in diesem Fall nicht notwendig ist, die Dauer der Wartezeit abzuschätzen. Wir empfehlen allerdings nicht, sich wiederholende Animationen für Aktionen zu verwenden, die länger als 10 Sekunden dauern, da Nutzer schnell ungeduldig werden, falls Sie das Gefühl haben, keine Fortschritte zu machen. Falls sich das Drehrad ständig weiterdreht, können Nutzer nicht sicher sein, ob das System noch arbeitet oder gestoppt wurde - und brechen die Aufgabe eventuell einfach komplett ab. (In seltenen Fällen könnten sie auch ewig warten, wie es einem Nutzer in einer Testsitzung passierte, der geduldig 15 Minuten lang wartete, um eine Ausgabe eines Magazins zu öffnen, um danach zu bemerken, dass die App steckengeblieben war und neu gestartet werden musste. Das passiert allerdings mit höherer Wahrscheinlichkeit im Rahmen eines Usability-Tests als im echten Leben.)

Es kann auch hilfreich sein, Nutzer über die Situation zu informieren, indem ein Text erscheint, der die Wartezeit erklärt (z.B. "Kommentare werden geladen…"). Doch Vorsicht: sich drehende Rädchen können gefährlich für Daten sein, die von einem Server geladen werden, da die Verbindungsqualität häufig ausserhalb der Kontrolle des Entwicklers liegt. Obwohl die Daten in 2 Sekunden geladen sein sollten, könnte es in ungünstigen Fällen 15 Sekunden lang dauern.

2. Prozentsatz-Animationen: Für Aktionen, die 10 Sekunden oder länger dauern.

Fortschrittsanzeigen mit Prozentangaben sind die informativste Art von Warteanimation. Sie zeigen den aktuellen Fortschritt an und informieren den Nutzer, wie viel bereits abgeschlossen wurde und wie viel noch ausständig ist. Sie enthalten wichtige Informationen über die (ungefähre) Wartezeit. Diese Informationen geben dem Nutzer Kontrolle (er/sie kann entscheiden, ob er/sie warten möchte oder nicht), reduzieren die Unsicherheit betreffend die Länge des Vorgangs und können die wahrgenommene Wartezeit verkürzen. Fortschrittsbalken oder Kreise, die von 0-100% laufen, sind Beispiele für diese Art von Feedback.

Prozent-Fortschrittsanzeigen

Beispiele für animierte Prozentanzeigen: Expensify.com (links) und WeTransfer.com (rechts). Beide Beispiele enthalten eine animierte visuelle Darstellung des Fortschritts, sowie einen Text, der den Fortschritt beschreibt.

Im Allgemeinen sollten Prozentanzeigen für längere Prozesse verwendet werden, die 10 Sekunden oder länger dauern. Eine visuelle Anzeige, die sich dem Abschluss der Aufgabe nähert, beruhigt den Nutzer und erhöht seine Bereitschaft zu warten.

Eine Prozentanzeige kann für Aktionen verwendet werden, die weniger als 10 Sekunden dauern, falls die Aktion die Verarbeitung mehrerer Dokumente oder Register inkludiert. So versteht der Nutzer, dass das System mit mehreren Datensätzen arbeitet. Wie bei fortlaufenden Animationen, sollten Sie einen Text aufführen, der den Prozess beschreibt, zum Beispiel: "Adresse 3 von 50 wird aktualisiert". Bei Aktionen, die etwas länger dauern, sollten Sie den Nutzern die Möglichkeit geben, den Prozess zu stoppen, falls sie im Moment nicht warten können. Ansonsten könnte ihr Design die Kontrolle über das System übernehmen, wodurch der Nutzer machtlos ist.

Eine Prozentanzeige gibt den Nutzern Hinweise darauf, wie schnell die Aktion verarbeitet wird. Dabei werden Änderungen der Geschwindigkeit sichtbar, was die Zufriedenheit des Nutzers beeinflusst: falls der Prozess schnell voranschreitet und dann lange beim letzten Prozent verweilt, wird der Nutzer frustriert sein und die Vorteile der Fortschrittsanzeige werden zunichte gemacht.

Ein Problem von Designern und Entwicklern, die Prozentanimationen einsetzen, ist es, die Dauer eines Prozesses zu berechnen. Hier sind einige Lösungsmöglichkeiten:

  • Starten Sie die progressive Animation langsamer und lassen Sie sie gegen Ende schneller laufen. Dadurch erwartet sich der Nutzer keine schnellere Geschwindigkeit, als sie das System liefern kann. Die Erwartungen der Kunden zu übertreffen sorgt immer für grössere Zufriedenheit, als Kunden zu enttäuschen, indem Versprechen nicht gehalten werden. (Beachten Sie, dass diese "langsam-schnell" Empfehlung nur für Warteanimationen gilt. Forschung hat gezeigt, dass Fortschrittsanzeigen bei Umfragen, die schnell beginnen und langsam enden die Abbruchrate reduzieren.)
  • Geben Sie eine allgemeine Zeiteinschätzung an. (Versuchen Sie nicht, die Zeit exakt anzugeben, da diese Angabe sicher nicht genau stimmt, was die Glaubwürdigkeit der Webseite beeinträchtigt.) Ein einfaches "Dieser Vorgang wird mindestens eine Minute lang dauern" oder "Es verbleiben rund 3 Minuten" reicht aus, um die Nutzer zu informieren und sie zum Warten zu motivieren. Planen Sie für alle Fälle immer etwas zusätzliche Zeit ein. Falls die Aktion schneller abgeschlossen wird, ist das eine angenehme Überraschung. Wir haben noch nie gehört, dass sich ein Nutzer beschwert: "Hey! Ich war nicht darauf vorbereitet, dass das schon fertig ist!"
  • Anstatt einen Prozentsatz anzuzeigen, können Sie auch die Anzahl der Schritte angeben. Nutzer wissen nicht, wie lange jeder Schritt dauert, die Anzahl der Schritte zu kennen, hilft ihnen aber dabei, die Dauer einzuschätzen.

3. Statische Fortschrittsanzeigen: Besser nie verwenden.

Eine letzte Möglichkeit, um Feedback zu geben, sind statische Fortschrittsanzeigen. Sie enthalten ein Bild oder einen Text, die sich nicht bewegen, zum Beispiel "Wird geladen…" oder "Bitte warten Sie, während wir Ihre Anfrage bearbeiten", um zu verdeutlichen, dass die Anfrage erhalten wurde. Obwohl jedes Feedback besser als gar keine Rückmeldung ist, sollten statische Indikatoren durch eine andere Art von Anzeige ersetzt werden, da sie nicht genügend Informationen über die aktuelle Entwicklung liefern. Falls das System stecken oder hängen bleibt, weiss der Nutzer nicht, dass er die Aktion neu starten muss.

statische Fortschrittsanzeige

Vermeiden Sie es, statische Fortschrittsanzeigen zu verwenden, die nicht genügend Feedback über den Status der Aktion liefern.

4."Klicken Sie nicht noch einmal"-Warnungen: Besser nie verwenden.

Das schlechteste Design, das auf Webseiten verwendet werden kann, sind Nachrichten, die Nutzer davor warnen, zweimal zu klicken und sie gleichzeitig mit Texten wie "Indem Sie noch einmal klicken, könnten Sie eine weitere Bestellung aufgeben" (oder ein weitere Überweisung tätigen oder ein anderes Ziel der Aktion wiederholen) bedrohen. Erstens ist es definitiv eine wichtige Richtlinie für nutzerfreundliches Design, den Nutzer nicht zu bedrohen. Zweitens ist es eine sinnlose Massnahme, da Nutzer umständlich formulierte Texte erst lesen, wenn es zu spät ist.

Um zusätzliche Klicks zu vermeiden, sollten Sie dem Nutzer ganz einfach zeigen, dass der erste Klick akzeptiert wurde und derzeit bearbeitet wird.

Warnungsanzeige

Verwenden Sie keine Warnungen, die Nutzer anweisen, nicht noch einmal zu klicken.

Eine Anmerkung zu Kindern, Spielen und Fortschrittsanzeigen

Im Rahmen unseres Forschungsprojekts über Kinder im Internet (engl.) sahen wir viele interaktive Tools und Spiele mit sehr langen Ladezeiten. Um die Ladebildschirme unterhaltsamer und interessanter zu gestalten, haben viele Webseiten Video-Inhalte oder kürzere Spiele aufgeführt, die die Nutzer während des Wartens spielen konnten. Leider ist diese Vorgehensweise eher verwirrend als hilfreich, da die Kinder das echte Spiel nicht vom Ladebildschirm unterscheiden können und häufig nicht verstehen, weshalb ein (als Lückenfüller gedachtes) Spiel plötzlich unterbrochen wird (um das echte Spiel zu starten). Damit Nutzer aufmerksam bleiben, aber nicht von der Hauptaktivität abgelenkt werden, empfehlen wir die folgenden Vorgehensweisen:

  • Verwenden Sie für Aktivitäten mit längeren Ladezeiten immer eine Fortschrittsanzeige mit Prozentangabe und platzieren Sie diese an einer auffälligen Stelle des Bildschirms, damit sie von den Kindern bemerkt wird und diese wissen, dass das System arbeitet (Kinder möchten, genau wie Erwachsene, wissen, wie lange sie noch warten müssen oder ob das System hängengeblieben ist).
  • Stellen Sie sicher, dass Ladeanimationen die Fortschrittsanzeige des Hauptprogramms nicht verdecken und nicht für das tatsächliche Spiel gehalten werden können.
  • Verwenden Sie einfache und lustige Animationen, die mit der Hauptaktivität in Verbindung stehen, da diese mit grösserer Wahrscheinlichkeit die Aufmerksamkeit des Nutzers erregen und die gefühlte Wartezeit verkürzen.

Schlussfolgerung

Feedback ist ausschlaggebend für ein positives Nutzerlebnis. Indem Designer mitteilsam und transparent sind, was Wartezeiten betrifft, können sie die Unsicherheit von Nutzern reduzieren und die Wartezeit, die von ihnen akzeptiert wird, verlängern.

Die wichtigste Empfehlung ist es, eine sich wiederholende Anzeige für Verzögerungen von 2-9 Sekunden und eine Prozentanzeige für Verzögerungen von 10 Sekunden oder mehr zu verwenden. Da Sie die Wartezeit nicht immer im Voraus genau abschätzen können, sollten Sie eventuell den Einsatzpunkt zwischen den beiden Arten von Fortschrittsanzeige senken, damit die überwiegende Mehrheit der Antwortzeiten von über 10 Sekunden durch eine Prozentanzeige erträglicher gemacht werden. Je grösser die Variabilität Ihrer Zeiteinschätzungen, desto niedriger ist der Grenzwert, an dem aufwändigeres Feedback eingesetzt werden sollte.

Schliesslich kann eine gute Fortschrittsanzeige den Nutzer dazu bringen, zu warten, bis die Aktion abgeschlossen ist - ausserdem wird er/sie einen positiven Eindruck von Ihrer Webseite oder Anwendung haben.

Referenz:

Nah, F. (2004). A study on tolerable waiting time: how long are web users willing to wait?, Behaviour and Information Technology, Vol. 23, Nr. 3. (Warnung: Link führt zu einer PDF-Datei)

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.

Kommentare auf diesen Beitrag

    Keine Kommentare

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen