Skeleton Screen ist eine UI-Technik, bei der während des Ladevorgangs eine abstrakte Vorschau der Seitenstruktur angezeigt wird. Statt eines leeren Bildschirms oder eines rotierenden Ladespinners sehen Nutzer graue Platzhalter in der Form der kommenden Inhalte.
Das Problem mit Ladespinnern
Klassische Ladekreise lenken die Aufmerksamkeit auf das Warten. Der Nutzer hat nichts zu sehen und schätzt die Ladezeit als länger ein, als sie tatsächlich ist. Skeleton Screens lösen dieses Problem durch einen psychologischen Trick: Sie zeigen Fortschritt und Struktur.
Wie Skeleton Screens funktionieren
Ein Skeleton Screen besteht aus grauen oder leicht animierten (pulsierenden) Flächen, die die Position und ungefähre Größe der kommenden Elemente anzeigen:
- Textzeilen: Graue Rechtecke in Textbreite und -höhe
- Bilder: Graue Flächen im Seitenverhältnis des kommenden Bildes
- Avatare: Graue Kreise
- Buttons: Abgerundete Rechtecke in Buttongröße
Wenn die echten Daten laden, werden die Platzhalter sanft durch die tatsächlichen Inhalte ersetzt – idealerweise mit einer Microinteraction wie einem Fade-In.
Vorteile von Skeleton Screens
- Geringere wahrgenommene Ladezeit: Nutzer erleben die Seite als schneller
- Kein Layout-Shift: Die Platzhalter reservieren den Raum, CLS wird verhindert
- Professioneller Eindruck: Skeleton Screens signalisieren technische Qualität
- Bessere UX: Nutzer können die Seitenstruktur bereits erfassen
Skeleton Screens und Core Web Vitals
Skeleton Screens verbessern den Cumulative Layout Shift (CLS) der Core Web Vitals, da sie den Platz für noch nicht geladene Inhalte reservieren. In Kombination mit Lazy Loading entsteht ein nahtloses Ladeerlebnis ohne springende Layouts.
Implementierung in React
In React werden Skeleton Screens typischerweise als eigene Komponenten gebaut. Eine SkeletonCard-Komponente rendert die Platzhalter-Struktur, während die Card-Komponente mit echten Daten rendert:
Die Animation – typischerweise ein subtiles Pulsieren oder ein Shimmer-Effekt (Lichtreflexion, die über die Fläche wandert) – erzeugt den Eindruck von Aktivität und Fortschritt.
Skeleton Screens richtig einsetzen
Do
- Struktur der tatsächlichen Inhalte widerspiegeln
- Dezente, nicht ablenkende Animation
- Schnell durch echte Inhalte ersetzen (unter 3 Sekunden)
Don't
- Skeleton für Inhalte zeigen, die sofort verfügbar sein sollten
- Zu detaillierte Platzhalter (Text-Skelette statt Icon-Skelette genügen)
- Skeleton Screens als Entschuldigung für langsame Backends nutzen
Skeleton Screens in der Praxis
Facebook, YouTube, LinkedIn, Slack und viele weitere große Plattformen nutzen Skeleton Screens als Standard. Sie sind ein fester Bestandteil moderner UI-Design-Patterns und werden in professionellen Component Libraries als wiederverwendbare Komponenten bereitgestellt.
Für professionelles Webdesign sind Skeleton Screens ein Detail, das den Unterschied zwischen einer guten und einer herausragenden Nutzererfahrung ausmacht.