Au-dessus ou sous la ligne de flottaison : où va l’attention, et quoi placer où
Au-dessus de la ligne de flottaison, c’est ce qu’un visiteur voit avant de faire défiler ; en dessous, c’est le reste de la page. L’eye-tracking montre que le premier écran reçoit 57 % du temps de lecture et le deuxième 17 %. Placez la promesse au-dessus de la ligne, la preuve en dessous, et donnez aux gens une raison de la franchir.
Par Anthony Roose
6 min de lecture
Quelle différence entre au-dessus et sous la ligne de flottaison ?
Au-dessus de la ligne de flottaison, c’est la partie de la page visible au chargement. En dessous, c’est tout ce qu’un visiteur n’atteint qu’en faisant défiler. La limite est le bord inférieur de la fenêtre du navigateur : elle se situe à une hauteur différente sur chaque appareil.
Notre guide sur ce que signifie au-dessus de la ligne de flottaison montre où tombe cette ligne sur un portable, un écran et un téléphone. Ce guide compare les deux zones : qui les voit, combien de temps, et quoi placer où.
La différence, c’est le coût. Nielsen Norman Group parle de coût d’interaction : le contenu au-dessus de la ligne de flottaison ne coûte rien à voir, le contenu en dessous coûte une décision et un défilement. Selon NN/g : « Les utilisateurs font défiler, mais seulement si ce qui se trouve au-dessus de la ligne est assez prometteur. »
Comment l’attention se répartit au-dessus et sous la ligne de flottaison
En 2018, Nielsen Norman Group a analysé plus de 130 000 fixations oculaires de 120 participants sur un écran de 1920 × 1080. Les pages couvraient l’actualité, l’e-commerce, des blogs, des FAQ et des encyclopédies. Therese Fessenden a publié les résultats dans Scrolling and Attention.
| Partie de la page | Part du temps de lecture |
|---|---|
| Premier écran, au-dessus de la ligne | 57% |
| Deuxième écran | 17% |
| Tout ce qui suit | 26 %, par petites parts à chaque écran |
Dans le premier écran, l’attention se concentre de nouveau en haut. Plus de 65 % du temps de lecture au-dessus de la ligne allait à la moitié supérieure de la fenêtre. Mesuré sur la longueur de la page plutôt qu’en écrans, le premier cinquième d’une page recevait plus de 42 % du temps de lecture.
La tendance compte aussi. Dans l’étude NN/g de 2010, 80 % du temps de lecture se situait au-dessus de la ligne de flottaison. Les gens font davantage défiler, mais la chute brutale après le premier écran garde la même forme.
La ligne de flottaison est une falaise, pas une pente
L’attention ne baisse pas de façon régulière vers le bas. Elle chute à la ligne de flottaison. Dans The Fold Manifesto (2015), Amy Schade de NN/g décrit une analyse de 57 453 fixations oculaires : les 100 pixels juste au-dessus de la ligne ont été regardés 102 % de plus que les 100 pixels juste en dessous.
Deux bandes de page à quelques pixels l’une de l’autre, et l’une reçoit deux fois plus de regards. L’ordre de votre contenu décide de qui le voit ; ce n’est pas un détail de mise en page.
En bref Au-dessus de la ligne de flottaison, vous touchez chaque visiteur ; en dessous, il faut mériter ses lecteurs. Placez au-dessus de la ligne la seule chose qu’un inconnu doit comprendre.
Les gens font défiler. Le contenu sous la ligne compte-t-il encore ?
Oui, pour les visiteurs qui restent. Chartbeat a étudié 25 millions de sessions sur des sites d’information, et Josh Schwartz a publié où les lecteurs passaient leur temps. L’endroit le plus vu se trouvait juste au-dessus de la ligne de flottaison, vers 550 pixels, vu par un peu plus de 80 % des visiteurs.
À partir de là, la portée baisse. La moitié des lecteurs atteignait 1 500 pixels sur les pages d’article, et seulement 1 000 pixels sur les pages d’accueil.
Le temps raconte l’autre moitié de l’histoire. Le haut de la page restait visible environ 4 secondes. La zone autour de 1 200 pixels restait visible presque trois fois plus longtemps, pour les lecteurs qui l’atteignaient.
Les deux zones ont donc des rôles différents. Au-dessus de la ligne, la portée : presque tout le monde la voit, brièvement. En dessous, le temps : moins de personnes, qui lisent plus longtemps et décident d’agir ou non.
Quoi placer au-dessus de la ligne de flottaison, et quoi en dessous
Suivez la répartition de la recherche. Au-dessus de la ligne, ce dont un inconnu a besoin pour rester. En dessous, ce dont un visiteur intéressé a besoin pour agir.
| Contenu | Où | Pourquoi |
|---|---|---|
| Titre qui dit ce que vous proposez | Au-dessus | Chaque visiteur le voit, et il décide du défilement |
| À qui il s’adresse | Au-dessus | Les visiteurs vérifient que c’est pour eux avant de lire la suite |
| Appel à l’action principal | Au-dessus, et répété en dessous | Un visiteur prêt ne doit pas le chercher |
| Une preuve : un chiffre ou un client nommé | Au-dessus | Une raison d’y croire en quelques secondes |
| Fonctionnalités et fonctionnement | En dessous | Lu par les visiteurs déjà intéressés |
| Témoignages et études de cas | En dessous, avec un aperçu au-dessus | La preuve fonctionne une fois l’offre claire |
| Détails des prix et FAQ | En dessous | Répond aux objections au moment de la décision |
| Formulaires longs | En dessous, ou sur leur propre page | Demandez un effort une fois la valeur claire |
La section hero fait l’essentiel du travail au-dessus de la ligne de flottaison. Un titre, une ligne en dessous, un bouton et une image : sur un téléphone, un écran n’en contient pas plus.
Le faux plancher : quand la ligne de flottaison arrête le défilement
Le contenu sous la ligne ne fonctionne que si les visiteurs savent qu’il existe. NN/g appelle cet échec l’illusion de complétude : l’écran semble terminé, alors les gens s’arrêtent. Kim Flaherty la décrit dans The Illusion of Completeness (2016).
Un cas tiré de cet article : un service de livraison de repas s’ouvrait sur une vidéo plein écran et un bouton Get Started. Six utilisateurs sur huit n’ont pas compris qu’ils pouvaient faire défiler. Ils ont cliqué sur le bouton et saisi leurs coordonnées avant de savoir ce que faisait l’entreprise.
Les signaux qui créent un faux plancher :
- Une image ou une vidéo hero qui s’arrête pile au bas de l’écran, sans rien de visible en dessous.
- Une ligne sur toute la largeur ou une large bande d’espace blanc là où finit le premier écran.
- Une publicité ou un bloc promotionnel qui ressemble à la fin du contenu.
La solution, c’est un aperçu. Laissez le haut de la section suivante apparaître au-dessus de la ligne, un titre ou le bord d’une carte, pour que la page continue de façon visible. L’avis de NN/g sur les flèches de défilement : un bon design n’en a pas besoin.
Comment vérifier les deux moitiés de votre page
Testez le premier écran avec un test des cinq secondes. Montrez-le cinq secondes à quelqu’un qui ne le connaît pas, cachez-le, puis demandez ce que propose l’entreprise, à qui elle s’adresse et sur quoi cette personne cliquerait. Des réponses vagues signifient que le haut de page ne mérite pas le défilement.
Vérifiez le reste avec la profondeur de défilement dans vos statistiques. Si la plupart des visiteurs partent au premier écran, le problème se situe au-dessus de la ligne de flottaison. Une meilleure section de preuves n’aidera pas ceux qui ne l’atteignent jamais.
Le test gratuit sur 5sec.io lit votre premier écran comme le ferait un inconnu. L’Above the Fold Audit évalue une quinzaine de pages clés avant le défilement. Le Full-Page Audit suit les mêmes pages jusqu’au pied de page : structure, récit, place des preuves et formulaires.
Voyez ce que chaque visiteur voit en premier
Le test gratuit lit votre premier écran comme un inconnu et vous dit ce qui est passé avant le défilement.