Pourquoi la ligne de flottaison est un comportement, pas une hauteur en pixels

Que veut dire au-dessus de la ligne de flottaison ?

Le contenu au-dessus de la ligne de flottaison est tout ce qu'un visiteur peut voir sans faire défiler, ce qui en fait une propriété de son écran plutôt qu'un nombre que tu peux inscrire dans un fichier de design. Le terme est emprunté aux journaux grand format, pliés en deux pour l'exposition en kiosque, de sorte que seule la moitié haute de la une faisait face à l'acheteur. Les rédacteurs en chef y plaçaient l'article qui devait vendre le journal.

Le web a hérité de l'idée parce que les écrans s'arrêtent toujours quelque part. Amy Schade, du Nielsen Norman Group, a posé le mécanisme clairement en 2015 : "What is visible on the page without requiring any action is what encourages us to scroll." La ligne de flottaison n'arrête pas les gens. Elle décide s'ils se donnent la peine.

Pourquoi une hauteur en pixels est-elle une mauvaise façon de définir la ligne de flottaison ?

Parce qu'il n'y a pas une seule ligne à définir. L'argument de Schade contre un nombre fixe est direct : "A responsive design may have 2, 3, 4, or more different folds, specific to the devices and screen sizes that the design was optimized for." Toute valeur que tu choisis est correcte pour une minorité de tes visiteurs et fausse pour tous les autres.

La hauteur disponible pour ton contenu bouge pour des raisons qui n'ont rien à voir avec ta mise en page :

• Le chrome du navigateur. Barres d'outils, bandeaux d'onglets et barres de favoris mangent des quantités différentes sur chaque navigateur et chaque OS.
• La barre d'adresse mobile, qui se replie au défilement, si bien que le viewport est physiquement plus haut après le premier swipe qu'avant.
• La mise à l'échelle de l'affichage au niveau de l'OS et la taille de police par défaut du visiteur.
• Le niveau de zoom, non nul plus souvent que les designers ne le supposent.
• L'orientation de l'appareil, qui divise ou double le nombre en une rotation.

Traite la ligne de flottaison comme une distribution plutôt que comme un trait. La question utile n'est pas "où est la ligne" mais "que voit le 25e centile de mes visiteurs avant de faire défiler", et celle-là se répond à partir de tes propres données au lieu du chiffre d'un article de blog.

Que dit la recherche sur le scroll et la ligne de flottaison ?

Le Nielsen Norman Group a mené de l'eyetracking sur des pages d'actualité, d'e-commerce, de blog, de FAQ et d'encyclopédie, avec 120 participants sur des écrans 1920 par 1080, en récoltant plus de 130 000 fixations oculaires. Therese Fessenden a publié les résultats le 15 avril 2018. Le titre, c'est que les gens font bien défiler, et que l'attention s'empile quand même fortement en haut.

Zone de la page	Part du temps de regard
Au-dessus de la ligne de flottaison	57%
Deux premiers écrans (jusqu'à 2160px)	74%
Trois premiers écrans	81%
20% supérieurs de la page	plus de 42%
40% supérieurs de la page	plus de 65%

L'évolution dans le temps est la partie qui mérite débat. Dans l'étude de 2010 de NN/g, menée sur des moniteurs 1024 par 768, 80% du temps de regard se passaient au-dessus de la ligne de flottaison. En 2018, c'était 57%. Le défilement est devenu normal, donc la ligne de flottaison est devenue moins absolue et plus relative, mais elle n'a pas cessé de compter : plus de 65% du temps de regard au-dessus de la ligne étaient concentrés dans la moitié haute du viewport, ce qui veut dire que l'attention s'amincit à l'intérieur du premier écran, pas seulement après lui.

La mesure de la frontière elle-même par Schade en 2015 est la version la plus nette de l'effet. Les 100 pixels juste au-dessus de la ligne étaient vus 102% de plus que les 100 pixels juste en dessous, et sur l'ensemble de ses données, la différence moyenne de traitement entre l'information au-dessus et en dessous de la ligne était de 84%. Une rangée de pixels de déplacement change très peu de chose ; franchir la frontière double à peu près les chances que le contenu soit vu.

Au-dessus de la ligne de flottaison, avant et après

Étude 201080 %

Étude 201857 %

Jusqu'où les lecteurs descendent-ils vraiment dans la page ?

Farhad Manjoo a publié les données de scroll de Chartbeat pour Slate le 6 juin 2013, et les chiffres ont mieux vieilli que la plupart des statistiques web parce qu'ils décrivent un comportement plutôt qu'une technologie.

Comportement	Slate	Réseau Chartbeat
Arrivent et repartent sans s'engager	38%	non indiqué
Ne font jamais défiler du tout	environ 5%	environ 10%
Le lecteur médian atteint	environ 50% de l'article	environ 60%
Dépassent le 1600e pixel	25%	non indiqué

Le cadrage de Manjoo était la partie mémorable : sur 161 personnes qui atterrissaient sur la page, environ 61 étaient déjà parties, et sur les 100 qui restaient, cinq ne feraient jamais défiler. Le résultat qu'il a enterré est celui qui devrait changer les comportements. Il y a une relation très faible entre la profondeur de défilement et le partage, donc les articles les plus tweetés ne sont pas les articles les plus lus en profondeur. Quiconque traite les partages comme la preuve qu'un contenu a été consommé mesure tout autre chose.

Deux choses découlent de la mise côte à côte des chiffres de NN/g et de Chartbeat. La plupart des gens font défiler, donc cacher tout ce qui est important dans les 600 premiers pixels est inutile. Et l'attention décroît fortement, donc l'ordre de ton contenu compte bien plus que le fait qu'un élément donné franchisse une ligne imaginaire. Si tu veux savoir où tes propres lecteurs s'arrêtent plutôt que là où ceux de Slate s'arrêtaient en 2013, c'est à ça que sert le suivi de la profondeur de défilement.

Qu'est-ce qu'un faux plancher, et pourquoi coûte-t-il plus cher qu'une page longue ?

Un faux plancher est le mode d'échec que la ligne de flottaison provoque réellement. Kim Flaherty l'a nommé l'illusion de complétude chez NN/g le 17 janvier 2016 : "The illusion of completeness happens when the visible content on the screen appears to be complete, when in fact more information exists outside of the viewable area."

Dans un test d'utilisabilité qu'elle décrit, six participants sur huit n'ont pas du tout fait défiler une page, et 75% des participants se sont agacés après avoir saisi des informations personnelles pour découvrir que le service n'était pas disponible dans leur région, parce qu'ils n'avaient jamais réalisé que du contenu existait plus bas. La page n'était pas trop longue. Elle avait l'air finie à la frontière.

Le correctif est visuel plutôt que structurel. Laisse quelque chose franchir la ligne. Un titre coupé en deux, une image qui continue au-delà du bord, une rangée de cartes dont la quatrième est tronquée : tous disent à l'œil que la page ne s'est pas arrêtée. Les sections de héros pleine hauteur avec un bord horizontal net en bas sont le moyen le plus fiable de fabriquer un faux plancher.

Comment la variété des viewports doit-elle changer ce que tu mets en haut ?

Arrête de concevoir pour la ligne de flottaison et commence à concevoir pour le premier écran de ton trafic réel. Trois gestes pratiques :

• Mesure ta propre distribution de viewports. window.innerHeight au chargement de la page, mis en tranches et rapporté, te donne la vraie forme. Combine-le avec visualViewport si le zoom et les claviers à l'écran t'importent. Une heatmap segmentée par classe d'appareil montre la même chose spatialement, ce qui est en général plus facile à discuter ; notre guide pour lire une heatmap de site explique comment éviter de la surinterpréter.
• Utilise les unités de viewport qui connaissent la barre d'adresse. Le CSS offre svh, lvh et dvh à côté de vh précisément parce que le viewport mobile change de taille pendant un défilement. Un héros dimensionné en 100vh déborde sur le petit viewport et laisse un trou sur le grand.
• Mets la promesse au-dessus de la ligne de flottaison, pas toute la page. Le premier écran a une seule mission : laisser quelqu'un confirmer qu'il est au bon endroit et voir qu'il y a une suite. Tout le reste peut vivre en dessous, parce que la recherche dit qu'ils y arriveront.

La vitesse interagit avec tout ça. Un contenu techniquement au-dessus de la ligne de flottaison mais qui n'a pas encore été peint n'est au-dessus de rien, et c'est pourquoi le Largest Contentful Paint est noté sur le plus grand élément à l'intérieur du viewport plutôt que sur la page entière. Une image de héros qui arrive à quatre secondes est en dessous de la ligne de flottaison à tous les égards qui comptent pour le visiteur. Si tu travailles sur une page précise, notre marche à suivre pour analyser une landing page met ces vérifications dans l'ordre.

Questions fréquentes

La ligne de flottaison compte-t-elle encore maintenant que tout le monde fait défiler ?

Oui, mais comme une pondération plutôt que comme un mur. NN/g a mesuré 57% du temps de regard au-dessus de la ligne de flottaison en 2018 et une différence de 102% entre les 100 pixels juste au-dessus de la frontière et les 100 juste en dessous. Les gens la dépassent en défilant ; ils ne prêtent pas la même attention des deux côtés.

Quelle hauteur en pixels fait la ligne de flottaison ?

Il n'y en a pas une seule. Un design responsive a autant de lignes de flottaison qu'il a de tailles d'écran cibles, et le chrome du navigateur, le zoom, la mise à l'échelle de l'affichage et la barre d'adresse mobile repliable déplacent encore la frontière sur chaque appareil. Mesure tes propres visiteurs au lieu d'adopter un chiffre.

L'appel à l'action doit-il toujours être au-dessus de la ligne de flottaison ?

Seulement si le visiteur a assez d'informations pour agir à ce moment-là. Sur une page qui vend quelque chose de familier, un CTA dans le premier écran fonctionne. Sur une page qui doit d'abord expliquer quelque chose, un CTA précoce est ignoré et le bon placement est après l'argumentaire. Le répéter vaut généralement mieux que le déplacer.

Quelle quantité de contenu mettre dans le premier écran ?

Assez pour répondre à "suis-je au bon endroit", plus un signal visible que la page continue. NN/g a trouvé que plus de 65% de l'attention au-dessus de la ligne de flottaison atterrit dans la moitié haute du viewport, donc la moitié haute du premier écran fait l'essentiel du travail, quelle que soit la quantité que tu y mets.

Les pages longues performent-elles moins bien que les courtes ?

Pas par la seule longueur. Les données de Chartbeat montraient le lecteur médian s'arrêtant vers la moitié d'un article, ce qui pénalise le remplissage plutôt que la longueur. Une page longue dont la valeur est mise en avant bat une page courte qui a l'air finie à la ligne de flottaison.

D'où vient le terme ligne de flottaison ?

De la presse. Les journaux grand format étaient pliés en deux pour l'exposition, si bien que seule la moitié haute de la une était visible pour quelqu'un qui passait devant un kiosque, et le titre le plus fort y allait. Le web a emprunté le mot quand il s'est avéré que les écrans avaient la même propriété.

Quelle est la différence d'attention entre le contenu au-dessus et en dessous de la ligne de flottaison ?

Nielsen Norman Group a constaté que les 100 pixels juste au-dessus de la ligne de flottaison recevaient 102 % de vues en plus que les 100 pixels juste en dessous. Sur l'ensemble des données de Schade, l'écart moyen d'attention entre le dessus et le dessous de la ligne était de 84 %. Franchir cette limite double à peu près les chances qu'un visiteur remarque quelque chose.

Pourquoi la ligne de flottaison bouge-t-elle sur mobile dès qu'on commence à faire défiler la page ?

La barre d'adresse du navigateur mobile se réduit dès que le visiteur fait défiler la page, donc le viewport devient physiquement plus grand après le premier geste qu'au chargement. La même page a une ligne de flottaison à l'ouverture et une autre une seconde plus tard, sur le même téléphone. C'est une raison de plus pour laquelle un seul chiffre en pixels ne peut pas décrire la ligne de flottaison.

Qu'est-ce que l'illusion de complétude ?

C'est le terme de Kim Flaherty pour une page qui semble terminée au bord de l'écran alors que du contenu existe encore en dessous. Dans un test NN/g qu'elle décrit, six participants sur huit n'ont jamais fait défiler la page, et 75 % des participants se sont frustrés après avoir saisi des informations personnelles pour découvrir que le service n'était pas disponible dans leur région. La page n'était pas terminée, elle en avait seulement l'air.

Les partages sur les réseaux sociaux prouvent-ils qu'un article a été lu ?

D'après les données de Chartbeat derrière l'article de Farhad Manjoo publié dans Slate en 2013, non. Le lien entre la profondeur de scroll et les partages était très faible, et les articles les plus partagés n'étaient pas ceux qui étaient lus le plus profondément. Le nombre de partages mesure autre chose que la lecture réelle.