Le carrousel d’images en haut de page (le fameux « slider hero ») reste l’un des patterns les plus répandus sur les pages d’accueil. C’est pourtant l’un des moins performants. Depuis des années, les travaux d’ergonomie convergent : l’essentiel de l’attention se concentre sur le premier volet, presque personne ne pilote le carrousel, et l’empilement d’images pleine largeur pèse sur les performances. Voici 12 alternatives modernes, avec pour cinq d’entre elles le code HTML/CSS prêt à coller.
En bref : le slider hero performe rarement parce que l’attention et les clics se concentrent sur le premier slide, que les flèches et pastilles sont très peu utilisées, et que plusieurs visuels lourds dégradent le LCP (constat documenté par le Nielsen Norman Group). Le remplacement le plus sûr est un hero statique clair : une image, un titre, un CTA. Selon votre secteur, onze autres patterns (vidéo, animation, onglets, recherche, quiz, preuve sociale…) sont détaillés ci-dessous.
Pourquoi le slider hero déçoit
Le carrousel part d’une bonne intention : ne pas avoir à trancher entre plusieurs messages, et les faire défiler à tour de rôle. En pratique, il concentre plusieurs faiblesses bien documentées par la recherche en ergonomie.
- Un seul slide compte vraiment. Les analyses du Nielsen Norman Group sur les carrousels montrent que les volets au-delà du premier sont très peu vus. Le message que vous placez en slide 2 ou 3 touche une fraction minime de vos visiteurs.
- Presque personne ne pilote le carrousel. Flèches et pastilles de navigation sont rarement touchées : la rotation est subie, pas choisie. L’auto-défilement pose en plus des problèmes d’accessibilité (contenu qui bouge, temps de lecture imposé).
- Un coût de performance. Plusieurs images pleine largeur alourdissent la page et pèsent sur le LCP, en particulier sur mobile. La page d’accueil est l’endroit le plus précieux du site : c’est là que ce poids fait le plus mal.
En clair, vous payez de la bande passante et du temps de chargement pour montrer un message à une minorité de visiteurs. Dans la grande majorité des cas, un hero clair et unique convertit mieux.
Les 12 alternatives
Pour chaque pattern, nous indiquons un ordre de grandeur d’effort de développement (front, hors production de visuels) et les contextes où il donne les meilleurs résultats. Ces repères sont des estimations d’implémentation, à ajuster selon votre stack et votre design system.
1. Hero statique haute conversion
Une image (ou une illustration), un titre clair, un sous-titre court, un CTA primaire. Point. C’est ce qui fonctionne le plus souvent, précisément parce que le message est unique et immédiat.
- Effort dev : environ 2 h
- Bon quand : SaaS B2B, services professionnels, finance, tout site à message unique
2. Hero vidéo background
Vidéo silencieuse en boucle, courte (8 à 15 s), couvrant 50 à 70 % de la fold. Texte par-dessus avec un calque sombre pour la lisibilité. À réserver si vous avez une vraie bande montrable.
- Effort dev : environ 3 h, plus la production vidéo
- Bon quand : hôtellerie, voyage, mode, immobilier prestige
3. Hero animation Lottie
Animation vectorielle légère (fichier JSON de quelques dizaines de Ko) qui anime un schéma produit, un personnage ou un parcours. Performante sur mobile, elle modernise sans casser la perf.
- Effort dev : environ 4 h, plus la production motion
- Bon quand : SaaS, fintech, edtech, healthtech
4. Hero produit unique (un produit, une USP)
Une seule image produit en hero, gros plan soigné, USP en titre, prix visible si pertinent, CTA « Voir le produit » ou « Ajouter au panier ». Pratique pour l’e-commerce avec un produit phare ou une nouveauté.
- Effort dev : environ 2 h
- Bon quand : e-commerce DTC, marques mono-produit
5. Hero tabs (audiences cliquables)
Des onglets en haut de hero : « Particulier / Professionnel / Investisseur » (ou l’équivalent métier). Chaque onglet révèle un hero spécifique. À la différence du slider, c’est l’utilisateur qui choisit, pas une rotation aveugle.
- Effort dev : environ 5 h
- Bon quand : assurance, banque, énergie, sites multi-segments
6. Hero quiz interactif
« En 3 questions, on vous oriente vers la bonne offre ». Le hero devient un mini-quiz. L’engagement est fort, mais cela demande un vrai travail d’arborescence derrière.
- Effort dev : environ 12 h
- Bon quand : assurance, mutuelle, formation, beauté DTC
7. Hero search bar
Une barre de recherche centrale et large, focus automatique sur desktop, suggestions en dessous. Modèle Airbnb, Booking ou marketplaces. À réserver aux sites où la recherche est le point d’entrée logique.
- Effort dev : environ 6 h, plus le back de recherche
- Bon quand : marketplaces, annuaires, e-commerce à large catalogue
8. Hero stats live
Trois ou quatre chiffres clés (clients servis, montant économisé, projets livrés, satisfaction), avec des compteurs animés au scroll. Crédibilise immédiatement, à condition que les chiffres soient réels.
- Effort dev : environ 3 h
- Bon quand : conseil, SaaS B2B, fintech
9. Hero preuve sociale (logos clients)
Un bandeau de logos clients en hero, juste sous le titre. À réserver à ceux qui peuvent aligner des références reconnues de leur secteur.
- Effort dev : environ 1 h
- Bon quand : B2B enterprise, conseil, agences
10. Hero comparatif (vous vs solution classique)
Un tableau côte à côte : « Solutions classiques » vs « Nous », quatre lignes maximum. Ton direct, sans nommer de concurrent.
- Effort dev : environ 2 h
- Bon quand : SaaS challengers, fintech, services disruptifs
11. Hero avant / après
Un slider horizontal (le bon usage du slider) qui montre un avant/après produit ou service. Ici, le glissement est piloté par l’utilisateur et sert un message unique.
- Effort dev : environ 4 h
- Bon quand : beauté, rénovation, photographie, fitness
12. Hero AR / 3D (e-commerce premium)
Un modèle 3D du produit pivotable au scroll ou au drag, voire un viewer AR sur mobile. Lourd techniquement, mais le luxe et le mobilier en font une signature. À ne tenter que si la performance est maîtrisée.
- Effort dev : environ 20 h, plus les assets 3D
- Bon quand : luxe, mobilier, lunetterie, sneakers premium
Tableau récapitulatif
| Pattern | Bon quand | Effort dev |
|---|---|---|
| Hero statique | SaaS B2B, services pros, message unique | ~2 h |
| Hero vidéo bg | Hôtellerie, voyage, mode | ~3 h + prod |
| Hero Lottie | SaaS, fintech, edtech | ~4 h + motion |
| Hero produit unique | E-commerce DTC | ~2 h |
| Hero tabs | Assurance, banque, multi-segments | ~5 h |
| Hero quiz | Assurance, formation, beauté | ~12 h |
| Hero search bar | Marketplaces, annuaires | ~6 h + back |
| Hero stats live | Conseil, SaaS B2B | ~3 h |
| Hero preuve sociale | B2B enterprise, conseil | ~1 h |
| Hero comparatif | SaaS challengers, fintech | ~2 h |
| Hero avant/après | Beauté, rénovation, fitness | ~4 h |
| Hero AR/3D | Luxe, mobilier | ~20 h |
Deux exemples réels observés
Pour illustrer deux des patterns ci-dessus, voici deux pages d’accueil françaises que nous avons capturées le 7 juillet 2026. Nous décrivons seulement ce que montre la capture, sans extrapoler.
Qonto ouvre sur un hero statique : une seule image, un titre unique (« Compte pro. Facturation électronique. Création d’entreprise. ») et un CTA « Découvrir nos offres ». Aucun carrousel, un message net.
Doctolib ouvre sur un hero search bar : le titre « Vivez en meilleure santé » surmonte une barre de recherche (nom, spécialité, lieu) qui est le point d’entrée principal du service.
Pour d’autres modèles à étudier, voyez nos 20 exemples de pages d’accueil réussies.
Code prêt à coller pour 5 alternatives
Hero statique haute conversion
<section class="hero-static">
<div class="hero-static__inner">
<p class="eyebrow">SaaS facturation B2B</p>
<h1>Encaissez vos factures 12 jours plus tôt en moyenne</h1>
<p class="subtitle">
Relance automatique, multi-canal, sans effort manuel.
Essai gratuit 14 jours, sans carte bancaire.
</p>
<div class="cta-row">
<a class="cta-primary" href="/inscription">Démarrer mon essai gratuit</a>
<a class="cta-secondary" href="/demo">Voir une démo (2 min)</a>
</div>
<p class="trust">Plus de 1 200 PME nous font confiance.</p>
</div>
<div class="hero-static__visual">
<img src="/hero/dashboard.webp" alt="Tableau de bord facturation" width="800" height="600" loading="eager" fetchpriority="high">
</div>
</section>.hero-static {
display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
max-width: 1200px; margin: 0 auto; padding: 80px 24px;
}
.hero-static__inner .eyebrow {
font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
color: #2563eb; font-weight: 600; margin: 0 0 12px;
}
.hero-static h1 {
font-size: clamp(32px, 4vw, 52px); line-height: 1.1; margin: 0 0 16px;
font-weight: 700; color: #0f172a;
}
.hero-static .subtitle {
font-size: 18px; line-height: 1.5; color: #475569; margin: 0 0 24px;
}
.cta-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cta-primary {
background: #0f172a; color: #fff; padding: 14px 24px; border-radius: 10px;
font-weight: 600; text-decoration: none;
}
.cta-secondary {
padding: 14px 24px; border-radius: 10px; text-decoration: none; color: #0f172a;
border: 1px solid #cbd5e1; font-weight: 600;
}
.trust { font-size: 13px; color: #64748b; }
.hero-static__visual img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 24px 48px -16px rgba(2,6,23,.18); }
@media (max-width: 900px) { .hero-static { grid-template-columns: 1fr; padding: 48px 16px; } }Hero vidéo background
<section class="hero-video">
<video class="hero-video__bg" autoplay muted loop playsinline poster="/hero/poster.webp">
<source src="/hero/loop.webm" type="video/webm">
<source src="/hero/loop.mp4" type="video/mp4">
</video>
<div class="hero-video__overlay"></div>
<div class="hero-video__content">
<h1>L'hôtel que vous n'oublierez pas</h1>
<p>Suites face mer, restaurant étoilé, spa Cinq Mondes. À 1 h de Paris.</p>
<a class="cta-primary" href="/reserver">Vérifier les disponibilités</a>
</div>
</section>.hero-video { position: relative; height: 88vh; min-height: 560px; overflow: hidden; color: #fff; }
.hero-video__bg {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero-video__overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
z-index: 1;
}
.hero-video__content {
position: relative; z-index: 2; max-width: 720px;
padding: 0 24px; height: 100%; display: flex; flex-direction: column;
justify-content: center; gap: 20px;
}
.hero-video__content h1 { font-size: clamp(40px, 6vw, 72px); margin: 0; font-weight: 700; }
.hero-video__content p { font-size: 18px; opacity: .92; max-width: 540px; }
.hero-video .cta-primary { display: inline-block; background: #fff; color: #111; }
@media (prefers-reduced-motion: reduce) {
.hero-video__bg { display: none; }
.hero-video { background: url('/hero/poster.webp') center/cover no-repeat; }
}Hero animation Lottie
<section class="hero-lottie">
<div class="hero-lottie__copy">
<h1>Comprenez où passe votre cash en 30 secondes</h1>
<p>Connecte vos comptes, catégorise tout, vous suivez le pouls de votre boîte sans Excel.</p>
<a class="cta-primary" href="/essai">Connecter mes comptes</a>
</div>
<div class="hero-lottie__viz">
<dotlottie-player
src="/hero/cash-flow.lottie"
autoplay loop speed="1"
style="width: 100%; height: auto;">
</dotlottie-player>
</div>
</section>
<script src="https://unpkg.com/@dotlottie/player-component@2/dist/dotlottie-player.mjs" type="module"></script>.hero-lottie {
display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
max-width: 1200px; margin: 0 auto; padding: 80px 24px;
}
.hero-lottie h1 { font-size: clamp(32px, 4vw, 52px); margin: 0 0 16px; }
.hero-lottie p { font-size: 18px; color: #475569; margin: 0 0 24px; }
.hero-lottie__viz { background: #f8fafc; border-radius: 24px; padding: 24px; }
@media (max-width: 900px) { .hero-lottie { grid-template-columns: 1fr; padding: 48px 16px; } }Hero tabs (3 audiences)
<section class="hero-tabs">
<nav class="tabs" role="tablist">
<button role="tab" aria-selected="true" data-target="part">Particulier</button>
<button role="tab" aria-selected="false" data-target="pro">Professionnel</button>
<button role="tab" aria-selected="false" data-target="invest">Investisseur</button>
</nav>
<div class="tab-panels">
<div class="panel active" id="part">
<h1>Investissez à partir de 50 €</h1>
<p>Premier compte ouvert en 3 minutes, sans frais d'entrée.</p>
<a class="cta-primary" href="/particulier">Ouvrir mon compte</a>
</div>
<div class="panel" id="pro" hidden>
<h1>Placez la trésorerie de votre PME</h1>
<p>Rendement net jusqu'à 3,8 %, capital garanti à 100 %.</p>
<a class="cta-primary" href="/pro">Demander un devis</a>
</div>
<div class="panel" id="invest" hidden>
<h1>Diversifiez sur des actifs premium</h1>
<p>Private equity, immobilier locatif premium, dette privée.</p>
<a class="cta-primary" href="/invest">Prendre rendez-vous</a>
</div>
</div>
</section>
<script>
const tabs = document.querySelectorAll('.tabs button');
const panels = document.querySelectorAll('.panel');
tabs.forEach(tab => tab.addEventListener('click', () => {
tabs.forEach(t => t.setAttribute('aria-selected', t === tab));
panels.forEach(p => p.hidden = p.id !== tab.dataset.target);
}));
</script>.hero-tabs { max-width: 1100px; margin: 0 auto; padding: 64px 24px; }
.tabs { display: flex; gap: 8px; border-bottom: 1px solid #e2e8f0; margin-bottom: 32px; }
.tabs button {
background: transparent; border: 0; padding: 14px 18px; font-size: 15px;
font-weight: 500; color: #64748b; cursor: pointer; border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.tabs button[aria-selected="true"] { color: #0f172a; border-color: #2563eb; font-weight: 700; }
.panel h1 { font-size: clamp(32px, 4vw, 48px); margin: 0 0 16px; }
.panel p { font-size: 18px; color: #475569; margin: 0 0 24px; max-width: 600px; }Hero quiz
<section class="hero-quiz">
<h1>En 3 questions, on vous oriente</h1>
<p class="lead">Trouvez l'offre la plus adaptée en moins de 30 secondes.</p>
<div class="quiz" data-step="1">
<div class="step" data-step="1">
<p class="question">Vous êtes :</p>
<div class="choices">
<button data-next="2" data-value="particulier">Un particulier</button>
<button data-next="2" data-value="pro">Une entreprise</button>
<button data-next="2" data-value="asso">Une association</button>
</div>
</div>
<div class="step" data-step="2" hidden>
<p class="question">Votre besoin principal :</p>
<div class="choices">
<button data-next="3" data-value="compte">Ouvrir un compte</button>
<button data-next="3" data-value="credit">Obtenir un crédit</button>
<button data-next="3" data-value="epargne">Faire fructifier de l'épargne</button>
</div>
</div>
<div class="step" data-step="3" hidden>
<p class="question">Votre horizon :</p>
<div class="choices">
<button data-next="done" data-value="court">Moins de 6 mois</button>
<button data-next="done" data-value="moyen">6 à 24 mois</button>
<button data-next="done" data-value="long">Plus de 24 mois</button>
</div>
</div>
<div class="step" data-step="done" hidden>
<p class="question">On a votre profil. Recevez votre orientation par email :</p>
<form>
<input type="email" placeholder="vous@exemple.com" required>
<button type="submit" class="cta-primary">Recevoir mon orientation</button>
</form>
</div>
</div>
<div class="progress">
<span class="bar" style="width:33%"></span>
</div>
</section>
<script>
const quiz = document.querySelector('.quiz');
const bar = quiz.parentElement.querySelector('.bar');
const steps = ['1','2','3','done'];
quiz.querySelectorAll('button[data-next]').forEach(btn => btn.addEventListener('click', () => {
const next = btn.dataset.next;
quiz.querySelectorAll('.step').forEach(s => s.hidden = s.dataset.step !== next);
bar.style.width = ((steps.indexOf(next) + 1) / steps.length * 100) + '%';
}));
</script>.hero-quiz { max-width: 760px; margin: 0 auto; padding: 64px 24px; text-align: center; }
.hero-quiz h1 { font-size: clamp(32px, 4vw, 48px); margin: 0 0 8px; }
.hero-quiz .lead { color: #475569; margin: 0 0 32px; }
.quiz .question { font-size: 18px; font-weight: 600; margin: 0 0 16px; }
.choices { display: grid; gap: 10px; }
.choices button {
padding: 14px 18px; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px;
font-size: 15px; cursor: pointer; text-align: left;
}
.choices button:hover { border-color: #2563eb; background: #f1f5ff; }
.progress { margin-top: 24px; height: 4px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.bar { display: block; height: 100%; background: #2563eb; transition: width .3s ease; }Outils pour concevoir et tester votre hero
- Framer : idéal pour prototyper et déployer un hero animé directement en production sans développement.
- Webflow : CMS intégré, plus mature pour les sites multi-pages.
- Figma : indépassable pour la phase design, mais ne déploie pas (export en HTML/CSS via des plugins tiers).
- LottieFiles : bibliothèque et éditeur d’animations Lottie, avec une offre gratuite.
- Un outil d’A/B testing : indispensable pour comparer votre nouveau hero à l’ancien slider et mesurer le gain réel plutôt que de le supposer.
Les tarifs de ces éditeurs évoluent régulièrement : vérifiez-les sur leurs pages officielles avant de choisir. Si vous voulez confier le rebuild à une équipe, voyez nos agences spécialisées Design. Pour le choix d’un outil de design d’interface (Figma, Sketch), et pour l’A/B testing, les logiciels d’A/B testing.
FAQ
Le slider hero est-il toujours à éviter ?
Presque toujours, mais il existe un cas où il peut se défendre : un site événementiel avec plusieurs temps forts distincts à promouvoir simultanément (par exemple plusieurs saisons ou éditions en parallèle). Hors de ce cas, un hero clair et unique le bat dans la grande majorité des situations.
Combien de temps pour passer d’un slider à un hero statique ?
Comptez de l’ordre de 4 à 8 heures de développement front, plus 1 à 2 jours de design pour le visuel hero si vous n’avez rien de réutilisable. C’est souvent l’une des optimisations au meilleur rapport effort/impact.
Le hero vidéo est-il un risque pour le SEO et le LCP ?
Pas si vous chargez un poster image léger (WebP) immédiat et que la vidéo démarre après le LCP. Sans poster, la vidéo peut faire grimper le LCP à plusieurs secondes sur mobile.
Combien coûte une animation Lottie de qualité ?
À titre indicatif, comptez une fourchette de quelques centaines à quelques milliers d’euros pour une animation hero soignée réalisée par un motion designer freelance, selon la complexité et la durée. Demandez toujours un devis précis.
Hero quiz : quelle longueur maximale ?
Trois questions au maximum pour rester en hero. Au-delà, l’abandon grimpe vite : mieux vaut alors sortir le quiz du hero et le mettre sur une page dédiée.
Faut-il tester en A/B contre le slider existant ?
Oui. Prévoyez au minimum deux semaines de test avec un volume de trafic significatif, sinon vous mesurez du bruit plutôt qu’un vrai écart.
