Comment réussir l’ergonomie de son site web grâce à la ligne de flottaison ?

Ergonomie web ligne de flottaison

À l’heure où je vous parle, de plus en plus de sites internet voient le jour. Malheureusement, les personnes qui les créent ne sont pas toutes formées à l’ergonomie web et les sites web qui sont créés sont parfois très difficiles à comprendre car ils ne respectent pas la ligne de flottaison.

Image ou texte trop grand, espacement trop large, la règle de la ligne de flottaison est mise à mal. Ce non-respect de la ligne de flottaison a pour conséquence de voir partir les visiteurs juste après leur arrivée et ainsi avoir un pourcentage de taux de rebond énorme !

Afin d’éviter toutes ces problématiques, j’ai décidé dans cet article de vous former à l’ergonomie web et à la ligne de flottaison. Pour moi, c’est un élément très important qui est trop peu respecté et cause beaucoup de tort aux sites internet.

Je me permets d’en parler car j’ai été comme vous à ne pas respecter cette ligne de flottaison au détriment du design ce qui m’a voulu des stats horribles et un taux de rebond en hausse. Cela m’a fait réaliser qu’elle n’était pas si inutile. De plus, vous verrez que les sites internet les plus vus en France utilisent cette ligne de flottaison à bon escient.

Qu’est ce que la ligne de flottaison ?

La ligne de flottaison est avant tout une ligne imaginaire sur un site internet. Elle délimite la partie visible au chargement de la page, de la partie non visible que l’utilisateur doit scroller pour voir.

Définition ligne de flottaison

Comment savoir où se situe la ligne de flottaison ?

Avant de vous indiquer la technique pour savoir où peut se situer la ligne de flottaison, il faut savoir que cette ligne qui fait partie des règles de l’ergonomie web n’a pas de limite exacte. C’est-à-dire qu’elle peut se déplacer en hauteur d’un appareil à un autre.

En fait, pour savoir où elle peut se situer, il faut prendre en compte les dimensions de votre écran en 72 DPI (dans mon cas 1440 x 900) et soustraire le haut de la fenêtre de la hauteur soit environ 150 px. Ce qui donne pour mon cas 750 px. Ma ligne de flottaison, sur mon ordinateur, est à environ 750 px du haut de mon site internet. 

Comprendre la ligne de flottaison

Attention, comme vous le savez, il n’y a pas de résolution unique ! La ligne de flottaison change de hauteur à chaque résolution d’ordinateur ou de mobile. En tant que Web designer, il vous faudra réfléchir aux différentes possibilités.

Pourquoi la ligne de flottaison est-elle si importante pour l’expérience client ?

Maintenant que vous savez où se situe la ligne de flottaison, je vais vous expliquer pourquoi cette règle d’ergonomie web est si importante pour un site web. La raison principale (que je vous ai cité dans l’introduction) est la hausse du taux de rebond (taux de visiteurs qui quittent votre site internet immédiatement sans avoir fait une seule action).

Sur votre page d’accueil, si la ligne de flottaison est mal gérée, vos nouveaux visiteurs qui ne vous connaissent pas encore pourraient ne pas comprendre votre site internet et seraient tentés de quitter votre site web immédiatement.

Pour les autres pages de votre site internet, si la ligne de flottaison est également mal gérée, vos utilisateurs vont louper des informations importantes. Cela va engendrer de la frustration et un mécontentement chez vos visiteurs. Plus grave, les utilisateurs pourraient bouder votre marque ou mettre de mauvais avis client. Alors ça serait une perte de chiffres d’affaires pour votre entreprise. 

Quel élément graphique faut-il mettre au-dessus de la ligne de flottaison ?

La plupart des clients que je rencontre veulent mettre le plus d’informations possible au-dessus de la ligne de flottaison. Je vous le dis tout de suite, ce n’est pas la bonne stratégie !

Il faut savoir qu’avec l’apparition des réseaux sociaux et des habitudes sur mobile, les utilisateurs sont de nouveau prêts à scroller sur votre site internet. Je vous conseillerai donc d’être le plus lisible et clair possible mais également d’avoir un graphisme aéré.

En fait, le plus important, ce n’est pas d’avoir tel ou tel élément graphique mais d’avoir un texte ou une image qui coupe la ligne de flottaison. Vous devez toujours avoir un élément coupé pour donner envie à l’utilisateur de scroller afin qu’il poursuive sa lecture. 

Si vous n’avez pas d’élément coupé, utilisez une petite flèche pour indiquer le chemin aux utilisateurs de votre site web. On retrouve souvent cette flèche en bas de la page juste au-dessus de la ligne de flottaison.

Comment gérer la ligne de flottaison web sur mobile ?

Même si les dimensions d’écran d’un mobile et d’un ordinateur sont totalement différentes, je vous conseille de suivre le même conseil que je viens de vous expliquer pour la ligne de flottaison dans la partie ci-dessus. Faites en sorte qu’une partie d’un texte ou d’une image soit coupée.

Pour cela, faites un site responsive ! N’hésitez pas à modifier la proportion de vos images de l’ordinateur à un mobile. Ne mettez pas les textes trop gros et pensez bien à les réduire afin que, par exemple, vos titres ne prennent pas toutes la hauteur d’écran de votre mobile.

Le plus simple est de tester chaque page directement avec votre mobile afin d’avoir un rendu réel de votre site internet sur un smartphone et de voir si la règle de ligne de flottaison est respectée sur votre site web mobile.

Exemple de ligne de flottaison pour 3 sites internet les plus vues en France

Suite à mon explication ci-dessus, voici 3 sites internet qui font partie des sites internet les plus visités en France et qui utilisent avec brio la ligne de flottaison. Je vous ai choisi 3 typologies de site web : site vitrine, marketplace et site e-commerce. N’hésitez pas à vous en inspirer.

La page de présentation du macbook pro d’Apple

Accueil apple Macbook Pro Ligne de flottaison

La page d’accueil Leboncoin

Accueil le bon coin ligne de flottaison

La page d’accueil Darty

Accueil Darty ligne de flottaison

Mon article se termine, j’espère que vous avez pris conscience de l’importance de la ligne de flottaison. Vous avez maintenant toutes les clés pour améliorer votre site internet et son expérience client. Très important, ne négligez pas la version mobile de votre site internet. Merci de m’avoir lu et n’hésitez pas à partager l’article.

Vous avez aimé cet article ?

1 étoile2 étoiles3 étoiles4 étoiles5 étoiles (1 vote(s), moyenne : 5,00 sur 5)
Loading...

1 réflexion sur “Comment réussir l’ergonomie de son site web grâce à la ligne de flottaison ?”

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *