Menü-Ladezustände: Skeleton vs Spinner — Best Practices

Ein Campus-Café in Bursa mit 14 Tischen senkte seine mobile Bounce-Rate von 18% auf 11%, nachdem es den drehenden Spinner im digitalen Menü durch ein Shimmer-Skeleton ersetzt hatte. Gleiche Daten, gleiche Bilder, gleiches 3G-Netz — geändert hat sich nur das Gefühl des Wartens.

Nielsen Norman 2023 Befund

Die Nielsen Norman Group hat 2023 gemessen, dass Skeleton-Screens die wahrgenommene Ladezeit um 38% reduzieren, während klassische Spinner sie um 12% erhöhen. Das Gehirn akzeptiert eine angedeutete Struktur viel besser als pure Leere mit Animation.

Für Restaurant-Menüs ist das entscheidend. Der Gast sitzt am Tisch und will schnell entscheiden. Zwei Sekunden weißer Bildschirm löst Zweifel aus — "Ist das Netz weg?". Ein Skeleton beseitigt diesen Zweifel sofort.

thMenu-Standard: Shimmer-Skeleton

thMenu setzt CSS-Gradient-Shimmer für Produktkarten, Kategorie-Tabs und Bild-Platzhalter ein. Während Bilder laden, sieht der Gast einen Blur-up-Placeholder plus Skeleton-Rahmen.

• Kategorie-Tabs: 5 graue Pills, 1,5s Shimmer
• Produktkarte: Bild + 2 Textzeilen + Preis-Platzhalter
• Cart Drawer: Zeilen-Skeleton statt Spinner

Wann ist Spinner besser?

Bei Aktionsbestätigung — "Bestellung wird gesendet", "Zahlung wird verarbeitet" — ist ein Inline-Spinner besser. Hier wartet der Nutzer auf ein Ergebnis, nicht auf Inhalt.

Faustregel: Skeleton für Daten, Spinner für Aktionen. thMenu zeigt nach Tap auf "In den Warenkorb" innerhalb von 200ms einen Inline-Spinner und danach einen Erfolgs-Toast.

FAQ

Kann eine zu langsame Skeleton-Animation stören? Ja. Zyklen über 2 Sekunden irritieren. Optimal: 1,2-1,8s; thMenu nutzt 1,5s.

Reicht Skeleton bei sehr schlechter Verbindung? Skeleton plus Toast nach 8+ Sekunden, plus Service-Worker-Offline-Fallback.

Ist Skeleton barrierefrei? Mit aria-busy="true" und aria-label ja — Screenreader melden "Lädt".

Hilfreich? Teilen Sie es.