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
Confirme que le chargement du contenu est en cours Gère ou occupe le temps d'attente de l'utilisateur Réduit la durée perçue de l'attente In both dimensions (perceived performance and emotional impact) using any loading indicator is superior to a blank screen. (Chung, 2018)	Dans un monde idéal, tout fonctionne seamlessly sans chargement nécessaire. Cependant, les transitions peuvent être nécessaires pour souligner un changement d’état. Un chargement décoratif peut être bruyant ou créer de la confusion selon le contexte.

Anatomie de la composante

Élément	Description et interactions
Métatitre de la page (Nom de l'onglet ou de la fenêtre)	Si c'est l'entièreté de la page qui est chargée, il est recommandé de changer dynamiquement le titre de la page. Le lecteur d’écran va détecter et lire ce changement de titre.
Animation (Barre de progression ou boucle)	Est-ce qu'on peut contrevenir au 5 secondes/bouton pause pour l'accessibilité? Est-ce que l'arrêt du chargement est purement contrôlé par le navigateur ou le système d'opération? Il faut tenir compte de l'animation de chargement existante dans un navigateur ou un système d'opération.
Squelette	Sert à prévisualiser la structure du contenu ou des données à afficher Le squelette est visuellement limité à quelques éléments rectangulaires (lignes de texte, images), carrés ou ronds (avatars). Le squelette doit disparaître dès que le contenu est disponible. Une animation de reflet (shimmer) témoigne habituellement de l'action en cours. Skeleton screens that leverage motion that moves from left to right (e.g. a wave or shimmer like animation, much like Facebook or Google uses) are perceived as shorter in duration than skeletons that pulse (opacity fading in and out) (Chung, 2018) While a skeleton loader visually indicates that a process is happening, it should also be announced by assistive technology through the use of aria-live.
Texte de progression (ex. 99%, 1/5, …) (facultatif)	Est-ce que ce texte doit être lu au lecteur d'écran ? Apply aria-busy to the outermost container to indicate the loading state to screen readers If it’s helpful, display a description that provides additional context for the task. Be accurate and succinct. Avoid vague terms like loading or authenticating because they seldom add value. (Apple)

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

At Radio-Canada, we have an infinite loading bar at the top for page transitions, skeletons for content and animated gem icon for widgets. I have a choice to make for SSO.

Exemples d'utilisations sur les plateformes de RC

https://codepen.io/mathieucote/pen/VwxRvbW