7 enseignements pratiques tirés du eye-tracking : le F-pattern

Cet article inaugure une série de 7 articles à propos des enseignements du eye-tracking, technologie qui permet de voir à travers le regard des utilisateurs sur les sites web.

Utilité de l’eye-tracking en tests utilisateurs

Ecran de eye-tracking T60 de Tobii

Ah, le eye-tracking ! En français, d’ailleurs, on dit l’oculométrie. C’est moins techno, mais c’est un peu plus… poétique.

L’eye-tracking est donc une technologie qui a le grand avantage de pouvoir se mettre (presque) dans la tête du client lorsqu’on l’observe au cours d’une séance de tests utilisateurs. Technologie qui m’apparaissait comme un gadget avant que la lumière du savoir scientifique ne me touche, mais dont  je ne pourrais plus me passer désormais pour analyser les parcours clients.

Outre qu’elle permet de comprendre des comportements spécifiques dans le cadre d’une étude contextualisée, elle a aussi permis de tirer un certains nombres d’enseignements généraux très utiles qui une fois assimilés permettent de mieux raisonner sur la manière dont les gens voient et utilisent les pages de votre site.

C’est pourquoi ce billet inaugure une série : 7 enseignements pratiques tirés du eye-tracking. Et je commencerai aujourd’hui avec le fameux F-pattern dont tout le monde a sûrement entendu parler.

Qu’est-ce qu’une carte de chaleur ?

Avant de parler du F-pattern, il faut aussi bien comprendre ce que représente une carte de chaleur, car cette compréhension est souvent sujette à tout un tas d’interprétations.

En général, les cartes de chaleurs que l’on voit passer sur le web sont des représentations du nombre de coups d’oeil que reçoivent les différentes zones d’une page web. Plus une zone en reçoit, plus elle est « teintée » de rouge. A l’inverse, moins elle reçoit de coups, plus sa teinte tend vers le bleu. Une zone sans tâche de couleur ne reçoit pas de coups d’oeil, ce qui ne veut pas dire (et c’est important de bien le comprendre) que cette zone n’a pas été perçue. C’est parfois, comme nous le verrons dans un prochain article, qu’elle a été consciencieusement évitée par l’internaute.

Représentation de l’attention des lecteurs

f pattern google Pictures, Images and Photos
Le F-pattern, c’est donc l’espèce de dégueulis que l’on voit ici sur une page de résultat de Google et qui est le résultat cumulé du regard de plusieurs utilisateurs. Non, les gens ne lisent pas en suivant une forme de F comme j’ai pu l’entendre une fois. Ce F représente en fait la perte d’attention progressive des internautes lorsqu’ils lisent.

Forte sur les premières lignes du texte, l’attention du lecteur faiblit  plus on descend dans la page.

Pourquoi cela ? Parce que lire sur un écran d’ordinateur est beaucoup plus fatiguant que lire sur du papier (la raison profonde, je ne la connais pas, mais je suis sûr que personne parmi vous n’a jamais essayé de lire en entier un livre à l’écran, ça ne lui viendrait pas à l’idée. C’est d’ailleurs aussi vrai pour d’autres terminaux comme l’iPad, voir le livre blanc de Miratech, société spécialisée dans le domaine, sur le même sujet).

Adapter les textes au web

La conclusion que l’on pourrait en tirer, c’est qu’il ne faut pas écrire de textes longs pour le Web, mais ce n’est pas tout à fait juste.  La bonne réponse est qu’il faut adapter son écriture au Web.

  • Le premier paragraphe d’un texte doit résumer le contenu du texte
  • Il faut démarrer les titres, les paragraphes et les listes avec des mots importants
  • Il faut utiliser le style d’écriture en pyramide inversée

En ecommerce, c’est vrai qu’on écrit très peu (Hé, c’est du commerce, pas de la philo), mais ça n’empêche que l’écriture des fiches produits, notamment, ou des blogs devrait tenir compte de ces règles (pour les connaître, voir l’excellent article d’Axe-Net. et aussi le mien sur et pour les anglophiles, celui de J. Nielsen, notre super-héros de l’ergonomie). Sur le web, encore une fois, les gens ont besoin que les choses aillent vite et leurs soit présentées simplement.

La semaine prochaine, nous parlerons de l’effet de banner blindness qui vous montrera que ça ne sert à rien de faire des bannières qui attirent trop l’attention parce que de toute façon, les internautes les esquivent.

Bonne réécriture de vos pages !

D’après Jacob Nielsen : F-shaped pattern For Reading Web Content

18 commentaires

  1. L’eye tracking, c’est un outil de mesure qui peut permettre de répondre scientifiquement à des questions.
    Comme c’est un outil super « techno », et « scientifique », beaucoup ont tendance à abuser sur les conclusions.
    Ici, on rencontre un sérieux problème lié à la généralisation : les résultats obtenus sont généralisables à des situations similaires à celles dans lesquelles les participants ont été placés.
    Donc, ce qu’on peut conclure ici, c’est que les premiers résultats d’un moteur de recherche sont d’avantage regardés que les derniers (ce qui semble logique, puisque triés par pertinence), que l’adword est un peu regardé, et on peut émettre l’hypothèse que les utilisateurs semblent adopter une stratégie de scaning: je commence à lire le résultat, et je zappe s’il ne me convient pas (hypothèse a postériori, donc à vérifier d’avantage pour devenir « scientifique »).
    L’attention d’un individu est liée à la scène qu’il a face à lui, mais aussi à ses objectifs : il ne faut pas oublier l’objectif d’un utilisateur sur une telle page. Qui pouvait penser que les utilisateurs liraient toute la page de résultats ?
    Si le stimuli affiché sur l’écran était une page de livre (ou un article) que l’utilisateur a envie de lire, les résultats obtenus seraient bien différents.
    D’ailleurs, il est fréquent que nous lisions des documents papiers en adoptant une lecture en F, et des documents numériques en lisant tout (mes résultats d’occulométrie lors de la lecture de cet article n’auraient rien d’un F !).
    La fatigue produite par la lecture est sans doute effectivement plus importante sur l’écran, mais les résultats obtenus en eye tracking sont rarement liés à cela.

  2. « …lire sur un écran d’ordinateur est beaucoup plus fatiguant que lire sur du papier (la raison profonde, je ne la connais pas… »

    – Contrairement au livre, les yeux font l’effort de se lever (effort musculaire).
    – On est souvent assis (plus ou moins confortablement) devant un écran, plutôt que avachi dans un fauteuil avec un livre.
    – Un livre n’émet pas de lumière…

  3. Une étude comparative entre la lecture de texte hyperlink et la lecture sur papier tire comme conclusion que la lecture sur le web est plus stressante que sur papier pour la raison suivante : les liens soulignés, le boutons call to action sont autant de sollicitations pour le cerveau : inconsciemment le cerveau analyse chaque sollicitation pour décider s’il veut ou non suivre le lien pour en savoir plus. Je ne me souviens plus de la source, mais ça vient d’un podcast de France Culture très intéressant sur la lecture à l’écran (faudrait que je retrouve le fichier et que je le mette en ligne tiens).

    Je ne suis pas un fanatique de la techno de pointe par principe non plus, comme Julien, mais quoi qu’il en soit, en rapprochant ce qu’on peut apprendre de ce type de méthode on a de bonnes bases d’analyse et surtout il est possible de comparer et de tester sur des bases mesurables ce qui est quand même une méthode dont les effets ne sont plus à démontrer.

  4. @Julien : le résultat proposé par Nielsen, dont je parle, est une étude en général qui montre que l’on ne peut simplement pas proposer des textes à lire comme on le ferait dans un magazine papier ou un livre. L’exemple de Google n’est là que pour illustrer le propos et tu as parfaitement raison dans ta réflexion sur le contexte de l’étude.
    Mais indéniablement, le résultat est là.
    Si l’on veut que les gens lisent quelque chose sur une page web, on a intérêt à adapter son texte de manière à rendre cette lecture plus facile que si l’on reprenait un texte brut destiné au papier.
    Bien sûr que les gens lisent sur le web. Moi, même, je lis énormément d’articles, mais ce que cette étude montre, c’est que l’information qui y est proposée n’est pas forcément formatée de la meilleure manière pour pouvoir être correctement assimilée. On en ferait l’étude, on verrait bien que les mêmes articles lus sur Lemonde.fr et sur son homologue papier n’auraient pas la même performance en terme de compréhension et de mémorisation par les utilisateurs.
    @Yann : chez weXperience, nous faisons aussi du eye-tracking 😉

  5. Salut Capitaine,

    excellente initiative que cette série d’articles sur le eye-tracking qui permettra de bien faire comprendre la plus-value que ca peut apporter dans l’analyse d’un site.

    On parle toujours des tests A/B pour optimiser une page de site web, mais on n’évoque pas souvent le fait qu’avant de lancer un test A/B, il faut savoir quels éléments tester précisément…

    C’est là que l’Eye-tracking entre en jeu en permettant notamment de détecter les caractéristiques et les faiblesses d’une page selon ses objectifs, avant d’en tester plusieurs optimisations possibles.

    Vivement la suite !

  6. L’intro de la serie est tres bonne. J’attends maintenant les autres articles avec impatience. C’est vrai qu’on peut apprendre beaucoup de choses sur l’ergonomie de son site grace a l’eye tracking et que c’est une suite logique de mon travail – j’amene les gens sur le site mais ensuite il faut qu’ils restent… ou achetent…

  7. Arrêtes ton teaser, et balance le 2eme article :p

    Donne nous une idée du prix pour ce genre de prestation, il me semble que ma mutuel rembourse l’oculométrie justement…

  8. @Ludovic : Tout à fait, l’Eye tracking me fait toujours peur quand on en parle mais c’est comme tout, il faut l’intégrer dans une stratégie précise de ce que l’on veut détecter/mettre en place.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.

Capitaine

Article de : Capitaine

Olivier Sauvage est le fondateur de Capitaine-commerce.com et de Wexperience, agence spécialisée en expérience utilisateur digitale.