Le Journal d'UX
L'actualité UX,
au-dessus de la ligne de flottaison.
Wiki UX Skeleton loader (*Écran squelette*)

Skeleton loader (*Écran squelette*)

Composant
Définition

Placeholder animé qui affiche la structure approximative du contenu pendant son chargement. Les zones de texte sont représentées par des rectangles gris pulsés, les images par des blocs de taille équivalente. Le skeleton loader donne l'impression que la page se construit progressivement. Il remplace le spinner traditionnel qui ne communique rien sur le contenu à venir. La perception du temps d'attente diminue car l'utilisateur anticipe la mise en page.

En pratique

Le skeleton doit refléter fidèlement la structure du contenu final. Un skeleton qui ne ressemble pas au résultat crée un effet de surprise négatif au chargement. L'animation de pulsation (shimmer) doit être subtile pour éviter la distraction. On l'applique aux zones de contenu dynamique, pas aux éléments de navigation statiques. Le skeleton se combine bien avec le chargement progressif : les blocs se révèlent au fur et à mesure que les données arrivent.

Exemple

LinkedIn affiche des skeleton loaders pour le fil d'actualité. Chaque carte de post montre un cercle gris (avatar), deux barres (nom et titre) et un bloc rectangulaire (contenu), reproduisant exactement le layout final.

Voir aussi
Charge cognitive (*Cognitive Load*)
Feedback
Micro-interaction
Responsive design
Sources
Skeleton Screens - Luke Wroblewski
Progress Indicators - Nielsen Norman Group
Le Journal d'UX est un média indépendant sur l'expérience utilisateur. Liens curatés, wiki UX en français, communauté.