Carrousels interactifs dans les emails : prouesse technique ou piège stratégique ?

Les carrousels interactifs sont un marronnier du marketing. Depuis plusieurs années, ils reviennent régulièrement comme “l’innovation” qui va transformer l’emailing et booster vos conversions. Il faut l’admettre : en démo commerciale, ça fonctionne. Les transitions sont fluides, les images glissent élégamment, les boutons réagissent avec des effets de « hover ». Enfin de l’interactivité dans nos vieux emails !

Avant de plonger dans les implications techniques, UX et stratégiques, commençons par rappeler ce dont nous parlons exactement.

C’est quoi un carrousel ?

Un carrousel ; appelé aussi : slider, image rotator, slideshow ou, dans les présentations les plus ambitieuses, “module héro interactif” ; est un composant d’interface permettant d’afficher plusieurs contenus dans un même espace (zoning), en les faisant défiler horizontalement.

Sur un site web, vous avez accès en plus du HTML et du CSS à du JavaScript. Couplé à un bon usage d’ARIA vous pouvez assez facilement avoir ce type de composant robuste techniquement.

Dans un email, c’est autre chose.

Toujours pas de JavaScript (faille de sécurité, problème de délivrabilité…). Pas de détection d’évènements. Pas de DOM dynamique. Le support d’ARIA on y reviendra.

Donc, pour créer l’illusion du carrousel, nos intégrateurs rockstar détournent ce que le seul HTML leur offre : des éléments de formulaire (inputs, labels) et quelques pseudo-classes CSS. C’est ingénieux, c’est créatif, certains diront que c’est innovant, mais c’est surtout tout sauf de la bonne pratique de conception.

Comment fonctionne un carrousel dans un email ?

Pour recréer une interaction inexistante dans le support email, nous allons devoir user et ruser de plusieurs techniques :

• des inputs (radio/checkbox) masqués,
• des labels utilisés comme boutons,
• la pseudo-classe :checked pour alterner les vues,
• des transitions CSS simuler l’animation et avec un support limité,
• et enfin de nombreuses couches de « fallback » (code supplémentaire pour les cas dans lesquels tout ceci ne fonctionnerait pas) pour que le contenu reste consommable (oui je ne me risquerai pas à dire accessible car ces considérations sont loins, très loins.)

Ce n’est pas du “bricolage”, c’est un concept de codage basé sur le contournement.
Une prouesse technique qui peut impressionner les intégrateurs moins aguerris mais surtout les décideurs ou équipes marketing lassés de voir toujours les mêmes emails.

Impressionner… du moins, jusqu’à ce que le teste de l’email soit réaliser en Live sur leur propre boite de réception.

Compatibilité : un module pour une minorité

Il faut être clair et transparent : un carrousel interactif, dans sa version fonctionnelle, n’existe vraiment que dans l’écosystème Apple (et majoritairement sur Apple Mail). Et d’autres pour lesquels il faudra ruser encore plus comme Orange.

Les autres environnements, Gmail en tête de liste, ignoreront tout ou partie de l’interactivité et des animations. Ce qui impose des versions statiques (les fameux fallback), ou une redirection vers une version web (pratique ! Il est où l’effet Waouh à l’ouverture de l’email ?).

Connaitre vos environnements d’ouverture va donc être cruciale et ça malheureusement c’est une information difficile à consolider. Cela dépend grandement de votre positionnement, secteur d’activité… mais clairement si cela concerne 25% de votre audience c’est déjà énorme.
Le reste (la majorité donc) ne verra jamais le dispositif interactif, seulement une image ou une alternative simplifiée (dégradation progressive).

Quand on travaille sur la performance et la rationalisation des pratiques, ce chiffre invite à la prudence. Alors si en plus vous avez un quelconque intérêt pour l’accessibilité ou l’éco-conception, passez votre chemin.

UX : le carrousel est-il une bonne idée ?

Là où le bât blesse vraiment, c’est que même dans les contextes où les carrousels fonctionnent parfaitement, c’est-à-dire sur le web avec un navigateur moderne, leur efficacité est très contestée.

Nous pourrions donc apprendre de nos erreurs et profiter des expériences déjà menées au lieu de simplement vouloir les mimer.

Les données compilées par DoisJeUtiliser.fr, basées sur les études du Nielsen Norman Group, Erik Runyon ou encore ConversionXL, sont sans ambiguïté :

• 80 % à 90 % des interactions se concentrent sur le premier slide.
• Les utilisateurs ne font quasiment jamais défiler les slides.
• Les CTA placés après le premier slide sont statistiquement invisibles.
• Les carrousels détournent l’attention plus qu’ils ne la guident.
• Sur mobile, la friction est encore plus forte (zones cliquables trop petites, concurrence avec le scroll).

Dans un email, un support plus contraint, moins standardisé et où l’attention est fragile (vous connaissez le temps de consultation de vos emails ?), ces problèmes ne disparaissent pas : ils s’amplifient !

Accessibilité : un vrai problème de fond

En tant que référent accessibilité, je dois être direct : un carrousel interactif dans un email ne peut pas être pleinement accessible.

Les raisons sont structurelles :

• Les comportements reposent sur des détournements d’inputs : la navigation clavier devient parfois imprévisible.
• Le support ARIA est extrêmement limité dans les clients email.
• Les lecteurs d’écran interprètent difficilement la structure, les changements d’état et l’ordre logique.
• Les fallbacks introduisent des divergences entre versions : risque de perte d’information.

On peut essayer de réduire la casse autant que l’on veut, jamais la résoudre.

Et cela aura des effets de bord sur bien d’autres aspects : bonjour le poids de votre HTML et coucou le mail tronqué sur gmail. Lui qui ne peut déjà pas afficher correctement votre carrouse).

Si vous êtes engagés sur l’accessibilité ou directement concernés par les obligations légales, cela devrait déjà disqualifier l’usage d’un carrousel email.

Éco-conception et économie de moyens : le grand oublié

Si on parle de sobriété numérique, le carrousel interactif coche toutes les cases… de ce qu’il vaut mieux éviter.

• Code spécifique pour le carrousel en lui même (HTML et CSS)
• Images souvent dupliquées (pour peu qu’elles ne soient pas optimisées non plus)
• Fallbacks multiples, donc code encore plus lourd également
• Test et maintenance plus énergivores
• Rendements faibles (pourcentage d’utilisateurs réellement exposés au composant)

L’éco-conception repose sur un principe simple : produire le moindre effort pour arriver au résultat attendu.

Si l’objectif est d’envoyer l’email le plus léger, le plus clair et le plus efficient possible, on en est loin. Un carrousel est l’exemple parfait d’une dépense de moyens disproportionnée par rapport au bénéfice réel.

Coûts et dette technique : un investissement sous-estimé

Un carrousel n’est pas qu’un “module créatif”. Il impose des coûts directs et indirects :

Conception

Plusieurs variantes graphiques, versions fallback, contraintes d’accessibilité, micro-interactions… Chaque étape demande des allers-retours supplémentaires.

Intégration

C’est l’un des modules les plus complexes à coder proprement : conditions Apple, duplications, structure interactive, optimisations anti-bug, gestion des zones de clic.

Tests et maintenance

Contrairement à un module statique, un carrousel nécessite : un test d’interaction complet et une validation de la version static de fallback.

Chaque mise à jour, chaque variation de contenu, chaque nouvelle campagne impose de prévenir les régressions possibles.

C’est exactement ce qui alimente la dette technique dans un design system :
on maintient un composant lourd dont l’usage réel est marginal.

Mais pourquoi autant de « hype » ? Existe-t-il des cas où un carrousel peut être pertinent ?

À force de déconstruire l’outil, on pourrait croire qu’il est inutile par principe. Ce n’est pas le cas : il existe des situations où le carrousel reste défendable.

• Bases très Apple-dominantes (certains secteurs premium ou communautés créatives)
• Campagnes événementielles où l’effet visuel est central
• Démonstrations produit en contexte maîtrisé
• Proof-of-concepts destinés à valider une maturité technique
• Communication interne sur environnement uniformisé

Ces cas restent minoritaires, mais ils existent. Le tout est de savoir pourquoi on le fait et pour qui.

Notre carrousel email développé avec Rémi Parmentier

La conception de ce carrousel avait fait l’objet d’un brief bien précis : Nous aimerions proposer à nos clients un module « Carrousel ». Il doit pouvoir contenir au moins deux « slides » (et plus). Dans l’idéal, il serait aussi possible de choisir le nombre de vignettes présentes dans chaque slide (un, deux, trois produits). La solution de fallback doit être pertinente.

Les contraintes et complexités à prendre en compte

• Une version responsive qui s’adapte en largeur à la résolution de l’écran. Priorité 1.
• Un support optimal de la fonctionnalité et une version de fallback qui tient la route. Priorité 1.
• Des flèches de navigation « gauche » et « droite ». Priorité 1.
• Des liens différents sur les produits. Priorité 1.
• Des flèches de navigation qui se positionnent le mieux possible en responsive. Priorité 2.
• La possibilité de faire tourner le carrousel « à l’infini ». Priorité 2.
• Possibilité d’ajouter un call to action personnalisable en bas de chaque produit. Priorité 3.
• Si possible, pouvoir ajouter du contenu « avant » le visuel produit. Priorité 3.

Et vous savez quoi ? Et bien on ne regrette pas notre choix. Car toutes les contraintes et souhaits ont été respectés. On se retrouve sans aucun doute avec un carrousel inédit, qui propose un support acceptable et une expérience particulièrement et innovante dans un email.

Les avantages de ce carrousel

• Chaque slide peut contenir du HTML : images, textes, boutons…
• Cela veut aussi dire que vous pouvez mettre des liens différents sur chaque slide, sur chaque produit, sur chaque texte…
• Vous pouvez changer l’ordre du contenu dans les slides sans aucun problème: titre, image, bouton. Les possibilités sont infinies !
• La version responsive s’adapte à toutes les largeurs d’écran.
• Si le carrousel n’est pas actif, seule la première slide apparaît, pour éviter un scroll trop long dans l’email. Pas besoin de prévoir une solution de fallback trop spécifique.
• Le carrousel tourne « à l’infini ».

Et en plus il est disponible dans notre email builder maison LePatron

Industrialisation : dans un design system email ? dans LePatron ?

Chez Badsender, nous concevons des design systems email destinés à durer, à être adoptés, et à minimiser la dette technique. Dans ce cadre, un carrousel interactif est rarement un bon candidat.

Néanmoins, LePatron, notre email builder open source, est parfaitement capable d’héberger ce type de module dans un contexte maîtrisé.

Le message est simple :

• Nous savons faire.
• Nous savons industrialiser.
• Nous savons optimiser.

Mais nous savons aussi dire : ce n’est pas la meilleure idée à industrialiser dans un design system destiné à servir toute votre organisation.

Un design system sert à faire mieux, plus vite, plus simplement, pas à multiplier les exceptions techniques.

Dans les autres builder, ça va dépendre. Bon nombre on fait le choix de proposer des carrousels via la technologie AMP4email de Google. Là clairement c’est encore un autre sujet, aussi bien techniquement que dans les limitations et le support (uniquement google en application pour faire court).

Conclusion : une prouesse technique n’est pas toujours une bonne stratégie

Chez Badsender, nous maîtrisons l’intégralité de la chaîne email : design, intégration, accessibilité, performance, industrialisation, architecture de design system, délivrabilité.

Le carrousel ?
Oui, on sait le designer, l’intégrer et l’industrialiser.

Mais notre rôle de consultant expert en email marketing, ce n’est pas de choisir “ce qui brille le plus”, mais ce qui fonctionne le mieux et répond à un objectif pour le plus grand nombre.

D’ailleurs, c’est quoi votre objectif avec la mise en place d’un carrousel ?