La lecture est une activité quotidienne. Mais, souvenez-vous, il faut plusieurs années de pratique pour maîtriser la lecture. C’est une activité complexe : il faut identifier les lettres, les lier à des sons, comprendre l’assemblage des lettres et des sons, etc.
En bref, c’est donc un processus cognitif complexe.
L’œil et la lecture sur écran
Vision fovéale et vision périphérique
Les images que nous percevons du monde extérieur se fixent sur la rétine. Celle-ci contient deux zones distinctes : la fovéa et la périphérie.
La fovéa correspond à une toute petite zone de la rétine au fond de l’œil : 0,4 mm de diamètre. C’est elle qui permet de voir de façon nette, selon un angle visuel de 2 à 4 degrés. C’est donc cette fovéa qui nous permet de lire, de percevoir les détails d’un objet ou d’une personne.
La périphérie se situe tout autour de la fovéa, elle renvoie une vision floue. Mais la vision périphérique permet de prendre conscience de son environnement et de réagir à celui-ci. La vision périphérique est notamment très sensible aux couleurs, aux mouvements et à la luminosité.
Faîtes le test : placez vos mains à une trentaine de centimètres de votre tête sur les côtés. Si vous les maintenez fixes, vous ne les verrez pas, mais dès que vous les bougez, vous les apercevrez. Cela s’explique par le fait que notre vision périphérique est très sensible aux mouvements.
Comme la vision périphérique est très sensible aux mouvements et à la couleur, la lecture peut être gênée par des images en mouvements ou très colorées aux bordures de l’écran. Un slider par exemple, est très gênant pour se concentrer sur des informations à lire.
Mais vous pouvez également vous servir de la vision périphérique pour attirer l’œil de votre participant. Des notifications colorées sont par exemple souvent utilisées pour alerter l’utilisateur, comme ici sur YouTube :
Ces notifications ne s’offrent pas à la vue des utilisateurs en apparaissant en plein centre, mais en bordure de l’écran. La couleur rouge est faite pour attirer le regard de l’utilisateur grâce à sa vision périphérique.
Saccades et fixations
Lorsque nous lisons, nos yeux alternent saccades et fixations. Tout cela se situe au niveau de la fovéa.
Les saccades correspondent aux mouvements des yeux qui permettent de fixer un mot au centre de la fovéa. Elles sont très rapides, c’est pour cela que nous n’en avons pas conscience :
20 millisecondes pour passer d’un mot à l’autre,
et 80 millisecondes lorsque l’on change de ligne.
Les fixations sont les arrêts des yeux sur les mots, elles permettent la prise d’information. Les fixations sont plus longues, de l’ordre du quart de seconde. Il est ainsi possible d’effectuer 1 000 prises d’information par heure. Ce sont ces fixations qui vous permettent de lire un texte en identifiant les lettres affichées.
Gardez ça en tête quand vous mettez du texte sur une page, surtout quand vous devez calibrer la longueur des lignes.
Spécificités de la lecture sur écran
Tous les rédacteurs Web le savent, on n’écrit pas pour le Web, comme on écrirait pour un magazine papier. Les usages, mais également la facilité à identifier les lettres sont différents. Nous lisons 25 % moins vite sur écran et cette lecture entraîne une fatigue visuelle bien plus rapide que sur papier.
Voici quelques conseils de conception pour éviter la fatigue visuelle de vos utilisateur, selon l’INRS (Institut National de Recherche et de Sécurité) :
“Un affichage sur fond clair est à privilégier car :
il est moins fatigant pour la vue qu’un affichage sur fond sombre
les reflets sont peu visibles
la couleur de fond est la même que celle des documents papier
Avec un écran brillant d’ordinateur portable, un affichage sur fond clair est impératif.
Pour la plupart des tâches en bureautique, il convient de ne pas utiliser plus de 2 ou 3 couleurs en plus de celle du fond. La couleur bleu est à éviter pour les caractères de petites polices et pour le curseur car elle est la moins bien perçue lorsque le regard se fixe ou avec l’avancée en âge. Par ailleurs, il faut veiller à ce que le contraste entre les caractères et le fond soit suffisant.”
Quels facteurs facilitent la lisibilité sur écran ?
Contrastes
Tout d’abord, le contraste entre la couleur du fond et la couleur du texte est essentiel. Plus le contraste sera grand, plus la lecture sera facile (texte noir sur fond blanc).
Mais également, il est plus aisé de lire un texte écrit en noir sur fond blanc que l’inverse. Voyez par vous-même :
Couleurs
Si les goûts et les couleurs ne se discutent pas, pour autant, certaines couleurs ou associations de couleurs sont moins bien perçues.
L’INRS suggère d’éviter le bleu pour des éléments à fixer type textes.
L’association de couleurs complémentaires est également à proscrire :
orange et bleu,
rouge et vert,
jaune et violet.
Préférez donc un texte noir sur un fond blanc, surtout pour de petits caractères.
Police de caractère
La police de caractère détermine un certains nombre de facteurs qui peuvent faciliter, ou au contraire, rendre la lecture plus difficile :
espacement entre les lettres
hauteur des lettres
type de police : avec ou sans serif
Serif
Il existe deux types de polices : avec ou sans serif. Les polices dites, avec serif, sont celles qui présentent un empattement, par exemple Times New Roman. A contrario, les polices sans serif, comme Arial ou Calibri, sont plus minimalistes. Voici quelques exemples :
Il est largement diffusé que les polices sans serif seraient plus lisibles sur écran. Or, les études montrent qu’il n’y a pas de différence. Utilisez donc une police lisible, c’est-à-dire où les lettres se détachent bien les unes des autres. Pour ne pas prendre de risques, choisissez une police classique comme Arial, Calibri ou Times.
Taille des caractères
La taille des caractères est évidemment également un facteur de lisibilité de vos textes. Il n’y a pas pour autant de règles d’or à ce sujet car la taille des caractères est perçue en fonction de la police choisie.
En effet, deux polices de même taille peuvent être plus ou moins grosses. En fait, il faut considérer la hauteur d’x. Cette hauteur correspond à la hauteur des petites lettres de la police : x, c, a…
Pour une même taille, en fonction de la police, le texte sera plus ou moins lisible. Gardez simplement en tête qu’avec l’âge, vos utilisateurs auront besoin d’une police suffisamment grande. Si vous hésitez entre deux tailles, préférez donc la plus grande, les caractères n’en seront que plus lisibles pour tout le monde.
En général, c’est l’espacement et la hauteur des lettres (hauteur d’x) plutôt que la typographie, qui permettent de mieux distinguer les lettres, et donc, facilitent la lecture, surtout sur des textes de petite taille.
Modifications typographiques
Quand à l’utilisation du gras et de l’italique : le gras reste lisible tandis que l'italique pose problème pour la lisibilité.
Voilà, tout est dit ! :)
En résumé
Nous avons vu dans ce chapitre que plus vos textes sont courts et gros, plus vous avez de marge de liberté sur la police de caractère, les modifications typographiques (italique, gras) et la couleur. L’espacement et la hauteur des lettres permet de mieux les distinguer, et donc, facilite la lecture, surtout des textes de petite taille.
Plus la police sera petite, plus vous aurez besoin de respecter ces conseils. Il en est de même pour la longueur des textes. Plus un texte est long, plus vous aurez besoin de maximiser sa lisibilité, pour espérer être lu et compris.
Pour aller plus loin
Pour aller plus loin sur la physiologie de l’œil, je vous conseille cette vidéo sur la physiologie et le fonctionnement de l’œil publiée par l’INSERM :
Si les processus cognitifs complexes de la lecture vous intéressent :
Je vous conseille cette page écrite par Sophie Raufaste.
Ainsi que ce document écrit par Corinne Totereau.
Deux articles intéressants sur le sujet de la lecture sur écran et d’hypertextes :
Article en anglais sur la police de caractère par Alex Poole.
