Skelettbildschirme: Wann man sie anstelle von Spinnern verwendet
Was Skelettbildschirme sind, wann sie Spinner schlagen, wie man sie so gestaltet, dass sie zu echten Inhalten passen, und wie man sie animiert, ohne die Leistung oder Zugänglichkeit zu beeinträchtigen.
Kernaussage
Ein Skelettbildschirm ist ein drahtgitterartiger Platzhalter, der das Layout des Inhalts beim Laden anzeigt. Verwenden Sie es für ganze Seiten und Listen mit vorhersehbarer Form. Verwenden Sie einen Spinner für kleine Bereiche oder unbekannte Inhalte und echte Fortschritte für lange Aufgaben. Passen Sie das Grundgerüst an das tatsächliche Layout an, damit nichts springt, wenn der Inhalt eintrifft.
Was für ein Skelettbildschirm ist
Nielsen Norman Group definiert einen Skelettbildschirm als Platzhalter für eine Ladeseite, die das Layout mit einer drahtgitterähnlichen Optik nachahmt. Es wird für ganzseitige Ladevorgänge verwendet und reduziert die wahrgenommene Ladezeit, da die Leute die Struktur dessen sehen, was kommt, und nicht einen leeren Bereich.
Wann welche verwenden
Ordnen Sie den Indikator dem Inhalt und der Wartezeit zu:
- Skelett: Seite oder Liste werden dort geladen, wo das Layout bekannt ist, z. B. Feeds, Karten und Profile.
- Spinner: kleine Bereiche, Schaltflächen oder Inhalte, deren Form Sie nicht vorhersagen können.
- Fortschrittsbalken: Lange Aufgaben, die Sie messen können, z. B. Uploads und Exporte.
- Nichts: sehr schnelle Reaktionen, bei denen eine Anzeige nur flackern würde.
Ein gutes Skelett entwerfen
Verwenden Sie die tatsächlichen Komponentenabmessungen, damit sich die Seite nicht verschiebt, wenn Inhalte eintreffen, was auch Ihren kumulativen Layout-Verschiebungs-Score schützt. Halten Sie die Formen einfach (Blöcke für Bilder, Balken für Text), verwenden Sie kontrastarme Grautöne und ersetzen Sie jeden Platzhalter durch echten Inhalt, sobald er fertig ist, anstatt auf alles zu warten.
Skelette animieren
NN/g weist darauf hin, dass einige Skelette eine pulsierende oder schimmernde Animation enthalten, um zu signalisieren, dass das System noch funktioniert. Halten Sie es langsam und subtil, animieren Sie die Deckkraft oder eine Transformation anstelle von Layout-Eigenschaften und stoppen Sie es, wenn die reduzierte Bewegung aktiviert ist. Geben Sie dem Ladebereich eine zugängliche Bezeichnung, z. B. „Ladeergebnisse“.
Wichtige Prinzipien
- Skelette zeigen das Layout kommender Inhalte und reduzieren die wahrgenommene Wartezeit
- Verwenden Sie sie für vorhersehbare Seiten- und Listenladevorgänge. Spinner für kleine oder unbekannte Bereiche
- Passen Sie die tatsächlichen Abmessungen an, um Layoutverschiebungen zu vermeiden
- Halten Sie den Schimmer dezent und stoppen Sie ihn, um die Bewegung zu reduzieren
- Beschriften Sie Ladebereiche für Bildschirmleseprogramme
Häufige Fragen
Quellen
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev