Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Design » UI/UX: Schnellerer Seitenaufbau mit Skeleton Screens?

UI/UX: Schnellerer Seitenaufbau mit Skeleton Screens?

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 2 Kommentare
Lesedauer: 3 Minuten
  • von Dieter Petereit
  • 26. Oktober 2017

Inhaltsverzeichnis

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.

facebook loading4 UI/UX: Schnellerer Seitenaufbau mit Skeleton Screens?
Von Skeleton zu vollständig bei Facebook. (Bildquelle: Viget)

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.
Dieter Petereit

Dieter Petereit

Dieter Petereit ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Logo von Lausitz Design.

Internetagentur lausitz.design

Schleife

Website Akademie Logo.

Websiteakademie

München

WP Agentur

wp-agentur.de | WordPress-Agentur

Köln

Logo der Online Solutions Group. Motto: Your Link to Success.

Online Solutions Group

München

SEO Agentur Hamburg • Die Nr. 1 in Hamburg.

SEO Agentur Hamburg

Hamburg

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

2 Antworten zu „UI/UX: Schnellerer Seitenaufbau mit Skeleton Screens?“
— was ist Deine Meinung?

  1. klawischnigg sagt:
    26. Oktober 2017 um 17:19 Uhr

    „Warten muss der Nutzer so oder so.“ – naja. Das liegt zu einem großen Teil daran, daß mittlerweile die meisten Pages mit CMS-Systemen erstellt werden, die leider einen gewaltigen Overhead produzieren. Was an Entwicklungszeit gespart wird, geht an Zeit beim Betrachten der Seite wieder verloren. Skeletons und Spinner sind somit eher Symptombekämpfung resp. die Lösung für Probleme, die es ohne CMS meist gar nicht gäbe, zumindest nicht geben müsste bei der Geschwindigkeit aktueller Breitbandverbindungen.
    Bleibt als Conclusio, daß man eher darauf schauen sollte, die Ladenzeiten zu verkürzen als das Warten angenehmer zu machen…

    Antworten
    1. MFGSparka sagt:
      2. November 2017 um 17:14 Uhr

      Grundsätzlich richtig. Ich möchte aber anmerken, dass Platzhalter in korrekter Größe das unnötige umherspringen der Seite, währende des ladens weiterer Inhalte, verhindern.
      Auf Mobilgeräten ein nicht zu vernachlässigender Vorteil.

      Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑