Above the fold : qu'est-ce que c'est et pourquoi ça compte

Que signifie above the fold

L'above the fold est la partie d'une page web que l'utilisateur voit sans avoir à scroller. C'est la première chose qu'il voit en arrivant sur votre site : la zone visible dans les limites de son écran au moment du chargement.

Le terme vient des journaux imprimés. Les publications pliaient les unes en deux, et la partie supérieure — celle qui restait visible au-dessus du pli (the fold) — était l'espace premium où étaient placés les titres les plus importants pour attirer les acheteurs dans les kiosques.

Sur le web, le concept se maintient. La zone visible sans scroll concentre la plus grande attention de l'utilisateur, surtout dans les premières secondes de chargement. Ce qui s'y trouve détermine dans une large mesure si l'utilisateur continuera à explorer ou partira.

Il n'existe pas de taille fixe pour l'above the fold. Cela dépend de l'appareil, de la résolution d'écran et de la taille du navigateur de chaque utilisateur. Sur un bureau conventionnel (1366x768px), la zone visible est d'environ 600-700px de hauteur. Sur mobile, elle est souvent encore plus petite. Cela signifie que le design above the fold doit être pensé pour de multiples contextes.

Pourquoi c'est clé pour la conversion

La raison pour laquelle l'above the fold compte autant pour la conversion est physiologique et attentionnelle : les utilisateurs décident en quelques secondes de rester ou de partir. Nielsen Norman Group documente ce comportement depuis des années, et ses données sont cohérentes : les utilisateurs prennent la décision de rester ou d'abandonner une page en moins de 10 secondes.

Dans ce temps, ils n'ont vu que l'above the fold.

Si cette première zone ne communique pas clairement ce que vous offrez, à qui et pourquoi ça devrait les intéresser, la majorité des utilisateurs part avant de voir le reste du contenu.

L'above the fold a aussi un impact direct sur les métriques business :

Une landing page avec le CTA principal visible sans scroll peut augmenter le taux de conversion de 20 % à 50 % par rapport à une où le CTA nécessite du scroll
Le temps jusqu'au premier clic (time-to-first-click) est significativement plus court quand l'élément d'action est above the fold
Le taux de rebond se corrèle négativement avec la clarté du message dans le hero : plus de clarté, moins de rebond

Ce que dit l'eye-tracking

Les études d'eye-tracking — technologie qui suit les mouvements oculaires des utilisateurs pendant leur navigation — ont révélé des patterns cohérents dans la façon dont les personnes lisent et scannent les pages web.

Le pattern F

Nielsen a documenté en 2006 le pattern de lecture en forme de F, qui reste valide aujourd'hui pour les pages à texte dense : les utilisateurs lisent la première ligne complètement, puis font un mouvement horizontal plus court sur la deuxième ligne, et enfin scannent la marge gauche verticalement.

Implication directe : les mots les plus importants doivent être au début des titres et paragraphes, surtout dans la marge gauche.

La concentration de l'attention sur l'above the fold

Plusieurs études d'eye-tracking confirment que 80 % de l'attention de l'utilisateur se concentre sur la moitié supérieure de la page. La moitié inférieure ne reçoit que les 20 % restants. Et cela en supposant que l'utilisateur scrolle, ce qui n'arrive pas toujours.

Distribution de l'attention par zone

Zone de la page	Attention moyenne
Above the fold (premiers 600px)	57 %
Zone médiane (600-1200px)	28 %
Zone inférieure (>1200px)	15 %

Cela ne signifie pas que le contenu below the fold est non pertinent — il est essentiel pour les utilisateurs qui envisagent déjà l'action —, mais que le travail de capter l'attention et de communiquer la valeur doit se passer dans la partie supérieure.

Quels éléments inclure above the fold

Le contenu optimal above the fold dépend du type de page (homepage, landing page, fiche produit), mais il y a des éléments qui ont une présence quasi universelle dans les pages à haute conversion.

1. Proposition de valeur claire

La question que l'utilisateur se pose en arrivant sur votre site est : "Est-ce fait pour moi ? Ça m'aide à résoudre mon problème ?". Le titre principal (H1) doit répondre à cette question en une phrase. Pas avec du jargon corporate, mais avec le bénéfice concret que vous offrez.

Exemple faible : "Solutions innovantes pour votre entreprise digitale" Exemple fort : "Plus de ventes depuis votre site, avec les mêmes visiteurs"

2. Sous-titre qui élargit le contexte

Le sous-titre complète le H1 en ajoutant du contexte : qui vous êtes, comment vous y parvenez, ou pour qui c'est. Maximum 2 lignes.

3. CTA principal visible

Le bouton d'action principal doit être visible sans scroll. Son texte doit être spécifique et orienté vers l'action : pas "Envoyer" mais "Commencez votre essai gratuit", pas "Plus d'infos" mais "Voir comment ça fonctionne".

4. Éléments de crédibilité ou preuve sociale

Un logo de client reconnu, un chiffre d'impact ou une ligne de preuve sociale ("Utilisé par plus de 2 000 entreprises") ajoutent de la crédibilité immédiate et réduisent la friction de méfiance.

5. Image ou vidéo de support (optionnel mais efficace)

Une image montrant le produit en utilisation, ou une courte vidéo (pas en autoplay avec son), peut augmenter la compréhension de la valeur et le temps de permanence.

Erreurs courantes dans l'above the fold

Trop de contenu

Essayer de tout communiquer above the fold génère du bruit et dilue l'attention. L'utilisateur ne sait pas où regarder ni quoi faire. L'above the fold doit avoir un seul message principal et un seul appel à l'action prioritaire.

Slider ou carrousel en hero

Les sliders réduisent la conversion de façon cohérente dans presque tous les tests A/B où ils ont été testés. L'utilisateur voit la première image et attend rarement les suivantes. Si le slider cache le CTA ou le message principal dans la deuxième ou troisième diapositive, la majorité des utilisateurs ne les verra jamais.

Images de stock génériques

Une image de personnes souriantes dans une réunion de bureau n'ajoute pas d'information ni de crédibilité. Si l'image ne communique rien de spécifique sur votre produit ou votre client, elle occupe de l'espace et distrait sans apporter de valeur.

CTA below the fold sur mobile

Une landing page peut avoir le CTA visible sur bureau mais enterré après 800px de scroll sur mobile, surtout si l'image hero est en plein écran. Testez toujours l'above the fold sur des appareils mobiles réels.

Texte sur image avec peu de contraste

Une image de fond avec du texte dessus est une combinaison courante, mais échoue fréquemment en accessibilité et lisibilité. Le contraste texte/fond doit dépasser le ratio WCAG AA (4,5:1) même avec des images.

Exemples : above the fold efficace vs inefficace

Cas A : Landing page SaaS (inefficace)

Menu avec 8 éléments et un menu déroulant
Image hero corporate qui occupe 70 % de l'espace visible
Titre : "Nous transformons les entreprises du futur"
Pas de sous-titre visible sans scroll
CTA : "Contactez-nous" dans le footer

Résultat : l'utilisateur ne comprend pas ce que fait le produit, ne voit aucun bénéfice clair et n'a aucune raison de cliquer.

Cas B : Landing page SaaS (efficace)

Menu avec 4 éléments et un bouton CTA dans la navbar
Titre direct : "Gérez tous vos projets en un seul endroit"
Sous-titre : "Sans emails perdus, sans réunions inutiles. Votre équipe, synchronisée."
CTA bien visible : "Essayez gratuitement 14 jours" (sans carte)
Trois logos de clients connus sous le CTA
Capture d'écran du produit à côté

Résultat : en moins de 5 secondes l'utilisateur sait ce que c'est, à quoi ça sert, ce qu'il doit faire et pourquoi il peut faire confiance.

Comment tester et optimiser votre above the fold

L'optimisation de l'above the fold ne devrait pas se baser uniquement sur des opinions ou des tendances de design. Elle doit se baser sur des données de votre audience spécifique.

Étape 1 : Installez une carte de chaleur (Hotjar, Clarity) et analysez jusqu'où 50 % de vos visiteurs scrollent. C'est votre above the fold réel pour votre audience.

Étape 2 : Enregistrez des sessions de nouveaux utilisateurs sur votre landing page principale. Observez ce qu'ils lisent, ce qu'ils ignorent et où ils cliquent en premier.

Étape 3 : Concevez des hypothèses d'amélioration basées sur vos observations. "Si le CTA est plus haut et le message du H1 est plus spécifique, le taux de conversion augmentera."

Étape 4 : Lancez un test A/B pour valider l'hypothèse avec du trafic réel.

L'above the fold est l'un des éléments à plus grand impact potentiel en CRO car il affecte tous les utilisateurs, pas seulement ceux qui arrivent au bas de la page. Un test bien exécuté ici peut avoir un impact plus grand que dix tests dans des zones de moindre visibilité.

L'optimisation des landing pages commence toujours par l'analyse de l'above the fold : ce que l'utilisateur voit, comprend et fait dans les premières secondes.

Pour un diagnostic rapide de votre landing page actuelle, essayez Scan&Boost et obtenez des recommandations concrètes sur votre zone à plus grand impact.

Adrià Vidal, spécialiste CRO chez Boost.