Adapter un contenu web

Le Dans Web Marketing
F-pattern @ SéverineAutin.com

Vous envisagez de mettre à jour votre contenu de site internet, mais avez-vous entendu parler du F-pattern ?
Peut-être est-il utile d'en rappeler les principes, existant depuis longtemps et mis au jour pour internet il y a plus d'une 10aine d'année par le danois Jakob Nielsen, expert dans le domaine de l'ergonomie informatique et de l'utilisabilité des sites web.

Contrairement à la lecture papier d'un bon livre qui nous passionne, nos yeux parcourent différemment une page d'un site internet.
Si nous lisons un roman ligne par ligne, cela est différent sur le web. Bien sûr on va toujours de gauche à droite, mais nous ne lisons pas sur internet toutes les lignes d'un article. Un peu comme dans un magazine. Les études sur le comportement des yeux ont amené les chercheurs à distinguer le trajet oculaire en forme de "F". D'où le terme de F-pattern.

Explications.

Nous lisons moins vite sur internet, de 20%. Si on ajoute la quantité d'informations pour laquelle nous sommes sollicités en permanence, cela nous rend pressés.

Après analyse du trajet de nos yeux, en voici le résultat :

. Le lecteur regarde d’abord le haut de la page à l’horizontale. Le 1er paragraphe reçoit alors toute son attention. C'est  la première barre du « F » du « F-pattern ».  

. La lecture devient ensuite verticale en s'attardant sur le bord gauche du texte. Le lecteur voit les 1ers mots d’un paragraphe avant de passer à la ligne suivante : il scanne le texte. La zone droite de l’écran n'est pas perçue au début.

. Puis, le lecteur recherche des informations importantes : si les mots-clés l'interpellent, ses yeux vont alors horizontalement vers la droite une 2ème fois, d'où la petite barre du "F".

. Enfin, les yeux s'attardent sur le côté gauche et descendent verticalement vers le bas, jusqu’en bas de la page.

F-pattern @ SéverineAutin.com

Sachant ceci, nous avons donc intérêt, pour garder le lecteur, à optimiser notre contenu !

Selon l'ami Jakob, chaque page internet (page d'accueil ou newsletter) devrait suivre le F-pattern. Autrement dit :

  1. plaçons les messages importants dans les 1ers paragraphes. Soyons brefs et percutants. Développons plus bas.
  2. Structurons notre contenu en ligne, avec puces, phrases courtes, mots en gras, paragraphes et titres et sous-titres.
  3. Prêtons attention aux en-têtes avec des titres principaux et intermédiaires pertinents pour capter l'attention du lecteur.

Il va sans dire qu'on oublie de placer les éléments importants sur la droite de la page ou dans sa partie inférieure !

Puis penser au design global.

La priorité aujourd'hui en design est dans les images.
En reprenant ce que nous disions en tête de l'article (submergés d'informations, nous voulons aller vite) nous regardons en priorité les images... qui prennent de plus en plus de place. Tant, qu'elles sont devenues plus importantes que les titres. (Tout comme la 1ère, le logo ou nom de site, en haut, souvent à gauche.)

Par conséquent, ajuster l'équilibre entre les points d’ancrage visuels et le contenu textuel est donc un défi. Il nous faut alors innover sur la mise en page des images, et recourir à de belles typographies.

Le tout pour impacter les moteurs de recherche.

L'objectif de la création d'une telle page internet est d'aider le lecteur à trouver les données qu'il cherche, et rapidement. Et finalement, c'est aussi aider (influencer ?) les moteurs de recherche.
Trouver "vite fait bien fait" des informations judicieuses est un critère très important pour les moteurs de recherche : c'est ainsi qu'ils évaluent les sites scannés et décident d'afficher les meilleurs résultats en haut.

De plus, les listes de résultats de recherche de Google sont également basées sur le modèle F classique !

Pour en savoir plus : https://www.interaction-design.org/literature/article/visual-hierarchy-organizing-content-to-follow-natural-eye-movement-patterns

Maintenant que vous connaissez la cause, tirez-en avantage ! Ou faites appel à nos services 😉

Mmmm... Cet article me rappelle quelque chose. Pas vous ?

. Le référencement naturel