Ergonomie et ligne de flottaison

Jérôme du blog marketing Mindeez vous propose un petit article sur les pièges à éviter avec la ligne de flottaison, ou fold en anglais, qui représente la ligne imaginaire à partir de laquelle l’utilisateur doit faire défiler la page. Le contenu se situant en dessous de la ligne de flottaison ne sera visible que si l’internaute fait défiler la page.

 

La notion de fold ne vient pas des sites web, mais du monde des journaux. Lorsque les journaux sont étalés, il sont pliés, la ligne de flottaison représente cette pliure.

Pour faire défiler la page on peut utiliser la barre de défilement, la molette de la souris ou la barre d’espace. La hauteur de la ligne de flottaison change en fonction de la résolution de l’écran et du navigateur de l’internaute. Ainsi, tous les internautes ne verront pas la même chose en fonction de la hauteur de leur écran et de leur navigateur. Il faudra donc adapter le design en fonction de la plus petite résolution d’écran ciblée.
Ainsi si vous développez votre site web pour une résolution de 1024x768px, il faudra prendre en compte que la hauteur de la ligne de flottaison se situe à environ 600px. En fonction du navigateur la différence est assez importante, avec Google Chrome c’est presque 70px de plus que vous gagné par rapport a Mozilla.

 

Pour laisser un peu de marge je rajoute toujours 20px car beaucoup ont des barres d’outils dans leurs navigateurs ou autres. Pour vous donner une idée de la hauteur de la ligne de flottaison en fonction de la résolution de l’écran :

 

Résolution Hauteur de la ligne de flottaison
1024x768px 560px
1280 × 1024px 820px
1600×1080 880px
1920x1200px 1000px

 

Un petit piège à éviter

Une chose à laquelle il faut faire attention avec la ligne de flottaison c’est de ne pas avoir d’espace blanc situé pile au niveau de cette ligne. Lorsqu’il y a un espace blanc important, l’internaute s’il ne voit pas la barre de défilement de droite pourra penser que le site se termine à cette endroit et ne pas faire défiler la page.

 

Les études de eyetracking ont pu mettre en exergue que les internautes parcourent rarement l’écran jusqu’à la barre de défilement de droite. Ce qui est d’autant plus vrai avec les écrans wide (16/10). Donc les internautes verront plus facilement qu’il est possible de faire défiler la page car le contenu est coupé par la ligne de flottaison plutôt que par la présence d’une barre de défilement.

 

Au dessus de la ligne de flottaison il est nécessaire d’y mettre les informations importantes. L’utilisateur en arrivant sur le site doit comprendre tout de suite où est ce qu’il est. Contrairement aux préjugés les internautes ont l’habitude de faire défiler les pages web. Si les utilisateurs ne font pas défiler les pages c’est parce qu’ils ne trouvent pas l’info recherchée. L’internaute ne fera pas défiler la page si le premier écran ne lui indique pas instantanément qu’il est au bon endroit.

 

Retrouvez tous les articles de Jérôme sur son blog Marketing. Pleins de choses intéressantes à y apprendre sur la psychologie du consommateur.


  1. Ping : Comprendre le e-commerce : obtenir de nouveaux clients et les fidéliser

  2. Ping : 8 Idées pour Optimiser le Contenu de vos Pages Produits

  3. loran dit :

    bonjour,

    j’ai effectué pour ma part une petite étude statistique basée sur quelques sites internet que je gère, au sujet de la ligne de flottaison.

    par analogie vis à vis du contenu à afficher, j’arrive à dessiner la hauteur utile d’une telle ligne.

    voir sur : http://www.unpeudeseo.com/2012/07/11/ligne-flottaison-valeurs/

  4. Bonjour,

    Je suis chef de projet dans l’agence web Twinbi.
    Merci pour cet article, car nous essayons justement d’analyser ce problème de « ligne de flottaison » avec les questions que cela peut engendrer au moment de création web.

    Cordialement,

  5. Raff dit :

    Merci bcp pour ces informations sur la ligne de flottaison dont je connaissais rien avant de lire cet article

Laisser un commentaire

*