Système de Carrousel et Curseur

Que fait Système de Carrousel et Curseur ?

Objectif

Le Système de Carrousel et Curseur fournit une méthodologie pour concevoir des conteneurs de défilement horizontal qui permettent aux utilisateurs de parcourir une collection de contenu connexe (cartes, images, témoignages) sans consommer un espace vertical excessif. Bien que les carrousels soient souvent critiqués pour leur faible engagement, une approche systématique se concentre sur les affordances, la performance perçue et le contrôle utilisateur, garantissant que la découverte horizontale soit intuitive, accessible et à fort impact.

Cas d'Utilisation

• Découverte de Produits : Parcourir des "Produits Associés" ou "Nouveautés" dans le commerce électronique.
• Preuve Sociale : Afficher une séquence de témoignages clients ou d'études de cas.
• Galeries Multimédias : Collections de photos ou vidéos à haute densité dans une fenêtre d'affichage limitée.
• Intégration/Tours de Fonctionnalités : Guider les utilisateurs à travers une séquence linéaire de propositions de valeur.
• Widgets de Tableau de Bord : Gérer plusieurs résumés de données dans une rangée horizontale pour préserver le rythme de la page.

Quand NE PAS Utiliser

• Étapes Séquentielles Critiques : Si un utilisateur doit voir chaque élément pour accomplir une tâche, utilisez une pile verticale ou une grille pour garantir que rien n'est manqué.
• Petits Volumes de Contenu : Si vous n'avez que 2 ou 3 éléments, une grille standard est plus efficace et nécessite moins d'interaction.
• Types de Contenu Variés : Ne mélangez pas différents types de cartes (par exemple, un article à côté d'un produit) dans un seul carrousel ; la cohérence est essentielle pour la lisibilité.
• Curseurs Marketing de Faible Valeur : Évitez d'utiliser de grands "Carrousels Héroïques" pour des promotions sans rapport que les utilisateurs ignorent généralement (Cécité aux Bannières).

Entrées

1. Archétype de Contenu : Qu'est-ce qui défile ? (par exemple, cartes card-ui-system, images ou blocs de texte).
2. Taille du Catalogue : Combien d'éléments y a-t-il dans la collection totale ?
3. Contexte du Conteneur : S'agit-il d'une section pleine largeur ou contenue dans une colonne de grille ?
4. Exigences d'Interaction : Nécessite-t-il une lecture automatique, un bouclage infini ou un défilement manuel uniquement ?
5. Jetons de Marque : Systèmes d'espacement, de typographie et de couleur pour les contrôles et les indicateurs.

Sorties

1. Spécification d'Anatomie du Carrousel : Définitions visuelles pour le Conteneur, la Piste, la Navigation (Flèches) et la Pagination (Points).
2. Stratégie de Révélation : Règles définies de "Révélation Partielle d'Élément" pour signaler le contenu caché horizontalement.
3. Cartographie Réactive : Règles pour le nombre d'éléments par vue sur Mobile, Tablette et Bureau.
4. Plan d'Accessibilité : Étiquettes ARIA, gestion du focus et spécifications de contrôle du mouvement.

Flux de Travail

1. Déterminer l'Intention de Découverte

Identifiez comment l'utilisateur doit interagir avec les éléments :

• Linéaire : L'utilisateur se déplace d'un élément à l'autre (par exemple, Intégration).
• Exploratoire : L'utilisateur peut sauter ou parcourir (par exemple, Grille de Produits).
• Ambiance : Le contenu se déplace automatiquement (par exemple, Marquee de Logo).

2. Établir le "Motif de Révélation"

Signalez à l'utilisateur qu'il y a plus de contenu à droite :

• Révélation Partielle : Assurez-vous que l'élément "suivant" est partiellement visible (généralement 10-20 % débordant du bord du conteneur). C'est l'indice visuel le plus fort pour la capacité de défilement.
• Effet de Fondu : Appliquez un dégradé subtil aux bords du conteneur.

3. Sélectionner les Affordances de Navigation

Fournissez des contrôles clairs pour le mouvement :

• Flèches (Directionnelles) : Placez-les au centre vertical de la piste (à l'intérieur ou à l'extérieur du conteneur). Idéal pour la navigation à haute densité.
• Pagination (Points) : Placez-les en dessous de la piste. Idéal pour les séquences courtes (3-7 éléments) pour montrer la progression.
• Barre de Défilement : Une barre de progression visuelle en bas. Idéal pour les très grandes collections.

4. Définir la Logique des Colonnes Réactives

Mappez combien d'éléments sont visibles à la fois :

• Bureau : 3 à 5 éléments par vue.
• Tablette : 2 à 3 éléments par vue.
• Mobile : 1,2 élément par vue (1 élément complet + révélation partielle).

5. Implémenter les Contrôles et l'Accessibilité

• Support Clavier : Les utilisateurs doivent pouvoir utiliser ArrowLeft et ArrowRight pour se déplacer entre les éléments ; Tab doit passer au prochain contrôle focalisable, pas entre chaque diapositive.
• Contrôle du Mouvement : Si vous utilisez la lecture automatique, fournissez un bouton "Pause" visible et arrêtez l'animation au survol, au focus et chaque fois que prefers-reduced-motion: reduce est défini (ne vous fiez pas uniquement au survol/focus).
• Rôles ARIA : Suivez le motif ARIA APG du carrousel — role="region" avec un aria-label sur le conteneur, aria-roledescription="carousel", et aria-live="polite" (ou "off" pendant la lecture automatique) sur la piste de diapositives afin que les lecteurs d'écran annoncent les changements sans être submergés.
• Visibilité du Focus : Assurez-vous que l'indicateur de focus sur les flèches, les points et le contenu des diapositives n'est jamais obscurci par des diapositives adjacentes ou un bord de révélation collant (WCAG 2.2 SC 2.4.11).

Règles de Décision

• La Règle de "Révélation Partielle" : Montrez toujours un aperçu du prochain élément sur mobile pour indiquer le défilement horizontal sans dépendre des flèches.
• Flèches vs. Points : Utilisez des Flèches si vous avez plus de 5 éléments. Utilisez des Points uniquement si le nombre total est petit (3-7) et que montrer la progression est utile.
• Logique de Bouclage : Utilisez la "Boucle Infinie" uniquement pour la découverte ambiante (comme les logos). Pour le contenu fonctionnel (comme les produits), utilisez un état "Fin de Piste" où la flèche droite est désactivée.
• Défilement par Accroche : Utilisez toujours scroll-snap-type: x mandatory pour garantir que les éléments s'alignent parfaitement sur les bords du conteneur après un balayage ou un clic.

Contraintes

• Accessibilité : Doit supporter prefers-reduced-motion. Tous les contrôles interactifs (flèches/points) doivent respecter WCAG 2.2 SC 2.5.8 (taille minimale de cible 24x24px, 44x44px de préférence pour les flèches principales).
• Réactivité : Les éléments doivent être fluides. Le conteneur du carrousel ne doit jamais provoquer un débordement horizontal de la page ; le débordement doit être contenu dans le composant. Utilisez clamp() pour la largeur/l'espacement des éléments afin que le nombre d'éléments par vue évolue en douceur au lieu de sauter à des points d'arrêt fixes.
• Performance Perçue : Utilisez skeleton-state-system pour les éléments qui ne sont pas encore chargés ou qui sont hors écran.

Schémas d'Échec Courants

• Le Carrousel "Invisible" : Aucune révélation partielle et aucune flèche, rendant le composant comme une grille statique et cassée.
• Le Piège de la "Lecture Automatique" : Rotation du contenu trop rapide pour que les utilisateurs puissent lire, ou absence de moyen de l'arrêter.
• Accroche Cassée : Éléments qui s'arrêtent à mi-chemin entre les fenêtres d'affichage, coupant le contenu.
• États d'Interaction Manquants : Flèches qui n'ont pas d'état de survol/focus, ou qui ne semblent pas désactivées lorsque la fin de la piste est atteinte.
• Débordement Mobile : Un carrousel qui élargit la largeur de toute la page, obligeant les utilisateurs à "se perdre" en défilant horizontalement.

Critères de Validation

• Une "Révélation Partielle" ou un indicateur visuel clair du contenu caché est présent.
• Les contrôles de navigation (Flèches/Points) respectent WCAG 2.2 SC 2.5.8 (zone tactile minimale de 24x24px).
• La navigation au clavier (Flèches) et la gestion du focus sont implémentées, et les indicateurs de focus ne sont jamais obscurcis (WCAG 2.2 SC 2.4.11).
• scroll-snap est utilisé pour garantir que les éléments s'alignent sur la grille.
• La lecture automatique (si utilisée) peut être mise en pause par l'utilisateur et s'arrête automatiquement sous prefers-reduced-motion.
• Les nombres d'éléments réactifs sont définis pour tous les points d'arrêt majeurs.
• Les repères et étiquettes ARIA sont correctement appliqués pour les lecteurs d'écran.