Verwende Skeleton für ...
- Flächen, deren Größe du selbst festlegst.
- Bilder, Avatare und andere grafische Elemente.
Grundlagen
Skeletons sind Platzhalter, die während des Ladens bereits die Struktur einer Seite andeuten. Sie vermitteln Usern eine Vorschau auf das Layout und verbessern so die wahrgenommene Performance. Gleichzeitig helfen sie, Layout-Sprünge zu vermeiden, bevor die eigentlichen Inhalte geladen sind.
Best Practices
Achte bei der Verwendung von Skeletons darauf, dass ...
- sie das finale Layout der Benutzeroberfläche so gut wie möglich widerspiegeln, sodass User erkennen können, welche Inhalte zu erwarten sind. Verwende dafür vereinfachte Formen wie z. B. SkeletonText, Avatare oder Images.
- Detailgrad und Anzahl der Skeletons nicht zu hoch sind – sie sollten eher an Wireframes erinnern und keine visuelle Unruhe erzeugen.
- sie ausschließlich für das initiale und kurzzeitige Laden von Inhalten eingesetzt werden. Für andere Lade- oder Feedbackprozesse verwende beispielsweise stattdessen den LoadingSpinner.
- beim Laden kein Cumulative Layout Shift entsteht – das finale Layout sollte nahtlos den Skeleton-Content ersetzen.
- sie für Screenreader ausgeblendet oder entsprechend gekennzeichnet sind (z. B.
aria-busy="true").
Verwendung
Verwende Skeletons, um visuell ansprechende Ladezustände für Inhalte wie Listes oder Images darzustellen – sie bieten Orientierung, indem sie die spätere Struktur und Position der Inhalte andeuten.
Skeleton vs. SkeletonText
Skeleton und SkeletonText haben dasselbe Erscheinungsbild, unterscheiden sich aber in ihrer Größe.
Verwende SkeletonText für ...
- Textzeilen, deren Höhe sich aus der umgebenden Typografie ergibt.
- Überschriften, Fließtext und Labels.