7 enseignements pratiques tirés du eye-tracking : les internautes scannent, mais ne lisent pas

Mais, au juste, comment les internautes « lisent-ils » les pages webs ? Ou plutôt, comment parcourent-ils du regard ces pages ? Démarrent-ils en haut à gauche de l’écran puis lisent-ils peu à peu tous les éléments qui leur tombent sous les yeux ou bien « picorent-ils » littéralement du regard et dans un ordre aléatoire les divers éléments de la page ?

A regarder l’enregistrement d’une parcours oculaire sur une page web, on a surtout l’impression que l’internaute lambda de base de la rue regarde un peu n’importe comment la page qui lui est présentée. Il n’y a pas d’ordre apparent et il semblerait que ce soit un peu la chance qui le fasse tomber sur une zone ou une autre.

Parcours oculaire sur la page d'accueil de KIABI.com
Parcours oculaire sur la page d'accueil de KIABI.com

En fait non ! L’internaute, lorsqu’il regarde une page web, obéit à des impulsions logiques dictées par plusieurs éléments d’influence :

L’endroit le plus probable où se trouve l’élément qu’il recherche selon les usages en cours sur le web. Par exemple, où habituellement regardez-vous l’écran lorsque vous cherchez un lien « contact » ?  Mhhh… ? En haut à droite ? En bas de page ? Bravo, vous avez trouvé et faire certainement comme la plupart des internautes. Si vous, concepteur, placez ces éléments ailleurs, c’est que vous ne souhaitez pas que les internautes trouvent rapidement cet élément (ce qui peut être un choix conscient).

La forme et la couleur de l’élément qu’il recherche : si on reprend l’exemple précédent, l’internaute aura sans doute tendance à essayer de trouver un lien texte (le mot « contact ») dans la page. Il pourra aussi inconsciemment chercher tout ce qui ressemble à une enveloppe ou un téléphone. C’est certain : si vous mettez une banane pour signifier votre lien contact, vous risquez de tromper votre internaute.

L’attractivité des éléments de la page : certains élément attirent le regard plus que d’autres. Ainsi, les éléments de formulaires attirent l’attention de l’internaute, car ils lui signifient inconsciement : « Vous pouvez agir, utilisez-moi ! ». Les éléments animés également attirent l’oeil. Bien sûr, si vous en mettez trop, vous obtiendrez l’effet inverse. L’internaute aura tendance à les éviter (voir notre article précédent sur l’effet de Banner Blindness). Mais les éléments les plus connus et les couramment utilisés sont bien sûr les visages humains et l’endroit où ils portent leur regard. Et d’ailleurs, si vous ne craignez pas la vulgarité, vous pouvez même vous servir de la nudité. Il parait que ça marche très bien aussi pour focaliser l’attention 😉

Autrement dit, en fonction de ces facteurs d’influence, l’internaute promènera son regard dans un but tout à fait déterminé qui n’a rien du hasard, bien au contraire !

Cela veut dire, bien sûr, que lorsque vous concevez l’architecture d’information d’une page, vous devez tenir compte de ces enseignements :

Ne placez pas dans des endroits inhabituels des éléments pour qui l’usage général du web dicte des positions déterminées. Exemple : vous n’auriez pas l’idée de mettre votre logo en bas de page, par exemple. A moins que vous ne la vous jouiez totalement décalé, vous risquez surtout de ne jamais être identifié par vos internautes. Mais de manière plus subtile, vous vous apercevrez que les éléments de connexion à un compte sont la plupart du temps placés en haut à droite de la page, que les éléments légaux sont la plupart du temps en bas de page (vu que ça n’intéresse les gens que quand ils ont des problèmes), etc, etc.

Ne jouez pas avec les codes du web : dans un texte, un lien de couleur différente du texte souligné sera instantanément identifié comme tel par les internautes. Si vous utilisez des icônes, c’est une bonne idée d’utiliser un camion pour parler de livraison, évitez de mettre une cigogne par exemple, même si c’est plus poétique.

En haut, les icones de livraison des sites américains, en bas, les français. Vous remarquerez que dans les deux pays, le camion allant vers la droite est très prisé. A votre avis, quelles icones symbolisent le moins la livraison ?

Aérez votre page et espacez les éléments entre eux : ne surchargez pas d’informations une page (genre Cdiscount) ou l’internaute aura un mal fou à identifier les différents éléments et à se repérer (exemple de la loi de proximité)

Jouez avec les éléments visuels, visages, animations, etc. pour guider le regard et mette en avant des informations importantes

Tout cela concourt à l’organisation de votre page. Mais, pour en revenir au sujet qui nous préoccupait au début de l’article et pour répondre à la question du ditre : les internautes lisent-ils sur le web ?

Oui, bien sûr ! Seulement, ils lisent quand ils ont besoin de lire. Tout le monde lit sur le web, mais uniquement à partir du moment où l’on est certain que le texte que l’on va lire répondra à une de nos attentes. On rentre alors dans une autre phase de navigation, dont nous avons déjà expliqué quelques  préceptes (voir l’article sur le F-pattern)

25 commentaires

  1. Ce genre d’article est pertinent, mais un peu « stressant » à la lecture.

    Comme si le fait de ne pas luire TOUT l’article, dans l’ordre, et de se comporter comme un utilisateur lambda était mal… Y’a que moi ? ^^

    Pour ce qui est de lire uniquement lorsque l’on en a besoin, encore une fois ça vaut peut être pour la plupart des Internautes, mais je lis régulièrement sans savoir si l’information m’apportera ou non quelque chose de précis. Cette fois, j’espère que c’est le cas de beaucoup de personnes, autrement la plupart des sites important tomberaient dans l’oubli.

  2. Bonjour Capitaine ^^

    Je voudrais revenir sur les visages comme source d’attraction du visiteur.

    Je lis tantôt qu’il faut privilégier des plans très rapprochés sur le regard, tantôt des plans plus éloignés. Et concernant le sexe, tantôt des visages masculins, ou plutôt des féminins.

    Qu’en-est-il vraiment d’après les tests que tu as pu faire ?

    Merci a+

  3. Le eye-tracking est très en vogue au niveau analyse marketing. j’ai lu récemment un article de Fred canevet sur des analyses de eye tracking sur des panneaux publicitaires.

    Même google propose un ouil version béta dans Google Analytics pour voir où les gens posent leur regard. (aller dans contenu, puis analyse de page web).

  4. @yvandupuy: tu as du mal « oeil traqué » ce que Google propose en rélaité dans GWT… 😉
    En aucun cas de l’oeil tracking, mais simplement une interface graphique offrant du suivi visuel du taux de clic des différents liens présents sur ton site.

  5. J’ai tendance à penser que l’internaute lambda ne regarde pas là où nous souhaitons qu’il regarde. Je pense plutôt que ses yeux sont guidés par son besoin. Disons qu’il y a du vrai dans les deux idées.

  6. Le débat de fond marketing derrière ça c’est aussi d’orienter la stratégie marketing du client :

    – si il veut un site à but utilitaire, il faut rester dans les codes du web et parler à la raison.

    – si il souhaite captiver son internaute et créer une expérience utilisateur il faut le surprendre, l’envoûter, parler aux émotions et au ressenti.

    Et pour surprendre l’internaute, il faut avant tout un tout un contenu de qualité, tant sur la forme que sur le fond.

    Or à ce niveau, le web a beaucoup de retard sur le papier : contenus éditoriaux de piètre qualité : même quand je lis Le Monde en ligne, j’ai l’impression de lire 1 fois sur 2 des résumés d’articles fait par des stagiaires : résultat je ne scanne plus que les titres.

    Aujourd’hui je vois peu de sites transgresser les standards du web.

    La valeur ajoutée du eye-tracking, est-ce avant tout de valider un cadre que finalement on connaît tous dans le web, ou de mettre à l’épreuve du feu les innovations en matière d’ergo / créa graphique ?

    Vince

  7. je serais curieux de voir un comparatif eye tracking entre une page épurée vs une page surchargée (cdiscount comme tu en parles), pour voir les différences de comportement..

    1. @roger : salut Roger, un comparatif n’aurait de sens bien sûr que dans l’accomplissement de tâches spécifiques à exécuter sur la page d’accueil par exemple. Il ne suffit pas simplement de demander aux gens de regarder un écran, auquel cas, on n’apprendrait pas grand chose sur l’efficacité respectives de ces pages

  8. Ping : pligg.com
  9. C’est vrai que j’ai commencé par une lecture des titres puis je suis remonté sur la page pour en lire les détails! J’envoi ce lien à l’un de mes clients qui veut absolument se démarquer du net en changeant totalement les codes ( menus en bas de page, bouton achat à gauche etc…) bref le je veux  » un site beau et original » et parfois la connaissance des comportements des internautes nous amène a un peu plus de modestie et d’humilité.
    C’est une très bonne série d’article. Félicitations

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.