L’oculométrie au service de l’optimisation des pages Web et mobiles

Pour une entreprise qui vise à optimiser sa présence en ligne, la disposition des éléments de contenu sur les pages Web représente un défi de taille: Où placer les éléments importants, quelle importance accorder à chaque section, etc.?

Aux questions de ce type, l’oculométrie appliquée à des tests usagers se présente comme une manière efficace de trouver des réponses.

Le billet de blogue suivant se veut une vulgarisation de l’oculométrie appliquée au contexte de l’optimisation des pages Web.

Qu’est-ce que l’oculométrie?

L’oculométrie permet de mesurer  en temps réel  l’endroit où les internautes regardent sur une page Web ou mobile. Cela permet d’identifier les zones les plus regardées sur un écran, mais également de savoir quelles zones sont évitées par les internautes.

Avec cet outil, fini les hypothèses sur ce qui est vu ou non! En combinant la méthodologie des tests usagers classiques avec l’oculométrie, il est possible de mesurer efficacement si les boutons d’actions, les menus de navigation ou encore les publicités sont réellement vues par les usagers.

Comment ça fonctionne?

La première étape est d’identifier sur sa page Web ou mobile des  « zones d’intérêt ». Une « zone d’intérêt » peut-être un menu, un icône, une image, un bouton d’action, une zone de texte, etc.

Pour chaque  « zone  d’intérêt », il sera possible de répondre aux questions suivantes:

  • Est-ce que la zone de l’écran est vue ou non?
  • Combien de temps cela prend avant de voir cette zone?
  • Combien de temps les usagers regardent cette zone?

Les résultats des analyses sont présentés sous forme de cartes de chaleur (heat map) et de vidéo.

Le site d’Aldo – Un exemple pour la page d’accueil

Prenons le site Web d’Aldo et regardons les résultats d’un test usager avec oculométrie (N=3).

capture#1

Les cartes de chaleur et le « gaze plot » (trace du parcours oculaire) démontrent clairement que les zones les plus regardées de la page d’accueil se situent au haut de l’écran, plus particulièrement au niveau du menu de navigation.

Pour ce qui est de la zone du bas de la page, les participants n’y jettent même pas un coup d’œil  – littéralement!

Le site de Yellow – Un exemple pour une page produit

Regardons maintenant une page du site Web de Yellow.

Pour une page qui présente une paire de bottes d’hiver pour femme, il est possible de constater que les zones les plus regardées sont le descriptif du produit (particulièrement le prix!) ainsi que les boutons de partage (courriel et médias sociaux).

Pour ce qui est de la zone du bas, soit celle des recommandations d’autres produits, on constate que les usagers y jettent uniquement un petit coup d’œil.

caputre 2

Les vidéos

Les tests usagers avec oculométrie permettent également de produire des résultats sous forme de vidéo. Grâce à ces dernières, on peut suivre le déplacement des yeux des usagers sur les pages.

Je vous invite à consulter l’exemple suivant, mentionnons que les points rouges représentent les fixations des yeux sur l’écran et le parcours oculaire:

Bref, l’oculométrie appliquée à la méthodologie des tests usagers classiques permet d’identifier rapidement des problèmes d’interfaces, et ce, en plus de permettre des  analyses qui vont bien au-delà de ce que les usagers peuvent verbaliser!