Chargements
Alias loading, skeleton, shimmer, placeholder, spinner, progress bar, progress indicators
Les différentes composantes de chargement servent à gérer l'attente de l'utilisateur dans le cas où nous éprouvons des difficultés techniques ou que la connexion de l'utilisateur soit faible ou intermittente.
Un chargement peut informer l'utilisateur sur la progression du chargement (à durée déterminée) ou simplement confirmer que le chargement est en cours avec une animation décorative (à durée indéterminée).
A Skeleton is a low-fidelity visual placeholder that represents the loading of interface elements before they have displayed on the page. Appearing as a blank version of the page, it mitigates focus on the loading process and improves the user’s perceived load time. (Workday Canvas)
Show static content that never changes on a page and use skeleton loading for dynamic content. (Shopify)
Avantages | Inconvénients |
|
|
Anatomie de la composante
Élément | Description et interactions |
Métatitre de la page (Nom de l'onglet ou de la fenêtre) |
|
Animation (Barre de progression ou boucle) |
|
Squelette |
|
Texte de progression (ex. 99%, 1/5, …) (facultatif) |
|
Est-ce que ça l'affecte le CLS (Cumulative Shift Layout) ? Ça l'aide si la hauteur de l'espace vide est bien remplie par le skeleton et que cette hauteur ne change pas.
Références
Annexe
Exemples d'utilisations sur les plateformes de RC