État vide vs Squelette
Un état vide signifie qu'il n'y a pas de contenu. Un squelette signifie que le contenu est encore en cours de chargement et que sa forme est connue.
Utilisez un état vide pour expliquer pourquoi il n'y a rien et quoi faire ensuite. Utilisez un squelette pour un chargement rapide lorsque vous connaissez la disposition.
Voir ce que fait chaque modèle
Essayez chaque exemple. Puis lisez sur le travail pour lequel il a été conçu.
État Vide, Erreur et Succès — Pack d'apprentissage
Ce paquet d'apprentissage couvre trois états différents d'une application. Vide signifie qu'il n'y a pas encore de contenu. Erreur signifie que quelque chose a échoué. Succès confirme l'achèvement. Chacun nécessite son propre message et prochaine étape. Le paquet n'est pas un terme d'état standard unique.
Save a guide to keep the patterns your team uses most within reach.
Une nouvelle liste de projets explique comment créer le premier élément. Si le réseau tombe en panne, le bouton Réessayer apparaît et les filtres restent sauvegardés.
- Utilisez-le lorsque
- Utilisez ce guide comme liste de contrôle. Concevez chaque état pour chaque vue qui dépend des données.
- Ne l'utilisez pas lorsque
- Ne laissez jamais un écran vide ou une impasse. Expliquez les échecs et confirmez le succès.
- Nom utilisé dans le code
status state machine
Squelette
Un squelette est un simple élément vide en forme de contenu, qui indique que le chargement est en cours.
Une page de profil garde de la place pour sa photo et son texte. La mise en page ne bouge pas quand les données arrivent.
- Utilisez-le lorsque
- Utilisez-le lorsque la mise en page est connue et que l'attente est facile à remarquer.
- Ne l'utilisez pas lorsque
- N'inventez jamais de détails faux, ne brillez pas éternellement, et n'utilisez pas de squelette lorsque le contenu apparaît presque immédiatement.
- Nom utilisé dans le code
aria-busy="true"
Comparaison rapide
| Modèle UI | Meilleur pour | Pas pour | Nom utilisé dans le code |
|---|---|---|---|
| État Vide, Erreur et Succès — Pack d'apprentissageEmpty, Error & Success State — Learning Bundle | Utilisez ce guide comme liste de contrôle. Concevez chaque état pour chaque vue qui dépend des données. | Ne laissez jamais un écran vide ou une impasse. Expliquez les échecs et confirmez le succès. | status state machine |
| SqueletteSkeleton | Utilisez-le lorsque la mise en page est connue et que l'attente est facile à remarquer. | N'inventez jamais de détails faux, ne brillez pas éternellement, et n'utilisez pas de squelette lorsque le contenu apparaît presque immédiatement. | aria-busy="true" |
Avant d'expédier
- 01
Écrivez ce que la personne doit faire.
- 02
Tester le clavier, la mise au point, le toucher, le zoom, le chargement, les états vides et d'erreur.
- 03
Assurez-vous que les gens peuvent obtenir les mêmes informations sans survol ni mouvement.
- 04
Tester avec du contenu réel sur les petits et grands écrans.
Demande de comparaison que vous pouvez copier
Copiez ceci lorsque votre équipe a besoin d'aide pour choisir entre les modèles.
Choisissez le meilleur modèle parmi État Vide, Erreur et Succès — Pack d'apprentissage (Empty, Error & Success State — Learning Bundle), Squelette (Skeleton) pour notre flux utilisateur réel. Utilisez cette règle : Un état vide signifie qu'il n'y a pas de contenu. Un squelette signifie que le contenu est encore en cours de chargement et que sa forme est connue. Notez la tâche, la quantité de contenu et le coût d'arrêt du flux. Vérifiez le clavier, le toucher, le chargement, l'erreur et le comportement à mouvement réduit. Expliquez votre choix, puis construisez la plus petite version accessible avec le système de conception du projet.