Et on reparle de la limite de visibilité

Il est amusant de constater qu’en matière de conception web, certains mythes ont la peau sacrément dure. Autant nous n’abordons plus les mythes de la règle des trois clics ou de la page d’accueil de moins de 60 Ko, autant celui de la limite de visibilité revient régulièrement. Le dernier article que j’avais rédigé à ce sujet remonte à deux ans (En finir avec le mythe de la limite de visibilité), mais je pense devoir m’y coller à nouveau pour définitivement clore le sujet.

Malgré les nombreux articles déjà parus sur le sujet, les discussions persistent, de même que les publications : Life below 600pxDesigning ‘Above the Fold’ Necessary?Is there life below the fold?. Le point de départ de ce mythe est pourtant bien fondé : les contenus au-dessus de la limite de visibilité sont plus lus, de même que les boutons qui sont plus cliqués. Ceci étant dit, les contre-arguments sont également toujours les mêmes :

  • L’équipement des internautes évolue et la limite des 600px est repoussée vers le bas avec des écrans toujours plus grands ;
  • Depuis 15 ans que le web existe, les internautes ont appris à se servir de la barre de défilement et de la molette de leur souris ;
  • L’important n’est pas de faire rentrer tout le contenu au dessus de la limite, mais de faire comprendre aux internautes qu’il y a du contenu supplémentaire en dessous ;
  • Même s’il est largement en dessous de la limite de visibilité, un contenu associé à un point d’intérêt (photo, vidéo, illustration…) sera lu.

J’imagine que vous devez en avoir raz-le-bol que l’on vous sorte toujours les mêmes exemples (page produit d’Amazon et page d’accueil de Basecamp), alors pour illustrer mon propos je choisit un autre exemple (la page d’accueil de Backpack) qui démontre bien l’intérêt d’utiliser toute la hauteur de page pour bien valoriser le contenu.

Backpack

Nous sommes maintenant (presque) en 2012, il faut savoir vivre avec son époque et prendre en compte plusieurs facteurs qui rendent cette limite des 600px encore plus caduque :

  • Le volume de contenu disponible a considérablement augmenté ces dernières années avec les médias sociaux et les contenus multimédia, de ce fait, vous aurez besoin de plus de contenus pour attirer l’attention et convaincre les internautes, donc de plus de place ;
  • La montée en puissance des terminaux alternatifs (smartphones, tablettes, TV connectées, netbooks/cloudbooks…) brouille complètement les statistiques de taille d’écran.

Ces deux facteurs, dont nous commençons réellement à prendre la mesure à l’aube de cette nouvelle année, remettent en question les règles de conception des sites web (Vers des sites adaptés aux netbooks ?Faut-il réinventer le web pour les touchbooks ? et Quel va être l’impact de la fin de l’ordinateur individuel ?). De ce fait, de nouvelles pratiques émergent et apportent une solution à ce phénomène de diversification des modes de consultation et d’achat en ligne : 4 feuilles de styles pour 4 expériences de lectureLe responsive design à l’assaut des terminaux mobiles et Et on reparle de la conception multi-écran.

Donc au final, la limite de visibilité a-t-elle encore une importance ? Non, plus réellement. Certes, les contenus en haut de page bénéficieront toujours d’une meilleure exposition, mais la notion de haut de page devient de plus en plus floue : non seulement les formats d’écrans se diversifient, mais les applications prennent de plus en plus de place dans les modes de consultation (Le choix se complique entre application mobile et application HTML5).

Moralité : les concepteurs sont aujourd’hui confrontés à des défis bien plus complexes que l’identification d’une surface d’affichage optimale. Le débat ne porte plus réellement sur l’emplacement de la limite de visibilité, mais sur les priorités à attribuer aux interfaces web, mobiles, tactiles, aux applications… Mobile First ! (et Content First !) (et Touch is the New Click!) (et Web is Dead!) (et HTML5 Rules!) (bref, il n’y a plus de règles).

10 réflexions sur “Et on reparle de la limite de visibilité

  1. Que la limite de visibilité soit 600 ou autres et que cela soit discutable ne signifie pas pour autant qu’il n’y ait plus de règles. La lecture naturelle c’est de haut en bas quelque soit le terminal, et en tous cas ce qui est visible à l’écran en 1er c’est pas le bas de page ^^. Le haut de page reste donc une place stratégique. Backpack est un bon exemple, l’entête (moins de 600) fournit une info visuelle importante (l’interface du logiciel), une accroche (à quoi ça sert) et les raccourcis importants (pour en savoir plus); en dessous ne se trouve que les infos développées que le haut a déjà synthétisé et ne participent pas à l’introduction du contenu.

    je crois que moralité, si on peut faire moins de 3 clics, moins de 600 px, moins de 60 ko pour arriver au même résultat c’est pas plus mal. Prenons ces mythes non comme des règles incontournables mais comme des avertissements aux concepteurs. Less is more ! (KISS rules!)

    J'aime

  2. Le fold n’est pas un mythe, il faut le prendre en compte mais il faut surtout bien le comprendre. Comme tu le dis, « L’important n’est pas de faire rentrer tout le contenu au dessus de la limite, mais de faire comprendre aux internautes qu’il y a du contenu supplémentaire en dessous ; ».
    Je pense que c’est vraiment là dessus qu’il faut insister.

    Il faut ainsi éviter de créer un espace vide prenant toute la largeur de la page dans une zone approchant une éventuelle limite de page pour l’internaute. Au risque de laisser penser qu’il n’y a plus rien en dessus. La scroll-bar c’est bien mais ce n’est pas un indicateur suffisant pour donner envie de descendre.

    J'aime

  3. Fred à 100% raison. La notion de fold au sens où on l’entendait il y a 10 ou 20 ans est obsolète.

    Par ailleurs, même à l’époque la notion de fold devait être relativisée par les usages : les utilisateurs n’ouvrent pratiquement jamais leur fenêtres de navigateur en plein écran, lorsque l’utilisateur ajoute des barres d’outils et des plugins à leur navigateur ça réduit l’espace d’affichage disponible, lorsque l’utilisateur change la taille d’affichage des fontes, ça déplace les contenus, etc….).

    En clair, cette histoire de fold arbitrairement placé à XXX px de haut sentait déjà le pâté à la naissance.

    Aujourd’hui avec la multiplication des résolutions et des terminaux de consultation, penser sa mise en page en fonction d’une résolution 1024X768 pixels n’a plus vraiment de sens. Que devient votre fold lorsque l’utilisateur consulte votre site sur un mobile, sur sa TV ou même sur une borne d’abris-bus tactile ?

    Il faut reconsidérer la notion de fold en fonction des différentes manières dont une même interface s’affiche sur des résolutions et des terminaux différents. Un concepteur d’interface ne doit plus imaginer l’affichage de « son site internet sur un écran 19’ d’ordinateur », mais il doit hiérarchiser l’affichage des contenus et les fonctionnalités en fonction de leur importance (intérêt) pour l’utilisateur. C’est une démarche qui prend effectivement tout son sens lorsque l’interface est responsive ou fluide.

    J'aime

  4. J’aime bien toujours cette notion de fold pour son côté « reminder » qui permet de bien penser à se poser la question de la pertinence des informations que l’on présente en premier lieu au visiteur, et ce, quelque soit la résolution prise en compte.

    J'aime

  5. @ ju > Certes, il vaut mieux faire un beau site qu’un moche site. Mais dans le quotidien d’un concepteur de sites web, ces règles sont un calvaire car elles orientent les clients sur de mauvais choix.

    @ Arnaud Lemercier > Oui et aussi réfléchir àce qui est essentiel à afficher, faire des choix, prioriser.

    @ Laurent > Là je te trouve limite insultant pour les producteurs de paté (qui sont fabriqués en France eux au moins !).

    J'aime

  6. Je connais bon nombre de concepteurs/designers qui essayent toujours de tout placer sur une seule et même page, parfois sur des formats ridiculement petits.
    Quand le contenu est pauvre, cela marche, dès que l’on en rajoute, c’est la cata.
    L’oeil humain n’est pas à l’origine fait pour aller de haut en bas ou de gauche à droite, ce sont juste des habitudes de lecture et celles-ci vont encore évoluer.

    On rajoute de plus en plus de « règles » d’affichage, en essayant de les mêler, parfois de façon impossible, sans prendre en compte leur véritable impact et leur pertinence.

    J'aime

  7. Petite réflexion qui pourrait nuancer l’article.

    Je crois que la notion de fold est apparue à un moment où (presque la préhistoire) :

    * Les écrans étaient relativement petits

    * les souris ne comportaient pas de molette facilant grandement le scrolling vertical

    Par la suite, la taille des écrans a augmenté et l’on a eu des souris permettant de facilement accéder au contenu « caché » des pages.

    La notion de fold devenait alors moins importante comme décrit dans l’article.

    Mais j’ai l’impression que c’est seulement vrai et que cela le restera pour les ordinateurs de bureau et les laptop avec des écrans relativement bien pourvus en affichage.

    Car aujourd’hui, les netbooks ont des résolutions plus faibles.
    Même chose pour les tablettes qui ne dépasseront peut-être jamais les 12 pouces de diagonales avec une part non négligeable de 7 pouces (kindle fire, sansung galaxy tab 7, ipad mini?) et ces tablettes ne comportent pas de molette de défilement vertical…

    j’ai aussi l’impression que le mode de lecture sur tablette incite plus facilement à un défilement horizontal de la même façon que l’on tourne les pages d’un livre.

    un contenu textuel prenant 1000 px x 6000 px en vertical est-il plus facilement consultable sur tablette présenté en 1 seule colonne scrolable verticalement ou en 6 pages de 1000 x 600 accesibles par des boutons suivant, précédent?

    Je remarque aussi que ces questions ne se posent pas lorsque l’on concoit une appli où l’on imagine jamais des éléments de l’interface et du contenus « caché » qui serait accessible seuelemnt en faisant scroller l’écran.

    Et à ll’heure où les sites web se transforment en web applications… je crois que la notion de fold n’est pas à oublier.

    my 20 cents

    J'aime

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s