Comparaison comportementale
Reflet de chargement vs Transition d’état
Différence décisive
Reflet de chargement concerne une décoration facultative d’attente ; Transition d’état concerne un retour d’état persistant. Les deux peuvent se combiner si le besoin le justifie.
Critères de choix, liens et sources
- Reflet de chargementChoisis Reflet de chargement si tu cherches une décoration facultative d’attente.Ouvrir la fiche Reflet de chargement
- Transition d’étatChoisis Transition d’état si tu cherches un retour d’état persistant.Ouvrir la fiche Transition d’état
Voir les neuf dimensionsVoir les sources
Mouvement et effets
Essayer
Le mouvement explique-t-il un changement, signale-t-il un état ou décore-t-il seulement ?
Reflet de chargement
Contexte commun aux essais
Un élément se déplace, change d’état ou attend un contenu. Quelle information doit rester sans mouvement ?
Reflet de chargement
Aperçu statique : l’état et le résultat restent lisibles sans mouvement. Active la démo pour comparer le paramètre, mettre en pause et essayer le repli.
Compare 1 200 et 2 400 ms par passage. La vitesse change la décoration, pas le chargement. Afficher le contenu termine cette simulation locale ; aucune requête réseau n’est lancée.
Transition d’état
Aperçu statique : l’état et le résultat restent lisibles sans mouvement. Active la démo pour comparer le paramètre, mettre en pause et essayer le repli.
Compare une mise à jour instantanée avec un fondu de 200 ms. Enregistré apparaît immédiatement dans les deux cas ; seule la coche décorative apparaît en fondu.
Ce que cet essai montre
Le skeleton réserve la forme du contenu ; le shimmer est une décoration facultative sur cette forme. Contrairement à une barre de progression, aucun ne mesure l’avancement.
Lequel convient à ton besoin ?
Reflet de chargement
Montre un espace réservé au chargement, accompagné d’un texte Chargement persistant.
Transition d’état
Confirme une action locale terminée par un texte persistant et un fondu court facultatif.
Différence et sources
Le skeleton réserve la forme du contenu ; le shimmer est une décoration facultative sur cette forme. Contrairement à une barre de progression, aucun ne mesure l’avancement.
Consulter les sourcesParties du spécimen
Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.
Déclencheur
Le contrôle qui ouvre ou révèle la surface.
Décision
Question de famille
Le mouvement explique-t-il un changement, signale-t-il un état ou décore-t-il seulement ?
Trois critères pour choisir
- Cas d’usage
Reflet de chargement
Montre un espace réservé au chargement, accompagné d’un texte Chargement persistant.
Transition d’état
Confirme une action locale terminée par un texte persistant et un fondu court facultatif.
- Interactivité
Reflet de chargement
Règle un paramètre pour une décoration facultative d’attente ; mets en pause ou utilise un résultat statique.
Transition d’état
Règle un paramètre pour un retour d’état persistant ; mets en pause ou utilise un résultat statique.
- Comportement mobile
Reflet de chargement
Contrôles tactiles natifs ; la réduction système reste prioritaire.
Transition d’état
Contrôles tactiles natifs ; la réduction système reste prioritaire.
Neuf dimensions
- Déclenchement
Reflet de chargement
Activation explicite pour démontrer une décoration facultative d’attente.
Transition d’état
Activation explicite pour démontrer un retour d’état persistant.
- Modalité
Reflet de chargement
Non modal ; le contenu environnant reste utilisable.
Transition d’état
Non modal ; le contenu environnant reste utilisable.
- Positionnement
Reflet de chargement
Dans un spécimen délimité ; aucune décoration globale.
Transition d’état
Dans un spécimen délimité ; aucune décoration globale.
- Interactivité
Reflet de chargement
Règle un paramètre pour une décoration facultative d’attente ; mets en pause ou utilise un résultat statique.
Transition d’état
Règle un paramètre pour un retour d’état persistant ; mets en pause ou utilise un résultat statique.
- Focus
Reflet de chargement
Le focus reste sur le contrôle activé. Recommencer rend le focus à son bouton.
Transition d’état
Le focus reste sur le contrôle activé. Recommencer rend le focus à son bouton.
- Fermeture
Reflet de chargement
Pause fige la lecture ; le repli statique l’annule. Quitter le spécimen annule son animation et retire les écouteurs.
Transition d’état
Pause fige la lecture ; le repli statique l’annule. Quitter le spécimen annule son animation et retire les écouteurs.
- Rôle accessible
Reflet de chargement
button + select + checkbox + status
Transition d’état
button + select + checkbox + status
- Cas d’usage
Reflet de chargement
Montre un espace réservé au chargement, accompagné d’un texte Chargement persistant.
Transition d’état
Confirme une action locale terminée par un texte persistant et un fondu court facultatif.
- Comportement mobile
Reflet de chargement
Contrôles tactiles natifs ; la réduction système reste prioritaire.
Transition d’état
Contrôles tactiles natifs ; la réduction système reste prioritaire.
| Dimension | Reflet de chargementSkeleton shimmer | Transition d’étatState transition |
|---|---|---|
| Déclenchement | Activation explicite pour démontrer une décoration facultative d’attente. | Activation explicite pour démontrer un retour d’état persistant. |
| Modalité | Non modal ; le contenu environnant reste utilisable. | Non modal ; le contenu environnant reste utilisable. |
| Positionnement | Dans un spécimen délimité ; aucune décoration globale. | Dans un spécimen délimité ; aucune décoration globale. |
| Interactivité | Règle un paramètre pour une décoration facultative d’attente ; mets en pause ou utilise un résultat statique. | Règle un paramètre pour un retour d’état persistant ; mets en pause ou utilise un résultat statique. |
| Focus | Le focus reste sur le contrôle activé. Recommencer rend le focus à son bouton. | Le focus reste sur le contrôle activé. Recommencer rend le focus à son bouton. |
| Fermeture | Pause fige la lecture ; le repli statique l’annule. Quitter le spécimen annule son animation et retire les écouteurs. | Pause fige la lecture ; le repli statique l’annule. Quitter le spécimen annule son animation et retire les écouteurs. |
| Rôle accessible | button + select + checkbox + status | button + select + checkbox + status |
| Cas d’usage | Montre un espace réservé au chargement, accompagné d’un texte Chargement persistant. | Confirme une action locale terminée par un texte persistant et un fondu court facultatif. |
| Comportement mobile | Contrôles tactiles natifs ; la réduction système reste prioritaire. | Contrôles tactiles natifs ; la réduction système reste prioritaire. |