Lecture sur le web : quelques conseils pour améliorer la lisibilité des informations

Tweet

Les comportements de lecture à l’écran sont très différents d’une lecture sur papier. En effet, 79% des internautes qui surfent sur internet ne lisent pas mais « balayent  » visuellement les contenus textuels à la recherche de l’information qu’ils souhaitent obtenir. Cette lecture en diagonale nécessite bien entendu de s’attarder sur la rédaction même des textes, de manière à apporter à l’internaute l’information la plus essentielle le plus clairement et le plus rapidement possible, mais elle impose aussi d’appréhender correctement leur dimension visuelle : une partie des qualités ergonomiques d’un site web résidera dans sa capacité à présenter les textes de manière claire et lisible.

Plusieurs aspects sont donc importants à prendre en compte.

Largeur du texte

Un texte ne reste lisible que si le nombre de caractères par ligne n’est ni trop faible, ni trop important. En effet, lors de la lecture, l’oeil effectue sans cesse des allers-retours, ne visualisant que les premières lettres de chaque mot et laissant ainsi le cerveau reconstituer le reste en fonction de la forme globale du mot et du contexte. Lorsque les lignes de texte sont trop longues, le passage d’une ligne à la suivante devient difficile et l’oeil se perd dans cette fastidieuse gymnastique.

On estime que la longueur « idéale » d’une ligne de texte est de 60 à 80 caractères (en taille standard de police), le nombre de caractères par ligne pouvant différer d’une police à une autre. La Verdana par exemple, plus large que l’Arial, présentera moins de caractères sur une même largeur de ligne. Le nombre de caractères ainsi cité équivaut à une largeur de paragraphe d’environ 400 pixels de large. Oubliez donc les design à rallonge dans lesquels les textes s’étalent sur toute la largeur de votre écran : un véritable cauchemar pour vos visiteurs !

Justification et césure

Textes justifiés ou textes ferrés à gauche ? Sur le web, les cas de figure diffèrent et tiennent surtout compte d’un critère principal : la longueur des lignes.
Privilégiez la justification (en css, text-align: justify) lorsque la largeur des colonnes de textes vous le permette, sur une largeur idéale de lecture de 400 pixels par exemple. Pour des textes plus réduits en largeur de colonne, préférez l’alignement à gauche afin d’éviter les espaces blancs que peut engendrer la justication sur ce type de colonnes, très préjudiciable à la lisibilité. Sur des largeurs moyennes, la justification peut également engendrer des « couloirs » de vide qui interrompent le cheminement de l’oeil lors de la lecture. Maniez donc la justification de votre texte avec précaution.

En terme de césure, les règles sur le web sont relativement basiques en comparaison aux règles en place dans les logiciels d’édition de texte. Aucun navigateur n’autorise encore la césure automatique des mots, et c’est notamment pour cette raison que la justification d’un texte peut rapidement donner un résultat peu adéquat pour la lecture sur écran.

Contrastes et couleurs

Dans un souci permanent de lisibilité et de confort visuel, le contraste entre le fond de page d’un site internet et la couleur du texte est primordial. Un fort contraste permettra d’optimiser la « vitesse de perception » du lecteur, c’est à dire le temps écoulé entre le moment où l’objet lui est présenté et celui où il le perçoit visuellement.

Si un contraste faible n’est pas forcément gênant pour les titres, boutons ou éléments de navigation, optez par contre pour un contraste soutenu pour des contenus textuels importants. Favorisez également les contrastes positifs (texte foncé sur fond clair), qui apportent plus de confort. La pupille de l’oeil fonctionne de telle sorte que son diamètre est plus petit lorsque le contraste est positif, provoquant ainsi une profondeur de champ plus importante, donc une perception visuelle plus confortable et moins fatigante.

Pour finir, si un contraste bien marqué est indispensable pour assurer une bonne lisibilité des informations, n’hésitez pas à adoucir les luminances des couleurs : sur un fond blanc par exemple, préférez un gris très foncé à un noir pur pour votre texte. En atténuant ainsi très légèrement le niveau de contraste, vous améliorerez le confort de lecture et amènerez en plus de cela davantage de finesse à vos pages web.

Evitez également les superpositions de couleurs complémentaires.

Approche et interlignage

L’approche, qui correspond à l’espace existant entre les lettres d’un même mot (correspond en css à la propriété letter-spacing, et l’interlignage, espace existant entre deux lignes de texte (en css, line-height), sont deux « paramètres » importants à prendre en compte pour améliorer la clarté et la lisibilité de vos textes.  Ils contribuent à créer ce que l’on appelle la « couleur typographique » ou gris typographique, qui correspond en quelque sorte à l’impression visuelle que donne le texte : on ne parle pas ici de couleur « chromatique », mais de densité.

« Serrée, la composition se densifie ; lâche, elle se clarifie et devient aérienne. »
(Peter Gabor).

Si vos paragraphes sont plutôt longs, augmentez de quelques pixels ou points l’interlignage. Votre contenu ainsi plus aéré gagnera en clarté. De la même manière, une police dont l’approche est faible sera moins lisible, quand a contrario un espacement plus important entre les lettres -sur un titre par exemple- peut donner plus de lisibilité. Attention toutefois à bien doser ces deux variables, car un mauvais paramétrage pourra vite provoquer le contraire de ce que vous cherchiez à obtenir, et amener à un manque de lisibilité.

Choix des typographies

Tout bon graphiste a conscience que la typographie au sein d’une composition graphique a un rôle esthétique évident et non négligeable. Toutefois, sur internet et plus qu’ailleurs, il est important de gérer l’équilibre entre la créativité que l’on peut déployer autour d’un texte et de sa typographie, et le respect de la lisibilité de celui-ci. Optez pour des typographies peu complexes (la plupart du temps de type sans-serif, telles que Arial ou Verdana, dessinées spécifiquement pour la lecture à l’écran) pour des textes assez denses, et permettez-vous peut-être un peu plus de folie sur des gros titres, ou des textes courts. L’important étant de savoir quand détruire la lisibilité d’un texte au profit d’une approche créative et graphique.

Conclusion :

Au même titre que l’environnement visuel d’un site web, la lisibilité des informations sur une page web ne doit pas être négligée, tant par les graphistes qui donneront le ton sur les maquettes préalables au développement d’un site, que par les intégrateurs qui se devront de retranscrire en CSS tous les choix et toute l’attention portée aux contenus textuels. N’oublions pas que la vitesse de lecture sur écran chute de 25% comparativement à une lecture sur papier. Pour un internaute, lire sur le web est un effort et un travail de l’oeil et du cerveau plus intense, plus fatigant. A nous, créateurs de sites, de lui faciliter l’exercice !

A lire également sur le même sujet :

• La lecture facile à l’écran [Uzine]
• Faciliter la lecture d’informations sur le web [Ergolab]

Tags : Ergonomie - lecture sur écran - Lecture sur le web - lisibilité - Typographie

Tweet

A propos de l'auteur