Trouver la ligne de flottaison et en tirer profit

Mais au fait, qu’est-ce qu’est la ligne de flottaison ?

Dans le monde de la publication papier, le terme « above the fold » était utilisé pour le contenu qui apparaissait dans la moitié supérieure de la première de couverture des journaux. Lorsque les journaux étaient disposés sur les stands, les titres principaux qui apparaissaient au-dessus de la ligne de flottaison étaient les plus visibles. Des phrases d’accroche prenantes et des images de couleur vives étaient utilisées pour attirer l’attention des lecteurs dans le but de les convaincre d’acheter ce journal plutôt qu’un autre.

Concernant le monde du web ? C’est pareil.

Lorsque les éditeurs ont digitalisé leur activité dans les années 90, le terme « above the fold » s’est lui aussi digitalisé pour s’intégrer au jargon du digital. En français, nous nous sommes inspirés du lexique maritime. La ligne de flottaison est la ligne qui sépare la partie immergée de la partie émergée d’un navire, de la même manière que la ligne la plus basse sur votre écran sépare la partie immergée de la partie émergée de votre site internet (la partie immergée étant accessible seulement avec un scroll de la part du visiteur).

Prenons le site internet de bluedrop.fr pour illustrer ce concept :

Source : Équipe de l'agence bluedrop

Pourquoi la ligne de flottaison est si importante ?

Pour capter l'attention de l'utilisateur et le mener à votre action, le contenu et sa position dans la page aura une importance capitale dans le processus de conversion. Lorsqu'il est affiché au-delà de la ligne de flottaison, le contenu concerné sera le premier visible par le visiteur du site internet.

Vous aurez deux choix principaux : soit vous positionnez votre call to action au-dessus de la ligne de flottaison, soit vous y placerez votre contenu qui mènera vers l'action que vous souhaitez faire effectuer à votre visiteur.

Le choix que vous ferez sur la disposition de vos éléments dépendra de trois facteurs :

• Est-ce que l'internaute connait votre entreprise et votre solution ?
• Si l'internaute connait votre solution, en pense t-il du bien au point d'être prédisposé à effectuer votre call to action ?
• Est-ce que l'action demandée est simple, rapide, peu engageante et gratuite à réaliser ?

Si vous pouvez répondre par "Oui" à ces questions, c'est que vous n'avez pas (forcément) besoin de convaincre votre visiteur et que vous pouvez effectivement placer votre call to action au-dessus de la ligne de flottaison.

Dans le cas où l'une des réponses serait négative, il vous sera necessaire de déployer vos arguments (et vous en avez !) pour le convaincre avant de placer votre call to action. Celui-ci aura donc de grandes chances de se retrouver sous cette fameuse ligne de flottaison.

Et c'est là où la partie immergée de votre page va devenir votre atout favori.

Voyez le scrolling comme votre meilleur ami

Les internautes scrollent si le contenu est intéressant.

Pour convertir votre visiteur, il vous faudra l'inciter à scroller votre page pour qu’il ne manque pas le contenu important.

Le rôle du contenu disposé au-delà de la ligne de flottaison est d’intéresser le visiteur pour qu'il effectue une action. L’action recherchée peut être de scroller pour découvrir vos arguments pour ensuite effectuer l'action.

C’est bien beau tout ça mais où se trouve précisément cette fameuse ligne de flottaison ?

La réalité fait qu’il est impossible de définir une seule et unique ligne de flottaison. La ligne la plus basse visible de votre site internet sur l'écran de l'internaute diffère selon la taille de son écran. C'est pour cette raison que définir une unique valeur en pixel serait impertinent.

Mais tout n’est pas perdu, il est possible de mettre en lumière une moyenne constatée vous permettant de gérer une grande partie des écrans. La plupart des web designers s’accordent à dire qu’elle se situe à peu près à 600 pixels de hauteur et 1000 pixels de largeur.

Et le mobile, on en fait quoi ?

Deux variables doivent être intégrées à la reflexion des webdesigners : Les smartphones ont des résolutions d’écran très variées et les utilisateurs utilisent leur smartphone en mode portrait. Ces deux éléments impliquent de retravailler presque totalement la disposition du contenu pour que l’harmonie soit conservée.

Avec cette si grande variété d'appareils, les bonnes pratiques actuelles de web design mettent l’accent sur le responsive design en adaptant le contenu de manière dynamique à toutes les résolutions d’écran.

Donc, on met le contenu sur ou sous la ligne de flottaison ?

Encore une fois, il n’y a pas de règle précise, cela dépend de votre site internet, de votre thématique et de l’action recherchée.

Certaines expérimentations ont montré que le fait de scroller améliorait drastiquement le taux de conversion car il était necessaire de gagner la confiance des utilisateurs avant de leur demander d’effectuer une action, c'est peut-être le cas de votre site internet. 

L’optimisation du placement de votre contenu sur votre site internet est un processus itératif qui implique de réaliser des analyses de données, des tests et des expérimentations pour trouver la valeur qui correspond le mieux à votre cas.

Pour conclure : Analyse, hypothèse, test et bilan

Un bon point de démarrage pour l’optimisation de la mise en forme de la page est d’analyser vos données analytiques (via Google Analytics par exemple) pour déterminer les caractéristiques principales de vos visiteurs (navigateur web, répartition de votre audience selon la taille de l’écran, type de device utilisé) ainsi que leur comportement (taux de rebond qui indiquera la pertinence de l’information et son placement, taux d’engagement…)

Ces analyses vont vous fournir une base d’informations pour adapter votre site internet à vos visiteurs en déterminant "votre" ligne de flottaison idéale.

La prochaine étape sera de tester votre nouvelle disposition de page. Pour cela, rien de plus bénéfique qu’une phase d’A/B testing pour déterminer la page la plus efficace qui sera mise en place et re-comparée ensuite à une nouvelle page en répétant le processus continuellement.

- Douichen Sofiane