Mais que signifie cette expression ? Difficilement traduisible en français, above the fold représente la partie d’une page web qui est immédiatement visible aux utilisateurs sans que ces derniers aient besoin de scroller la page.
Alors qu'auparavant, il était peut-être possible de tout ficeler dans la partie visible du navigateur, cela n'est peut-être plus aussi utile aujourd'hui. Pour quelle raison ? L'emploi de smartphones et de tablettes a considérablement modifié le comportement des utilisateurs sur le web. Plus enclins à « scroller » ou à faire défiler, ils ont aussi appris à jouer et à changer les affichages selon les écrans qu’ils utilisent. Ce nouveau comportement a contribué à repenser la conception du web design. On peut donc aujourd’hui se demander quel rôle joue la partie immédiatement visible d'une page web.
La réponse : l'emplacement « above the fold » est toujours aussi important, voire plus. Mais il signifie de nouveaux concepts techniques du web design. Cette partie ne doit plus être bourrée d'informations mais vise plutôt à attirer l'attention des visiteurs, à les inciter à scroller et à consulter le reste de la page. Ça, ce sont les éléments de base. Mais vous ne seriez pas contre quelques conseils supplémentaires, n’est-ce pas ? Lisez ce qui suit et configurez correctement votre zone above the fold grâce à nos conseils pratiques.
L'expression above the fold nous vient du domaine de l'imprimerie. Les journaux sont pliés à mi-hauteur et proposés tels quels aux lecteurs. On peut donc voir au premier regard uniquement la partie supérieure de la première page. La ligne de pliure est appelée fold ou pli en français. Les rédacteurs des journaux utilisent la partie immédiatement visible au-dessus de cette ligne pour attirer l'attention avec des sujets d’actualités, des titres accrocheurs et des images imposantes. Le but : inciter les gens à acheter.
Sur les sites web, la zone « above the fold » est la partie que les utilisateurs peuvent visualiser immédiatement sans avoir à scroller. Si on se base sur les résolutions d’écran les plus classiques (1280x800 et 1366x768), les visiteurs de votre page web voient normalement la zone marquée en rouge dans l'illustration suivante.
Illustration 1 : Zone premièrement visible du site web de Ryte
Fin 2013, Peep Laja parlait des déjà des bases d'un web design convaincant lors de la conférence SearchLove à Londres. Il observait que le contenu above the fold concentre presque toujours 80 % de l'attention des utilisateurs. Et ce comportement n'a pas changé, bien que les utilisateurs se soient habitués à scroller sur le web.
Illustration 2 : Répartition de l'attention sur les pages web
Cela prouve que la partie supérieure des pages web (partie visible) est toujours aussi importante pour susciter l'attention des utilisateurs.
Toutefois, quelque chose a changé : les utilisateurs sont de nos jours moins patients. La diversité des médias, la quantité de contenus lancés chaque jour sur la toile ainsi que l’utilisation du mobile comme un passe-temps rapide (qui ne consulte pas son téléphone pendant les 2 minutes avant le prochain métro ?) donnent comme résultat que l’internaute moyen n’a que … 8 secondes à accorder au contenu qu’il consulte ! Le défi est donc d'autant plus important d'éveiller l'intérêt des utilisateurs, et encore plus instantanément.
Par conséquent, notre premier conseil consiste à ne pas remplir cette partie (notamment pour Google et votre référencement) d'une trop grande quantité d'informations. Cette partie doit au contraire mettre en avant les avantages de la page et expliquer à l'utilisateur ce qu'il peut encore découvrir sur le site.
Et comme il faut bien rajouter un peu de difficulté, cela va s’en dire que la zone above the fold change également en fonction des différents appareils et périphériques. Notamment en raison du responsive design, la ligne de pliure apparaît à différents endroits de la page web. Cela dépend de plusieurs facteurs, comme la résolution d'écran, la largeur de la barre d'outils et si la page est agrandie.
Comment doit-on désormais configurer la page avec de telles exigences ? Il n'existe pas de solution toute-faite. Assurez-vous néanmoins que le contenu le plus important figure tout en haut de la page et qu'il soit adapté aux besoins de la plupart des utilisateurs.
Par ailleurs, c’est assez facile de savoir quelle résolution d’écran est la plus utilisée par vos visiteurs grâce à l’outil de tracking Google Analytics.
Illustration 3 : La résolution d'écran dans Google Analytics
Pour découvrir quelles parties d'une page web sont immédiatement visibles sur différents terminaux, vous pouvez utiliser un plugin pour votre navigateur. Le Window Resizer de Google Chrome est un de nos add-on préférés.
1. Installez le plugin
Illustration 4 : Window Resizer
2. Le symbole à droite en haut du navigateur vous permet d'utiliser la fonction et de régler votre navigateur aux différentes résolutions d'écran.
3. Vous pouvez sélectionner ici différents formats et vérifier ainsi ce que les utilisateurs voient au premier regard sur différents appareils.
Maintenant que nous avons expliqué pourquoi l'emplacement above the fold est très important pour éveiller l'intérêt des visiteurs du site web, qu’advient-il du contenu restant sur la partie inférieure de la page ?
Une étude de clicktale prouve ce qui suit : lorsqu'une page web possède une barre de défilement, celle-ci est utilisée par 76 % des visiteurs du site – du moins jusqu'à un certain point. 22 % scrollent même jusqu'à la fin de la page. L'emplacement above the fold suscite donc toujours la plus grande attention, mais les utilisateurs scrollent également, comme le démontre Jacob Nielsen, expert en ergonomie et utilisabilité. Ainsi, retenez cette règle essentielle : la ligne de pliure doit être configurée de sorte que l'utilisateur doit avoir envie de continuer à regarder.
1. Colonnes décalées
Illustration 5 : La page d’accueil de Libération partage la zone above the fold en trois colonnes bien séparées.
Le contenu, réparti sur les colonnes disposées différemment, montre immédiatement aux utilisateurs ce qu'il y a encore à découvrir. Car une partie du texte ou même une image est toujours interrompue par le pli. Conséquence : les utilisateurs continuent à scroller pour obtenir plus d'informations. Ce style est souvent employé sur les sites web des journaux.
2. Chemins dans la page
Vous pouvez également encourager les visiteurs à scroller en intégrant un chemin pré-signalisé sur votre page web. Le pli divise ce chemin, incitant ainsi les visiteurs à poursuivre. C’est intuitif : si on voit des flèches ou des numéros, on a toujours envie de continuer.
3. Donner des indications
Et si on disait simplement aux utilisateurs qu’il y a encore plus d’informations pour eux et susceptibles de les intéresser dans la partie inférieure de la page ? Comme dans le cadre d’un bouton d’un appel à l’action, vous pouvez ajouter un élément qui dit « En savoir plus » ainsi qu’ajouter un signe correspondant (flèche, etc.) sur la page d'accueil.
L'emplacement above the fold demeure un concept très important d’une page web qui doit être pris au sérieux par chaque webmaster. Si autrefois la tendance était à stocker le maximum d’informations dans cette zone, aujourd'hui il s'agit plutôt d'attirer l'attention des visiteurs et de leur faire comprendre qu’il a encore bien plus à lire sur le reste de la page.
En raison des différents types d'écran et résolutions, le scrolling est devenu quelque chose de quotidien. Assurez-vous, à l'aide d'instructions visuelles, que les utilisateurs détectent immédiatement ce qu'il leur reste à visionner dans la partie inférieure.
Et pour être encore plus précis, observez le comportement des utilisateurs et découvrez quelles résolutions d'écran ils utilisent le plus souvent en accédant à votre page. En adaptant votre contenu en conséquence, vous augmenterez considérablement l’expérience utilisateur de vos internautes.
Commencez à optimiser votre site web avec Ryte FREE
Écrit le 26.04.2018 par Pauline Mitifiot.
Après des études d’histoire et de gestion de projet qui lui permirent de découvrir la Turquie, l’Italie et l’Allemagne, Pauline posa ses valises à Munich car elle ne pouvait plus se passer de son bretzel quotidien. Curieuse et dynamique, elle contribue à la section française du blog et du Wiki de Ryte.
Suivi, analyse et optimisation de vos actifs numériques grâce à notre technologie unique
S’inscrire gratuitement