Les internautes ne lisent pas les pages web, ils les “scannent”. C’est que nous apprend Jakob Nielsen dans son article “ How little do users read“.

Seulement 28% des mots d’une page sont lus en moyenne. Et ce pourcentage décroit à mesure que le nombre de mots présents sur la page augmente, comme en témoigne le graphique ci-contre.

Dès qu’il y a plus d’une centaine de mots sur une page, le taux de lecture descend sous la barre des 50%.

Faire un site web efficace, que ce soit un site de ecommerce ou un site d’information, nécessite de comprendre et de tirer partie de ce phénomène.

Les études d’eyetracking donnent systématiquement les mêmes résultats. Avant d’entamer la lecture complète d’une page, le lecteur commence par survoler le contenu pour décider si oui ou non cette page présente un intérêt pour lui.

Le parcours de l’oeil du lecteur représente quasi-systématiquement un triangle (le “golden triangle” des moteurs de recherche), ou plus précisément un F (”F-shaped pattern”), comme celui que l’on peut voir sur l’exemple ci-contre.

Les internautes lisent le titre, survolent le premier paragraphe, puis descendent dans l’article, pour en évaluer la longueur et l’intérêt.

Dans certains cas, cette évaluation va décider l’internaute à lire l’intégralité de l’article. Mais la plupart du temps, l’internaute va se contenter de ce rapide survol avant de passer à autre chose, soit en cliquant sur un lien sur la page, soit en utilisant la fonction “back” de son navigateur.

Cela peut être soit parce qu’il considère que le contenu ne l’intéresse pas, soit parce qu’il considère qu’il en sait assez pour passer à autre chose.

Get the full picture

Et pourtant… Un exemple dramatique pris dans l’actualité récente m’a démontré à quel point cette lecture rapide peut déformer l’information. J’ai appliqué une heatmap classique sur un article lu dans Yahoo actualités :

Cela correspond à ce que 80% des internautes auront vu de cet article. Et ils en auront tous tiré la même conclusion sur l’inconscience des motards et le danger qu’ils représentent.

Une lecture intégrale de l’article amène pourtant une vision assez différente du problème, puisque l’avant dernier paragraphe de l’article est rédigé comme suit :

Avouez que l’interprétation de l’information est foncièrement différente.

Dans le cas présent, nous avons affaire à une approche partiale de l’information. Mais cela démontre l’importance d’accompagner le lecteur vers les points importants d’un contenu, lui donner des éléments facilitant le parcours de son regard.

Ce n’est pas un phénomène nouveau. Au moyen-âge déjà, les moines copistes, sans bénéficier des technologies d’aujourd’hui pour étudier le comportement d’un lecteur, avaient déjà inventé les lettrines. Ce n’était rien de moins qu’un moyen visuel de guider le regard du lecteur vers le début d’un paragraphe, pour en faciliter la lecture.

ien d’autres moyens existent pour faciliter la lecture, ou s’assurer que le lecteur aura reçu l’essentiel de l’information même s’il ne prolonge pas sa lecture.

La présence d’éléments visuels dans l’article donne des points d’accroche, qui permettent au regard de repartir. Les différents paramètres de casse, comme la mise en gras, permettent également de faire ressortir des informations dans un texte, même long.

A quoi sert un intertitre ?

L’intertitre bien sûr, est un moyen de relancer la lecture. Il permet une “pause”, le temps de digérer une information et relance l’intérêt pour le paragraphe suivant.

On voit aussi la méthode adoptée justement par Jakob Nielsen dans ses articles, qui donne un résumé en une phrase de son article dans la zone chaude de la heatmap de sa page.

Et surtout, sur le web plus encore qu’ailleurs, une image vaut mieux qu’un long discours ! Si vous avez la possibilité de représenter graphiquement une idée ou une information, usez-en.

L’eyetracking n’est pas une solution accessible à tous. Il existe plusieurs outils qui génèrent des heatmaps, comme Crazyegg, mais ces outils sont biaisés, parce qu’ils ne peuvent mesurer que l’endroit où vos lecteurs cliquent, et pas ce qu’ils regardent. Une vraie étude d’eyetracking suppose un matériel et des outils adaptés, comme ceux utilisés par Nielsen.

Mais en étudiant différents exemples d’eyetracking, vous pouvez générer un masque noir, comme je l’ai fait pour l’article Yahoo, pour vos pages principales (home page, fiche article, votre newsletter etc…), et regarder vos pages à travers ce masque. Ca vous donnera probablement quelques idées sur l’aménagement du contenu de votre site.

Tags: blog, idées, navigation

Cedric :: May.24.2008 :: Itinéraires :: No Comments »

Trackback this post | Feed on Comments to this post