Les éditeurs de sites qui souhaitent offrir la meilleure expérience utilisateur possible à leurs visiteurs ont la vie dure ! Ils doivent tenir compte d’une multitude de paramètres et appréhender des concepts dont ils ignorent souvent l’origine et les enjeux. Nous allons tenter d’apporter un éclairage sur la ligne de flottaison, une notion qui méritent l’attention de tous les professionnels du webmarketing, qu’ils s’agissent des développeurs, des webdesigners ou encore des référenceurs.
Qu’est-ce qu’une ligne de flottaison ?
Si vous êtes sensible à l’univers maritime, le premier sens de la ligne de flottaison ne doit pas vous échapper. Cette expression permet de désigner la ligne qui sépare la partie immergée de la coque d’un navire de celle qui est émergée.
La ligne de flottaison informatique n’est pas une traduction littérale d’un groupe de mots dans la langue de Shakespeare, comme cela peut être le cas pour de nombreuses traductions. Les anglophones recourent quant à eux à l’expression “above the fold”, “au dessus de la pliure” en Français, ce qui, concédons le, correspond à un terme peu parlant et qui n’a pas de rapport avec notre contexte maritime.
Cette pliure correspond aux titres de presse pliés en deux sur les présentoirs des kiosques à journaux, une façon de gagner de la place tout en mettant en avant le nom des publications ainsi que les titres majeurs associés.
C’est donc au-dessus de cette pliure qu’apparaissent les informations destinées à attirer le public visé.
La ligne de flottaison n’est pas clairement matérialisée sur une page web, elle délimite fictivement toute la partie qu’un internaute visualise une fois le chargement achevé de sa partie non perceptible avant le scrolling, elle s’apparente à la frontière entre la partie visible d’un iceberg, et la partie immergée se trouvant sous la surface de l’eau.
La situation de la ligne
Puisque les internautes possèdent des technologies diverses et variées (appareil, navigateur web, barre des tâches de grosseurs différente etc.), ils ne partagent pas la même résolution et ne perçoivent pas les contenus de la même façon. Pour vous donner tout de même une idée, un écran de 1024 x 768 pixels, la ligne de flottaison s’établit à environ 700 pixels. Dans le cadre d’une résolution full HD soit 1090 x 1080 pixels, la ligne de flottaison atteint fréquemment 1 000 pixels.
Des services tels que Responsive Design Checker et celui d’optimisation mobile de la Search Console vous donnent déjà un bon aperçu des éléments affichés sur les principaux appareils.
La ligne de flottaison, quel intérêt ?
Dans l’absolu, cette ligne virtuelle n’existe pas sur tous les écrans des internautes. En effet, si la longueur de la page web (en hauteur) s’avère très courte, l’utilisateur a la faculté de percevoir l’ensemble des éléments immédiatement, il n’est pas contraint de scroller pour découvrir d’autres informations masquées dans un premier temps.
Si la ligne de flottaison est dans les faits présente de partout, c’est qu’elle donne la possibilité aux propriétaires de sites de pouvoir afficher des textes, des images et d’autres contenus au sein d’une seule et même page, et ce sans avoir à choisir une police de caractères ridiculement petite. D’ailleurs, une étude publiée par ClickTale il y a quelques années montrait que plus de 9 pages web sur 10 disposaient d’un ascenseur vertical.
Le comportement des internautes
L’habitude du scrolling
On pourrait tout de même se demander si ce n’est pas trop risqué, dans une optique de conversion, de rassembler de nombreuses informations sous la fameuse ligne de flottaison ? Il n’en est rien ! D’après la même étude, 76% des pages Internet comportant un ascenseur vertical sont scrollées. Les mobinautes (utilisateurs de tablettes et de smartphones), dont la part dans le total des internautes augmente chaque année, sont ceux qui scrollent le plus sur leur appareil mobile. Il est donc admis que la quasi totalité des personnes surfant sur le web sont familiarisées avec la consultation des données sous la ligne de flottaison. Ils n’ont guère d’autres choix s’ils veulent consulter des listing de produits, lire et répondre à des commentaires ou encore dévorer des articles de plus de quelques paragraphes.
Cette tendance se vérifie sur le plan statistique puisque la partie sous la ligne de flottaison est 3 fois plus lue que celle se trouvant au-dessus. De même, la moitié des utilisateurs font usage du scrolling en moins de 10 secondes et 90% dans les 14 secondes.
L’instructif eye-tracking
Se préoccuper attentivement de la seule partie visible serait-il une perte de temps ? On n’en est pas là ! D’autres enquêtes témoignent de l’importance de la partie haute d’une page web. Une étude de Chartbeat (entreprise spécialisée dans l’analyse de données) et menée en 2014 a par exemple révélé que la zone localisée sous la ligne de flottaison concentre à elle seule 66 % de l’attention des internautes sur une page web classique. Une autre recherche a mis en évidence que les utilisateurs consacrent 57% du temps à consulter la partie visible, celle au-dessus de la ligne de flottaison.
Les travaux portant sur l’eye-tracking, à savoir l’analyse des mouvements oculaires d’un individu à la lecture d’une page web, sont instructifs et permettent d’orienter les optimisations des éditeurs. On apprend que l’attention du lecteur est immédiatement focalisée sur le coin supérieur gauche de l’écran. Puis, il ne lit que les premiers mots de chaque paragraphe et de moins en moins à mesure qu’il descend vers le bas de page.
Optimisation pour la ligne de flottaison
L’importance de la proposition de valeur
Vous avez réussi à faire venir des internautes via les médias sociaux ou au moyen d’un moteur de recherche ? La partie est loin d’être gagnée, il convient de susciter l’intérêt de ces prospects et de leur donner envie de scroller. Pour ce faire, proposez du contenu engageant et faites preuve de clarté !
Tenez compte du F-Pattern et rassemblez les informations que vous jugez essentielles sur la partie en haut à gauche de la page. Mettez en exergue les expressions les plus importantes au début des paragraphes, structurez soigneusement chacun de vos contenus, sans omettre de publier au dessus de la ligne de flottaison les données cruciales. Si vous promouvez un produit ou un service, expliquez intelligiblement votre proposition de valeur avant que l’internaute ne puisse scroller.
Renforcer l’ergonomie
Avant d’arrêter tout changement dans le design ou l’architecture, on vous encourage à faire appel à un outil pour visualiser ce que voient les internautes selon leur résolution. De plus, vous avez intérêt à tirer des enseignements des données révélées par Google Analytics consacrées aux terminaux dont vos visiteurs se servent.
D’autres techniques s’avèrent utiles pour favoriser l’ergonomie, diminuer le taux de rebond et améliorer l’expérience utilisateur. Il y a par exemple le traditionnel bouton “Revenir en haut”, un seul clic permet à l’internaute de revenir quasi instantanément en haut de la page. Aérez vos contenus, de surcroît si la page bénéficie d’une grande hauteur. Illustrez vos propos et jouez du gras pour mettre en avant les idées fortes.
Vous faites apparaitre un carrousel ou un autre type de visuel imposant ? Insérez une flèche clignotante pour indiquer à l’utilisateur qu’il faut descendre.
Ligne de flottaison et SEO
Si tous les responsables de sites internet ne donnent pas la même importance à la ligne de flottaison, il suffit d’observer les pratiques de Google pour apprécier à quel point il est fondamental de présenter des informations en haut de la page quand on est un professionnel. La mise en lumière des annonces publicitaires Google Ads en est la plus belle illustration !
L’alternative pour les entreprises qui ne parviennent pas à hisser leurs pages en tête des résultats naturels, ou ne souhaitent pas investir dans les liens sponsorisés, reste le travail d’optimisation de leur fiche Google My Business et l’amélioration de leur référencement local.
Les conseils livrés dans le paragraphe précédent devraient vous aider à captiver vos internautes, cependant ne sous-estimez pas l’importance des considérations techniques. En évitant de surcharger vos pages d’images au poids important et de publicités (des éléments souvent présentés dans la partie supérieure de la page), vous allez favoriser la vitesse de chargement, l’un des critères de classement des résultats organiques.
Enfin, ne perturbez pas le travail des bots chargés de l’indexation qui doivent pouvoir explorer tous vos contenus, des liens en bas de page doivent leur faciliter l’accès aux autres pages.
Vous restez perplexe quant aux enjeux associés à cette ligne virtuelle ?
S’affranchir du concept de ligne de flottaison, c’est l’approche radicalement différentes qu’adoptent déjà certains observateurs à l’image de Raphaël Yharrassarry, à l’origine du Persuasive Design.
Laisser un commentaire