Stany Ładowania Menu: Skeleton vs Spinner — Najlepsze Praktyki

Kawiarnia kampusowa z 14 stolikami w Bursa Görükle obniżyła wskaźnik odrzuceń mobilnych z 18% do 11% po zastąpieniu spinnera shimmer-skeletonem w cyfrowym menu. Te same dane, te same zdjęcia, ta sama sieć 3G.

Badanie Nielsen Norman 2023

Badanie Nielsen Norman Group z 2023 r. pokazuje, że skeleton screens skracają postrzegany czas ładowania o 38%, a klasyczne spinnery wydłużają go o 12%. Mózg lepiej akceptuje zarysowaną strukturę niż animowaną pustkę.

Dla menu restauracyjnego to decydujące. Klient siedzi przy stoliku, ma telefon w ręce, chce zdecydować szybko. Dwie sekundy białego ekranu rodzą wątpliwość — "czy sieć padła?". Skeleton tę wątpliwość natychmiast usuwa.

Domyślnie w thMenu: shimmer-skeleton

thMenu używa animacji CSS gradient shimmer dla kart produktów, zakładek kategorii i miejsc na obrazy. Podczas ładowania obrazów widoczny jest blur-up placeholder oraz ramka skeleton.

• Zakładki kategorii: 5 szarych pigułek, shimmer 1,5s
• Karta produktu: obraz + 2 linie tekstu + cena
• Koszyk: wiersze skeleton zamiast spinnera

Kiedy spinner?

Dla potwierdzenia akcji — "Wysyłanie zamówienia", "Przetwarzanie płatności", "Wzywanie kelnera" — lepiej działa mały inline spinner. Czeka się tu na wynik, nie na treść.

Zasada: skeleton dla danych, spinner dla akcji. thMenu po dotknięciu "Dodaj do koszyka" pokazuje inline spinner w 200ms i toast sukcesu.

FAQ

Czy wolna animacja skeleton szkodzi? Tak. Cykle powyżej 2 sekund irytują. Optymalne 1,2-1,8s; thMenu 1,5s.

Czy skeleton wystarczy przy bardzo słabym łączu? Skeleton + toast po 8+ sekundach + offline fallback w service workerze.

Czy skeleton jest dostępny? Tak, z aria-busy="true" i aria-label="Ładowanie menu".

Czy to było pomocne? Udostępnij.