Les tests oculométriques (ou eye tracking) ont le vent en poupe dans le domaine du web. Mais sont-ils réellement utiles et efficaces ? Quelles sont les différences entre le eye tracking et les autres méthodes d’évaluation plus classiques comme le test d’utilisabilité ou l’audit ergonomique ? Quelques éléments de réponse dans ce premier article sur le eye tracking, sur ce que nous dit le regard.

Analyser ce que voit le regard avec le eye tracking

Utilisés d’abord dans les laboratoires de recherche scientifiques puis industriels, les systèmes de eye tracking ont fait leur entrée dans le monde du Web. Concrètement, il s’agit d’analyser les déplacements du regard et les zones de focalisation visuelle dans lesquelles se concentre le regard. Les analyses se basent sur les points de fixation successifs enregistrés par un oculomètre porté ou déporté (cf. quelques sites des fabricants ASL, SMI et Tobii).

Le plus souvent, les tests consistent à faire réaliser des scénarios d’utilisation réalistes où le regard des participants est observé avec un oculomètre. Les analyses s’intéressent à l’agencement (ou zoning) et la mise en forme des informations, leur pertinence et leur adéquation vis-à-vis des objectifs et caractéristiques des visiteurs. Ils peuvent être présentés sous deux formes distinctes : le parcours oculair (ou Gaze Plot) et la carte de chaleur (Heatmap).
La carte de chaleur met en évidence les zones fixées par les participants : les zones les plus chaudes (rouges)  indiquent des endroits fixés longtemps ou à plusieurs reprises. (cf. blog de Tobii – An Introduction to Eye Tracking : Part 5)

Eye tracking et marketing

L’utilisation de l’eye tracking dans le domaine de la communication et du multimédia est assez récente. Le marketing visuel s’en est d’abord emparé, comprenant le potentiel de cette méthode pour susciter toujours davantage l’attention du public et optimiser l’impact des messages publicitaires. Si naturellement le regard balaye (ou Eye-Scanning) l’environnement en se focalisant successivement sur des zones d’attention (ou AOI : Area Of Interest), il existe toutefois des comportements plus courants que d’autres (ou Eye-gaze pattern). C’est le cas notamment avec la présence d’un visage qui attire fortement le regard et associe de fait le message à une émotion. Toutefois, cette technique peut très vite devenir contre-productive par rapport au message textuel proprement dit (cf. ci-dessous, le eye tracking montre des répartitions distinctes du regard, prioritairement sur le visage à gauche et homogènes entre le visage et les textes à droite).

L’intérêt de l’eye tracking dans ce domaine, est de pouvoir vérifier que le balayage du regard se répartit de manière homogène et ciblée. Il garantit que le message et le produit seront associés de manière adéquate et pertinente. Autrement dit, on peut supposer que le message textuel sera d’autant mieux mémorisé qu’il sera compris et associé émotionnellement.

Mettre en évidence des comportements de navigation par le eye tracking

Les études actuelles dans le domaine du web se penchent de plus en plus sur le parcours du regard lors de la navigation entre plusieurs pages (ex : recherche d’information, parcours d’achat) alors qu’auparavant les analyses s’intéressaient plutôt à des pages uniques et statiques. Dans les deux cas, il s’agit de suivre le regard de participants à qui on demande par exemple de décrire la page visitée, de chercher une information particulière ou encore d’effectuer une action. Il existe des comportements assez naturels et que les spécialistes de l’ergonomie connaissent bien. Le regard ne se dirige pas n’importe où a priori, il dépend directement de ce que cherchent les visiteurs, leurs habitudes sur le web et bien sûr de la manière dont les informations sont présentées et agencées :

Les déplacements du regard sur une page web sont fortement influencés par la mise en page et l’agencement des informations. Parmi les comportements les plus classiques de balayages visuels, le eye tracking a permis de révéler que le regard évitait « naturellement » toutes les zones qui s’apparentent à des bannières publicitaires : la cécité de bannière (ou banner blindness). Les résultats de l’étude montrent que ces zones publicitaires, animées ou non,  ne sont pas fixées par les internautes, et ce qu’elles soient disposées en haut de page ou sur les colonnes latérales d’un site web  (cf. illustration ci-dessous).

Eviter les éléments distrayants comme les publicités est une habitude qui se renforce avec le temps. Les internautes ne s’y trompent pas, ils ont des objectifs pour visiter un site et s’intéresser à son contenu.

Le balayage en F(ou F-Shaped Pattern) est un autre pattern visuel fréquent illustré par le eye tracking. On le retrouve dans la lecture de contenus et en particulier dans les pages de résultats de recherche où les informations sont souvent présentées sous forme de blocs de texte les uns au-dessus des autres. Comme son nom l’indique, les déplacements du regard ont tendance à composer deux bandes horizontales suivies d’une bande verticale (cf. illustration ci-dessous). Le pattern est décomposé en trois phases : l’internaute commence par lire le haut du premier contenu – première barre horizontale du F, il descend ensuite dans la page, repère un élément d’intérêt et lit un second passage, généralement plus court que le premier – seconde barre horizontale, puis il finit de scanner verticalement la page – barre verticale du F.

Bien que caricaturale, cette forme s’apparente au mouvement du regard pour la lecture de texte « occidental » aussi appelé Diagramme de Gutenberg ou lecture en Z (i.e. de gauche à droite et de haut en bas). Toutefois, le balayage latéral s’interrompt rapidement chez les visiteurs du web, illustrant alors le besoin d’efficacité dans la recherche d’informations à la verticale.

Là encore, la mise en page des informations influence directement les comportements du regard pour scanner les informations. Les informations situées en périphérie semblent négligées, ce qui est un bon résultat si le site n’a pas l’objectif de les valoriser. A l’inverse, si l’objectif est que le visiteur balaye de manière homogène et intéressé l’ensemble des informations, l’agencement des informations est essentiel. Autrement dit, si une page ne présente pas d’informations sous forme de liste de résultats et que les parcours visuels sont malgré tout en F, il y a peut-être un souci d’agencement. Le contenu n’est pas valorisé comme il devrait et les visiteurs scannent la page plus qu’ils ne la lisent.

Mesurer l’utilisabilité d’une page ou de ses éléments avec le eye tracking

Une bonne expérience utilisateur est faite de satisfaction des attentes et des buts poursuivis, de compréhension aisée des contenus et des moyens de naviguer (e.g. « en savoir plus », « retour à la liste des produits »). La manière dont les informations sont présentées sur le web obéit en partie à des conventions et des habitudes qui se sont imposées, tout en cherchant à satisfaire les internautes.

Les liens utiles (e.g. Contact, champs de recherche), les liens cliquables ou les barres de navigations sont des éléments que l’internaute repère rapidement avec l’habitude. L’eye tracking montrera très vite si ces éléments sont justement identifiés rapidement (parcours linéaire du regard) ou non (parcours « brouillon »). A l’inverse, les informations les moins pertinentes a priori pour l’internaute ne doivent pas attirer trop vite le regard et le distraire de ces objectifs de départ (e.g. bannière publicitaire, les autres langues du site, envoyer à un ami).

Le temps et la simplicité de parcours du regard, entre le début de la recherche visuelle et le moment où le visiteur repère l’élément cible recherché, indiquent clairement l’effort consenti par l’utilisateur pour atteindre ses objectifs. Les textes de  grande taille ou en gras ont tendance à attirer davantage le regard, notamment parce qu’il s’agit souvent de titres ou de phrases courtes demandant peu de temps et d’effort. Il est donc important que l’attrait d’un contenu textuel reflète les attentes des visiteurs : si le regard s’y arrête, c’est que le visiteur doit y trouver un intérêt. Si trop de textes sont mis en évidence, l’effort pour distinguer leur intérêt respectif sera important et le regard ne saura pas où donner de la tête.

La qualité de la disposition des textes vaut aussi pour les formulaires. Rapprocher les libellés des champs de saisie auxquels ils sont associés, est un principe d’ergonomie qui a encore du mal à s’imposer parfois. La technique du eye tracking permet pourtant de défendre certains alignements plus efficaces que d’autres (cf. illustration ci-dessous).

A défaut d’aligner le libellé à droite – et donc de le rapprocher du champ de saisie associé, le positionnement des libellés au-dessus des champs facilite grandement la lecture du formulaire. Le nombre de points de fixation du regard est divisé par 2, simplement parce que le regard n’a besoin que d’une zone de focalisation restreinte à chaque arrêt. Le gain d’un tel agencement est alors autant en termes de rapidité que d’effort moindre de lecture. La seule contrainte reste bien sûr l’espace vertical nécessaire.

Tout comme pour les textes mis en évidence, les images et photos attirent naturellement le regard, parce qu’elles demandent peu d’effort d’interprétation et de compréhension. Mais là encore elles doivent aisément faire mouche pour l’internaute : elles illustrent ou complètent une attente de celui ou celle qui la regarde. Dans une liste d’appartement à vendre par exemple, les photos qui montrent la vue du balcon risquent davantage d’inciter à aller voir ailleurs que de se projeter à l’intérieur de l’appartement pour y vivre. Autre exemple, une photo d’introduction d’une vidéo ne donne pas envie de lancer la lecture si c’est un fond noir opaque ou un gros titre redondant avec le sujet de l’article dans laquelle la vidéo est insérée ; par contre, si la photo montre un moment fort de la vidéo, le regard sera attiré et l’intérêt du visiteur aiguisé !

 Partie 2 > Page À Propos