Lit-on de la même façon en surfant sur Internet que sur papier? Absolument pas. Et pourtant, bon nombre de textes sur le web sont de vulgaires « copier-coller » de textes imprimés.

Quelques principes et règles pour ne pas perdre nos (chers) cyber lecteurs.

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ères linéaires, 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.

Les recherches effectuées par John Morkes et Jakob Nielsen pour : Writing for the Web ont démontré que 79 % des visiteurs de pages Web ne lisent pas, mais parcourent (scan) les textes. Seuls 16 % lisent mot à mot. Une étude canadienne a établi que la vitesse de lecture des pages Web est de 28,5 % plus lente que celle de pages imprimées. Lire sur un écran produit, de plus, une pression physiologique et fatigue les yeux. Le scintillement de l’écran réduit la lisibilité d’au moins 30 %.

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’italique est moins lisible sur écran, il ralentit la lecture et produit généralement des effets d’escalier (principalement dû à la moins bonne résolution d’un écran contraire à l’imprimer). Il vaut mieux le remplacer par un changement de couleur ou, encore mieux, un retrait;
  • Les majuscules sont plus lentes à lire parce que l’oeil à moins de faciliter à différencier les formes des lettres;
  • Le souligné est à proscrire, il est réservé aux liens hypertextes;
  • 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;
  • 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. L’utilisateur 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;

    Voici un exemple de texte écrit en Verdana 11 points avec un interlignage de 15 points. Voici un exemple de texte écrit en Verdana 11 points avec un interlignage de 15 points. Voici un exemple de texte écrit en Verdana 11 points avec un interlignage de 15 points. Voici un exemple de texte écrit en Verdana 11 points avec un interlignage de 15 points. Voici un exemple de texte écrit en Verdana 11 points avec un interlignage de 15 points.

  • 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) conduisent à une fragmentation de la largeur de l’écran, engendrent une perte de place, réduisent 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).
  • 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 empattement : Arial, Verdana. Pour le texte, par contre, optez pour une police avec empattement (Times ou un Garamond par exemple).

    Sur ÉCRAN

    Sur écran, c’est le contraire du papier. Les empattements sont moins lisibles. Il vaut mieux utiliser des caractères sans empattement. Les lettres avec empattement sont en 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 (des effets pixellisés).
  • 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 est généralement de 300 points par pouce (dpi) et 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.).

    Tags:, ,
    7 commentaires

    Partager ce contenu :

    • Facebook
    • LinkedIn
    • Twitter
    • Identi.ca
    • Delicious
    • Technorati Favorites
    • Netvibes Share
    • Google Reader
    • FriendFeed
    • Ping
    • Share/Bookmark


    Billets sur le même sujet :


    Suivre la discussion

    7 Réponses à “Comprendre la lisibilité du texte : sur écran VS sur papier”

    1. Louis_Dea dit:

      Merci pour ces judicieux conseils.

      Tu m’as fait changer quelques trucs dans les propriétés de mes paragraphes sur mon site web :)

    2. P.Gregoire dit:

      Ça fait plaisir à entendre. C’est toujours plaisant de savoir que ce que l’on écrit sert à quelqu’un. Moi même de mon côté, je ne peux pas dire que j’ai tout mis en application sur mon site. J’ai encore du travail sur la planche ;)

    3. Louis_Dea dit:

      En tout cas, je trouve que le principale est là, bon contenu, textes bien lisibles, bon espacement entre les lignes, entre les paragraphes… Good Work :)

    Trackbacks

    1. Tweets that mention Comprendre la lisibilité du texte : sur écran VS sur papier | Patrick Grégoire -- Topsy.com  
    2. COMPETENCIA LECTORA: LEER EN PAPEL O HACERLO EN UNA PANTALLA NO ES LO MISMO « Josusierra's Blog/ Josusierraren Bloga/ Blog de Josusierra  
    3. Comprendre la lisibilité du texte : sur écran VS sur papier | Patrick Grégoire » Web Design  
    4. Mes billets favoris de la semaine (27 mars au 2 avril)  

    Laisser un commentaire