Magazine Internet

Couleurs : Faciliter la lecture sur le Web

Publié le 01 décembre 2008 par Cyril Esnault

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.


 
scoopeo:Couleurs : Faciliter la lecture sur le Web
 
fuzz:Couleurs : Faciliter la lecture sur le Web
 
nuouz:Couleurs : Faciliter la lecture sur le Web
 
digg:Couleurs : Faciliter la lecture sur le Web
 
del.icio.us:Couleurs : Faciliter la lecture sur le Web
 
newsvine:Couleurs : Faciliter la lecture sur le Web
 
blinklist:Couleurs : Faciliter la lecture sur le Web
 
furl:Couleurs : Faciliter la lecture sur le Web
 
reddit:Couleurs : Faciliter la lecture sur le Web
 
Y!:Couleurs : Faciliter la lecture sur le Web
 
magnolia:Couleurs : Faciliter la lecture sur le Web

D'autres articles à découvrir:

Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

  • Aux couleurs de Tokyo

    23 arrondissements spéciaux remplacent l'ancienne municipalité de Tokyo, dissoute en 1943. Sur le plan administratif, ils forment chacuns des villes et... Lire la suite

    Par  Eparsa
    VOYAGES
  • Aux couleurs de Johannesburg

    Johannesburg est une ville d'Afrique du Sud, la première ville au niveau de la population avec près d'1 400 000 habitants. C'est une ville a majorité habitée pa... Lire la suite

    Par  Eparsa
    VOYAGES
  • Le Pays des couleurs...

    Que c'est bon d'entendre rire mes lou's ! Ce soir, j'ai fait découvrir à Emma l'ebook (livre électronique) que j'avais fait à Nicolas sur la découverte des... Lire la suite

    Par  Caticat
    BD & DESSINS, JOURNAL INTIME, PHOTOS, TALENTS
  • "Le magicien des couleurs"

    J'ai oublié de vous raconter que cette après midi j'ai assisté au spectacle de fin d'année scolaire de mon fils, Jules ! Cette jolie mise en scène fut traduite... Lire la suite

    Par  Virginieb
    JOURNAL INTIME, TALENTS
  • l'été en couleurs .

    Alors , selon vous , quelle est elle ? Chaque année , il y a une couleur qui se démarque des autres , qui envahie nos rayons de magasinset nos plages. Il y a... Lire la suite

    Par  Vera_s
    CONSO, MODE, MODE FEMME
  • Couleurs

    Une vidéo tout en pâte à modeler et en musique d'opéra de Verdi : Lire la suite

    Par  ßertrand
    HUMOUR, MUSIQUE, A CLASSER
  • Un reboot Buffy the Vampire Slayer en préparation avec Joss Whedon !

    reboot Buffy Vampire Slayer préparation avec Joss Whedon

    Après Charmed sur The CW, c'est maintenant "Buffy the Vampire Slayer" qui obtient son retour que personne n'a demandé. 20th Century Fox Television a donc... Lire la suite

    Il y a 8 heures, 48 minutes par   Addictedtoseries
    CULTURE, MÉDIAS, SÉRIES, TÉLÉVISION

A propos de l’auteur


Cyril Esnault 4 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossiers Paperblog

Magazine