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 :

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.