Meny-Laddningstillstånd: Skeleton vs Spinner — Bästa Praxis

Ett campuscafé med 14 bord i Bursa Görükle minskade sin mobila avvisningsfrekvens från 18% till 11% genom att ersätta den roterande spinnern med en shimmer-skeleton i sin digitala meny. Samma data, samma bilder, samma 3G-nätverk.

Nielsen Norman 2023-studien

Nielsen Norman Groups studie från 2023 visar att skeleton-skärmar minskar upplevd laddningstid med 38%, medan klassiska spinners ökar den med 12%. Hjärnan accepterar en skisserad struktur bättre än en animerad tomhet.

För restaurangmenyer är detta avgörande. Gästen sitter vid bordet, telefon i handen, vill snabbt bestämma sig. Två sekunder med vit skärm sår tvivel — "är nätet borta?". Skeleton tar bort tvivlet direkt.

thMenu-standard: shimmer-skeleton

thMenu använder CSS gradient shimmer-animation för produktkort, kategoriflikar och bildplatshållare. Under bildladdning visas en blur-up placeholder plus skeleton-ram.

• Kategoriflikar: 5 grå piller, shimmer 1,5s
• Produktkort: bild + 2 textrader + pris
• Cart drawer: rad-skeleton istället för spinner

När spinner?

För åtgärdsbekräftelse — "Skickar beställning", "Behandlar betalning", "Kallar servitör" — fungerar en liten inline-spinner bättre. Här väntar man på ett resultat, inte innehåll.

Tumregel: skeleton för data, spinner för åtgärder. thMenu visar inline-spinner inom 200ms efter tryck på "Lägg i varukorg" och sedan en framgångstoast.

FAQ

Kan en långsam skeleton-animation skada? Ja. Cykler över 2 sekunder irriterar. Optimalt 1,2-1,8s; thMenu använder 1,5s.

Räcker skeleton vid mycket dålig anslutning? Skeleton + toast efter 8+ sekunder + service worker offline fallback.

Är skeleton tillgängligt? Ja med aria-busy="true" och aria-label="Meny laddas".

Var detta hjälpsamt? Dela det.