Ergonomie d'un site web et ligne de flottaison

Life above the fold

Le débat a longtemps fait rage parmi les ergonomes. Mettre du contenu sous la partie directement visible à l'écran sans avoir besoin de scroller sur une page web était une hérésie pour certains.

Qu'en est-il en 2014 ? Ce que l'on nomme le pli, le fold ou la ligne de flottaison est-il encore aujourd'hui une barrière à la visibilité du contenu complet d'une page web ?

Mais où est le "Fold"

Le fold (en français : pli) est représenté par la limite basse de ce que vous voyez à l'écran quand vous affichez une page web. Pour en voir plus, vous devez "scroller", c'est-à-dire utiliser la molette de votre souris ou l'ascenseur à droite de la page, ou bien votre doigt sur une tablette ou un smartphone.

En image, voici la représentation de la ligne de flottaison en rouge sur notre page d'accueil la semaine dernière pour mon écran.

Le fold : Une ligne virtuelle qui varie d'emplacement selon l'outil de visualisation.

Le fold : Une ligne virtuelle qui varie d'emplacement selon l'outil de visualisation.

Doit-on encore se préoccuper de cette limite ?

Je pense que cette réflexion sur le fait que les internautes scrollent ou pas et sur le contenu qui devait être visible au-dessus du pli était parfaitement justifiée il y a 10 ans.
Si internet commençait déjà à être bien installé dans les foyers, bon nombre d'utilisateurs avaient encore peu d'expérience. On pouvait donc tout à fait se dire que certains d'entre eux "oublieraient" de scroller.

Les choses ont tout de même bien évolué depuis...

Des habitudes qui changent

Je crois qu'un phénomène majeur a fortement modifié le comportement de nombreux utilisateurs, c'est l'utilisation des tablettes et smartphones. Ces outils ont rendu le scroll quasi indispensable du fait de la plus petite surface (et résolution au départ) de leur écran.

La facilité de scroller avec le doigt a aussi très fortement habitué les utilisateurs à pratiquer cette musculation digitale.

Pour info, rappelez-vous qu'il se vend aujourd'hui plus de tablettes que d'ordinateurs...

Ventes tablettes tactiles en France

Source : ZDnet

Quelques éléments de confirmation

L'année dernière, Chearbeat publiait une étude qui mérite que l'on s'y attarde. Vous trouverez le récapitulatif ici (en anglais), mais pour simplifier, je ne m'attarderai que sur quelques chiffres :

  • La partie située sous le fold bénéficie de 80% de visualisation
  • La partie située entre 550 pixels (la hauteur moyenne du fold) et 1200 pixels est "lue" 3 fois plus longtemps que celle située au-dessus du fold
Profondeur du scroll

Profondeur du scroll

J'aurais tendance à expliquer ces chiffres par plusieurs raisons.

  • Nombreux sont les sites qui nous "gavent" de pub au-dessus du fold. Alors que le visiteur vient chercher du contenu.
  • La plupart des "gros" sites connus nous ont habitués à scroller, que ce soit tous les sites d'actualité ou une grande partie des sites e-commerce. Je ne parle même pas des blogs qui rendent le scroll indispensable.
  • Le web social est un web de "scrolleurs". La consultation de Facebook, Twitter, G+ sans scroller est quasi impossible si l'on veut voir le contenu utile.
  • Le matériel et l'expérience du web ont finalement habitué l'utilisateur à prendre le web tel qu'il est, c'est à dire vertical ! Petit bémol pour le matériel, les écrans d'ordinateurs s'élargissent plutôt pour nous permettre de voir... du vide.

Petit signe supplémentaire

Souvenez-vous, durant des années, Google nous a fourni un outil qui permettait de se rendre compte de ce qui pouvait être vu sur une page web sans scroller en fonction du matériel que l'on utilisait. J'ai récupéré une copie d'écran, cet outil ressemblait à ça :

above-the-fold

L'ancien outil de Google

Est-ce un signe des temps, mais cet outil qui était accessible à l'adresse http://browsersize.googlelabs.com  n'est plus accessible aujourd'hui. Google lui-même nous donne un signal, le fold n'est plus un frein, vous n'avez plus à vous en préoccuper...

Quelques règles de bon sens tout de même

  • La barre d'ascenseur ne suffit pas pour montrer que vous avez du contenu sous la ligne de flottaison. Selon l'aspect de votre site, veillez à ce que la continuité du contenu soit visible. Si un gros espace blanc horizontal se situe au niveau du fold, certains internautes pourraient penser qu'il n'y a rien dessous.
  • Sur un e-commerce, j'aurais tendance à indiquer le prix du produit au-dessus du fold sur la page de détail de celui-ci. Cette mention est souvent très importante pour l'utilisateur et la "cacher" sous le pli n'est pas forcément un signe rassurant lors de l'affichage initial de la page.
  • On pourra se poser la question pour les boutons d'action. Pour ma part, qu'ils soient au-dessus ou sous le fold n'a pas à être une règle stricte. En revanche, ils doivent être très visibles, bénéficier d'espaces blancs, et comporter un wording qui incite à l'action.
  • Vu qu'il est quasi impossible de savoir exactement ou se trouve le fold chez vos visiteurs (entre le fatras des barres d'outils personnelles installées sur les navigateurs et la diversité des matériels), mieux vaut se concentrer sur tout ce qui permet de retenir l'attention de votre utilisateur que sur cette ligne de flottaison virtuelle.

En conclusion

Si vous lisez cette ligne, il y a longtemps que vous êtes passé sous la ligne de flottaison...

Je pense que la notion de fold tombe doucement en désuétude. Si je dois aujourd'hui me concentrer sur un aspect de l'ergonomie d'un site, et surtout si j'ai un auditoire de particuliers (B2C), je m'attacherais plus à rendre mon site compatible pour les mobiles, je pense qu'il y a bien plus à y gagner.

Et lorsque l'on pense mobile, la notion "above the fold" n'a plus aucun lieu d'être !

Pour finir, un petit site sympathique humoristique sur le sujet : http://www.iampaddy.com/lifebelow600/

Edit 2015 : Une autre étude intéressante concernant le scroll sur les sites e-commerce.

(je recevrai un mail quand un article est publié (no spam)

15 thoughts on “Ergonomie d'un site web et ligne de flottaison

  1. Koogar

    Cela fait plus de 6 mois que gg a supp sa page browsersize, loin d'etre un signal fort, c'est simplement une page du web qui s'est tourné. Les pc bureau disparaissent, remplacé par le couple mobile/tablette, certain annonce la mort définitive des pc bureau pour les particuliers avant l'an 2020, ca etant si les sites de vos clients ne sont pas encore responsive, vous devriez les pousser pour les mettre a jour, car 1 site non responsive lu sur mobile, bonjour le tps de visite de mer... 😉

  2. Laurent

    Bonjour,
    J'ai, plus par habitude qu'autre chose, toujours tendance à prendre en compte le fold dans la conception d'un site. Ce point de vue remet quelques certitudes en cause, c'est très intéressant.
    Cependant, j'ai quelques indicateurs qui semblent m'indiquer que les éléments situés au dessus du fold sont mieux pris en compte : je pense aux clics sur les pubs et les clics dans les newsletters...
    A contrario, je me demande souvent (j'ai pas encore pu vraiment tester) si un élément en fin d'article, ca pourrait être une pub ou un bloc "ces articles peuvent aussi vous intéresser", ne serait pas un naturellement "clicable" pour peu qu'il ait un rapport avec l'article.

  3. bruno

    tu as conclu comme il le faut pour les internautes-scrollers.....à la fin j'ai souri.....j'ai été surpris......et je reviendrai

  4. Antoine Sacco

    Je pense que pour les gros sites e-commerce, le travail autour de la ligne de flottaison continue à faire la différence, c'est même un enjeu important quand on voit le temps moyen passé sur une page. Je ne dis pas que le visiteur ne scrollera pas mais il s'attendra à trouver les infos utiles sans scroller. Sur plusieurs millions de visiteurs, le delta doit être considérable en valeur absolue.
    Dans le cadre de l'emailing, le travail autour de la ligne de flottaison reste et restera l'élément primordial, le scroll étant beaucoup moins fréquent que sur un site web, d'autant plus lorsqu'il s'agit d'une pub ou d'une news.

  5. Raphael DOucet

    Hello Sylvain, bonne réflexion qui peut donner à réfléchir sur les pratiques.
    Mais si je pense à mon côté obscure tu as oublié un petit point qui va bien avec ton article.
    L'abus de pub au dessus de la ligne de flottaison. Pour rappel Google a déjà fait 2 MAJ officielles sur le sujet. Certes ça ne concerne pas tout le monde, mais les adeptes de MFA et MFT ...

  6. Sandrine Khou

    Encore un sujet très intéressant, je trouve, pas souvent abordé mais qui montre bien l'évolution des habitudes chez les internautes. Je pense que la présentation des sites va encore beaucoup évoluer avec l'essor du mobile et il sera de plus en plus nécessaire d'accrocher le lecteur avec l'augmentation constante des sites web. L'autre point essentiel que tu mets en évidence, c'est l'importance du contenu situé juste en dessous du Fold. Cela montre bien que cette partie du contenu est décisive dans la poursuite de la lecture chez l'internaute et qu'elle doit être rigoureusement travaillée pour retenir l'attention du lecteur et l'inciter à continuer. Merci pour cet article et le lien vers le petit site humoristique.

  7. Sylvain Auteur de l’article

    @ Laurent
    Je pense que cela dépend du contenu, mais sur un blog j'aurais tendance à dire qu'une pub bien contextualisé en fin d'article a toutes ses chances de bien convertir.

    @ Antoine
    J'aurais du ajouter que pour que l'internaute scroll, il faut quand même que la partie au dessus du fold soit intéressante 🙂

    @ Raphaël.
    Tu as raison. Ce qui me fait rire à ce sujet, c'est quen dans les conseils d'optimisation adsense, Google pousse toujours à remonter les pubs, et ensuite, son algo te sanctionne...

    @Sandrine
    On pourrait résumer en disant que TOUS les contenus d'une page doivent être utiles, sinon, il vaut peut-être mieux les supprimer.

  8. Julien

    Je vois plus la zone visible (au dessus de la ligne de flottaison) comme un call to action : un zoning ingénieux et intéressant (ergonomie inside) doit inciter l'internaute à cliquer sur les contenus qui l'intéressent. C'est bien la toute la difficulté, car beaucoup de templates en responsive design proposent par défaut un affichage tellement minimaliste qu'il en est décevant.

  9. Fabien Branchut

    La zone au-dessus de la ligne de flottaison doit à mon sens être suffisamment intéressante pour donner envie à l'internaute de lire ce qui suit en-dessous.

  10. Christophe BENOIT

    En e-commerce, le problème du fold peut être contourné en utilisant des blocs se déplaçant en même temps que le scroll. On le voit le plus souvent dans la barre de droite avec des boutons d'ajout au panier "sticky". Par contre, ça occupe toute la barre de droite.
    On en parle ici pour ceux que ça intéresse ->

  11. laurent

    bonjour

    j'avais fait un article là dessus en 2012 (http://www.unpeudeseo.com/2012/07/11/ligne-flottaison-valeurs/) et je constate les changements suivants :
    - les gens acceptent de scroller sans problème, donc on peut faire confiance à l'internaute pour faire un mini effort de navigation
    - l'usage mobile et tablette supplante maintenant l'usage desktop. Donc les écrans ont moins de définition.
    - le responsive web design a gagné la plupart des sites web, et donc, une presentation auto-adapté incite les gens à scroller : gros blocs, grandes images ... obligé souvent de scroller pour pouvoir avoir la 1ère information.

    Mais tout de même : dans ce monde de zappeur fou, si l'internaute furète sur le web, et s'il n'est pas attiré par ce qu'il trouve au dessus de la ligne de flottaison, il va zapper. L'internaute est infidèle par nature...

  12. franckwylliams

    Bonjour,
    simple visite ou passage obligé ... le visiteur ne vient pas à chaque fois pour les mêmes raisons.
    Certain furette, certains sont curieux d'autres sont en recherche, on imagine alors que certains franchiront cette fameuse ligne pour en savoir plus parce que le site est attrayant par un aspect différent (ce sera de la curiosité)ou bien par un contenu qui donne envie d'aller plus loin.

    En règle générale, l'internaute c'est vrai est devenu un zappeur fou (ça n'est pas de moi mais du post précédent), mais je rajouterais fainéant qui est de plus en plus pressé, alors que l'info est de plus en plus disponible de n'importe où et de plus en plus varié !

    Je me pose cependant une question (en fait j'ai vu quelques blogs comme ça ) n'est-il pas judicieux de varier le sens par exemple en passant sur de l'affichage horizontale puis verticale alterné par la suite ?
    Amicalement

    PS : Wording ?? => cela signifie un énoncé clair ?

  13. Joshua

    Hors e-commerce, passer la ligne de flottaison n’est pas un problème en soi depuis l’arrivée des réseaux sociaux « scroll » oblige, couplé au responsive. Par contre, pour répondre à @Franckwylliams, un affichage horizontal se trouve souvent familier avec des applications mobiles (je pense aux sites d’actualité sur tablette), je ne pense pas qu’il soit intéressant sur desktop. Mais à développer.

  14. Lucas

    C'est vrai qu'on voit rarement d'articles aborder ce qui tombe en désuétude. Ça faisait bien longtemps que je n'avais plus entendu parler de ligne de flottaison 😉

  15. serge esteves

    J'airais tendance à remettre en cause l'étude sur la hauteur du fold moyen, les résolutions moyennes sont aujourd'hui plutôt de 1920 x 1080 sur ordinateur, alors placer un fold à 500 px.... ??? En gros l'étude dit tout l'inverse si on prend un fold autour de 1000 px. Ce qui est au dessus de 1200 px est 3 fois plus lu que que le reste.

    De plus, la visibilité de ce qui est en dessous de 1000 px chute pas mal tout de même.Et comme dit dans les autres commentaires, le type de site est également à prednre en comptet, comme les sites e commerce.

    Pour ce qui est au dessus de 500 px, comme tu le dis c'est compréhensible à cause des pubs mais aussi des gros menu. Du coup le visiteur scrolle directement sous le menu pour arriver au niveau du titre de la page.

Partagez sur :

Les commentaires sont fermés.