Menu-laadstatussen: Skeleton vs Spinner — Best Practices

Een campus-café met 14 tafels in Bursa Görükle verlaagde zijn mobiele bounce-rate van 18% naar 11% door de draaiende spinner in het digitale menu te vervangen door een shimmer-skeleton. Zelfde data, zelfde beelden, zelfde 3G-netwerk.

Nielsen Norman 2023 onderzoek

Het onderzoek van Nielsen Norman Group uit 2023 toont dat skeleton-schermen de waargenomen laadtijd met 38% verlagen, terwijl klassieke spinners die juist met 12% verhogen. Het brein accepteert een geschetste structuur beter dan een geanimeerde leegte.

Voor restaurantmenu's is dat doorslaggevend. De gast zit aan tafel, telefoon in de hand, wil snel beslissen. Twee seconden wit scherm zaait twijfel — "is het netwerk weg?". Skeleton heft die twijfel direct op.

thMenu-default: shimmer-skeleton

thMenu gebruikt CSS gradient shimmer voor productkaarten, categorie-tabs en afbeeldingsplaceholders. Tijdens het laden van afbeeldingen tonen we een blur-up placeholder plus skeleton-frame.

• Categorie-tabs: 5 grijze pills, shimmer 1,5s
• Productkaart: afbeelding + 2 regels tekst + prijs
• Cart drawer: regels skeleton in plaats van spinner

Wanneer spinner?

Voor actiebevestiging — "Bestelling versturen", "Betaling verwerken", "Ober roepen" — werkt een kleine inline-spinner beter. Daar wacht men op een uitkomst, niet op inhoud.

Vuistregel: skeleton voor data, spinner voor acties. thMenu toont na tik op "Toevoegen aan winkelwagen" binnen 200ms een inline-spinner en daarna een succes-toast.

FAQ

Kan een trage skeleton-animatie averechts werken? Ja. Cycli boven 2 seconden irriteren. Optimaal 1,2-1,8s; thMenu gebruikt 1,5s.

Is skeleton genoeg bij zeer slechte verbinding? Skeleton + toast na 8+ seconden + service worker offline fallback.

Is skeleton toegankelijk? Ja met aria-busy="true" en aria-label="Menu laadt".

Was dit nuttig? Deel het.