La ligne de flottaison désigne, en conception web, la limite inférieure de la partie d’une page visible à l’écran dès son affichage, avant tout défilement : elle sépare ce que le visiteur voit d’emblée de ce qu’il doit aller chercher.
L’expression emprunte l’image de la ligne qui sépare la partie émergée d’un navire de sa partie immergée. L’anglais parle de fold, le pli d’un journal. Sa position n’est pas fixe. Elle dépend de la taille et de la résolution de l’écran, du niveau de zoom, de la taille de la fenêtre et des barres du navigateur. Une même page n’a donc pas une ligne de flottaison, mais autant que de configurations d’affichage. Avec le responsive web design, la mise en page elle-même change selon l’écran, et la ligne se déplace avec elle.
La notion découpe la page en deux zones. Au-dessus de la ligne figurent en général l’en-tête, la navigation principale, le titre, la proposition de valeur et l’action principale attendue du visiteur. En dessous se trouvent les contenus de développement : arguments détaillés, preuves, compléments, pied de page.
La ligne de flottaison se distingue de la profondeur de défilement, mesurée par l’analyse du scroll, qui indique jusqu’où les visiteurs descendent réellement. La première est une frontière d’affichage ; la seconde décrit un comportement. Elle se distingue aussi du contenu visible au sens du référencement, qui oppose le texte affiché au texte masqué, quelle que soit sa place dans la page. La notion sert en webdesign, en rédaction web, dans la conception de pages d’atterrissage et dans le choix des emplacements publicitaires.
La ligne de flottaison reste un repère utile, mais elle n’est pas un mur. Dans l’article « Scrolling and Attention » (Nielsen Norman Group, 2018), une étude par oculométrie menée auprès de 120 participants sur des écrans de 1920 par 1080 pixels montre que 57 % du temps de lecture se passe au-dessus de la ligne. Les deux premiers écrans en concentrent 74 %. Dans l’étude comparable de 2010, la part au-dessus de la ligne atteignait 80 %. Les visiteurs défilent donc davantage, mais leur attention décroît toujours fortement avec la profondeur. Notre lecture : la question utile n’est pas « qu’est-ce qui tient au-dessus ? », mais « dans quel ordre le visiteur doit-il comprendre la page ? ».
Le 19 janvier 2012, Google a annoncé sur son blog officiel une modification de son algorithme (« Page layout algorithm improvement »). Elle visait les sites qui offrent peu de contenu au-dessus de la ligne de flottaison ou qui chargent le haut de leurs pages de publicités de façon excessive. Le billet précisait que le changement touchait de façon notable moins de 1 % des recherches dans le monde. Nous en retenons un principe durable : le contenu que le visiteur est venu chercher doit apparaître sans effort.
Une heatmap de scroll montre la part des visiteurs qui atteint chaque niveau de la page. Comparez-la avec le taux de clic sur l’action principale selon qu’elle est placée au premier ou au deuxième écran. Une chute brutale juste sous la ligne signale souvent une rupture visuelle plutôt qu’un manque d’intérêt.
Advalians vérifie d’abord vos données, puis mesure quelles actions et quelles pages produisent des contacts ou des ventes, et lesquelles n’en produisent pas, pour réorienter votre budget.
Advalians, cabinet de conseil indépendant en marketing et communication, vous aide à clarifier vos choix et à décider.
Il s’agit de la même notion vue sous deux angles. La ligne de flottaison est la frontière. Above the fold désigne en anglais la zone située au-dessus de cette frontière, c’est-à-dire le contenu visible sans défilement. Below the fold désigne la zone en dessous.
En pratique, les deux expressions renvoient aux mêmes décisions : quoi montrer au premier écran, dans quel ordre, et comment inciter à poursuivre. Dans un cahier des charges rédigé en français, nous recommandons « au-dessus de la ligne de flottaison », plus clair pour toutes les parties prenantes.
Elle dépend de chaque écran, il faut donc partir des données d’audience. Relevez dans l’outil d’analyse les tailles d’écran les plus fréquentes, en séparant mobile et ordinateur. Retenez les deux ou trois configurations qui couvrent la majorité des visites.
Affichez ensuite vos pages clés dans ces formats, avec les outils de simulation intégrés aux navigateurs. Notez ce qui apparaît au premier écran dans chaque cas : titre, promesse, action principale. Si l’un de ces trois éléments manque dans une configuration dominante, la page est à revoir.
Utilisez une heatmap de scroll, qui indique la part des visiteurs atteignant chaque niveau de la page. Complétez par le suivi des clics sur les éléments situés plus bas : un bouton peu vu mais très cliqué mérite d’être remonté.
Analysez les résultats par type d’appareil, car la ligne n’est pas au même endroit sur mobile et sur ordinateur. Pour trancher entre deux placements de l’action principale, un A/B testing sur un volume suffisant donne une réponse plus fiable qu’une carte de chaleur seule.
Non. Charger le premier écran dilue la priorité : le visiteur ne sait plus où regarder. Les mesures d’attention montrent d’ailleurs que les visiteurs défilent volontiers quand la page leur donne une raison de continuer.
Réservez le premier écran à trois éléments : ce que propose la page, pour qui, et l’action possible. Placez les arguments, les preuves et les détails en dessous, dans un ordre logique. Vérifiez enfin qu’aucun élément visuel ne donne l’impression que la page s’arrête au premier écran.
Elle compte surtout pour les pages où le visiteur décide vite : page d’atterrissage de campagne, page d’accueil, fiche produit. Le premier écran y conditionne la suite de la visite.
Elle compte moins pour un article long, un guide ou une documentation, que le visiteur est venu lire. Là, l’enjeu est la lisibilité et la structure : intertitres clairs, sommaire, paragraphes courts. Dans tous les cas, ne sacrifiez pas la clarté du message pour faire tenir un contenu au-dessus de la ligne.
Modèles, grilles et guides prêts à l’emploi pour vos projets marketing et communication.
