Above the fold : configurer correctement sa page web

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.

Le terme above the fold

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

De l’importance de cette zone

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.

Comment procède-t-on avec des appareils différents ?

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.

• Ouvrez Google Analytics
• Sélectionnez « Audience » puis « Technologie ». Cliquez sur « Navigateur et OS »
• Vous trouverez les données correspondantes sous « Résolution d’écran »

Illustration 3 : La résolution d'écran dans Google Analytics

Visualisation de la page à différentes résolutions

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.

Création de la partie inférieure de la page web

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.

Trois possibilités pour encourager le scrolling

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.

Un emplacement pour appeler au scrolling

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.