Couleurs : Faciliter la lecture sur le Web

Suite à la réception de ce que je crois être la newsletter de Miratech, je me permets de reprendre dans ce post un article dans son intégralité car il m’a semblé intéressant. Il traite un sujet aussi basique que peu étudié : les couleurs d’une page web.

“Sur une page web, les utilisateurs ont le temps de lire au mieux 28% des mots. Ils scannent les pages d’un site. Comment mettre en avant l’information ? Comment faciliter au maximum la lecture à l’écran ?

Nous avons acquis des réflexes de lecture peu adaptés à l’écran. Les résultats montrent que la lecture à l’écran est 25% plus lente que sur papier. Il est alors nécessaire d’optimiser les caractéristiques perceptives des informations des sites Internet afin d’en faciliter la lecture.

L’utilisation de la couleur

La couleur améliore-t-elle les performances des utilisateurs ? En réalité, la couleur apporte peu au niveau du traitement de l’information (vitesse de lecture, mémorisation des informations…). Si la couleur encourage la lecture, elle n’aide pas toujours à comprendre le contenu. On réservera donc la couleur quand cela représente un intérêt pour la compréhension de l’information, par exemple pour illustrer la hiérarchie de contenu.

Il est important de réduire le nombre de couleurs différentes : plusieurs couleurs peuvent représenter une surcharge informationnelle, et compliquer le traitement mental de la page. On constate que l’emploi de 3 couleurs est une moyenne idéale, avec un maximum de 6.

Quelles couleurs choisir

Pour mieux les distinguer, il est préférable d’utiliser des couleurs qui ne sont pas adjacentes dans le spectre des couleurs. Le cercle chromatique, représentation circulaire des couleurs, permet de représenter leurs interactions :

Un cercle chromatique

Par ailleurs, sous l’angle plus global de la charte graphique du site, des couleurs voisines sur le diagramme chromatique créent une sensation d’équilibre pour l’œil, dû à l’absence de contraste. Pour choisir des couleurs harmonieuses :

- Sélectionner des couleurs de même teinte dont les tons sont proches,

- Ou mêler des couleurs complémentaires. Pour deux couleurs, choisir celles diamétralement opposées sur le cercle chromatique ; pour trois couleurs, elles formeront un triangle équilatéral sur le cercle, …

Vous utiliserez des couleurs identiques pour grouper des éléments et des couleurs différentes pour distinguer des éléments fonctionnellement différents.

Evitez d’utiliser le rouge et le vert pour définir les limites entre des objets : 8% de la population ont des troubles visuels concernant la distinction de ces deux couleurs.

Le choix des couleurs doit aussi correspondre aux conventions d’utilisation et aux symboliques associées dans la culture occidentale, pour être appropriées à la signification du message. Par exemple :
- le rouge = danger, donc veiller à l’utiliser seulement dans le cadre d’alerte,
- le jaune = attention, qui peut être utilisé dans une fenêtre d’avertissement,
- …

La signification occidentale classiquement associée aux couleurs

La gestion du contraste

Pour la distinction des détails, il est primordial de créer un contraste suffisant entre le fond et le texte de la page web. Le contraste maximum est obtenu avec des caractères noirs sur fond blanc : cette combinaison donne les meilleurs résultats. On peut l’atténuer avec un fond grisé.

Une impression négative (caractères blancs sur fond noir) est lue 10% plus lentement, d’après une étude de Wendt en 1994.

Le manque de contraste peut être compensé par des caractères passés en gras ou dans un corps de texte plus important - à réserver aux éléments à mettre en avant.

La police de caractère

Des études avancent que les polices sans serif rendent plus aisée la lecture à l’écran. Les empattements peuvent très vite devenir gênants pour la lecture. Il est alors préférable d’utiliser une police créée pour la lecture à l’écran, comme Verdana sans serif ou Arial. Georgia est la seule police à empattements adaptée au web. Dans une moindre mesure, on retrouve sur le Web les polices Trebuchet et Lucida Sans, souvent réservées aux titres.
Les polices génériques présentent l’avantage d’être reconnues et affichées par tous les navigateurs :

Les polices génériques utilisées sur le Web

Pour mettre en évidence un mot, passez-le en gras plutôt qu’en majuscules, qui signifient “crier” sur Internet et sont difficiles à lire. Une étude de Karen Schriver indique qu’un texte écrit en majuscules est lu 13 à 20% plus lentement :

De la même façon, n’utilisez pas le soulignement pour mette en avant une idée : dans les conventions web, le soulignement identifie les liens hypertextes.

Evitez également l’écriture italique, qui réduit la vitesse de lecture. Pour respecter l’usage conventionnel, par exemple pour des citations, il est alors conseillé d’augmenter le corps des caractères.

La taille du texte

La difficulté est de trouver une taille de texte qui convienne à tous les yeux. Dans la page, spécifiez la taille du texte en unités relatives, plutôt qu’en points ou en pixels. Il vaut mieux utiliser des pourcentages relatifs à la taille d’affichage spécifiée par le navigateur. Vous laissez ainsi le choix à l’utilisateur d’agrandir ou de rétrécir la taille du texte.

Deux icônes en entête d’article pour modifier la taille de caractères à l’écran (Source : L’Equipe.fr)

La gestion des blocs

La longueur idéale des lignes d’un texte semble se situer entre 55 et 100 caractères par ligne. Attention au design élastique en cas d’agrandissement de fenêtre, qui risque de créer des lignes illisibles car trop longues, sur les écrans larges.

Il est important d’aérer le contenu, avec des interlignes suffisamment importants, sans impression de flottement entre les lignes. Par défaut, les navigateurs web affichent un interlignage de 120 % par rapport à la taille du texte. Selon les typographes, un interlignage correct se situe entre 120 et 150 %.

Pour vérifier l’interlignage, repérez la rencontre des ascendantes et descendantes entre les lignes. Prêtez également attention aux capitales accentuées :

L’essentiel est de conjuguer ces facteurs et d’arbitrer par rapport à leur influence sur la lisibilité des textes. Vos choix seront déterminés par l’image de votre site, le type d’information à mettre en valeur et les caractéristiques et habitudes de l’utilisateur.

Miratech en bref
Miratech est une société d’études spécialisée en ergonomie du web et en conception centrée utilisateur. Elle utilise notamment la technologie eye tracking pour mesurer le regard des internautes sur un site et améliorer son efficacité.
www.miratech.fr”

Merci à Sonia pour son accord.