Carrousel vs. Marquee
Un carrousel montre des diapositives séparées avec des commandes. Un bandeau garde une ligne de contenu en mouvement.
Utilisez un carrousel lorsque chaque élément nécessite du temps et des contrôles. Utilisez un défilement seulement pour une décoration peu importante qui peut se mettre en pause ou s’arrêter lorsqu’on le demande.
Voir ce que fait chaque modèle
Essayez chaque exemple. Puis lisez sur le travail pour lequel il a été conçu.
Carrousel
Un carrousel montre un ou quelques panneaux à la fois. On le fait défiler avec des flèches, des points ou en glissant le doigt.
Une galerie de photos a des boutons Précédent et Suivant et montre le numéro de la diapositive. Elle gère les balayages et peut mettre en pause le défilement.
- Utilisez-le lorsque
- Utilisez-le lorsque les éléments ont un ordre mais qu'il n'y a pas assez de place pour tous les montrer.
- Ne l'utilisez pas lorsque
- Ne cachez jamais les choix importants dans un carrousel ni ne le faites défiler trop rapidement tout seul.
- Nom utilisé dans le code
aria-roledescription="carousel"
Marquee
Une bande de contenu répété qui continue de bouger. Elle doit offrir des contrôles ou une version figée pour les personnes sensibles au mouvement.
Une page de festival fait défiler lentement une courte liste de sponsors. Elle fait une pause au survol ou à la sélection, et devient une liste fixe en mode réduit si l'animation est coupée.
- Utilisez-le lorsque
- Utilisez-le uniquement pour un contenu court et répété qui n'est pas essentiel. Le mouvement peut ajouter de l'ambiance mais ne doit pas bloquer la lecture.
- Ne l'utilisez pas lorsque
- Ne l'utilisez jamais pour des instructions, des textes longs, des messages urgents ou des mots que les gens doivent chercher pour lire.
- Nom utilisé dans le code
overflow clip + duplicated track + prefers-reduced-motion
Comparaison rapide
| Modèle UI | Meilleur pour | Pas pour | Nom utilisé dans le code |
|---|---|---|---|
| CarrouselCarousel | Utilisez-le lorsque les éléments ont un ordre mais qu'il n'y a pas assez de place pour tous les montrer. | Ne cachez jamais les choix importants dans un carrousel ni ne le faites défiler trop rapidement tout seul. | aria-roledescription="carousel" |
| MarqueeMarquee | Utilisez-le uniquement pour un contenu court et répété qui n'est pas essentiel. Le mouvement peut ajouter de l'ambiance mais ne doit pas bloquer la lecture. | Ne l'utilisez jamais pour des instructions, des textes longs, des messages urgents ou des mots que les gens doivent chercher pour lire. | overflow clip + duplicated track + prefers-reduced-motion |
Avant d'expédier
- 01
Écrivez ce que la personne doit faire.
- 02
Tester le clavier, la mise au point, le toucher, le zoom, le chargement, les états vides et d'erreur.
- 03
Assurez-vous que les gens peuvent obtenir les mêmes informations sans survol ni mouvement.
- 04
Tester avec du contenu réel sur les petits et grands écrans.
Demande de comparaison que vous pouvez copier
Copiez ceci lorsque votre équipe a besoin d'aide pour choisir entre les modèles.
Choisissez le meilleur modèle parmi Carrousel (Carousel), Marquee (Marquee) pour notre flux utilisateur réel. Utilisez cette règle : Un carrousel montre des diapositives séparées avec des commandes. Un bandeau garde une ligne de contenu en mouvement. Notez la tâche, la quantité de contenu et le coût d'arrêt du flux. Vérifiez le clavier, le toucher, le chargement, l'erreur et le comportement à mouvement réduit. Expliquez votre choix, puis construisez la plus petite version accessible avec le système de conception du projet.