Skeletschermen: wanneer moet je ze gebruiken in plaats van spinners?
Wat skeletschermen zijn, wanneer ze spinners verslaan, hoe je ze zo kunt ontwerpen dat ze overeenkomen met echte inhoud, en hoe je ze kunt animeren zonder de prestaties of toegankelijkheid te schaden.
Kern afhaalmaaltijd
Een skeletscherm is een draadframe-achtige tijdelijke aanduiding die de lay-out van de inhoud toont terwijl deze wordt geladen. Gebruik het voor volledige pagina's en lijsten met een voorspelbare vorm; gebruik een spinner voor kleine gebieden of onbekende inhoud, en echte vooruitgang voor lange taken. Zorg ervoor dat het skelet overeenkomt met de echte lay-out, zodat er niets verspringt als de inhoud arriveert.
Wat een skeletscherm is
Nielsen Norman Group definieert een skeletscherm als tijdelijke aanduiding voor een laadpagina die de lay-out nabootst met een draadframe-achtig beeld. Het wordt gebruikt voor het laden van een volledige pagina en vermindert de waargenomen laadtijd, omdat mensen de structuur zien van wat gaat komen in plaats van een leeg gebied.
Wanneer gebruik je welke
Match de indicator met de inhoud en het wachten:
- Skelet: pagina of lijst wordt geladen waarvan de lay-out bekend is, zoals feeds, kaarten en profielen.
- Spinner: kleine gebieden, knoppen of inhoud waarvan je de vorm niet kunt voorspellen.
- Voortgangsbalk: lange taken die je kunt meten, zoals uploads en exports.
- Niets: zeer snelle reacties, waarbij een indicator alleen maar flikkerde.
Een goed skelet ontwerpen
Gebruik de echte componentafmetingen, zodat de pagina niet verschuift wanneer de inhoud arriveert, waardoor ook uw Cumulatieve Layout Shift-score wordt beschermd. Houd vormen eenvoudig (blokken voor afbeeldingen, balken voor tekst), gebruik grijstinten met laag contrast en vervang elke tijdelijke aanduiding door echte inhoud zodra deze klaar is, in plaats van op alles te wachten.
Skeletten animeren
NN/g merkt op dat sommige skeletten een pulserende of glinsterende animatie bevatten om aan te geven dat het systeem nog steeds werkt. Houd het langzaam en subtiel, animeer de dekking of een transformatie in plaats van lay-outeigenschappen, en stop het wanneer verminderde beweging is ingeschakeld. Geef het laadgebied een toegankelijk label, zoals 'Laadresultaten'.
Toets Principles in om te onthouden
- Skeletten tonen de lay-out van komende inhoud en verminderen het waargenomen wachten
- Gebruik ze voor voorspelbaar laden van pagina's en lijsten; spinners voor kleine of onbekende gebieden
- Zorg ervoor dat de werkelijke afmetingen overeenkomen om lay-outverschuiving te voorkomen
- Houd de glans subtiel en stop deze voor minder beweging
- Label laadgebieden voor schermlezers
Veelgestelde vragen
Bronnen
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev