Menu-Indlæsningstilstande: Skeleton vs Spinner — Bedste Praksis

En campus-café med 14 borde i Bursa Görükle reducerede sin mobile bounce rate fra 18% til 11% ved at erstatte spinneren med en shimmer-skeleton i sin digitale menu. Samme data, samme billeder, samme 3G-netværk.

Nielsen Norman 2023 studiet

Nielsen Norman Groups undersøgelse fra 2023 viser, at skeleton-skærme reducerer den oplevede indlæsningstid med 38%, mens klassiske spinnere øger den med 12%. Hjernen accepterer en skitseret struktur bedre end en animeret tomhed.

For restaurantmenuer er det afgørende. Gæsten sidder ved bordet, telefon i hånden, vil træffe et hurtigt valg. To sekunder med hvid skærm sår tvivl — "er nettet væk?". Skeletonen fjerner tvivlen straks.

thMenu-standard: shimmer-skeleton

thMenu bruger CSS gradient shimmer-animation til produktkort, kategorifaner og billedplaceholders. Mens billeder indlæses, vises der en blur-up placeholder plus skeleton-ramme.

• Kategorifaner: 5 grå pills, shimmer 1,5s
• Produktkort: billede + 2 tekstlinjer + pris
• Cart drawer: linje-skeleton i stedet for spinner

Hvornår spinner?

Til handlingsbekræftelse — "Sender bestilling", "Behandler betaling", "Kalder tjener" — fungerer en lille inline-spinner bedst. Her venter man på et resultat, ikke indhold.

Tommelfingerregel: skeleton til data, spinner til handlinger. thMenu viser inline-spinner inden 200ms efter tap på "Læg i kurv" og derefter en success-toast.

FAQ

Kan en langsom skeleton-animation skade? Ja. Cyklusser over 2 sekunder irriterer. Optimalt 1,2-1,8s; thMenu bruger 1,5s.

Er skeleton nok ved meget dårlig forbindelse? Skeleton + toast efter 8+ sekunder + service worker offline fallback.

Er skeleton tilgængeligt? Ja med aria-busy="true" og aria-label="Menu indlæses".

Var dette nyttigt? Del det.