Exemples de sections hero : quatre qui réussissent le test des cinq secondes, et trois qui échouent
Sept sections hero de sites connus, lues comme un premier visiteur les lit : titre, sous-titre, bouton et image, en cinq secondes. Quatre disent à un inconnu ce qu’est le produit, à qui il s’adresse, pourquoi il aide et où cliquer. Trois manquent au moins un de ces points, et la cause n’est jamais l’apparence de la page. Chaque exemple se termine par ce qu’il faut reprendre ou éviter sur votre propre hero.
Par Anthony Roose
7 min de lecture
Comment nous avons lu ces sections hero
Nous avons capturé chaque page d’accueil le 27 octobre 2026 dans une fenêtre de 1440 sur 900 pixels, le premier écran que voit un visiteur sur ordinateur portable. Puis nous avons confronté chaque hero aux quatre questions de notre guide sur ce qu’est une section hero : qu’est-ce que c’est, est-ce pour moi, pourquoi m’y intéresser, et que faire maintenant ?
Un premier regard suffit pour ce contrôle. Lindgaard et ses collègues ont mesuré que l’on se forme une première impression stable d’une page web en environ 50 millisecondes.
Les hero changent souvent : voyez chaque exemple comme un instantané de ce jour-là. Notion, Linear et Framer figurent aussi dans des analyses 5sec.io du 31 août 2026. Cela nous permet de montrer un hero avant et après une réécriture.
Exemples de sections hero qui réussissent
1. Wise : le bénéfice est dans le titre
Titre : « The international account that saves you money. » Sous-titre : « Everything you need to send, spend and manage your money worldwide. Low fees. Lightning-fast. 100% transparent. » Boutons : « Open an account in minutes » et un « Send money now » plus discret.
En huit mots, le titre nomme la catégorie, un compte international, et le gain : vous économisez de l’argent. Le sous-titre cite trois tâches que le visiteur reconnaît. Le bouton principal dit ce qui se passe et combien de temps cela prend.
À reprendre : mettez le bénéfice dans le titre, pas dans la troisième section. La plupart des hero disent ce qu’ils sont. Peu disent ce que le visiteur y gagne.
2. Calendly : le bouton lève le dernier doute
Titre : « All the work around meetings, handled. » Sous-titre : « From AI-powered scheduling to automated meeting recaps and follow-ups, get the busywork done with fewer tools and less effort. » Boutons : « Sign up with Google » et « Sign up with Microsoft », avec « No credit card required » en dessous.
Le titre donne peu de détails, le sous-titre comble le vide avec trois tâches concrètes. Les boutons font le travail le plus fort. Ils nomment un compte que le visiteur possède déjà, et la ligne en dessous répond à la question que soulève tout essai gratuit.
À reprendre : répondez à l’objection principale à côté du bouton. Une courte ligne sur le coût ou l’effort fait plus qu’un paragraphe plus bas.
3. Framer : le même hero, réécrit
Le 31 août, l’analyse 5sec.io de framer.com a donné 6 sur 12 au premier écran. Le titre était « Framer is the AI design agent for every step from idea to launch ». Le mot « website » n’apparaissait nulle part dans le premier écran d’un créateur de sites, et le sous-titre qui expliquait le produit se trouvait sous la ligne de flottaison.
Le 27 octobre, le titre est « Framer is the pro website builder with a world-class design agent ». Le sous-titre figure désormais dans le premier écran : « Every change the agent makes stays editable on a real design canvas, with hosting, CMS, analytics, SEO, and AEO built in. Free to start for any type of site. » Le bouton « Get started for free » est resté à sa place.
À reprendre : la correction n’était pas une refonte. Framer a nommé sa catégorie en mots simples et a remonté l’explication. Remonter un texte existant est aussi la correction que nous écrivons le plus souvent dans les audits 5sec.io.
4. Basecamp : titre clair, entourage chargé
Titre : « Manage projects, coordinate teams, and master your company with Basecamp. » À côté, une capture d’un vrai projet avec un tableau de messages, des tâches et des échéances. Cela dit ce que c’est et à qui cela s’adresse, pour toute équipe qui gère des projets.
Le bémol : sept lignes de liens se trouvent au-dessus du titre, de « Pricing & sign up » à un compteur en direct des personnes qui travaillent dans Basecamp. L’œil rencontre une liste avant la promesse. Le bouton d’inscription se trouve en haut à droite, loin du titre.
À reprendre : une capture d’un vrai travail. À éviter : un menu que le visiteur doit lire avant le titre.
En bref Un hero réussit quand le titre nomme ce que vous proposez, qu’une ligne dit ce qui change pour le visiteur et qu’un bouton dit ce qui se passe ensuite.
Exemples de sections hero qui échouent
5. Notion : le mot-clé ne tient pas en place
Titre : « Where teams and agents ___ together. » Le blanc est une pastille verte qui fait défiler des mots. Le 27 octobre, le code source commençait sur « Think » et notre capture montrait « Ship ». Lors de l’analyse d’août, la capture a saisi le mot en pleine animation : « Scal ».
Le reste du hero est solide. Le sous-titre, « Capture context, find answers, and automate tasks with AI built for your team », explique le produit. « Get Notion free » est le bouton principal clair, avec « Request a demo » plus discret à côté. L’analyse d’août a donné 8 sur 12 au premier écran.
À éviter : animer le seul mot qui porte la promesse. L’onglet du navigateur affiche « The AI workspace that works for you. » Cette ligne dit ce qu’est Notion, et elle n’apparaît nulle part dans le hero.
6. Linear : aucun bouton dans le hero
Titre : « The product development system for teams and agents ». Sous-titre : « Purpose-built for planning and building products. Designed for the AI era. » En dessous, une capture du produit avec de vrais tickets et de l’activité.
Le titre nomme la catégorie, et la capture montre un vrai travail. Mais le hero ne contient aucun bouton. Les seuls moyens d’agir sont une petite pastille « Sign up » dans la navigation et un lien d’annonce « New Loops ». L’analyse d’août avait relevé le même manque et donné 7 sur 12 au premier écran.
À éviter : compter sur les visiteurs pour trouver la navigation. Une marque dont tout le monde parle peut se le permettre. La plupart des sites, non. Le sous-titre répète aussi la catégorie au lieu de nommer un résultat.
7. Shopify : un slogan sur une vidéo
Titre : « Be the next household name ». La fin de la ligne change : le code source commence sur « Be the next AI all-star ». Sous-titre : « Dream big and build fast on Shopify. The world’s best commerce platform. » Derrière le texte tourne une vidéo pleine largeur, qui montrait une allée d’entrepôt sur notre capture.
Un visiteur qui ne connaît pas Shopify apprend du titre qu’il s’agit d’ambition. Seuls les derniers mots du sous-titre nomment la catégorie. La phrase claire, « Sell everywhere people shop. Online and in person. », commence au bord inférieur du premier écran. « Start for free » est un bouton clair.
À éviter : un titre qui ne fonctionne que pour les visiteurs qui vous connaissent déjà. Nielsen Norman Group a constaté que les visiteurs ignorent les images qui n’apportent aucune information. Une vidéo en boucle coûte le plus d’attention et explique le moins.
Ce que les sept sections hero ont en commun
| Exemple | Qu’est-ce que c’est ? | Est-ce pour moi ? | Pourquoi m’y intéresser ? | Que faire ? |
|---|---|---|---|---|
| Wise | Réussi | Réussi | Réussi | Réussi |
| Calendly | Partiel | Réussi | Réussi | Réussi |
| Framer | Réussi | Partiel | Partiel | Réussi |
| Basecamp | Réussi | Réussi | Partiel | Partiel |
| Notion | Partiel | Partiel | Partiel | Réussi |
| Linear | Réussi | Partiel | Échec | Échec |
| Shopify | Échec | Échec | Partiel | Réussi |
Chaque hero qui réussit nomme sa catégorie avec les mots d’un inconnu : compte international, réunions, créateur de sites, projets. Chaque hero qui échoue s’appuie sur un slogan ou saute une étape.
« Pourquoi m’y intéresser ? » est la question que la plupart des hero sautent. Seuls Wise et Calendly disent ce qui change pour le visiteur. Les analyses d’août ont trouvé le même schéma : nommer la catégorie est facile, nommer la conséquence est difficile.
Aucun de ces échecs n’est un problème de design. Les sept pages sont belles. Les hero faibles échouent sur les mots, l’ordre et le mouvement, et ce sont les éléments les moins chers à corriger.
Comment contrôler votre propre section hero
- Ouvrez votre page d’accueil sur un ordinateur portable et sur un smartphone. Faites une capture du premier écran seulement.
- Montrez-la cinq secondes à une personne extérieure à votre entreprise. Demandez ce que vous proposez, à qui cela s’adresse et où elle cliquerait.
- Notez ses réponses à côté des quatre questions. Chaque réponse vide désigne un élément : titre, sous-titre, preuve ou bouton.
- Corrigez d’abord les mots. Remontez le texte existant avant d’en écrire un nouveau, comme l’a fait Framer.
Sans testeur, le test gratuit des cinq secondes sur 5sec.io lit votre page en ligne comme un premier visiteur et cite les preuves trouvées. Pour un site entier, l’Above the Fold Audit note une quinzaine de pages clés et réécrit les textes les plus faibles. Lisez ce que signifie au-dessus de la ligne de flottaison si votre hero ne tient pas sur un écran de smartphone.
Votre hero réussit-il ?
Le test gratuit lit votre premier écran comme un nouveau visiteur et vous dit à quelles questions sur quatre il répond.