Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Blick auf die Uferpromenade in Bremen bei Sonnenuntergang..

      Bremen

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Blick auf die Uferpromenade in Bremen bei Sonnenuntergang..

      Bremen

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Design » UI/UX: Schnellerer Seitenaufbau mit Skeleton Screens?

UI/UX: Schnellerer Seitenaufbau mit Skeleton Screens?

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 2 Kommentare
Lesedauer: 3 Minuten
  • von Dieter Petereit
  • 26. Oktober 2017
Bookmarke mich
Share on pocket

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.

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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

ARIT Services GmbH

Laatzen

SEOlist.IO Frankfurt – SEO-Spezialist & SEO-Freelancer

Frankfurt am Main

Wee Media | Webdesign Agentur

Dernbach

TIKAL Communication E-Commerce Agentur Hamburg

Hamburg

iPower AG

Berlin

Alle Agenturpartner

Jobs

Teamleiter Online Marketing

München

Senior SEO Manager

München

Frontend-Entwickler Angular, React

Bonn

Senior Online Marketing Manager

München

Junior Online Marketing Manager

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Farben finden: 16 Tools für Farbverläufe und Farbkombinationen

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.

 →   

„CSS gerootet“: Flexible Schriftgrößen mit REM

Diskussionen über die beste Art und Weise, die Schriftgröße bzw. den Schriftgrad zu definieren sind wahrscheinlich so alt wie das Web. Neben den traditionellen Kandidaten

 →   

Vollkommen geschmacklos: So stellst du fest, ob ein Design gut oder schlecht ist

Dein eigener Geschmack ist ein schlechter Ratgeber in der Frage der Beurteilung, ob ein Design nun gut oder schlecht ist. Lass uns da mal objektiver

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.