Le Journal d'UX
L'actualité UX,
au-dessus de la ligne de flottaison.
Wiki UX Carrousel (*Carousel*)

Carrousel (*Carousel*)

Composant
Définition

Composant qui affiche une série de contenus (images, cartes, promotions) dans un espace fixe, navigable horizontalement. L'utilisateur passe d'un élément à l'autre via des flèches, des points ou un geste de swipe. Le défilement peut être manuel ou automatique. Les carrousels automatiques posent des problèmes d'utilisabilité documentés : les utilisateurs n'interagissent quasi jamais avec les slides après la première. Le composant reste malgré tout omniprésent car il résout un problème politique : donner de la visibilité à plusieurs équipes sans prioriser.

En pratique

Si un carrousel est inévitable, le premier slide doit contenir le message le plus critique. Le défilement automatique doit pouvoir être stoppé (critère WCAG). Les indicateurs de pagination doivent montrer le nombre total de slides et la position actuelle. Sur mobile, le swipe est attendu mais les flèches restent nécessaires pour l'accessibilité. L'alternative privilégiée : empiler les contenus verticalement.

Exemple

Le site de Booking.com affiche un carrousel de photos pour chaque hôtel. Celui-ci est exclusivement manuel et affiche un compteur "3/12" pour orienter l'utilisateur.

Voir aussi
Accessibilité (*Accessibility*)
Above the fold
Charge cognitive (*Cognitive Load*)
WCAG (*Web Content Accessibility Guidelines*)
Sources
Auto-Forwarding Carousels - Nielsen Norman Group
Should I Use a Carousel? - shouldiuseacarousel.com
Le Journal d'UX est un média indépendant sur l'expérience utilisateur. Liens curatés, wiki UX en français, communauté.