Datavisning
Skeleton-loading
Et skeleton screen viser grå pladsholder-figurer i layoutet af det kommende indhold, mens data hentes, i stedet for en spinner eller en tom skærm. Beviset for, at skeletons »føles hurtigere«, er blandet.
Definition
Skeleton-loading viser en grå silhuet af det kommende indhold, mens data hentes, i stedet for en spinner.
Hvorfor det virker
Ideen bag mønstret er at flytte fokus fra »det loader« til »indholdet er på vej«. Luke Wroblewski, der opfandt begrebet i 2013, beskriver det som en tom version af siden, som indhold gradvist loades ind i. Det er et designargument og ikke et måleresultat.1
Påstanden om, at skeletons føles hurtigere, er omdiskuteret. Et studie fra Viget (2017, n=136) fandt det modsatte: skeletonen klarede sig dårligst på alle mål (59% var enige i »loaded quickly« mod spinnerens 74%). Bill Chung (2018, n=80) fandt en lille fordel til skeletons, men kaldte selv stikprøven for lille til at konkludere. Det sikreste fund i begge studier er, at en hvilken som helst indikator opleves bedre end en helt tom skærm.45
Mønstret påvirker oplevet ydeevne, ikke den faktiske hastighed. Rammen er Jakob Nielsens tre responstidsgrænser: 0,1 sekund føles øjeblikkeligt, 1 sekund holder tankegangen uafbrudt, og 10 sekunder er grænsen for at fastholde opmærksomheden. Derover er en progress bar med estimeret tid bedre.2
Hvornår du bruger det, og hvornår ikke
Hvornår du bruger det
- Indhold henter mærkbart, men i forudsigeligt layout.
- Du vil signalere fremdrift og reducere oplevet ventetid.
- Layoutet er stabilt, så pladsholderen matcher resultatet.
Hvornår du bør undgå det
- Data kommer så hurtigt, at skelettet blot blinker.
- Layoutet er uforudsigeligt og matcher ikke pladsholderen.
Best practices
Match det virkelige layout
Skeletonen skal efterligne strukturen af det indhold, der faktisk kommer (samme antal og placering af bokse), så overgangen føles som progression og ikke som et skift.3
Brug til fuld-side-loads med forudsigeligt layout
Skeletons er bedst, når hele skærmen loader og layoutet er kendt. Til et enkelt modul (en video, ét kort) er en spinner ofte bedre.3
Brug ikke ved ventetid under ~1 sekund
Ved meget korte loads kan skeletonen nå at flimre og virke irriterende.3
Overvej en venstre-mod-højre shimmer
I Chungs test gættede 68%, at en venstre-mod-højre bølge betød en kortere ventetid, så en subtil shimmer i den retning er et rimeligt udgangspunkt.5
Annoncér loading-tilstanden for skærmlæsere
Giv loading-området role="status" og skift tekst fra »Indlæser« til »Indlæst«. aria-busy alene er ikke nok, og selve skelet-noderne bør skjules for hjælpeteknologi.6
Respektér prefers-reduced-motion og kontrast
Kør kun shimmer i @media (prefers-reduced-motion: no-preference), stop animation efter 5 sekunder, og hold mindst 3:1 kontrast (WCAG 1.4.11).6
Typiske fejl
Skeleton som universalløsning
Der er intet bevis for, at skeletons altid vinder på oplevet hastighed. Viget fandt endda spinneren bedre.
Skeleton der ikke matcher indholdet
Tomme rammer uden reel struktur, eller en pladsholder der ikke passer, giver layout-skift og et »bait and switch«-indtryk.
Brugt ved for korte eller for lange ventetider
Under 1 sekund flimrer det; over 10 sekunder er en progress bar bedre.
Ingen skærmlæser-annoncering
Uden role="status" ved skærmlæser-brugere ikke, hvornår indholdet er klar.
Animation der ignorerer reduced-motion
En shimmer, der kører uanset brugerens bevægelses-præference, er utilgængelig.
Eksempler i praksis
DoorDash
Bruger en kort, animeret skeleton med en shimmer fra venstre mod højre. Nielsen Norman Group fremhæver den som et godt eksempel.
Facebook / LinkedIn (historisk)
De grå pladsholder-kort i feedet er det klassiske, tidlige eksempel, der var med til at popularisere mønstret. Behandl det som veletableret/historisk. Den præcise nuværende UI er ikke verificeret her.
Ofte stillede spørgsmål
Hvad er et skeleton screen?
Et loading-mønster, hvor grå pladsholder-figurer vises i samme layout som det indhold, der hentes, i stedet for en spinner eller tom skærm. Det giver brugeren en fornemmelse af, hvordan siden kommer til at se ud, mens data indlæses.
Får skeleton screens siden til at føles hurtigere?
Nogle gange, men beviserne er blandede. Et studie fra Viget (2017) fandt faktisk, at en spinner blev oplevet som hurtigere, mens Bill Chung (2018) fandt en lille fordel til skeletons. Det mest sikre fund er, at enhver loading-indikator opleves bedre end en helt tom skærm.
Hvornår bør jeg bruge et skeleton screen frem for en spinner?
Brug skeleton screens, når hele skærmen loader og layoutet er forudsigeligt (fx et feed eller en profilside). Brug en spinner til enkelte moduler og til mellemlange ventetider.
Hvornår bør jeg ikke bruge et skeleton screen?
Ved meget korte ventetider under ca. 1 sekund (det kan flimre) og ved meget lange ventetider over 10 sekunder. Ved lange ventetider er en progress bar med estimeret tid bedre, fordi den viser, hvor langt processen er.
Er skeleton screens tilgængelige for skærmlæsere?
Ikke automatisk. Giv loading-området role="status" og skift teksten fra »Indlæser« til »Indlæst«, så skærmlæsere annoncerer, når indholdet er klar. aria-busy alene er ikke nok. Husk også at respektere prefers-reduced-motion.
Hvor stammer skeleton screens fra?
Begrebet blev opfundet af designeren Luke Wroblewski i 2013, hvor han anbefalede at erstatte spinnere med en tom version af siden, som indhold gradvist loades ind i, så fokus flyttes fra ventetiden til indholdet.
Kilder
Relaterede mønstre
Udforsk videre
Kortbaseret layout
Skimbar oversigt hvor hvert kort er én selvstændig enhed.
Se mønster →Tomme tilstande
Gør en blank skærm til et hjælpsomt første skridt.
Se mønster →Responsive og performante billeder
Billeder, der loader hurtigt og ikke rykker layoutet: reservér plads, lazy-load det, der er under skærmkanten, prioritér hero-billedet, og server moderne formater i den rigtige størrelse.
Se mønster →