Schmal, aber oho
Minimalistische Ladeanimation im Web
Warten nervt. Wenn sich ein animierter Kringel auf einer Webseite unermüdlich dreht oder ein Fortschrittsbalken langsam dahinzuckelt, könnte die Zeit kaum zäher vergehen. Entwickler sollten deshalb darauf achten, dass sich die Ladezeit so kurz wie möglich anfühlt – zum Beispiel mit einer dezenten Animation.
Moderne Webanwendungen funktionieren oft nicht mehr wie in den Anfangszeiten des World Wide Webs. Der Browser bekommt zunächst ein Gerüst geliefert und lädt viele Inhalte per JavaScript-Code anschließend nach. Dadurch wird das Navigieren auf der Seite für den Nutzer flüssiger, weil das Gerüst mit Stilen, Grafiken und Schriften bereits steht und nur Daten nachgeladen werden. Der Ansatz führt aber zu einem Problem: Die klassische Ladeanimation des Browsers (meist in der Adresszeile) hat ausgedient, denn sie spiegelt nicht den tatsächlichen Fortschritt wider. Sogenannte Single Page Applications (SPA) müssen dem Nutzer also irgendwie selbst mitteilen, dass sie Daten nachladen und er sich etwas gedulden muss. Meistens passiert das mit einem sogenannten Spinner, also einem Ladekringel oder einem Ladenbalken – gern auch zentriert auf der Seite. Aber solche Ladeanimationen mitten im Sichtfeld bringen ein neues Problem mit: Auch wenn sie nur kurz sichtbar sind, vermitteln sie dem Nutzer immer das unterschwellige Gefühl, die Applikation wäre langsam.
Vor dem Problem standen auch große Anbieter. YouTube entschied sich für eine unscheinbare, aber effektive Alternative zur dominanten Ladeanimation. Andere übernahmen diese Idee: Am oberen Seitenrand erscheint ein nur 2 Pixel hoher, farbiger Balken, der sich von links nach rechts füllt. Der Vorteil: Lädt die Seite schnell, fällt der Balken fast gar nicht auf, denn der Nutzer konzentriert sich auf den Bereich, in dem er die ladenden Inhalte erwartet. Braucht die Seite allerdings etwas länger, ist der Balken das einzige, was sich auf dem Bildschirm bewegt. Somit wird die Aufmerksamkeit nur dann auf die Ladeanimation gelenkt, wenn der Nutzer die Information braucht, dass im Hintergrund etwas passiert und er sich nur ein wenig gedulden muss. Um das auszuprobieren, klicken Sie sich doch mal durch mehrere YouTube-Videos nacheinander.