Ligne de flottaison : que placer au-dessus du pli sur une landing page ?

Héritée de la presse papier — la moitié supérieure du journal plié, visible en kiosque —, la ligne de flottaison désigne sur le web la limite basse de ce qu'un visiteur voit sans scroller. On a régulièrement annoncé sa mort : les écrans sont devenus multiples, le scroll est devenu un réflexe, et il est vrai qu'aucun pixel n'a de position garantie d'un appareil à l'autre. Mais le principe, lui, n'a pas bougé : 100 % des visiteurs voient le premier écran, et chaque écran suivant n'est vu que par ceux que le précédent a convaincus de continuer. Sur une landing page, où chaque visiteur coûte un clic payé ou un effort SEO, ce premier écran est l'immobilier le plus cher de la page.

Ce que l'eye tracking dit de l'attention au premier écran

La recherche par oculométrie confirme la concentration de l'attention en haut de page. Une étude de Djamasbi, Siegel et Tullis publiée en 2010 dans l'International Journal of Human-Computer Studies a suivi le regard de participants sur des pages web réelles : les fixations se concentrent massivement sur la zone visible sans scroll, et les pages jugées les plus attrayantes combinaient une image principale forte, peu de texte et une hiérarchie visuelle claire dans cette zone (étude sur Google Scholar). Cela ne veut pas dire que personne ne scrolle — la plupart des visiteurs scrollent — mais que la décision de scroller se prend au-dessus du pli, en quelques secondes, sur la foi de ce premier écran. C'est le même mécanisme de tri initial que décrit notre article sur le temps passé sur une landing page.

Les 5 éléments du premier écran d'une landing page

1. Le titre : la promesse principale, formulée du point de vue du visiteur. C'est l'élément le plus lu de toute la page — notre méthode complète est dans l'article sur les titres.
2. Le sous-titre : une ligne qui précise pour qui et comment. Il transforme une promesse séduisante en promesse crédible.
3. Le CTA principal : visible sans scroller, même si le visiteur ne cliquera souvent qu'après avoir lu la suite. Sa présence annonce l'action attendue — les formulations qui marchent sont dans nos exemples de CTA.
4. Un élément de preuve : une note, un nombre de clients, un logo de média — une seule ligne de preuve sociale suffit à ce stade.
5. Un visuel qui montre l'offre : capture du produit, photo du résultat, aperçu du document — pas une illustration décorative qui pourrait accompagner n'importe quelle offre.

Et un anti-élément : la navigation. Un menu complet au-dessus du pli offre dix sorties avant le premier argument — notre article sur le menu de navigation d'une landing page détaille pourquoi le supprimer ou le réduire est presque toujours gagnant.

Le piège du « tout au-dessus du pli »

La conclusion inverse serait de vouloir tout caser dans le premier écran : promesse, bénéfices, témoignages, prix, formulaire. C'est une erreur symétrique. Un premier écran surchargé n'a plus de hiérarchie : l'œil ne sait plus où se poser, et l'étude citée plus haut montre justement que les pages préférées des utilisateurs sont celles dont le premier écran est simple. Le premier écran n'a qu'un seul travail : faire scroller — donner envie de lire l'argument suivant. La vente elle-même se joue sur toute la page, dans l'ordre décrit par notre anatomie d'une landing page qui convertit. Une exception : les offres très simples à décision rapide (une newsletter, un lead magnet), où premier écran et formulaire peuvent se confondre — voir la page courte.

Une ligne de flottaison par appareil

Il n'y a pas une ligne de flottaison mais des dizaines : un ordinateur portable affiche deux fois plus de contenu qu'un téléphone tenu en main. Comme la majorité du trafic des landing pages est mobile, la règle pratique est de concevoir le premier écran pour le mobile d'abord : si titre, sous-titre, CTA et une ligne de preuve tiennent sur un écran de téléphone, ils tiendront partout. Attention aussi aux éléments qui mangent cette zone sur mobile — bandeau cookies, barre d'application, pop-up d'entrée : notre article sur le mobile-first et celui sur le bandeau cookies montrent comment limiter les dégâts. Vérifiez enfin le rendu réel : ce que voit un iPhone SE n'est pas ce que voit votre écran 27 pouces de designer.

Comment vérifier que votre premier écran fait son travail

• Le test des 5 secondes : montrez le premier écran cinq secondes à quelqu'un qui ne connaît pas l'offre, puis demandez ce que la page propose et à qui. Réponse floue = titre à revoir — la méthode complète est dans notre article sur le test des 5 secondes.
• La profondeur de scroll : si une grande partie des visiteurs ne dépasse jamais le premier écran, le problème est au-dessus du pli, pas en dessous.
• La carte de chaleur : une heatmap montre si l'œil et les clics se posent là où vous les attendez — ou sur un élément décoratif non cliquable.
• L'A/B test du titre : c'est l'élément du premier écran au meilleur ratio effort/impact — commencez par lui, méthode dans notre guide A/B testing.

Les templates LanderKit appliquent cette discipline d'origine : un premier écran qui tient sur mobile avec titre, sous-titre, CTA et preuve sociale, zéro menu de fuite, et le reste de l'argumentaire structuré pour récompenser le scroll.