Écrans squelettes : quand les utiliser à la place des toupies
Que sont les écrans squelettes, quand ils battent les spinners, comment les concevoir pour qu'ils correspondent au contenu réel et comment les animer sans nuire aux performances ou à l'accessibilité.
À retenir
Un écran squelette est un espace réservé de type filaire qui affiche la disposition du contenu pendant son chargement. Utilisez-le pour des pages complètes et des listes avec une forme prévisible ; utilisez un spinner pour les petites zones ou le contenu inconnu, et de réels progrès pour les tâches longues. Faites en sorte que le squelette corresponde à la mise en page réelle afin que rien ne saute lorsque le contenu arrive.
Qu'est-ce qu'un écran squelette
Nielsen Norman Group définit un écran squelette comme espace réservé pour une page de chargement qui imite la mise en page avec un visuel de type filaire. Il est utilisé pour le chargement d'une page entière et réduit le temps de chargement perçu, car les gens voient la structure de ce qui arrive au lieu d'une zone vide.
Quand utiliser lequel
Faites correspondre l'indicateur au contenu et à l'attente :
- Squelette : chargement d'une page ou d'une liste dont la mise en page est connue, comme les flux, les cartes et les profils.
- Spinner : petites zones, boutons ou contenus dont vous ne pouvez pas prédire la forme.
- Barre de progression : tâches longues que vous pouvez mesurer, telles que les téléchargements et les exportations.
- Rien : des réponses très rapides, là où un indicateur ne ferait que clignoter.
Concevoir un bon squelette
Utilisez les dimensions réelles des composants afin que la page ne bouge pas lorsque le contenu arrive, ce qui protège également votre score Cumulative Layout Shift. Gardez les formes simples (blocs pour les images, barres pour le texte), utilisez des gris à faible contraste et remplacez chaque espace réservé par du contenu réel dès qu'il est prêt au lieu d'attendre tout.
Animation de squelettes
NN/g note que certains squelettes incluent une animation pulsée ou scintillante pour signaler que le système fonctionne toujours. Gardez-le lent et subtil, animez l'opacité ou une transformation plutôt que les propriétés de mise en page et arrêtez-le lorsque le mouvement réduit est activé. Donnez à la région de chargement une étiquette accessible telle que « Résultats de chargement ».
Principes clés à retenir
- Les squelettes montrent la disposition du contenu à venir et réduisent l'attente perçue
- Utilisez-les pour des chargements prévisibles de pages et de listes ; spinners pour zones petites ou inconnues
- Faites correspondre les dimensions réelles pour éviter tout changement de disposition
- Gardez le miroitement subtil et arrêtez-le pour réduire les mouvements
- Régions de chargement d'étiquettes pour les lecteurs d'écran
Questions fréquentes
Sources
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev