États de Chargement Menu : Skeleton vs Spinner — Bonnes Pratiques

Un café universitaire de 14 tables à Bursa Görükle a fait passer son taux de rebond mobile de 18% à 11% en remplaçant un spinner par un shimmer-skeleton dans son menu numérique. Mêmes données, mêmes images, même réseau 3G.

L'étude Nielsen Norman 2023

L'étude Nielsen Norman Group 2023 montre que les skeleton screens réduisent le temps de chargement perçu de 38%, tandis que les spinners classiques l'augmentent de 12%. Le cerveau accepte mieux une structure esquissée qu'un vide animé.

Pour un menu de restaurant, c'est décisif. Le client est à table, téléphone en main, veut décider vite. Deux secondes d'écran blanc plantent le doute — "le réseau est mort ?". Le skeleton dissipe ce doute immédiatement.

Défaut thMenu : shimmer-skeleton

thMenu utilise une animation CSS gradient shimmer pour les cartes produit, onglets catégorie et placeholders d'image. Pendant le chargement des images, un blur-up placeholder et le cadre skeleton restent visibles.

• Onglets catégorie : 5 pills grises, shimmer 1,5s
• Carte produit : image + 2 lignes texte + prix
• Cart drawer : skeleton de lignes au lieu de spinner

Quand utiliser un spinner ?

Pour la confirmation d'action — "Envoi commande", "Traitement paiement", "Appel serveur" — un petit spinner inline est meilleur. Ici on attend un résultat, pas du contenu.

Règle simple : skeleton pour données, spinner pour actions. thMenu affiche un spinner inline en 200ms après tap "Ajouter au panier", suivi d'un toast de succès.

FAQ

Une animation skeleton trop lente peut-elle nuire ? Oui. Au-delà de 2 secondes par cycle, ça irrite. Idéal : 1,2-1,8s ; thMenu utilise 1,5s.

Le skeleton suffit-il sur très mauvaise connexion ? Skeleton + toast après 8 secondes + service worker offline fallback.

Le skeleton est-il accessible ? Oui, avec aria-busy="true" et aria-label="Menu en chargement".

Cet article vous a été utile ? Partagez-le.