Ce que « au-dessus de la ligne de flottaison » veut dire sur un site web, et pourquoi cela décide de vos conversions

D’où vient le terme

L’expression vient de la presse. Un journal est plié sur le présentoir, si bien que seule la moitié supérieure de la une est visible. Les rédactions plaçaient l’article qui devait vendre le journal au-dessus de ce pli. Tout le reste attendait que le lecteur prenne le journal en main.

Les sites web ont repris l’idée. La ligne de flottaison est devenue le bord inférieur de la fenêtre du navigateur : la ligne où le premier écran s’arrête et où le défilement commence. Au-dessus, ce que chaque visiteur voit. En dessous, ce que seule une partie des visiteurs atteint.

Où se situe la ligne de flottaison aujourd’hui

Il n’y a plus une seule ligne de flottaison. La ligne bouge avec l’écran, les barres du navigateur et le niveau de zoom. Un visiteur sur un grand moniteur voit environ 900 pixels de hauteur de page. Un visiteur sur un téléphone voit environ 650 à 750 pixels, et bien moins de largeur. Même page, premier écran différent.

C’est pourquoi « au-dessus de la ligne de flottaison » se lit mieux comme une question que comme une valeur en pixels : que voit un nouveau visiteur avant de bouger le doigt ? Concevez pour le plus petit écran qui compte pour votre public, vérifiez les autres, et considérez chaque pixel de ce premier écran comme précieux.

Appareil	Premier écran typique	Ce qui tient généralement
Portable, 1366 × 768	environ 650 px de hauteur de page	navigation, titre, une ligne de texte, un bouton
Moniteur, 1920 × 1080	environ 950 px de hauteur de page	la section hero plus un aperçu du bloc suivant
Téléphone, 390 × 844	environ 700 px, sur une colonne	titre, deux lignes courtes, un bouton

Les hauteurs sont approximatives. Les barres du navigateur, les bandeaux de cookies et les barres de notification en grignotent une partie.

Pourquoi la ligne de flottaison décide encore de vos conversions

Les gens font défiler. Mais pas avant de juger. Nielsen Norman Group a mesuré par eye-tracking où va l’attention sur une page et a constaté que 57 pour cent du temps de lecture se passe au-dessus de la ligne de flottaison, et 74 pour cent dans les deux premiers écrans. En 2010, la part au-dessus de la ligne était de 80 pour cent : on fait donc plus défiler, mais le premier écran capte toujours plus de la moitié de toute l’attention.

Le jugement lui-même va plus vite que la lecture. Lindgaard et ses collègues ont montré que les visiteurs se forment une opinion stable d’une page en 50 millisecondes environ. Ensuite, les gens cherchent des raisons de confirmer ce qu’ils ressentent déjà. Le premier écran donne le ton de tout ce qui suit.

Mettez ces deux résultats côte à côte et la ligne de flottaison cesse d’être un détail de design. C’est le moment où un visiteur décide si votre page mérite qu’on la fasse défiler. Si le premier écran ne dit pas ce que vous proposez, pour qui, et quoi faire ensuite, la plupart des visiteurs ne verront jamais les preuves que vous avez placées plus bas.

En bref Au-dessus de la ligne de flottaison, c’est la seule partie de votre page que chaque visiteur voit. Consacrez-la à la clarté, pas à la décoration.

Ce qui a sa place au-dessus de la ligne de flottaison

Un nouveau visiteur passe en revue quelques questions dans ces premières secondes, le plus souvent sans s’en rendre compte. La ligne de flottaison doit y répondre.

1. Qu’est-ce que c’est ? Un titre en mots simples. Pas un slogan, pas un jeu de mots. Si un inconnu ne peut pas répéter ce que vous proposez après une lecture, réécrivez-le. Ces exemples de sections hero montrent ce qui réussit.
2. Est-ce pour moi ? Nommez le public ou la situation. « Facturation pour designers indépendants » bat « Une finance plus intelligente ».
3. Pourquoi maintenant ? Un résultat concret ou une preuve : un chiffre, un client nommé, un résultat.
4. Que fais-je ensuite ? Un seul appel à l’action principal. Un seul. Un deuxième bouton de même poids divise l’attention et affaiblit les deux.
5. L’image est-elle cohérente ? Une image qui montre le produit ou le résultat. Une photo de banque d’images avec des gens qui rient devant un portable ne dit rien et coûte la place de trois phrases.
6. Y a-t-il une suite ? Laissez la section suivante dépasser du bord. Une page qui se termine sur une ligne nette au bas de l’écran paraît finie, et les visiteurs arrêtent de faire défiler. Nielsen Norman Group appelle cela un faux plancher.

Ce qui n’a pas sa place au-dessus de la ligne de flottaison

• Un carrousel. Les bannières rotatives découpent votre message unique en cinq messages faibles, et la plupart des visiteurs ne voient de toute façon que la première diapositive.
• Une vidéo en lecture automatique sans texte. Le mouvement attire l’œil, mais un visiteur a toujours besoin de texte pour comprendre l’offre.
• Trois boutons en concurrence. « Essai gratuit », « Réserver une démo » et « Voir la vidéo » côte à côte, ce sont trois décisions avant même que la première ne soit prise.
• Un mur de cookies qui cache le message. Les bandeaux de consentement sont souvent obligatoires, mais ils ne doivent pas masquer le titre sur un téléphone.
• L’histoire de votre entreprise. « Fondée en 1998 » ne répond à aucune des six questions. Sa place est sur la page À propos.

Comment tester votre ligne de flottaison en cinq secondes

La méthode classique est le test des cinq secondes. Montrez votre premier écran pendant cinq secondes à quelqu’un qui n’a jamais vu la page, retirez-le et demandez : que fait cette entreprise, pour qui, et où cliqueriez-vous ? Si les réponses sont vagues, la ligne de flottaison ne fait pas son travail.

Vous pouvez le faire avec un collègue et un chronomètre. Vous pouvez aussi laisser une IA lire la page comme un inconnu : le test des cinq secondes gratuit sur 5sec.io confronte les six questions ci-dessus à votre page en ligne et cite les preuves qu’il a trouvées. Pour un site complet, l’Above the Fold Audit, un audit d’optimisation des conversions du premier écran, note une quinzaine de pages clés de la même manière et réécrit les cinq plus faibles.

Dans tous les cas, testez avant de refaire le design. La plupart des problèmes au-dessus de la ligne de flottaison sont des problèmes de texte, et le texte coûte peu à corriger.