Die Kunst des Wartens

Heute setze ich meinen alten Uni-Hut auf, denn bevor ich meine Leidenschaft zum Beruf gemacht habe, war ich mal studierte Medienwissenschaftlerin. Stellt mich euch also für den Rest des Artikels mit schwarzem Rollkragen und einem Glas Rotwein vor, um einen etwas anderen Blick auf Performance und UX zu werfen.

Exkurs: Was ist eigentlich eine Medienästhetik?

Wenn im Allgemeinen über Ästhetik gesprochen wird, versteht man darunter eher so etwas wie einen bestimmten „Stil“. Im medienwissenschaftlichen Kontext ist das Feld der Ästhetik anders definiert: Die Ästhetik eines Mediums ist, wie das Medium im Text sichtbar wird. (Ja, bevor es CONTENT™ genannt wurde, sagte man und sagt man auch weiterhin im akademischen Kontext „Text“. Zu allem.)

Dabei hat zwar jeder Text seine ganz eigene Art und Weise, mit dem Medium, auf dem er existiert umzugehen, aber in erster Linie haben Medien und ihre technologischen Epochen eigene Ästhetiken. Das heißt im Klartext:

Klingt erstmal trivial, führt aber zu vielen ikonischen Look-and-Feels. Pixelgrafiken waren ja zum Beispiel keine stilistische Entscheidung, wie sie das heutzutage sind: Die Auflösung der Bildschirme und Grafikkarten hat einfach nicht mehr hergegeben. Berühmtes Beispiel aus den Game Studies: Der Nebel in Silent Hill 2 diente zur Verschleierung der Tatsache, dass die Rechenleistung der PlayStation 2 damals nicht ausreichte, um mehr von der Landschaft zu rendern. Scanlines von Röhrenmonitoren, die Bild- und Tonverzerrungen auf zu oft abgespielten Videokassetten … Ihr versteht, was ich meine.

Wartezeiten als Computerästhetik

Die Ästhetik von Computern an sich, die sich inzwischen dadurch auszeichnen, dass sie in irgendeiner Form alle vorhergegangenen Medien emulieren und ihre Texte anzeigen können, ist da schon schwieriger zu greifen. Oft werden dann Glitches als ästhetische Momente herangezogen, in denen durch einen Daten- oder Rechenfehler kurzzeitig die Maschine beziehungsweise der Softwareprozess hinter der Anzeige wahrnehmbar wird.

Weil das aus Gründen von Physik und allgemeiner Realität aber nicht immer möglich ist, werden die Momente, in denen es nicht anders kann als sichtbar zu werden, oft ästhetisch überhöht. Glitch-Ästhetik ist auch etwas, was Künstler*innen benutzen, um etwas als „digital“ zu markieren und Akademiker*innen liebend gerne analysieren. Aber was ein Computer ist und tut, was Software ist und tut, wird nicht nur in ihren Fehlern sichtbar.

Computer sind, im Gegensatz zu den technischen Medien, die vor ihnen kamen, interaktiv. Sie tun nicht stupide dasselbe, sondern sie reagieren. Auf User*innen, auf andere Computer, auf Inputs von anderen Geräten. Da sie zur Ausführung von Aktionen von diesen Eingaben abhängig sind, ist eine Sache, die Computer tun, die kein Film, kein Buch, kein Radio vor ihnen getan hat: Sie können warten.

Sie warten auf Input, sie warten auf Daten, auf den Abschluss eines Hintergrundprozesses, der sich den menschlichen Sinnen entzieht. Was ist also das genuine ästhetische Moment des Computers, wenn nicht der blinkende Cursor, der Ladebalken – oder im Web eben: – der Spinner.

Strategie 1: Transparenz – Wartezeiten vermeiden

Getreu des oben genannten Gesetztes „Jedes Medium strebt nach Transparenz“, ist es gerade im Web einer der wichtigsten Maßstäbe, wie performant eine Software, in diesem Fall eine Website läuft. Das hat natürlich auch psychologische Gründe, denn Warten macht, so gut man es sich auch schönphilosophieren kann, niemandem Spaß. Einige für Otto-Normal-Nutzer*innen undurchsichten Messkategorien wie Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS) machen die Core Web Vitals aus. Diese beschreiben die Wartezeiten, die User*innen auf sich nehmen müssen, wenn sie mit einer Seite interagieren.

Es gibt in der Wahrnehmungsforschung drei Zeitintervalle, die dabei maßgebliche Beachtung finden:

• 0,1 Sekunde: User*innen nehmen die Reaktion des Geräts als unvermittelt (instantan) wahr.
• 1,0 Sekunde: Der Gedankenprozess der User*innen wird nicht unterbrochen und es wird noch kein Feedback für die Wartezeit notwendig. Das Warten ist augenscheinlich und User*innen werden sich dessen bewusst, dass die Maschine im Hintergrund mehr tut, als nur mit ihnen zu interagieren.
• 10 Sekunden: So lange kann man User*innen ungefähr bei der Stange halten, bevor sie anfangen, andere Dinge zu tun, um die Wartezeit zu überbrücken. Feedback, das wenn möglich Auskunft darüber gibt, wie lange die Wartezeit noch dauert, ist notwendig.

Interessanterweise ist die Wahrnehmung von Performanz auch stark vom benutzten Gerät abhängig und hat damit auch Implikationen für Responsive UX Design von Animationen:

• Auf dem Desktop haben User*innen weniger Toleranz für lange Animationen als auf Mobilgeräten. Wenn Übergänge von Webapplikationen auf dem Desktop länger als 150–200 ms dauern, erweckt das den Eindruck eines Programmabsturzes oder einer schlechten Internetverbindung.
• Auf Mobilgeräten haben User*innen ein wenig mehr Geduld und Übergangsanimationen dürfen 200 – 300 ms dauern.
• Dabei gilt: Je größer der Screen, desto länger die Animationsdauer. Auf Tablets dürfen die Transitions 30% länger, auf Wearables 30% kürzer sein.

Quelle: Understanding loading animations – types and applications

Die beste User Experience bietet eine Applikation, wenn sie auf Leistung, d.h. auf Reaktionszeit optimiert ist. Dann geraten die User*innen bei der Bedienung in eine Art Flow, der sie vergessen lässt, dass sie mit einer Software interagieren, die im Hintergrund komplexe Prozesse ausführt. In einer perfekten Welt mit unendlicher Datenübertragungs- und Rechenleistung wäre das das Ziel, das alle Websites anstreben würden. Für alles andere gibt es die Fallback-Strategie.

Strategie 2: Ästhetisierung – If you can’t avoid it, make it pretty

Wenn Wartezeiten technisch notwenig sind, weil zum Beispiel große Mengen Daten geladen werden oder komplexe Hintergrundprozesse ausgeführt werden oder – man muss der Tatsache auch mal ins Auge sehen – die Produktbilder der aktuellen Schuhkollektion um den halben Globus geschickt werden, um auf unseren Smartphones zu erscheinen, sind schöne, beruhigende, interessante und dadurch irgendwie sehr befriedigende Ladeanimationen das Mittel der Wahl.

Dabei gibt es verschiedene Kategorien von Ladeanimationen. Die beiden wichtigsten fürs Web sind:

1. Fortschrittsanzeigen geben Aufschluss darüber, was genau das Programm eigentlich gerade tut und wie lange es noch (ungefähr) dauert. Geht nur, wenn es geht: Manchmal ist die Restladedauer technisch einfach nicht ermittelbar.
2. Throbber sind Aktivitätsanzeigen, die den User*innen versichern, dass das Programm nicht abgestürzt ist und an ihrer aktuellen Aufgabe arbeiten, ohne dass Auskunft über die Restdauer gegeben wird. Empfehlenswert bei sehr variablen Ladeprozessen.

Wichtig: Egal wie schön oder kreativ eine Ladeanimation ist: Früher oder später geht sie den User*innen trotzdem auf die Nerven. Das heißt: Ja, lange, nicht vermeidbare Ladezeiten sollten von einer Feedback-Animation begleitet werden, aber sie darf nicht als Freifahrtschein benutzt werden, um auf Performanzoptimierung zu verzichten. Letztendlich ist die Nutzung einer Webapplikation in den allermeisten Fällen kein rein ästhetisches Unterfangen, sondern soll den User*innen zu einem bestimmten Ziel verhelfen.

In diesem Artikel findet ihr eine kurze Geschichte der Ladeanimationen, viele Beispiele und Best Practices rund um die Kreisel, Balken und manchmal auch Kätzchen, die uns heimlich, still und leise durch unseren digitalen Alltag begleiten und uns sacht daran erinnern, dass Computer am Ende des Tages auch nur Maschinen sind.