UI/UX: Schnellerer Seitenaufbau mit Skeleton Screens?

Die Apps größerer Anbieter setzen verstärkt darauf, ihre Ladezeiten kürzer wirken zu lassen, indem zunächst ein Grundgerüst des eigentlichen Layouts angezeigt wird; der sogenannte Skeleton Screen.

Skeleton Screens, Spinner oder das Nichts

Skeleton Screens, also Skelett-Bildschirme, sollen für den Eindruck schneller Ladezeit sorgen. Sie funktionieren so, dass zunächst beim Start der App schnellstmöglich das Skelett, das Grundgerüst der Seite angezeigt wird. Erst nach und nach füllt sich das Gerüst dann mit Inhalt.

Der Skeleton Screen hat damit im Grunde die gleiche Funktion, wie die seit Jahren etablierten Spinner, die durch Rotation oder Ladebalken-Optik anzeigen, dass der Nutzer noch etwas Geduld braucht, bis die Inhalte geladen sind. Wer Spinner bislang nicht einsetzte, hatte vermutlich schlicht auf den weißen Screen gesetzt. Inhalt noch nicht da? Whitescreen wird angezeigt.

Während Spinner ganz eindeutig und unmissverständlich darauf aufmerksam machen, dass hier Inhalt geladen wird, senden Whitescreens überhaupt keine explizite Botschaft aus. Letztere können daher schnell für Verwirrung beim Nutzer sorgen, denn, je nachdem wie lange der Whitescreen stehen bleibt, kann der Eindruck entstehen, dass nichts mehr passiert und der Nutzer frustriert abwandert.

Skeleton Screens liegen in der Mitte der beiden Varianten. Einerseits wird nicht ausdrücklich auf zu erwartende Verzögerungen hingewiesen, wie beim Spinner. Andererseits wird der Nutzer nicht potenziell frustriert zurückgelassen, wenn für längere Zeit der Inhalt auf sich warten lässt.

Egal, welche Methode, gewartet werden muss.

Klar ist jedoch, dass es letztlich keinen echten Unterschied macht, welche der drei Varianten du einsetzt. Warten muss der Nutzer so oder so.

Dennoch kann es im engen Wettbewerb um die kurze Aufmerksamkeitsspanne des modernen Homo Digitalis von Vorteil sein, sich für die richtige Variante zu entscheiden. Google, Facebook, Medium, Slack und etliche andere Größen haben sich bereits für den Einsatz der Skeleton Screens entschieden.

Schon aus diesem Grunde mag es über kurz oder lang sinnvoll sein, sich ebenfalls dieses Musters zu bedienen. Denn, wie wir schon seit Steve Krug wissen, ist es immer gut, die Nutzer da abzuholen, wo sie bereits stehen, statt das Erlernen neuer Muster zu verlangen.

Wenn also die großen Anbieter mehr oder weniger flächendeckend auf Skeletons setzen, sähe ich keinen guten Grund, nicht auf diesen Zug zu springen. In der Übergangszeit indes, mag es sinnvoller sein, zu differenzieren.

Wichtig ist die Erwartung der potenziellen Nutzer

Am heutigen Tage würde ich beispielsweise nicht sagen, dass sich Skeleton Screens im Bewusstsein der Nutzer schon flächendeckend verankert hätten. Trotz ihrer großflächigen Verwendung wird mindestens in bestimmten Bereichen sicherlich weiterhin als logisch erwartet, dass Ladezeiten etwa durch Spinner oder Ladebalken angezeigt werden.

Das ist auf jeden Fall da der Fall, wo es um das Laden von Medieninhalten, wie Bildern oder Video geht. Sogar der Whitescreen dürfte in diesem Zusammenhang eher erwartet werden als ein Skeleton Screen.

Ein weiterer Punkt, der der Überlegung bedarf, ist die Frage, wie ich konkret einen Skeleton Screen definiere. Während Google und Facebook etwa bereits im Grundgerüst erkennen lassen, worauf hier eigentlich gewartet wird, zeigen andere Apps eher generische Platzhalter für Bild und Text. Du kannst also, wie stets, gute und schlechte Seiten, in diesem Falle Skeletons, bauen.

Als gut darf in diesem Zusammenhang wohl eine Seite gelten, die die Basisformen der späteren UI möglichst gut abbildet und auch ansonsten passgenaue Container für den späteren Inhalt bietet. Die Verwendung von Farbe und Animation kann, muss aber nicht sinnvoll sein.

Ohnehin gilt: Wichtiger als der Einsatz eines modernen Ladezeitüberbrückers seiner Modernität wegen ist es nach wie vor, den Erwartungen des Publikums zu entsprechen. So schick das Instrument sein mag, Menschen wollen keine Bohrer kaufen, sondern Löcher in der Wand.

Weiterführende Beiträge

• Bei CSS Tricks erklärt der Autor Max Bock, wie du Skeleton Screens mit CSS baust.
• Bei Sitepoint erläutert Chris Lienert die Vorgehensweise bei der visuellen Entwicklung von Skeleton Screens.
• Und die UI-Experten von Viget haben Skeleton Screens einem Benutzertest unterzogen.