Vous ouvrez un site. En moins de trois secondes, vous savez si vous restez ou si vous fermez l’onglet. Cette décision se joue sur une seule zone : la hero section.

C’est l’élément le plus regardé de tout votre site, et pourtant celui qu’on traite le plus souvent à la fin, quand le budget est déjà consommé. Ce guide reprend le sujet dans l’ordre : ce qu’est une hero section, de quoi elle est faite, six modèles qui fonctionnent selon ce que vous vendez, et les erreurs qui reviennent chez presque tout le monde.

Qu’est-ce qu’une hero section ?

La hero section est la première section visible d’une page, en haut, avant le moindre défilement. Elle occupe généralement toute la largeur de l’écran et une bonne partie de sa hauteur.

Son rôle tient en une phrase : faire comprendre ce que vous proposez, à qui, et ce qu’il faut faire ensuite. Rien d’autre. Tout ce qui ne sert pas cet objectif l’affaiblit.

Hero section, hero header, bannière : le point sur les mots

Ces trois termes désignent la même zone, avec des nuances d’usage.

Hero section est le terme employé en webdesign et dans les outils (Figma, Webflow, WordPress). C’est celui que vous entendrez chez un designer ou un développeur.

Hero header désigne parfois la version qui englobe aussi le menu de navigation, quand les deux forment un bloc visuel continu.

Bannière est le mot courant en français, celui qu’emploient la plupart des clients. Attention, il désigne aussi les bannières publicitaires diffusées sur d’autres sites, qui n’ont rien à voir. Nous avons détaillé cette distinction dans notre guide de la bannière de site web.

Dans la pratique, choisissez le mot que comprend votre interlocuteur et passez à la suite. Le vocabulaire n’a jamais converti personne.

L’anatomie d’une hero section

Une hero efficace contient rarement plus de cinq éléments.

Le titre. Ce que vous faites, en une phrase, dans les mots de votre client. Pas votre slogan, pas votre baseline. Si votre titre pourrait être celui d’un concurrent, il ne dit rien.

La phrase de contexte. Une ou deux lignes qui précisent pour qui, comment, ou à quel prix. C’est là que se règle la question « est-ce que c’est pour moi ».

L’appel à l’action. Un bouton, un verbe, une promesse claire. « Demander un devis » vaut mieux que « En savoir plus », qui ne promet rien.

Le visuel. Il illustre, il ne décore pas. Une photo de produit, une capture d’interface, un visage. Le fond abstrait générique est le degré zéro du sujet.

La preuve, parfois. Logos clients, note moyenne, nombre d’utilisateurs. Une ligne discrète sous le bouton suffit et rassure beaucoup.

Voilà. Cinq éléments. La difficulté n’est pas d’en trouver d’autres, elle est de résister à l’envie d’en ajouter.

Six modèles de hero section qui fonctionnent

Il n’existe pas de hero universelle. Le bon modèle dépend de ce que vous vendez et du niveau de maturité de votre visiteur.

1. La promesse directe

Un titre qui énonce le bénéfice, une phrase de contexte, un bouton. Rien de plus.

Pour qui. Les offres simples à comprendre : un service, un produit unique, une prestation.

L’erreur associée. Confondre promesse et slogan. « Réinventons ensemble votre communication » ne promet rien. « Vos créations marketing livrées en 48 heures, à prix fixe » promet quelque chose.

2. La démonstration produit

Le visuel montre l’interface ou le produit en usage, le texte reste court à côté.

Pour qui. Les logiciels, les applications, tout ce dont la valeur se voit mieux qu’elle ne s’explique.

L’erreur associée. Montrer une capture illisible, réduite au point qu’on ne distingue plus rien. Mieux vaut un détail zoomé et net qu’une vue d’ensemble floue.

3. La segmentation

Deux ou trois chemins clairs proposés d’emblée. Particuliers ou entreprises, homme ou femme, débutant ou confirmé.

Pour qui. Les catalogues larges, les marques qui adressent des publics vraiment différents.

L’erreur associée. Segmenter en cinq. Au-delà de trois choix, vous ne guidez plus, vous déléguez la décision au visiteur qui n’en a pas envie.

4. La preuve d’abord

La hero s’ouvre sur un chiffre, un résultat client, une note. Le reste vient ensuite.

Pour qui. Les marchés où la confiance est le vrai frein : santé, finance, services aux entreprises, prestations coûteuses.

L’erreur associée. Le chiffre invérifiable. « 10 000 clients satisfaits » sans source fait l’effet inverse de celui recherché.

5. La barre de recherche

La hero se réduit presque à un champ de recherche, avec une phrase au-dessus.

Pour qui. Les catalogues très larges, l’immobilier, la billetterie, l’emploi. Quand le visiteur sait déjà ce qu’il cherche, lui donner un chemin vaut mieux que lui vendre une promesse.

L’erreur associée. Mettre une barre de recherche sur un site de dix pages. Elle sonne creux et occupe la place du message.

6. Le récit visuel

Une grande image, très peu de texte, une ambiance. Le message passe par l’émotion avant l’argument.

Pour qui. La mode, la décoration, le voyage, le luxe, les marques dont le produit se désire avant de se comparer.

L’erreur associée. Croire que ce modèle dispense de dire ce qu’on vend. Même la plus belle photo a besoin d’un mot qui situe la marque.

Les cinq erreurs qu’on voit tout le temps

Le titre qui parle de vous. « Depuis 2015, notre agence accompagne ses clients dans leur transformation. » Votre visiteur ne cherche pas votre histoire, il cherche la solution à son problème.

Le texte incrusté dans l’image. Il n’est pas lu par les moteurs de recherche, il devient illisible sur mobile, et il exclut les utilisateurs de lecteurs d’écran. Le texte se met en HTML, toujours.

Le carrousel qui tourne tout seul. Le Nielsen Norman Group documente depuis des années le fait que les slides suivantes sont à peine vues, et que le mouvement automatique fait rater des informations pourtant affichées en grand. Nous détaillons les données dans notre guide de la bannière de site web.

L’image de 2 Mo. La hero est presque toujours l’élément le plus lourd de la page, donc celui qui déclenche le LCP, l’indicateur de Google qui mesure le temps d’affichage du plus gros élément visible. Une hero lente, c’est une conversion qui recule avant même d’avoir commencé.

Le texte blanc sur photo claire. L’erreur de contraste la plus fréquente du web. Le minimum recommandé par les règles d’accessibilité WCAG est un ratio de 4,5:1 pour le texte courant.

Comment tester votre hero section

Trois vérifications, cinq minutes, aucun outil.

Le test des cinq secondes. Montrez votre hero à quelqu’un qui ne connaît pas votre activité, cachez-la après cinq secondes, demandez ce que vend l’entreprise. S’il hésite, le titre est à refaire.

Le test du concurrent. Remplacez votre logo par celui d’un concurrent. Si la hero fonctionne toujours, c’est qu’elle ne dit rien de spécifique.

Le test du pouce. Ouvrez la page sur votre téléphone, en 4G, sans cache. Comptez les secondes avant que l’image s’affiche. Regardez si le bouton est atteignable au pouce sans faire défiler.

FAQ

Qu’est-ce qu’une hero section ?

C’est la première section visible d’une page web, en haut, avant le moindre défilement. Elle réunit en général un titre, une phrase de contexte, un visuel et un appel à l’action. Son rôle est de faire comprendre l’offre en quelques secondes.

Hero section, hero header, bannière : est-ce la même chose ?

Les trois désignent la même zone d’ouverture. « Hero section » est le terme le plus employé en webdesign, « bannière » le plus courant en français côté client. Le hero header désigne parfois la version qui englobe aussi le menu de navigation.

Quelle hauteur pour une hero section ?

Entre 500 et 700 px sur desktop. Le principe qui compte davantage : le début de la section suivante doit rester visible, pour signaler au visiteur qu’il y a autre chose en dessous.

Combien d’appels à l’action dans une hero section ?

Un seul en priorité visuelle. Un second lien est acceptable s’il est clairement secondaire, par exemple en style texte à côté du bouton principal.

Faut-il une vidéo en fond de hero section ?

Rarement. Une vidéo de fond alourdit le chargement, détourne l’attention du texte et pose des problèmes d’accessibilité. Une image fixe bien choisie fait presque toujours mieux.

Conclusion

Une hero section réussie n’est pas une affaire de talent graphique. C’est une suite de décisions simples : un message qui parle du visiteur, une action prioritaire, un visuel qui montre quelque chose, une image légère et un contraste lisible.

Le plus dur reste de choisir le modèle qui correspond à ce que vous vendez, puis de s’y tenir sans rien ajouter. Si vous voulez aller plus loin sur les formats, les dimensions et les données UX, notre guide complet de la bannière de site web reprend le sujet en détail.

Et si vous préférez confier le sujet à quelqu’un, c’est exactement ce que nous faisons chez Timna : des bannières et des sections d’ouverture conçues pour convertir, à prix fixe et sans devis.

Sources

Partager :