Système de Squelettes d'État

Que fait Système de Squelettes d'État ?

Objectif

Le Système de Squelettes d'État fournit une méthodologie pour concevoir l'état de « chargement » d'une interface. Contrairement aux spinners ou barres de progression génériques, les squelettes approximent la mise en page finale à l'aide d'« os » (formes basse fidélité), ce qui réduit le temps d'attente perçu par l'utilisateur et empêche le Cumulated Layout Shift (CLS) en réservant l'espace nécessaire avant l'arrivée du contenu.

Cas d'Utilisation

• Tableaux de Bord Riches en Données : Lorsque plusieurs widgets se chargent à des vitesses différentes.
• Flux de Contenu : Défilement à travers des listes d'articles, de produits ou de publications sociales.
• Grilles Riches en Images : Réserver de l'espace pour les images haute résolution afin d'éviter les « sauts » de page.
• Vues de Recherche et de Filtre : Fournir un retour immédiat indiquant que le système traite une requête.
• Applications Monopages (SPA) : Gérer les transitions entre les routes où les données sont récupérées de manière asynchrone.

Quand NE PAS Utiliser

• Interactions Instantanées : Si le contenu se charge en moins de 300 ms, un squelette peut provoquer un « scintillement » gênant.
• Chargements Simples et Peu Contextuels : Pour les petits éléments comme un seul bouton ou une petite étiquette, un spinner standard ou un texte « Chargement... » est plus approprié.
• Contenu Statique : Contenu codé en dur ou mis en cache qui s'affiche immédiatement.
• Données Temps Réel à Haute Vélocité : Si les données changent si vite que le squelette apparaîtrait et disparaîtrait constamment, cela peut provoquer une fatigue visuelle.

Entrées

1. Mise en Page Cible : La conception finale « complètement chargée » du composant ou de la page.
2. Variables de Contenu : Quelles parties de l'interface sont dynamiques (Texte, Images, Prix, Avatars) ?
3. Dimensions Spatiales : La hauteur, la largeur et les ratios exacts des éléments finaux.
4. Tonalité de Marque : Les couleurs principales et secondaires utilisées pour la base de l'« os » et l'effet de scintillement.

Sorties

1. Plan du Squelette : Un plan basse fidélité montrant la disposition des os.
2. Spécification des Os : Définitions pour la forme (cercles vs rectangles) et le dimensionnement (fixe vs basé sur un pourcentage).
3. Stratégie de Transition : Règles pour la façon dont le squelette s'estompe et le contenu apparaît en fondu.
4. Exigences d'Accessibilité : Guide pour l'implémentation de aria-busy et aria-hidden.

Flux de Travail

1. Mapper la Géométrie « Cible »

Décomposer le composant final en ses primitives géométriques de base :

• Cercles : Pour les avatars, les icônes ou les boutons arrondis.
• Rectangles (Arrondis) : Pour les cartes, les conteneurs d'images et les blocs de texte.
• Lignes : Pour les lignes de texte simples (titres, métadonnées).

2. Définir la Hiérarchie des Os

Tous les éléments n'ont pas besoin d'un os. Concentrez-vous sur les « ancres » structurelles :

• Os Principal : Le plus grand élément visuel (par exemple, une image de produit).
• Os Secondaires : Titres et métadonnées principales.
• Os Tertiaires : Petits détails de métadonnées ou boutons d'action (peuvent souvent être omis s'ils sont trop petits).

3. Établir la Correspondance Spatiale (La Règle CLS)

Assurez-vous que les dimensions du squelette correspondent exactement au conteneur du contenu final :

• Ratio d'Aspect : Utilisez des ratios d'aspect fixes (par exemple, 16:9 pour les vidéos) pour l'os afin qu'il ne change pas de taille lorsque l'élément se charge.
• Dimensionnement du Texte : Utilisez des os qui correspondent à la hauteur de ligne et à la largeur approximative du texte qu'ils représentent.

4. Concevoir le Rythme et le Scintillement

Les squelettes doivent sembler « vivants » mais pas distrayants :

• Couleur de Base : Utilisez une couleur neutre à faible contraste (par exemple, Gris Clair).
• Scintillement (La Pulsation) : Appliquez une animation de dégradé subtile qui se déplace de gauche à droite.
• Synchronisation : Si plusieurs squelettes sont à l'écran, assurez-vous que leurs animations sont synchronisées pour éviter le chaos visuel.
• Mouvement Réduit : Enveloppez l'animation image par image du scintillement dans une requête @media (prefers-reduced-motion: reduce) qui désactive le mouvement et revient à un os statique ou à une pulsation d'opacité douce.

5. Définir la Transition de « Passation »

Planifiez la sortie du squelette :

• Temporisation : Utilisez un court fondu d'apparition (par exemple, 200 ms) pour le contenu réel afin d'éviter une transition « brusque ».
• Échelonnement : Pour les listes, décidez si les éléments doivent apparaître tous en même temps ou au fur et à mesure qu'ils se chargent individuellement.

Règles de Décision

• La Règle des 300 ms : N'affichez un squelette que si le chargement devrait prendre plus de 300 ms.
• Précision des Os : Un os doit représenter le conteneur, pas les données spécifiques. Par exemple, un os de texte doit être une simple barre, pas une ligne irrégulière imitant des lettres spécifiques.
• Nombre de Lignes : Pour le texte multiligne, utilisez 2 ou 3 os de largeurs variables (par exemple, la dernière ligne à 60 % de largeur) pour simuler le flux naturel d'un paragraphe.
• Spinner vs Squelette :
  • Utilisez un Squelette pour les transitions au niveau de la page ou de la section.
  • Utilisez un Spinner pour les actions localisées de petite taille (comme un état de bouton « Enregistrement... »).

Contraintes

• Accessibilité : Les squelettes doivent être marqués avec aria-hidden="true" afin que les lecteurs d'écran n'essaient pas de « lire » les barres vides. Le conteneur parent doit utiliser aria-busy="true" pendant le chargement, et idéalement contenir une région aria-live="polite" visuellement cachée qui annonce « Chargement » puis l'état de fin une fois que le contenu remplace le squelette — n'utilisez pas aria-live sur les os du squelette eux-mêmes. Respectez prefers-reduced-motion pour l'effet de scintillement.
• Contraste : Les couleurs du squelette doivent être distinctes de l'arrière-plan mais pas à un contraste si élevé qu'elles ressemblent à du contenu actif.
• Responsivité : Les os du squelette doivent évoluer en utilisant la même logique de grille/flex que le contenu final.

Schémas d'Échec Courants

• Le « Saut CLS » : Un squelette de 200 px de haut remplacé par un contenu de 300 px de haut, provoquant un « saut » de la page.
• Surcharge de Scintillement : Des animations trop rapides ou à contraste trop élevé, provoquant des nausées ou des distractions.
• Inadéquation Contenu-Os : Utiliser un os circulaire pour une image carrée, ou vice versa.
• Surcomplexité : Essayer de recréer chaque petite icône sous forme d'os, ce qui donne une mise en page « fantôme » encombrée.
• Le « Squelette Statique » : Un squelette sans animation, qui peut être confondu avec une page cassée ou vide.

Critères de Validation

• Les dimensions du squelette correspondent exactement à l'état final « chargé » (Zéro CLS).
• Les ratios d'aspect des images/vidéos sont réservés à l'aide de conteneurs fixes.
• L'animation de scintillement est subtile et se déplace de gauche à droite.
• Les zones riches en texte utilisent des os qui simulent des longueurs de ligne naturelles.
• aria-hidden="true" est appliqué aux éléments du squelette, et le conteneur de chargement utilise aria-busy="true".
• L'animation de scintillement respecte prefers-reduced-motion: reduce.
• La transition du squelette au contenu est un fondu en douceur (environ 200 ms).
• Le squelette n'apparaît pas pour les chargements plus rapides que 300 ms.