Développeur Next.js - Freelance
N'utilisez pas de carousel
Pour rappel, le carousel c'est un composant UI qui affiche du contenu (images, textes, cartes) dans des slides, avec une navigation : flèches, indicateurs, ou swipe sur mobile.
On en croise partout : dans les hero de landings, galeries produit, bandeaux promotionnels, etc.
Pourtant, c'est rarement une bonne idée.
Le raisonnement habituel c'est : « On a plusieurs messages importants, on les met tous dans un carousel », mais quand tout est « prioritaire », plus rien ne l'est.
Nous allons donc voir pourquoi les carousels posent problème, dans quels cas ils peuvent rester pertinents, et quelles alternatives privilégier.
Pourquoi les carousels sont une mauvaise idée ?
Personne ne les regarde
Le gouvernement canadien a documenté le phénomène : sur les carousels promotionnels, l’écrasante majorité des clics se fait sur la première slide. Les suivantes sont à peine vues.
C’est une forme de banner blindness : les utilisateurs ignorent les zones qui ressemblent à de la pub ou à du contenu rotatif.
Dès qu’un message important est caché en slide 2, 3 ou 4, il est invisible pour la plupart des visiteurs.
Personne ne clique dessus
L’engagement sur les slides au-delà de la première est très faible.
Mettre plusieurs calls-to-action ou plusieurs messages prioritaires dans un carousel dilue l’attention : au lieu d’un message fort, on a au contraire plusieurs messages noyés.
Les études UX le confirment : peu de clics, peu de scroll au-delà du premier élément.
Ça ralentit les sites et nuit au SEO
Un carousel charge souvent plusieurs images ou blocs en même temps. Ça augmente le temps de chargement et peut dégrader le LCP (Largest Contentful Paint).
Petit rappel sur l'importance des performances dans cet article.
Pour le SEO, le contenu n'est pas hiérarchisé correctement : c'est flou.
Un enfer pour l’accessibilité
Gérer correctement un carousel au clavier ou avec un lecteur d’écran demande beaucoup de soin.
Auto-rotation, focus, ARIA (roles, labels, états) : les erreurs sont fréquentes et pénalisent les utilisateurs en situation de handicap.
Beaucoup de carousels en production sont inutilisables pour une partie des utilisateurs.
Charge cognitive et rythme imposé
L’auto-rotation impose un rythme à l’utilisateur. Il doit lire ou agir avant que la slide ne change ou chercher comment arrêter le carousel.
Ça crée du stress et de la charge cognitive inutile. Un contenu statique ou contrôlé par l’utilisateur est plus confortable.
Contre-productif : dilution et absence de hiérarchie
Mettre plusieurs messages « au même niveau » dans un carousel revient à ne pas prioriser. Or, une bonne page a une hiérarchie claire : un message principal, puis des compléments.
Le carousel donne l’illusion de tout montrer alors qu’il cache l’essentiel et brouille les priorités.
Vous pouvez tester par vous-même sur shouldiuseacarousel.com.
Dans quels cas les carousels restent pertinents ?
Listes sur mobile
Sur mobile, les listes horizontales (carousels de cartes, de produits, de contenus) sont très répandues dans les OS (iOS, Android) et dans les apps natives.
Les utilisateurs ont appris à faire défiler horizontalement pour découvrir du contenu homogène (ex. « À voir aussi », « Similaires »).
Dans ce contexte, les carousels peuvent rester intuitifs à condition qu’il soit affordant.
Affordance : le fait que l'élément UI « suggère » son usage (scroll horizontal visible, bords coupés, flèches discrètes, ou inertie au swipe). Sans indice clair, l’utilisateur ne sait pas qu’il peut faire défiler.
L’exemple Netflix
Netflix utilise des bandes horizontales pour des catalogues homogènes (films, séries par catégorie).
Ici, les carousels servent à explorer du contenu de même type, pas à porter plusieurs messages prioritaires différents.
Le contrôle est entièrement côté utilisateur (pas d’auto-rotation sur les bandes principales).
Donc objectivement, dans certains cas, les carousels peuvent rester pertinents.
Autres cas acceptables
- Galerie d’images d’un même produit ou d’un même album : contenu homogène, rôle secondaire.
- Témoignages ou citations en rotation, si la première suffit à donner le ton et que les autres sont optionnels.
- Carousels secondaires, pas en hero, avec contrôle total (pas d’auto-rotation ou pause évidente).
Bonnes pratiques si vous gardez un carousel
- Contrôle total par l’utilisateur : pas d’auto-rotation, ou bouton pause visible et focus clair.
- Performance maximale : lazy load des slides non visibles, une seule image prioritaire pour le LCP.
- Nombre de slides limité : 3 à 5 max pour un bandeau promotionnel.
Quelles alternatives ? Et quand les utiliser
Hero unique pour une landing
Pour une landing ou une homepage, un hero avec un seul message et une seule CTA est en général beaucoup plus impactant qu’un carousel.
Ça priorise clairement : un titre, un sous-titre, un bouton. Pas de concurrence entre slides.
Grille ou liste de cartes
Pour plusieurs éléments de même importance (produits, articles, features), une grille ou une liste permet de tout montrer d’un coup (ou avec un scroll vertical naturel)
Onglets (tabs)
Avec plusieurs blocs de contenu distincts (ex. Description / Avis / Specs / Pricing), les onglets sont parfaitement adaptés : l’utilisateur choisit ce qu’il consulte. Le contenu n’est pas imposé par une rotation.
Narration verticale / scroll
Pour raconter une histoire ou enchaîner des sections (ex. présentation produit, parcours), un scroll vertical avec des sections bien séparées est souvent plus lisible et plus accessible qu’un carousel horizontal.
L’utilisateur garde le contrôle et la structure est claire.
Checklist : Faut-il un carousel ?
Questions critiques (red flags)
- Importance des slides : chaque slide contient-elle un message prioritaire ? Si oui, pourquoi les cacher ? Pas de carousel.
- Message principal : le message le plus important est-il en première slide ? Si non, il sera ignoré par la majorité.
- CTA critique : est-ce qu'il y a un call-to-action principal dans le carousel ? Si oui, c’est risqué : peu d’utilisateurs iront au-delà de la première slide.
- Contenu indispensable : est-ce que du contenu essentiel dépend des slides 2, 3, 4… ? Si oui, pas de carousel, les utilisateurs n'iront pas voir le contenu essentiel.
- Auto-rotation : est-ce qu'on en a vraiment besoin ? Ça aggrave presque toujours les problèmes d’engagement et d’accessibilité.
Questions de validation
- L’utilisateur a-t-il un contrôle total (pas d’auto-rotation, ou pause claire) ?
- Le contenu est-il homogène (ex. galerie d’images) plutôt qu’un mix de messages différents ?
- Le carousel est-il secondaire (pas en hero, pas le seul moyen d’accéder à une info importante) ?
- Le message est-il compréhensible sans interaction (première slide suffisante) ?
Si les réponses aux questions critiques sont mauvaises, remplacez le carousel par un hero, une grille ou une liste.
Conclusion : le carousel comme symptôme, pas comme solution
Le carousel n’est souvent qu’un symptôme : on n’a pas voulu (ou pas pu) prioriser le contenu.
En pratique, il dilue l’attention et cache l’essentiel.
La responsabilité revient au produit : qu’est-ce qui compte vraiment pour l’utilisateur à cet endroit de la page ?
Une fois la priorité clarifiée, un hero, une grille ou une liste apportent plus de clarté et d’impact.
Moins de composants qui se battent pour l’attention, c’est plus de clarté et d’impact. Remplacer un carousel par un choix de priorisation est souvent la meilleure décision.