Les lecteurs ont des com­por­te­ments dif­fé­rents devant un livre ou devant un écran. Et cela pour dif­fé­rentes raisons : d’une part, on lit plus lentement sur Internet (à savoir jusqu’à environ 20% plus lentement), d’autre part, les uti­li­sa­teurs sont con­fron­tés à une quantité in­croyable d’in­for­ma­tions. Ces deux facteurs en­traî­nent l’im­pa­tience des uti­li­sa­teurs ou des lecteurs. Personne ne parcourt un texte sur Internet comme avec un bon roman, ligne par ligne, qu’il s’agisse d’un article d’actualité ou d’une des­crip­tion de produit. Ceci doit être pris en compte lors de la con­cep­tion de projets Web et pour votre stratégie de contenu. Nous vous ex­pli­quons exac­te­ment ce qu’est le F-pattern, quelles sont ses con­sé­quences pour la création, la rédaction, mais aussi pour l’op­ti­mi­sa­tion sur les moteurs de recherche.

Le F-Pattern ou chemin parcouru par les yeux

En ce qui concerne le com­por­te­ment de lecture sur le Web, dif­fé­rents modèles se sont cris­tal­li­sés au fil du temps. Ce F-pattern reflète le mode de vi­sua­li­sa­tion commun de la plupart des in­ter­nautes. On utilise cette ap­pel­la­tion car un uti­li­sa­teur parcourt en général un texte en suivant une forme de « F » :

  • L’uti­li­sa­teur scanne d’abord le haut de la page à l’ho­ri­zon­tale. Le premier pa­ra­graphe reçoit alors toute son attention. Cela forme la première barre du « F » du « F-pattern ».  
  • Ensuite, le vi­sion­nage devient vertical et suit le bord gauche du texte. L’uti­li­sa­teur lit les premiers mots d’un pa­ra­graphe puis passe à la ligne suivante : il scanne d’abord le texte. Les éléments de la zone droite de l’écran ne sont pas perçus au début.
  • Après cette première analyse, l’uti­li­sa­teur recherche des in­for­ma­tions per­ti­nentes. S’il identifie des mots-clés qui l’in­té­res­sent, sa vue va se déplacer ho­ri­zon­ta­le­ment vers la droite une deuxième fois, ce qui forme la seconde barre du « F ».
  • Les yeux restent ensuite sur le côté gauche et se déplacent ver­ti­ca­le­ment vers le bas, jusqu’à l’extrémité de la page.

Le F-pattern trouve son origine dans la psy­cho­lo­gie com­por­te­men­tale et remonte à un modèle formé depuis longtemps en dehors du monde in­for­ma­tique. Par exemple, on lit gé­né­ra­le­ment un texte sur papier de gauche à droite et de haut en bas, à l’exception de l’arabe où la lecture se fait de droite à gauche. La dif­fé­rence sur le Web, c’est que le texte n’est plus lu mot à mot : le lecteur saute d’une ligne à une autre, et se concentre sur les premières in­for­ma­tions. Ceci a été prouvé par de nom­breuses études de recherche sur l’uti­li­sa­bi­lité. L’expert en ergonomie Jacob Nielsen  a inventé le terme F-Pattern. En traquant le mouvement des yeux (eye-tracking), son étude a prouvé en 2006 que le modèle F était le plus proche du com­por­te­ment réel des in­ter­nautes. Pour cela, il a analysé les yeux d’individus lors de l’affichage de pages Web.

Aparté : Eye-Tracking

Le suivi des yeux est une méthode pour iden­ti­fier les mou­ve­ments oculaires d’individus. Avec un « eye-tracker », il est possible d’en­re­gis­trer les mou­ve­ments des yeux puis de les analyser. En tant que méthode scien­ti­fique, l’eye-tracking est attribué aux neu­ros­ciences, mais est utilisé prin­ci­pa­le­ment dans la psy­cho­lo­gie de la per­cep­tion, de la cognition et pour le marketing. La méthode sert par ailleurs à explorer les habitudes de lecture sur Internet. En marketing digital et en con­cep­tion Web, on parle aujourd’hui de « heat­map­ping ». Les heatmaps sont des re­pré­sen­ta­tions ana­ly­tiques pour la vi­sua­li­sa­tion des données. Dans ce contexte, elles montrent le com­por­te­ment de l’uti­li­sa­teur ou le com­por­te­ment de lecture sur le Web et per­met­tent d’analyser et d’optimiser la cons­truc­tion de sites Web. Cette carte de chaleur (heatmap) fonc­tionne avec des gra­da­tions de couleurs, gé­né­ra­le­ment du rouge (très chaud) au bleu (froid). Une zone sombre indique qu’un uti­li­sa­teur s’est attardé lon­gue­ment dessus. Les zones en bleu foncé sont celles qui n’ont même pas été re­mar­quées. Pour une meilleure analyse et pour pouvoir par la suite prendre des mesures d’op­ti­mi­sa­tion, des pa­ra­mètres sup­plé­men­taires tels que les clics et mou­ve­ments de la souris sont ajoutés lors du heat­map­ping en Web marketing.

Le F-Pattern sur les textes en ligne

Non seulement les textes mais aussi les pages d’aperçu, les pages d’at­ter­ris­sage ou les news­let­ters doivent être conçues selon le F-Pattern. En d’autres termes, vous ne devez pas placer d’éléments im­por­tants sur le côté droit de la page ou dans sa partie in­fé­rieure. Les énoncés, les in­for­ma­tions et les mots-clés les plus im­por­tants doivent toujours se trouver au début des pa­ra­graphes ou des rubriques. L’in­for­ma­tion centrale et les messages devraient être placés en haut de page aussi ra­pi­de­ment que possible dans les premiers pa­ra­graphes.

Le F-Pattern en pratique : 3 conseils pour des textes optimisés

  1. En venir aux faits : essayez, si possible, de conserver les messages im­por­tants dans la première section du texte. Résumez-les ra­pi­de­ment, venez-en aux faits. Evitez par­ti­cu­liè­re­ment les fio­ri­tures ou in­for­ma­tions non im­por­tantes au sein du F-pattern. La priorité doit être donnée au plus important.

  2. Créez une structure : pour le contenu en ligne, vous devrez recourir à des éléments de struc­tu­ra­tion : pour ce faire, il est né­ces­saire d’utiliser les puces, les pa­ra­graphes et les titres de sections. Une structure permet à l’uti­li­sa­teur de « scanner » un texte. 

  3. Con­cen­trez-vous sur les en-têtes : les titres prin­ci­paux et in­ter­mé­diaires ne sont que des éléments struc­tu­rants d’un texte. Les titres solides avec des slogans per­ti­nents servent d’élément d’ancrage central au lecteur. Lors de la rédaction de vos textes, vous devriez donc accorder suf­fi­sam­ment de temps pour la création de rubriques ainsi qu’à leurs titres.

F-Pattern et Webdesign

Le F-Pattern est l’un des concepts les plus connus et basiques pour la création de mises en page. Il est pertinent pour le travail des designers de sites Web tels que les éditeurs.

Les web­de­sig­ners utilisent une mise en page en F pour répondre aux habitudes de lecture na­tu­relles de l’uti­li­sa­teur sur le Web. Pour l’uti­li­sa­teur, la mise en page est ha­bi­tuelle. Les in­for­ma­tions les plus im­por­tantes peuvent être récoltées dans les zones ha­bi­tuelles, de gauche à droite et de haut en bas.

Ce qui est gé­né­ra­le­ment perçu en priorité sur les sites Web, c’est la marque avec le logo et le nom, qui se trouve souvent en en-tête, ou du moins dans la partie su­pé­rieure gauche de la page Web. S’ensuit le contenu. Ce faisant, il faut savoir que les images sont les plus im­por­tantes, suivies de près par les titres. Si le corps du texte n’attire quasiment pas d’attention, il est scanné par mots-clés et briè­ve­ment survolé. Les ca­rac­tères en gras et titres de sous-sections servent le lecteur comme points d’ancrage ou comme points fixes.

Le défi pour la col­la­bo­ra­tion entre la création et l’édition consiste à trouver le bon équilibre : utiliser les points d’ancrage visuels in­tel­li­gem­ment, sans négliger pour autant le texte et le contenu. Les images et les titres sont les premiers éléments à ressortir. Le corps de texte perd l’attention du lecteur. Les énoncés les plus im­por­tants devraient donc être inclus le plus tôt possible dans le texte pour que le contenu ne soit pas négligé. Afin que les designers ne perdent pas en liberté de con­cep­tion, des idées créatives sont né­ces­saires pour une mise en forme avec de bonnes ty­po­gra­phies et des com­po­sants latéraux innovants. Les gra­phistes doivent traiter plus in­ten­sé­ment les textes, et les ré­dac­teurs se préoc­cu­per également du graphisme.

C’est ainsi que de nouveaux concepts émergent, comme celui du F-pattern. Le modèle Z est une autre habitude de lecture possible, ob­ser­vable em­pi­ri­que­ment sur Internet : l’œil suit un Z, c’est-à-dire que le flux de lecture commence dans le coin supérieur gauche, se déplace ho­ri­zon­ta­le­ment vers la droite, puis se déplace dia­go­na­le­ment vers le coin inférieur gauche, puis à l’ho­ri­zon­tale vers la droite.    

Sig­ni­fi­ca­tion du F-Pattern pour l’op­ti­mi­sa­tion des moteurs de recherche

Le com­por­te­ment de lecture sur le Web est également un aspect important dans l’op­ti­mi­sa­tion pour les moteurs de recherche. Le F-pattern aide les ex­ploi­tants de sites Web à concevoir leurs services afin que les besoins d’in­for­ma­tion in­di­vi­duels de l’uti­li­sa­teur soient sa­tis­faits au mieux. L’op­ti­mi­sa­tion de l’uti­li­sa­bi­lité est destinée au fait que l’uti­li­sa­teur peut trouver le noyau de sa recherche aussi ra­pi­de­ment que possible et peut capturer les in­for­ma­tions per­ti­nentes : un critère important, sinon le principal, pour Google lors de l’éva­lua­tion des dif­fé­rentes présences sur le Web.  

Un autre aspect très important con­cer­nant l’op­ti­mi­sa­tion pour les moteurs de recherche : les listes de résultats de recherche de Google sont également basées sur le modèle F classique. En attendant, il existe de nom­breuses études de suivi des yeux qui donnent un aperçu de la vue de l’uti­li­sa­teur sur les SERPs de Google. En con­nais­sant les éléments sur lesquels un uti­li­sa­teur attarde son regard, les ad­mi­nis­tra­teurs de site peuvent na­tu­rel­le­ment mieux optimiser les contenus qu’ils lui pré­sen­tent.  Ceci joue un rôle important dans la con­cep­tion des métas titres et des­crip­tions. En plaçant cor­rec­te­ment des termes et mots-clés, vous pouvez en tirer un avantage. Les éléments qui visent à attirer le regard, tels que les icônes et les ma­jus­cules, de­vien­nent de plus en plus im­por­tants.

Aller au menu principal