Gute User Experience bei Ladebalken Schnelle Ladebalken für bessere User Experience
4 Minuten geschätzte Lesezeit
FortschrittsbalkenInteraktionsdesignLadebalkenLadenUsabilityUser ExperienceUX
Sie begegnen uns überall in der digitalen Welt: Ladebalken. Aber: Sie sind mehr als einfache Fortschrittsanzeigen — im schlimmsten Fall sind sie richtig frustrierend. Wie aber sehen nutzerfreundliche Fortschrittsbalken aus?
Daten schneller laden…
Logisch: Die beste Optimierung der Ladezeit ist es, sie per se möglichst gering zu halten. Daten sollten optimiert werden, so dass keine unnötigen Transfers ablaufen und die Datenmengen so klein wie möglich ausfallen. Nicht immer muss es ein hochauflösendes PDF sein, um ein Magazin abzubilden — etablierte Webtechnologien wie HTML5 und CSS3 sind deutlich sparsamer. Progressives Laden im Hintergrund hilft dabei, Inhalte schon verfügbar zu machen, bevor sie komplett geladen wurden.
… oder die Wartezeit möglichst angenehm machen
Nicht immer kann man Laden vermeiden — etwa, wenn größere Datenmengen nun einmal nötig sind, oder wenn ein größeres Update einer App ansteht. Manche Apps setzen in diesem Fall auf ein Ablenkungsmanöver: Während die App fleißig Daten aus dem Netz saugt, unterhalten ein kleiner Film oder ein paar einführende Screens den wartenden Nutzer. Dabei lassen sich auch kleine Informationen vermitteln, z.B. Tipps und kleine Anleitungen — wartend lernen sozusagen.
Ratzfatz geladen — dem Anschein nach
Doch auch über den Ladebalken selbst sollte man sich Gedanken machen. Der Grund: Design ist nicht nur reine Ästhetik, sondern bestimmt entscheidend, wie die Nutzer eine Website oder App wahrnehmen und wie sie damit umgehen. Design-Entscheidungen sind daher nicht nur visuelle Stilmittel, sondern steuern die Wahrnehmung der Anwender. Das kann man sich zu Nutze machen: Mit den richtigen Stilmitteln sieht es so aus, als würden die Daten schneller laden, als sie es objektiv tun. Nun könnte man natürlich einwenden, dass man die Nutzer damit hinters Licht führen würde. Aber: Im Interaktionsdesign geht es darum, eine gute User Experience (UX) zu schaffen — Nutzer sollen sich bei der Verwendung wohlfühlen. Wer also mit einem „Trick“ erreicht, dass den Nutzern die Wartezeit nicht so schlimm vorkommt, verbessert also die UX — ein sehr legitimes Anliegen. Auf in die Praxis: Wie gestaltet man sie so, dass sie so wirken, als wäre der Ladevorgang schneller? Chris Harrison und seine Kollegen haben das in mehreren Studien untersucht. Das Vorgehen: Teilnehmer bekamen nacheinander zwei verschiedene Ladebalken zu sehen und mussten anschließend sagen, welcher ihnen schneller vorgekommen ist. Selbstverständlich benötigten beide Ladebalken die gleiche Zeit (5 Sekunden) — aber das bedeutet nicht, dass die Wahrnehmung der Zeit identisch ist.
Am Puls der Zeit: pulsierende Ladebalken wirken schneller
Ein erstes Ergebnis: Pulsierende Ladebalken taugen stärker dazu, die gefühlte Wartezeit der Nutzer zu verkürzen. Pulsieren lassen kann man z.B. die Farbe des Balkens.
Ein Tipp: Noch schneller wirken Ladebalken, wenn sich die Frequenz des Pulsierens verändert — ganz besonders, wenn sie zum Ende hin zunimmt.
Bloß nicht einfarbig: Verläufe oder Schraffierung mit Bewegung verringern subjektives Zeitempfinden
Apples OS X macht es vor: Ladebalken müssen nicht einfarbig sein, sondern können aus mehreren kleinen Verläufen oder Schraffierungen bestehen, die sich bewegen. Besonders vorteilhaft ist es, wenn die Farbverläufe in entgegengesetzter Richtung zum Balken selbst laufen. Und auch hier gilt: Beschleunigung der Bewegung zum Ende hin erzeugt den Eindruck, das Laden würde subjektiv schneller geschehen.
Lässt sich der Effekt messen?
Okay, mit kleinen visuellen Details wie diesen lässt sich also der subjektive Eindruck des Ladefortschritts beschleunigen. Aber lohnt sich der Aufwand wirklich? Die Antwort: Ja, unbedingt! Das lässt sich sogar zahlenmäßig belegen: Harrison und seine Kollegen haben in einer weiteren Studie untersucht, um wie viel schneller der Ladevorgang empfunden wird. Die Studienteilnehmer konnten die gesehenen Balken dabei so lange anpassen, bis sie ihnen gleich lang vorkamen. Das Ergebnis: Schraffierte Ladebalken wirken um rund 12% schneller.
Fazit: Kleine „Tricks“ für eine bessere User Experience (UX)
Gutes Interaktionsdesign lebt von Detailliebe: Mit kleinen Tricks wie einem pulsierenden Balken oder sich bewegenden Schraffierungen lässt sich die User Experience wesentlich verbessern. Zudem kann man die Wartezeit nutzen, um die Nutzerinnen mit Informationen zu versorgen. Eine Alternative, die häufig verwendet wird – besonders, wenn Daten aus dem Netz nachgeladen werden und die Dauer nicht so einfach vorherzusehen ist: ein einfacher Lade-Indikator in runder Form, der sich fortwährend dreht – aber das ist ein anderes Stilmittel mit anderen Anwendungsfällen.