La section hero, cette zone que tout le monde regarde et que personne ne mesure
Ouvrez la page d'accueil d'un site que vous admirez. Comptez trois secondes. Vous n'avez probablement lu qu'une chose : le gros titre en haut, celui qui occupe tout l'écran avant que vous ne fassiez défiler. C'est elle. La section hero. Et dans 9 cas sur 10, c'est la seule partie de la page qu'un visiteur pressé verra vraiment.
Je dis "9 cas sur 10" sans guillemets pour une raison simple : sur les sites que j'ai audités ces dernières années, la majorité des visiteurs ne dépassent jamais le premier écran. Pas parce qu'ils sont paresseux. Parce que ce premier écran leur a déjà donné — ou refusé — une raison de continuer.
Points clés à retenir
- La section hero est le premier bloc visible d'une page, avant tout défilement.
- Elle se compose presque toujours d'un titre, d'un sous-titre, d'un visuel et d'un bouton d'action.
- Son rôle n'est pas d'être belle : c'est de répondre en quelques secondes à « suis-je au bon endroit ? »
- Un hero raté ne se rattrape pas plus bas dans la page : le visiteur est déjà parti.
- La hauteur, le contraste et la vitesse de chargement comptent autant que le texte.
- « Hero » ne veut pas dire « énorme ». Une bande discrète peut faire le travail mieux qu'un plein écran.
Le terme vient du théâtre, pas du marketing. Le "hero" était le premier plan, celui qui accrochait le regard avant que l'histoire ne commence. Le web a repris l'idée telle quelle : un plan d'ouverture, un cadrage, une promesse. Sauf qu'au théâtre, le public a payé son billet. Sur votre site, il peut partir d'un clic.
Une section hero, c'est quoi exactement ?
La définition la plus utile que je connaisse tient en une phrase : c'est la portion de page qui s'affiche sans que l'internaute ait besoin de faire quoi que ce soit. Pas de scroll, pas de clic, pas d'attente. Ce qui est là, tout de suite, en haut.
Cette définition a une conséquence qu'on oublie souvent : la section hero n'a pas de hauteur fixe. Elle dépend de l'écran. Sur un ordinateur portable, ce sera peut-être 700 pixels. Sur un téléphone tenu à la verticale, beaucoup moins. Ce qui veut dire qu'un hero pensé pour un grand écran peut se retrouver tronqué, voire invisible, sur mobile.
Ce qu'on trouve dans un hero typique
- Un titre principal (le fameux H1), souvent la phrase la plus travaillée de tout le site
- Un sous-titre qui précise la promesse, ou une phrase de contexte
- Un bouton d'action — « Demander une démo », « Créer un compte », « Voir les tarifs »
- Un visuel : image, illustration, vidéo de fond, capture d'écran du produit
- Parfois une preuve sociale discrète : logos clients, note moyenne, nombre d'utilisateurs
Rien n'oblige à tout mettre. J'ai vu des heroes avec un seul titre et un bouton qui convertissaient mieux que des blocs surchargés de cinq éléments. Et j'ai fait l'erreur inverse moi-même : empiler promesse, prix, témoignage et deux boutons dans le même écran, en croyant que "plus d'infos = plus de clarté". Résultat, un taux de clic sur le bouton principal divisé par deux après refonte. Le visiteur ne savait plus où regarder.
Image hero, hero banner : le vocabulaire se mélange (et ce n'est pas grave)
Vous verrez trois expressions circuler, souvent employées comme des synonymes :
| Terme | Ce qu'il désigne en pratique | Origine |
|---|---|---|
| Section hero | Le bloc entier : titre, texte, bouton, visuel | Vocabulaire du web design |
| Image hero | Uniquement le visuel de fond ou l'illustration de ce bloc | Idem, par raccourci |
| Hero banner | Souvent un bandeau horizontal, plutôt plat, avec texte et image côte à côte | Vocabulaire publicitaire, repris par le web |
La nuance est ténue, et honnêtement, la plupart des gens s'en fichent. Ce qui compte, c'est de ne pas confondre le contenant et le contenu visuel. Quand quelqu'un vous parle d'« image hero », il parle du décor. Quand il parle de « section hero », il parle de la scène entière.
Autre confusion fréquente : le carrousel. Longtemps, on a cru qu'un hero devait forcément défiler, avec trois ou quatre slides qui tournent. Beaucoup de sites ont fini par abandonner ce format — les visiteurs ne regardent pas les slides suivantes, et le défilement automatique casse l'attention. Une seule promesse claire vaut mieux que quatre qu'on ne lit pas.
Des exemples concrets de hero qui fonctionnent (et d'autres pas)
Plutôt que de vous décrire des principes abstraits, regardons des cas.
Le hero minimaliste qui mise sur le vide
Un fond blanc, un titre en gros caractères, un seul bouton, beaucoup d'espace. Ça marche pour deux raisons : rien ne détourne l'attention, et le contraste rend le texte impossible à rater. Le risque, c'est que ça ressemble à tous les autres sites minimalistes. Si votre titre est générique (« Bienvenue »), vous perdez tout l'avantage.
Le hero avec capture de produit
Vous montrez à quoi ressemble votre outil, directement, sans passer par une illustration abstraite. Le visiteur comprend en un coup d'œil ce qu'il va trouver. Dans mon expérience, c'est le format qui donne les meilleurs résultats quand on vend un logiciel : le doute tombe avant même la lecture du sous-titre.
Le hero qui se plante : la vidéo de fond
Une vidéo qui tourne en arrière-plan, en boucle, souvent floue. J'ai testé ça il y a quelques années sur un site vitrine. C'était magnifique. Sur un écran de bureau. Sur mobile, la vidéo mettait près de cinq secondes à charger, et pendant ce temps, seul le texte apparaissait sur un fond gris. Et là, surprise : ce texte sur fond gris convertissait mieux que la belle vidéo. Nous l'avons retirée. Coût de l'opération : une semaine de développement, pour revenir à un fond uni.
Le vrai problème d'une vidéo, c'est qu'elle capte l'attention au détriment du texte. L'œil regarde le mouvement. Le cerveau, lui, ne lit plus.
Comment concevoir une section hero qui tient sur tous les écrans
Choisir une hauteur qui laisse un indice
Si votre hero occupe 100 % de la hauteur de l'écran, attendez-vous à ce que certains visiteurs croient la page terminée. Une bande de contenu qui dépasse légèrement en bas signale qu'il y a une suite. C'est un détail, mais il change le comportement.
Soigner les trois premières secondes
Sur le premier écran, trois questions se posent dans l'esprit du visiteur :
- Suis-je sur le bon site ?
- Qu'est-ce que j'y gagne ?
- Qu'est-ce que je fais maintenant ?
Si le hero ne répond pas à ces trois questions, le reste de la page a peu de chances d'être lu. C'est brutal, mais c'est le fonctionnement réel.
Ne pas négliger la vitesse
Un hero avec une grande image non optimisée peut à lui seul diviser la vitesse de chargement. Le visiteur ne voit pas la différence, mais il la ressent. Sur des connexions mobiles moyennes, une seconde d'attente supplémentaire se traduit par un abandon. Concrètement : comprimez l'image, choisissez un format moderne, et ne chargez pas une image de 3000 pixels de large pour un écran qui en fait 800.
Écrire un titre qui dit quelque chose
Un titre qui ne pourrait pas être remplacé par "Bienvenue sur notre site" sans que ça change le sens ne dit rien. Un bon titre dit ce que vous faites, pour qui, ou ce que ça change. Une phrase. Pas trois.
Quatre erreurs que je vois revenir tout le temps
Elles ne viennent pas d'une étude, elles viennent de ce que je retrouve en auditant des sites :
- Le titre-creux. Une phrase jolie mais vide, qui parle de "solutions innovantes" sans jamais dire ce que le produit fait.
- Le bouton invisible. Un call-to-action qui se fond dans le fond, ou qui utilise la même couleur que le texte environnant.
- Le texte par-dessus l'image sans contraste. Blanc sur photo claire, noir sur photo sombre. Invisible à moitié.
- Le hero oublié sur mobile. Conçu sur grand écran, jamais testé sur téléphone. Le titre se coupe, le bouton passe sous la ligne de flottaison.
J'ajouterais un cinquième point, plus insidieux : le hero qui parle à l'entreprise au lieu du visiteur. "Depuis 2010, nous accompagnons les professionnels dans leur transformation..." Personne n'a jamais ouvert un site en se disant "tiens, qu'est-ce que cette entreprise raconte sur elle-même".
Ce qu'il faut retenir quand on dit "hero"
Une section hero, au fond, c'est une promesse en un écran. Elle n'est ni un espace de décoration, ni un résumé de tout le site. C'est l'endroit où le visiteur décide, très vite, s'il continue ou s'il ferme l'onglet. Tout le reste du design — les couleurs, les animations, les effets — n'a qu'un rôle : servir cette décision.
Et si vous ne devez retenir qu'une chose de cet article, que ce soit celle-ci : la question n'est pas "est-ce que mon hero est beau ?". La question est "est-ce qu'il donne une raison de rester ?". Un hero magnifique qui ne répond pas à cette question est un hero raté. Un hero banal qui y répond est un bon hero. Et si vous avez un doute sur le vôtre, testez-le sur le téléphone d'un proche, en 4G, debout, dans la rue. Vous saurez tout de suite ce que voit un visiteur pressé — c'est-à-dire presque tous vos visiteurs.
