Des études de comportement ont montré que les techniques de lecture d'un internaute (de recherche et de navigation aussi) ne sont pas les mêmes que sur le papier. Sur papier, on lit de manière linéaire, on feuillette. Sur écran c’est NON linéaire : on explore (et quelquefois on se perd). Il y a en outre une différence de taille entre les images formées par l'encre qui s'étale sur le papier et les pixels de l’écran de notre ordinateur.
Sur écran, la couleur est la somme des trois couleurs (rouge, vert, bleu) émises par le tube de l'écran. La source de lumière est intérieure : elle est située derrière l'écran. Dans le cas du papier, la source de lumière est extérieure et au dessus.
Notre perception rétinienne n’est donc pas la même entre le papier et l’écran.
Selon

Les techniques "d'écriture" doivent être donc repensées. Comment ?

Sur PAPIER, choisissez de préférence, pour les titres, une police SANS empattement. Une police sans empattement se distingue par l'absence de pied écrasé au i . Exemple de police sans empattment : Arial, Verdana. Pour le texte, par contre, optez pour une police avec empattement (Times ou un Garamond par exemple).

Empattement moins lisible sur écran
Sur ECRAN, c’est le contraire du papier : il vaut mieux utiliser des caractères sans empattement. Les lettres avec empattement sont effet moins lisibles sur l'ordinateur. Il y a deux raisons à cela :

• Les détails du caractère avec empattement ont tendance à se "noyer" dans l'écran.
  Un caractère avec empattement produit des « effets d'escalier » sur sa base.

• Sachez aussi que la résolution d'un écran est beaucoup plus faible que celle du papier. Un écran a une résolution de seulement 72 pixels par pouce alors que la résolution papier peut aller jusqu’au 3.600 points par pouce.

Dans le cas de caractères de grande taille, l'argument de la résolution ne joue toutefois plus. Vous pouvez ainsi utiliser n'importe qu'elle forme de caractère, (par exemple pour la page d'accueil, les onglets, titres, etc).

Quelques règles :
Un caractère gras a tendance à agir sur la persistance rétinienne : à utiliser exclusivement pour des titres ou des parties courtes d'un texte. l

L'italique est moins lisible sur écran, il ralentit la lecture et produit généralement des effets d'escalier. Il vaut mieux le remplacer par un changement de couleur ou, encore mieux, un retrait.

Les majuscules sont plus lentes à lire.

Trames et arrière-plans : évitez la cacophonie des couleurs et les fonds patchwork ou tapisserie. Attention aussi au contraste ! Exemples : texte jaune sur fond blanc, violet sur rouge ou teinte sur teinte (vert foncé sur vert pâle). C’est très fatiguant et souvent illisible. Pour bien utiliser les couleurs : www.chromoweb.com

Le souligné est à proscrire, il est réservé aux liens hypertextes.

Ne bourrez pas l’espace visuel de l’écran : certaines études suggèrent de ne pas dépasser 30% de la surface de l’écran. Plutôt que de compacter les textes, faites défiler le texte en permettant à l’internaute d’utiliser « l’ascenseur » latéral (scroll). Insérez des alinéas, placez aussi des tirets, des puces. Bref, répartissez les masses, de façon à ce que l’internaute ait une impression globale, panoramique, « légère », attirante. Le surfeur scanne d’abord toute la page, la « synthétise », avant « d’entrer dedans ».

Ne choisissez pas des polices étroites, comme l’Arial Narrow : elles ralentissent la lecture.
Sur écran, l‘interlignage doit être un plus grand que sur papier. Un Verdana de taille 11 points et un interlignage de 15 points donne un excellent résultat à lire.

Alors que dans le papier le sens de lecture est plutôt vertical, sur écran la lecture est horizontale.
Conséquence de cette règle : le multi colonnage n’est pas conseillé dans le cyber monde. Trop de colonnes (comme c’est le cas dans la presse papier) conduit à une fragmentation de la largeur de l’écran, engendre une perte de place, réduit le confort de lecture et nuit à la vision synthétique dont nous parlions plus haut.

Si l’écran comporte quand même plusieurs colonnes, un espace suffisant doit être prévu entre chacune d’elles. Donnez leur aussi plus ou moins d’importance selon le contenu (hiérarchisez !).

Evitez les justifications trop étroites de moins de 5 cm (qui créent des saccades oculaires dans la lecture), ni trop larges de tout l’écran (qui créent une lassitude oculaire).

Le chiffre 12 est magique sur le web. L’idéal, c’est de ne pas avoir une taille de caractère inférieur à 12 (ou 11 selon les polices), des phrases de 12 mots et des paragraphes de 12 lignes au maximum.


Quelques sites à consulter
J’ai ici parlé de lisibilité. Si vous voulez allez plus loin et aborder l’ergonomie (certain parlent d’utilisabilité) du web, voici quelques références :

USABILIS. Conseils en ergonmie informatique. Son auteur Jean-François Nogier a mené l'essentiel de sa carrière dans le domaine des interfaces homme-machine chez IBM et Thales. Il est consultant spécialisé en ergonomie informatique. Il enseigne l’utilisabilité à l’Université Paris Dauphine, à l’INT, l'ISEP et Supélec.
Il a écrit un ouvrage "Ergonomie du logiciel et design web. Le manuel des interfaces utilisateur"

USEIT. Son auteur, Nielsen Jakob, a aussi écrit, entre autres, un très connu : « Designing Web Usability : the pratice of simplicity”, Indianoplis, New Riders Publishing, 1999.

ERGOBAL,
est un site de ressources en ergonomie web et logiciel. C'est une boîte à idées pour comprendre et appliquer l'ergonomie informatique.

Architecture d'un site Web

NetWay est né à partir d'un constat simple : 90% des sites Web à vocation commerciale ne fonctionnent pas! La raison principale ? Ces sites ne répondent pas à l'attente des internautes...

Pour AXANCE il s'agit de détecter les déficits en expérience-client (usages et besoins) et apporter des solutions concrètes pour créer de l’expérience-client positive (attractivité, utilité, efficacité…plaisir).

Sur le site Ergologique, ils souhaitent sensibiliser et conseiller les concepteurs d'interfaces web, et d'interfaces utilisateurs en général, sur les nécessités en ergonomie et utilisabilité.


mathelot JP