Un client m'envoie un lien l'autre jour, avec ce message : "Regarde, on a refait notre section hero, le taux de rebond a grimpé de 14 % en une semaine." Je clique. J'attends trois secondes. Rien. Le bandeau vidéo de 6 Mo se charge, le texte blanc sur fond gris clair apparaît lentement, et je comprends : il n'a pas refait son hero. Il a ajouté une jolie animation par-dessus un problème de fond.
La section hero, c'est l'équivalent du seuil de votre boutique. Pas la vitrine—le seuil. Ce moment où quelqu'un hésite, un pied déjà dedans, et décide en deux secondes s'il entre ou s'il repart. Vous n'avez pas droit à l'erreur, et pourtant presque tous les sites que j'audite se plantent au même endroit.
Points clés à retenir
- La section hero occupe le premier écran : elle doit répondre à "où suis-je" et "qu'est-ce que j'y gagne" en moins de 5 secondes
- Une image hero au-dessus de la ligne de flottaison est le premier élément qui pèse sur votre LCP : restez sous 200 Ko, idéalement en WebP ou AVIF
- Le H1 reste unique sur la page ; un hero sans H1 clair, c'est une page sans titre pour Google
- Il existe des cas légitimes où une section hero ne sert à rien : pages produit, listes d'articles, tableaux de bord
- Le contraste texte/fond doit viser un ratio d'au moins 4,5:1 (WCAG AA), même avec un overlay
- Un hero qui ne convertit pas n'est pas un hero raté—c'est souvent un hero trop chargé
La section hero, c'est quoi au juste (et pourquoi tout le monde se trompe)
Un bandeau horizontal en haut d'une page. Une grande zone visuelle avec un titre, parfois une image ou une vidéo, souvent un bouton. Voilà pour la définition de surface, celle que tout le monde connaît.
Ce que la définition oublie : le hero n'est pas un espace à remplir, c'est une promesse à tenir. Sa fonction réelle est de répondre à trois questions dans l'ordre, et dans cet ordre précis : "Où suis-je ?", "Est-ce pour moi ?", "Que dois-je faire maintenant ?". Un hero qui répond à la première et à la troisième en sautant la deuxième perd la moitié de son audience.
Ce qu'un hero contient vraiment
Dans les faits, un hero bien construit assemble quelques briques. Certaines sont obligatoires, d'autres non—et c'est là que la plupart des équipes se trompent, en empilant tout "parce que les concurrents le font".
- Un titre H1 — non négociable. Un seul par page, lisible en trois mots
- Une phrase de contexte — une ligne, deux maximum
- Un appel à l'action principal (et un seul bouton primaire, pas trois)
- Une image, une illustration ou un fond animé — facultatif
- Un preuve sociale : logo client, note, chiffre clé — puissant mais souvent absent
- Une navigation secondaire si votre site a plusieurs parcours
Sur un site e-commerce que j'ai repris, le hero affichait quatre boutons de tailles différentes. Quatre. Résultat : personne ne cliquait, parce que choisir entre quatre options demande un effort que l'internaute pressé ne fait pas. On est passé à un seul bouton primaire et un lien secondaire discret. Le taux de clic sur l'action principale a plus que doublé sur le trimestre suivant.
Comment une section hero se structure en HTML
Côté code, rien de magique. Une section avec un conteneur, un titre, un paragraphe, un lien bouton. La bonne pratique consiste à la baliser comme une <section> ou un <header> avec un nom accessible, et surtout à ne pas transformer un div en bouton. Le hero est visible, donc il est lu par les lecteurs d'écran dès l'arrivée sur la page—un titre mal hiérarchisé casse l'expérience pour une partie des visiteurs.
Un point que je vois rater neuf fois sur dix : le texte du hero dans une image de fond. Magnifique dans la maquette, catastrophique en pratique. Google n'y lit rien, les lecteurs d'écran non plus, et le moindre changement de copie oblige à repasser par le graphiste. Gardez le texte en HTML, l'image en CSS.
Ce qui distingue une section hero qui convertit
J'ai audité, à la main, une cinquantaine de pages d'accueil sur les deux dernières années. Le constat est brutal : celles qui convertissent ne sont pas les plus belles. Ce sont les plus rapides à comprendre.
La hiérarchie avant l'esthétique
Une règle que j'applique systématiquement : au moins trois niveaux visuels distincts dans la zone du hero. Un titre très gros, une phrase de contexte plus petite, un bouton qui tranche. Si tout a le même poids visuel, l'œil ne sait pas où aller et repart. C'est mécanique.
Avouons-le, le réflexe du designer est d'ajouter de la finesse. Le réflexe de l'utilisateur, lui, est de scanner. Ces deux réflexes se battent, et dans la vraie vie, le scanner gagne toujours.
L'image hero : le premier poste de dépense en performance
La fameuse image hero est presque toujours l'élément le plus lourd chargé en premier. C'est aussi celui qui impacte le score de chargement perçu (LCP). Sur un site vitrine que j'ai suivi, une photo pleine largeur pesait 1,8 Mo en JPEG. On est passés à la même image en AVIF, redimensionnée à la largeur d'affichage réelle : 180 Ko. Même rendu visuel, chargement perçu quasiment trois fois plus rapide. Le propriétaire m'a écrit une semaine après pour me dire que son bounce sur mobile avait baissé.
Deux réflexes qui changent tout :
- Servir l'image à la taille réelle, pas à 3000 px "au cas où"
- Utiliser le format moderne (WebP ou AVIF), jamais le PNG pour une photo
Un hero animé en vidéo de fond ? Ça peut marcher, mais pesez le prix : poids, batterie sur mobile, distractions. Sur un site d'agence créative, la vidéo fait partie de la proposition. Sur un site de service B2B, elle coûte plus qu'elle ne rapporte.
Quand ne pas mettre de section hero
Voilà le contre-angle que personne ne vous donne. Le hero n'est pas obligatoire. Sur certains sites, il dessert carrément l'objectif.
Une page produit bien conçue a sa propre anatomie : visuel du produit, prix, bouton d'achat. Un hero marketing au-dessus ne fait que retarder l'accès à ce pour quoi le visiteur est venu. Idem pour un blog : une liste d'articles n'a pas besoin d'un bandeau de 600 px de haut qui pousse le premier titre sous la ligne de flottaison. Et je ne parle même pas des tableaux de bord applicatifs, où le hero est un pur non-sens.
Ma règle, en interne : un hero n'a de sens que sur les pages où l'internaute arrive sans savoir précisément ce qu'il cherche. Page d'accueil, landing page d'acquisition, page "à propos". Partout ailleurs, il fait souvent du bruit.
Les grands types de hero, comparés
Aucun format n'est meilleur dans l'absolu. Ce tableau résume ce que j'ai constaté sur le terrain, avec les compromis de chaque approche.
| Type de hero | Force | Limite | Quand le choisir |
|---|---|---|---|
| Texte sur fond uni | Rapide, lisible, accessibilité facile | Peu mémorable | SaaS, B2B, information avant tout |
| Texte + image latérale | Montre le produit ou l'usage | Poids de l'image | E-commerce, application |
| Image plein écran | Impact visuel fort | Contraste et performance à surveiller | Hôtellerie, immobilier, voyages |
| Vidéo de fond | Immersion | Lourd, mobile, distractions | Agences créatives, événements |
| Split-column (deux colonnes) | Structure claire, responsive | Peu d'effet "waouh" | Sites de conversion, formulaires |
Le split-column, c'est mon préféré. Pas par passion esthétique, mais parce qu'il est le plus solide quand on doit tenir à la fois performance, lisibilité et accessibilité. Je mourrai sur cette colline.
Accessibilité : le point que tout le monde saute
Un hero mal fait exclut une partie de votre audience sans que vous le sachiez. Trois vérifications qui prennent cinq minutes :
- Le ratio de contraste texte/fond atteint au moins 4,5:1 (WCAG AA). Un overlay sombre sur photo ne suffit pas toujours, il faut mesurer
- Le texte reste lisible si l'image de fond ne charge pas (background CSS avec couleur de repli)
- Les boutons sont de vrais liens ou boutons, pas des
divavec un gestionnaire de clic
Sur un projet, l'overlay censé assombrir la photo avait été appliqué côté design, mais pas exporté dans le build. Résultat en production : titre blanc sur ciel dégagé, contraste à 1,3:1. Personne ne s'en était aperçu pendant deux semaines, parce que personne ne teste avec un contraste suffisant.
Comment tester (vraiment) une section hero
Changer un hero "au feeling", c'est le meilleur moyen de perdre du trafic sans comprendre pourquoi. Une méthode simple, que j'applique et qui ne m'a jamais déçu :
- Définir une seule métrique à améliorer (taux de clic sur l'action, temps avant premier clic, scroll passé le hero)
- Isoler une variable à la fois : le titre, ou l'image, ou le bouton. Jamais deux
- Laisser tourner assez longtemps pour avoir un volume sérieux, pas trois jours
- Comparer sur des cohortes comparables, sinon vous mesurez la météo
L'erreur classique : tout changer d'un coup, voir une amélioration, et ne jamais savoir quelle modification en est responsable. J'en ai fait les frais—on a "gagné" 9 % de conversions sur une refonte complète, puis perdu 12 % au trimestre suivant, sans moyen de revenir en arrière proprement.
Ce qu'il faut vraiment garder en tête
Un hero n'est pas un décor. C'est un argument, compressé dans un écran, qui doit convaincre en quelques secondes. Sa réussite tient rarement à la beauté—elle tient à la clarté, à la vitesse et à une promesse tenue.
La prochaine fois que vous ouvrez votre page d'accueil, faites une expérience simple : cachez le logo. Demandez-vous si un inconnu, en regardant votre section hero seule, pourrait dire ce que vous vendez, à qui et ce qu'il doit cliquer. Si la réponse est floue, ce n'est pas un problème de design. C'est un problème de message. Et aucun filtre, aucune animation, aucune vidéo ne le réglera.
