Stavy Načítání Menu: Skeleton vs Spinner — Nejlepší Praktiky

Kampusová kavárna se 14 stoly v Burse Görükle snížila míru odchodů na mobilu z 18% na 11% po výměně točícího se spinneru za shimmer-skeleton v digitálním menu. Stejná data, stejné obrázky, stejná 3G síť.

Studie Nielsen Norman 2023

Výzkum Nielsen Norman Group z roku 2023 ukázal, že skeleton obrazovky snižují vnímanou dobu načítání o 38%, zatímco klasický spinner ji o 12% zvyšuje. Mozek lépe přijímá naznačenou strukturu než animovanou prázdnotu.

Pro restaurační menu je to zásadní. Host sedí u stolu, telefon v ruce, chce se rychle rozhodnout. Dvě vteřiny bílé obrazovky vyvolají pochybnost — "padla síť?". Skeleton ji okamžitě odstraní.

Výchozí thMenu: shimmer-skeleton

thMenu používá CSS gradient shimmer animaci pro karty produktů, záložky kategorií a placeholdery obrázků. Během načítání obrázků zůstává viditelný blur-up placeholder a rámec skeletonu.

• Záložky kategorií: 5 šedých pilulek, shimmer 1,5s
• Karta produktu: obrázek + 2 řádky textu + cena
• Cart drawer: řádky skeletonu místo spinneru

Kdy spinner?

Pro potvrzení akce — "Odesílání objednávky", "Zpracování platby", "Volání číšníka" — funguje lépe malý inline spinner. Čeká se na výsledek, ne na obsah.

Pravidlo: skeleton pro data, spinner pro akce. thMenu po klepnutí na "Přidat do košíku" zobrazí inline spinner do 200ms a poté úspěšný toast.

FAQ

Může pomalá skeleton animace škodit? Ano. Cykly delší než 2 sekundy iritují. Optimum 1,2-1,8s; thMenu 1,5s.

Stačí skeleton při velmi špatném připojení? Skeleton + toast po 8+ sekundách + service worker offline fallback.

Je skeleton přístupný? Ano s aria-busy="true" a aria-label="Načítání menu".

Bylo to užitečné? Sdílejte to.