Perception des images sur le web : ce que nous apprend l'Eye-tracking

Les tests d’eye-tracking permettent aujourd’hui de mieux comprendre comment la nature et l’organisation des éléments graphiques contenus dans une page web peuvent conditionner le parcours visuel des utilisateurs sur la page.

Des études d’eye-tracking menées par Enquiro Research sur les pages de résultats de Google ont montré que la présence d’images dans la liste de résultats modifie les patterns de consultation des pages. Comme l'illustrent les cartes de chaleur ci-dessous, on passe d'un pattern de consultation en forme de « F » à un pattern de consultation en forme de « E » lorsqu’une vignette d’une vidéo de Youtube est présente dans les résultats de recherche.

Patterns en « F » ou en « E » dans les résultats de recherche de Google

Il est intéressant de noter que l’effet induit par la présence d’images n’est pas forcement corrélé avec une attention soutenue de l’utilisateur sur les images. Le fait que la présence d’une image modifie le parcours visuel sur une page ne signifie pas que l’utilisateur se soit particulièrement interessé à l’image. Cet effet est plutôt dû au fait que les images structurent la page d’une manière différente. Par la simple présence d’images, une page sera perçue comme divisée en plusieurs blocs visuels ce qui conditionnera le parcours visuel de l’utilisateur.

Les résultats d’une étude d’eye-tracking que nous avons mené dans le cadre d'AuditWeb sur les pages d’accueil de 3 sites de voyages en ligne (Promovacances, Expedia et Fnac voyages) fournissent des illustrations intéressantes de la fonction des images sur une page et de la manière dont elles peuvent être perçues en fonction du contexte.

Voici les cartes de chaleur représentant le nombre moyen de fixations oculaires (de 8 utilisateurs ayant pour consigne d’explorer la page pour se faire une idée sur le site) sur les pages d’accueil de ces 3 sites.

Carte de chaleur de la page d’accueil de Promovacances

Carte de chaleur de la page d’accueil de Expedia

Carte de chaleur de la page d’accueil de Fnac Voyages

On constate que les zones situées dans la partie haute des pages et comportant des images sont plutôt « chaudes » mais que les images elles-mêmes ne concentrent pas beaucoup d’attention. On notera également que les zones situées dans la colonne de droite sont peu explorées.

Faisons maintenant un zoom sur les blocs de mises en avant d’offres associant texte et images.

Cartes de chaleur des premiers blocs de mise en avant : Promovacances, Expedia et Fnac Voyages

Le tableau ci-dessous récapitule le nombre moyen de fixations du texte et celui des images dans les blocs de mise en avant.

Nombres moyens de fixation Texte vs. Images

Au vu des cartes de chaleur et des nombres moyens de fixation on constate que, globalement, le texte qui accompagne les images est plus fréquemment consulté que les images elles-mêmes. Les images structurent la lecture des informations textuelles liées mais sont peu consultées pour elles-mêmes. La carte suivante montrant les zones vues vs. occultées par un utilisateur illustre le fait que le texte est lu plus systématiquement que les images.

Zones Vues vs. Occultées par un utilisateur : Promovacances

Les images ont également un effet directeur : c’est souvent par la première image, située en haut à gauche du bloc que les utilisateurs « rentrent » dans le bloc comme l’illustre la séquence de parcours visuel ci-dessous.

Parcours visuel d’un utilisateur : Promovacances

Les résultats obtenus dans l’étude Eyetrack III sur des pages d’accueil de site de journaux en ligne suggèrent que la taille des images conditionnent le fait qu’on les regarde ou pas. Cette étude suggère qu’une taille d’image d’au moins 210x230 pixels est nécessaire pour retenir l’attention des utilisateurs. Les images des blocs des pages d’accueil de notre étude sont toutes inférieures à 210x230 pixels. La taille des images a donc pu jouer un rôle dans le fait qu’elles ne sont pas beaucoup regardées. Il faut également noter que, de manière générale, il faut moins de temps pour prendre connaissance d’une image que pour lire du texte.

Toutefois d’autres résultats obtenus dans notre étude suggèrent que des images, même petites, sont consultées si elles véhiculent des informations importantes pour l’utilisateur.

C’est par exemple le cas de la page de résultats de recherche du site de Promovacances :

Carte de chaleur d’une liste de résultats de recherche d’offres : Promovacances

On constate que les images sont davantage consultées dans ce contexte que dans celui de l’exploration des pages d’accueil (les images ont la même taille dans les deux cas). Ici, la tâche des utilisateurs consiste à trouver un séjour avec des critères précis. Les images véhiculent une information importante pour la tâche des utilisateurs car l’un des critères était que l’hôtel se trouve en bord de mer.

En conclusion :

• Les résultats de plusieurs études d’eye tracking suggèrent que les images ont un rôle structurant qui permet d’orienter le parcours visuel en fournissant des points d’entrée du regard sur les zones d’une page.
• Dans une tâche exploratoire, les résultats de nos tests semblent indiquer que les images petites ont un rôle structurant et directeur mais sont peu regardées pour elles-mêmes. Elles pourraient être préconisées lorsque l’information est essentiellement véhiculée par le texte et que l’on souhaite attirer l’attention de l’utilisateur sur un texte en particulier. Une étude avec un échantillon de participants plus important et vérifiant si les textes accompagnés d'images sont statistiquement plus lus et/ou cliqués que les textes sans images serait nécessaire pour confirmer les tendances observées ici.
• Si l’objectif est d’inciter à la consultation des images (exemple : susciter chez l’internaute le désir de plages ensoleillées) alors on préconisera une taille d’image plus grande (supérieur à 210x230 pixels selon l’étude Eyetrack III). D’autres paramètres que la taille seront également a considérer comme leur disposition dans la page (les images situées dans la colonne de droite retiendront peu l’attention) ainsi que le contenu des images (on sait par exemple que les visages de personnes attirent particulièrement l’attention).
• Dans les contextes où les images véhiculent une information importante pour la tâche, les résultats de nos tests suggèrent que des images petites (100x68 pixels dans le cas de Promovacances) pourraient être utilisées si l’on veille à ce que l’information puisse être transmise de manière satisfaisante à la taille donnée. Une étude complémentaire de plus grande ampleur et associant une tâche de consultation à un test de rappel du contenu des images serait nécessaire pour généraliser ces résultats.