Stati di Caricamento Menu: Skeleton vs Spinner — Best Practice

Un caffè universitario di 14 tavoli a Bursa Görükle ha ridotto il bounce rate mobile dal 18% all'11% sostituendo lo spinner con uno shimmer-skeleton nel menu digitale. Stessi dati, stesse immagini, stessa rete 3G.

Lo studio Nielsen Norman 2023

La ricerca Nielsen Norman Group 2023 mostra che gli skeleton screen riducono il tempo di caricamento percepito del 38%, mentre gli spinner classici lo aumentano del 12%. Il cervello accetta meglio una struttura abbozzata che un vuoto animato.

Per un menu di ristorante è decisivo. Il cliente è seduto, telefono in mano, vuole decidere in fretta. Due secondi di schermo bianco creano il dubbio — "non c'è rete?". Lo skeleton lo elimina.

Default thMenu: shimmer-skeleton

thMenu utilizza animazione CSS gradient shimmer per card prodotto, tab categorie e placeholder immagini. Durante il caricamento delle immagini si vede un blur-up placeholder più il frame skeleton.

• Tab categorie: 5 pill grigie, shimmer 1,5s
• Card prodotto: immagine + 2 righe testo + prezzo
• Cart drawer: righe skeleton invece di spinner

Quando usare lo spinner?

Per conferma azione — "Invio ordine", "Elaborazione pagamento", "Chiamata cameriere" — uno spinner inline piccolo è meglio. Qui si attende un esito, non contenuto.

Regola: skeleton per i dati, spinner per le azioni. thMenu mostra spinner inline in 200ms dopo tap "Aggiungi al carrello", poi toast di successo.

FAQ

Un'animazione skeleton lenta danneggia? Sì. Cicli oltre i 2 secondi irritano. Ottimale: 1,2-1,8s; thMenu usa 1,5s.

Lo skeleton basta su reti pessime? Skeleton + toast dopo 8+ secondi + service worker offline fallback.

Lo skeleton è accessibile? Sì con aria-busy="true" e aria-label="Caricamento menu".

Ti è stato utile? Condividilo.