Comment faciliter la lecture de votre site ?

Faciliter la lecture de votre site Web

Sur une page web, les internautes ont le temps de lire, au mieux, 28% des mots. Ils scannent les pages de votre site et dans la foulée, font l'impasse sur beaucoup d'informations que vous pensiez évidentes à la perception.

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. Des résultats de recherches sérieuses montrent que la lecture à l'écran est 25% plus lente que la lecture sur support papier. Il est donc primordial d'optimiser les caractéristiques perceptives des informations de votre site web ou votre boutique en ligne afin d'en faciliter la lecture et la capture d'informations.

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 elle encourage la lecture, elle n'aide pas toujours à assimiler le contenu. Il est donc plus judicieux de réserver la couleur quand cela représente un intérêt pour la compréhension de l'information, comme pour illustrer la hiérarchie de contenu.

Il est aussi important de restreindre le nombre de couleurs différentes : nombreuses, elles 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.