Ce qu’est une section hero, et les quatre choses qu’elle doit dire en cinq secondes
La section hero est le premier bloc d’une page web : la large zone en haut avec un titre, un court sous-titre, un bouton d’appel à l’action et, le plus souvent, une image. Chaque visiteur la voit, et la plupart décident sur cette base de rester ou non. Voici ce qu’une section hero doit dire en cinq secondes, les éléments qui la composent et les erreurs qui coûtent des clics.
Par Anthony Roose
5 min de lecture
Qu’est-ce qu’une section hero sur un site web ?
La section hero est le grand bloc en haut d’une page web, juste sous la navigation. Elle contient en général quatre éléments : un titre, une ou deux lignes de texte d’appui, un bouton d’appel à l’action et une image ou une photo du produit.
Le nom vient de la hero image en web design : la grande photo pleine largeur en haut d’une page. Le bloc a gardé ce nom quand beaucoup de sites ont remplacé la photo par une capture du produit ou par du texte sur un fond de couleur.
La section hero et la zone au-dessus de la ligne de flottaison sont liées, sans être identiques. La ligne de flottaison est une ligne sur l’écran : tout ce qu’un visiteur voit avant de faire défiler. Le hero est un bloc dans le design. Sur un ordinateur portable, le hero remplit souvent tout le premier écran. Sur un smartphone, il ne tient souvent pas, et le bouton passe sous la ligne de flottaison.
Pourquoi la section hero décide si les visiteurs restent
Chaque visiteur voit le hero. Beaucoup ne voient pas grand-chose d’autre. Les études d’eye-tracking de Nielsen Norman Group montrent que 57 % du temps de lecture se situe au-dessus de la ligne de flottaison, et le hero se trouve dans ce premier écran sur tous les appareils.
Les visiteurs jugent aussi très vite. Lindgaard et ses collègues ont mesuré qu’on se forme une première impression stable d’une page web en environ 50 millisecondes. Ensuite, on survole. L’analyse de logs de Jakob Nielsen montre que les visiteurs lisent au maximum 28 % des mots d’une page, et plus souvent 20 %.
Le hero se lit donc par fragments : le titre, quelques mots du sous-titre, le libellé du bouton, un coup d’œil à l’image. Si ces fragments n’expliquent pas l’offre, le reste de la page n’a jamais sa chance.
En bref Écrivez votre hero pour quelqu’un qui lit dix mots et regarde une image. Ces dix mots décident de la visite.
Les quatre choses qu’une section hero doit dire en cinq secondes
Un bon hero répond à quatre questions avant que le visiteur ne les pose. Chaque élément du bloc a l’une de ces missions.
- Qu’est-ce que c’est ? Le titre nomme ce que vous proposez, avec les mots d’un inconnu. « Logiciel de comptabilité pour freelances » fonctionne. « La finance, réinventée » non.
- Est-ce pour moi ? Le sous-titre nomme le public ou la situation. Une ligne, deux au maximum. Il transforme une catégorie en adéquation.
- Pourquoi m’y intéresser ? Un résultat concret ou une preuve : un résultat, un chiffre, un nom de client connu. Une promesse sans preuve se lit comme de la décoration.
- Que faire maintenant ? Un seul bouton principal, avec un verbe qui dit ce qui se passe ensuite, comme « Commencer l’essai gratuit » ou « Demander un devis ». Un second lien, plus discret, convient. Deux boutons de même poids, non.
L’image soutient les quatre. Les études d’eye-tracking de Nielsen Norman Group montrent que les visiteurs examinent les images porteuses d’information, comme les photos de produits et de vraies personnes, et ignorent les photos de stock génériques. Montrez le produit, le résultat ou le client. Une photo de mannequins souriants devant un ordinateur occupe la plus grande zone de la page et ne dit rien.
Les éléments d’une section hero, et comment chacun échoue
| Élément | Sa mission | Erreur fréquente |
|---|---|---|
| Titre | Dire ce que vous proposez | Un slogan ou un jeu de mots qui a besoin du reste de la page pour avoir du sens |
| Sous-titre | Dire à qui cela s’adresse et en quoi cela aide | Un deuxième slogan, ou un paragraphe de cinq lignes |
| Appel à l’action | Montrer l’étape suivante | Deux ou trois boutons de même poids, ou un libellé vague comme « En savoir plus » |
| Image | Montrer le produit ou le résultat | Une photo de stock, des formes abstraites, ou une animation qui cache le message |
| Preuve | Rendre la promesse crédible | Absente, ou repoussée trois écrans plus bas |
Les erreurs fréquentes dans une section hero
- Un carrousel. Des slides qui tournent semblent permettre de dire cinq choses à la fois. Les visiteurs n’en voient qu’une. À l’University of Notre Dame, Erik Runyon a mesuré qu’environ 1 % des visiteurs de la page d’accueil cliquaient sur un élément du carrousel, et que 84 % de ces clics allaient au premier.
- Un titre qui a besoin du sous-titre. Si le titre seul ne dit pas ce que vous vendez, la plupart des visiteurs ne l’apprennent jamais. Lisez le titre à voix haute à quelqu’un d’extérieur à votre entreprise et demandez-lui ce que vous faites.
- Un hero plus haut que l’écran du smartphone. Une image pleine hauteur sur mobile pousse le titre ou le bouton sous la ligne de flottaison. Vérifiez le hero sur un écran de 390 pixels de large avant de le mettre en ligne.
- Un titre animé. Les mots qui s’écrivent tout seuls ou qui tournent sont saisis à mi-chemin. Dans une analyse 5sec.io de notion.com, la capture a figé le mot animé du titre en plein cycle, sous la forme « Scal ».
- Du texte sur une photo chargée. Un texte blanc sur une image détaillée perd du contraste par endroits. Si le texte a besoin d’un voile sombre pour rester lisible, l’image ne fait pas le bon travail.
Comment tester votre section hero
Faites un test des cinq secondes. Montrez la page à quelqu’un qui ne l’a jamais vue, retirez-la après cinq secondes et posez trois questions : que propose cette entreprise, à qui s’adresse-t-elle, et où cliqueriez-vous ? Des réponses vagues désignent le hero.
Sans testeur, le test gratuit des cinq secondes sur 5sec.io lit votre page en ligne comme le fait un nouveau visiteur. Il vérifie si le titre dit ce qu’est le produit, si la zone au-dessus de la ligne de flottaison promet un résultat et si l’image du hero appuie le titre, et il cite les éléments trouvés. Pour un site entier, l’Above the Fold Audit note une quinzaine de pages clés et réécrit les textes les plus faibles.
Corrigez les mots avant le design. La plupart des hero faibles échouent sur le titre et le libellé du bouton, et les deux coûtent peu à réécrire. Ces sept exemples de sections hero montrent la différence. Si le hero réussit et que les visiteurs partent quand même, faites un audit d’optimisation des conversions sur les pages qui suivent.
Voyez votre hero avec les yeux d’un inconnu
Le test gratuit lit votre hero comme le fait un nouveau visiteur et vous dit ce qui est passé en cinq secondes.