Nos actualités
Qu’est-ce que la ligne de flottaison ?
Lorsque vous arrivez sur un site internet, si ce qui apparaît à l’écran ne charge pas ou ne vous convient pas, allez-vous scroller vers le bas ? ou partir vers un autre site ? Dans une grande majorité des cas, on optera pour la deuxième réponse.
En effet, ce qui est apparaît à l’écran est déterminant pour la suite. Design, texte, photo, chargement … tout doit être travaillé pour que ce qui apparaît aux yeux des internautes lui donne envie de rester.
Il existe un terme technique pour désigner la délimitation entre la partie visible, donc ce qui apparaît sur votre écran, et la partie invisible, soit le reste du site internet : la ligne de flottaison.
La ligne de flottaison est cette ligne mobile qui sépare le visible de l’invisible. C’est elle qui détermine ce qui apparaît ou qui reste caché. Tout ce qui apparaît au-dessus de la ligne de flottaison doit être optimisé pour l’expérience utilisateur. L’objectif sera de proposer un contenu attrayant pour donner envie à l’internaute de rester.
Aujourd’hui, nous allons découvrir comment la ligne de flottaison peut influencer le comportement des internautes et surtout comment en tirer profit.
SOMMAIRE :
1. Comprendre le concept de ligne de flottaison
2. Pourquoi cette ligne est-elle importante ?
3. Comment adapter le concept dans une époque où l’expérience mobile est reine ?
4. Que doit-on faire figurer au-dessus de la ligne de flottaison ?
1. Comprendre le concept de ligne de flottaison
Le concept de ligne de flottaison est en réalité emprunté au monde de la presse écrite. En anglais, on fera référence à ce qui se situe « above the fold » soit au-dessus du pli. La ligne sépare donc la partie visible des journaux, de celle qui est invisible à cause du pliage. Ce concept ne date donc pas d’aujourd’hui et a été utilisé pendant de nombreuses années voire siècles.
Le principe du « above the fold » est simple : pour attirer l’œil du passant, il faut mettre les gros titres et toutes les informations accrocheuses sur la partie supérieure de la page de façon que ces éléments apparaissent même si le journal est plié. Cette pratique est encore pratiquée aujourd’hui, et surtout dans la presse écrite anglosaxonne qui a tendance à être plus provocante et aguicheuse.
On a simplement calqué ce principe sur le monde du web. Ici, la ligne de flottaison sera moins marquée, car elle n’est pas physique. La ligne de flottaison sépare implicitement la partie visible et invisible. C’est-à-dire qu’elle est la frontière entre ce qui apparaît à l’écran et ce qui reste caché. Et contrairement à la presse écrite, la ligne de flottaison est mobile. Elle se déplace au fur et à mesure que l’internaute scrolle et se balade sur le site internet. Le concept devient alors beaucoup plus complexe.
2. Pourquoi cette ligne est-elle si importante ?
La ligne de flottaison ne doit pas être négligée. Elle est même centrale dans l’expérience utilisateur. Si ce qui apparaît à l’écran est mal cadré, déborde ou est coupé, que l’internaute ne trouve pas les informations de suite, alors il y a de grandes chances à parier qu’il s’en va.
Si vous n’êtes pas convaincu de son utilité, voici quelques raisons pour lesquelles vous devriez réfléchir à votre ligne de flottaison :
- Améliorer l’ergonomie du site
Un site ergonomique est un site où l’internaute se déplace facilement. Autrement dit, il trouve l’information qu’il cherche facilement, car l’utilisation est intuitive. La ligne de flottaison donne un cadre pour faciliter l’ergonomie. Toutes les informations importantes et nécessaires se situeront dans ce cadre, ce qui aidera l’internaute à naviguer.
- Attirer l’œil de l’internaute
On reprend ici le même principe que la presse écrite : les informations clés doivent apparaître au-dessus de la ligne de flottaison. Cette dernière sera mobile, mais le premier cadre sur lequel va tomber l’internaute sera déterminant. Il doit contenir les nouveautés, les promos, les avantages de la marque, son slogan … certains sites optent pour une vidéo qui captera l’attention dès le début. Bref, le principe est d’intriguer suffisamment l’internaute pour lui donner envie de rester.
- Donner une raison de scroller
En effet, 50 % des internautes resteront dans la partie supérieure du site. Ils ne descendront donc pas en dessous d’une certaine ligne de flottaison. Il est donc crucial de soigner les informations placées en premier et de jouer sur la ligne de flottaison pour attirer les internautes vers le bas du site internet.
3. Comment adapter le concept dans une époque où l’expérience mobile est reine ?
Si vous avez bien suivi, la ligne de flottaison est mobile : elle se déplace lorsque l’internaute scrolle. Une question vient donc en tête : comment trouve-t-on cette ligne ? On complétera même la question : comment trouve-t-on cette ligne sur ordinateur, tablette ou téléphone ?
En effet, si la ligne de flottaison est importante, il ne faut pas ignorer que la grande majorité des internautes effectuent leurs recherches depuis leur téléphone. Or, la ligne ne peut pas être au même endroit sur téléphone ou sur ordinateur. Elle peut également varier en fonction du navigateur utilisé. Alors comment on fait ?
Les experts web se sont mis d’accord sur une ligne de flottaison type : pour une définition d’écran de 1280 x 1024, on considère que la ligne de flottaison se trouve environ à 860 pixels. Pour une définition d'écran de 1024 x 768, la ligne de flottaison sera environ à 700 pixels.
Il est indispensable de paramétrer son site internet en intégrant les différentes tailles d’écran disponibles afin de garantir une bonne ergonomie générale.
Toutefois, certains sites internet ont décidé de bouder le concept de ligne de flottaison pour se concentrer sur un site One Page comme Asos par exemple. D’autres encore jouent avec la ligne de flottaison pour se démarquer des templates traditionnels qui ont pu voir le jour en suivant ce concept. Ce choix dépendra de vos préférences en termes de design. Néanmoins, il ne faut jamais perdre de vue l’ergonomie du site.
4. Que doit-on faire figurer au-dessus de la ligne de flottaison ?
Pour savoir ce qu’il faut faire apparaître au-dessus de la ligne de flottaison, il est bon de s’inspirer de nouveau de la presse écrite. Comme le font les éditeurs des journaux, toutes les informations placées au-dessus de la ligne de flottaison doivent accrocher le regard.
On retrouvera donc :
- Les promotions du moment.
- Les nouveautés.
- Les phrases d’accroche.
- Le slogan de la marque.
- Les Call-to-action.
- Des photos de haute qualité.
- Une courte vidéo pour intriguer les internautes.
Toutes les informations placées au-dessus de la ligne de flottaison doivent attiser la curiosité de l’internaute. Elles doivent créer un sentiment d’interpellation, de joie, d’envie.
Ensuite, lorsque la ligne de flottaison se déplace vers le bas, on retrouve différents types d’information :
- Présentation de la marque.
- Catégories des produits.
- Actualités.
Par exemple, le site Cuisinella respecte certains codes. On retrouvera, dans le premier cadre, une vidéo d’une cuisine réalisée avec un slogan. Lorsqu’on déplace la ligne de flottaison, on tombe sur des boutons CTA en fonction de notre projet. Ensuite, sur les différentes catégories des prestations. Et enfin, les astuces, contacts et actualités. Chaque bloc est clairement défini par la ligne de flottaison.
Newsletter
SASU au capital de 100 000 EUR | Immatriculée au RCS de Bayonne sous le numéro unique d'identification 490 097 888
Remonter