 |
Miratech - 13 novembre 2008
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.
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.
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
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
Deux icônes en
entête d'article pour modifier la taille de caractères à l'écran (Source : L'Equipe.fr)
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.fr
Miratech
4 Cité de Paradis 75010 Paris - Tél. : 01 53 34 65 59 - Fax : 01 70 79 06 29
Email : contact@miratech.fr