31.07.2016 in entwicklung

Was sind Skeleton Screens?

Und warum sind sie nützlich?

Skeleton Screens sind Platzhalter, die bei einem Ladevorgang angezeigt werden und den Inhalt der Seite andeuten, der gerade geladen wird. Oft wird dies mit hellen Balken, die für Text stehen, und größeren Rechtecken veranschaulicht, die ein Bild symbolisieren.

Wenn in mobilen Apps größere Datenmengen geladen werden, die Verbindung nicht optimal ist oder der Server überlastet ist, brauchen Inhalte eine gewisse Zeit um zu laden. Der Nutzer einer App ist generell ungeduldig, er denkt: Wenn nichts passiert, dann funktioniert etwas nicht. Um jedoch zu zeigen, dass ein Ladevorgang stattfindet und sich doch etwas tut, setzt man an den Stellen an denen der Inhalt laden muss, Ladespinner oder Ladebalken ein. Diese Elemente werden jedoch nicht unbedingt mit positiven Gefühlen assoziiert. Es ist wie, wenn man beim Warten auf eine Uhr schaut: Die Zeit vergeht noch viel langsamer. Der Nutzer denkt, die Seite oder die App ist zu langsam und schließt im schlimmsten Fall die App.

Skeleton Screens von Slack und Facebook

Abb. Skeleton Screens bei Slack und Facebook

Um genau diese Spinner zu vermeiden, kommen Skeleton Screens zum Einsatz: Ein Skeleton Screen zeigt dem Anwender, welchen Inhalt er an welcher Stelle erwarten kann. Er gibt zwar keine exakten Informationen, jedoch eine Vorschau auf den Inhalt, auf den sich der Nutzer vorbereiten kann. Ein weiterer Vorteil ist, dass die Meisten gar nicht mitbekommen, dass sie gerade auf einen Skeleton Screen schauen. Das Gehirn registriert den Inhalt und in den Millisekunden, in denen man sich auf die Wörter fokussiert, sind diese inzwischen geladen. Somit werden Internetseiten oder Apps mit Skeleton Screens als deutlich schneller wahrgenommen. Wie das Beispiel zeigt, nutzen bekannte Mobile Apps wie Facebook oder Slack ebenfalls diese Methode.

rbb|24 App: Skeleton Screen

Abb. rbb|24 App: Skeleton Screen Verwendung

In der Mobile App von rbb|24 haben wir ebenfalls Skeleton Screens eingesetzt, um die gefühlte Wartezeit zu verringern. In der App werden Nachrichten und Hintergrundberichte aus der Region Berlin Brandenburg gezeigt. Diese werden mit Inhalten wie Texten, Bilder und Videos veranschaulicht. Auf der Startseite der App sieht man auf einem Blick die aktuellsten Beiträge mit Vorschaubildern und Untertiteln. Beim Öffnen der App erscheint der Skeleton Screen, der für einen Bruchteil von Sekunden zu sehen ist. Der Screen ist zusätzlich mit einer langsamen Blink Animation versehen, so dass auf der View gefühlt etwas passiert.

Weitere Beiträge

Alle Artikel lesen
11.06.2017

Collaboration Tools für Designer & Entwickler

Wir stellen euch Zeplin und Invision vor
lesen
12.04.2017

Die neue Hybrid Heroes Webseite

Zur Entwicklung und dem neuen Design
lesen
01.03.2017

Suche in Hybrid Apps

Am Beispiel Fahrgemeinschaft.de
lesen
11.06.2017

Collaboration Tools für Designer & Entwickler

Wir stellen euch Zeplin und Invision vor
lesen

Wir helfen Ihnen gerne

Wir sind gespannt auf Ihr Projekt! Schreiben Sie uns eine Nachricht und wir melden uns innerhalb weniger Stunden zurück. Oder rufen Sie uns einfach an!

hello@hybridheroes.de
+49 30 23390434
Sprechen Sie uns an!