Accueil > Mettre en page > La lisibilité sur écran et papier

La lisibilité sur écran et papier


Citroen 2015 lisibilité

Merci Citroën pour votre carton d’invitation à votre DS Store… mais lisible à 10 %.

Une règle fondamentale, essentielle, cruciale, prédominante, qui s’impose  : vos messages doivent être faits pour  le lecteur, pas pour vous. Comme le dit et l’écrit justement Muriel Vandermeulen (We Are The Words) : « ce n’est pas l’auteur, mais le lecteur qui donne vie au texte et lui procure une dimension conversationnelle (avec soi ou l’autre) ».
A ne jamais oublier. Soyez, en permanence, orienté lecteur,  « Reader Centric ».

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.

Les techniques « d’écriture » doivent être donc repensées. Comment ?

Sur PAPIER :

Pour les titres, choisissez de préférence une police SANS empattement (appelée aussi sans Serif). Une police sans empattement se distingue par l’absence de pied écrasé au i. 

Sans Serif (sans empatemment) et avec Serif 

 

 

 

Sur papier, pour le texte (à l’inverse du titre), optez pour une police AVEC empattement  (Times ou un Garamond par exemple).


Sur
ECRAN :  sans empattement

C’est le contraire des textes imprimés sur papier : utilisez des caractères sans empattement (Sans sérif) . RAPPEL : les polices sans empattement les plus usuelles :  Arial, Trebuchet, Verdana, Tahoma. 

Les lettres avec empattement sont, en effet, moins lisibles sur l’ordinateur. Il y a deux raisons à cela :

  1. 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.
  2. 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 (voire 92)  par pouce alors que la résolution papier peut aller jusqu’au 3.600 points par pouce. Une même police  utilisée sur papier ou sur écran diminue sa lisibilité (et donc sa vitesse de lecture)  de 25%.
    C’est ce que prouvait une étude Nielsen  de 1997 : «  On lit 25% plus lentement à l’écran que sur papier ». Une  étude  plus récente de 2010 relativise ce  pourcentage.  C’est vrai que les techniques et écrans ont évolué : la lecture sur tablette est ainsi seulement de  6,2 % plus lente que sur papier.
    Autrement dit : on lit toujours plus vite sur papier que sur un écran. 

Sur base de ces deux arguments,  je persiste  à utiliser du SANS SERIF sur internet , malgré  les conclusions d’Alex Poole (cité par  mon confère  Alex Chavanne):  peu importe  avec ou sans empattements sur le web.
Selon  Poole, le choix devrait se faire en fonction de facteurs purement esthétiques.  je ne suis pas d’accord.

 

Exemple ci-dessous.  Ce texte (issu d’une e-newsletter), combine deux difficultés pour le lecteur.  Police inadaptée à un écran et couleur trop claire (insuffisamment contrastée) :

Ce texte combine deux difficultés : police inadaptée à un écran et couleur trop claire

 

 

Poole fait en outre observer que d’autres critères de lisibilité doivent intervenir :  par exemple, la longueur de l’espacement entre les caractères. Sur ces facteurs,  je suis tout à fait d’accord.  Et j’en ajoute d’autres ci-dessous.

  • 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 de lisibilité :

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. 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 

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.

Pour réduire le nombre de colonnes au strict minimum sur écran, optimisez donc la hauteur et NON pas la largeur. Et mettez du rythme dans vos pages :

  • titres interpellant
  • sous titres et intertitres chocs
  • lignes et paragraphes courts
  • avec des « blancs », de l’espace :  votre mise en page doit R E S P I R E R.

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 ,  c’est-à-dire moins d’une trentaine de caractères (espaces compris) en corps 12 , ce qui correspond, plus ou moins, à quatre mots.  Ces justifications trop étroites  créent des saccades oculaires dans la lecture.
De même, évitez les justifications trop larges qui prennent toute la largeur de l’écran : elles provoquent une lassitude (fatigue) oculaire.

Les textes centrés sont plus difficiles à lire.

Evitez le centrage sauf pour les titres

Les textes  centrés (comme le montre parfaitement l’exemple ci-dessus), créent  un effet « dents de scie » c’est à dire  du texte non aligné, tant à gauche qu’à droite de l’écran. Le parcours de l’oeil est plus difficile, plus lent.  Le centrage est à éviter. Seule exception : pour  un titre.

 

Le chiffre 12 est magique sur le web.
L’idéal, c’est d’avoir :

  • une taille de caractère au moins égale à 12 ou 11 selon les polices,
  • des phrases de 12 mots,
  • des paragraphes de 12 lignes au très grand maximum.

Lisibilité + ergonomie. Des sites à consulter :

J’ai ici parlé de lisibilité.  Mais on peut aller plus loin et aborder l’ergonomie (certain parlent d’utilisabilité) du web,  ou dernièrement de « Eye-candy« ,  c’est-à-dire comment rendre une interface jolie et agréable à voir.
Bref, il s’agit maintenant d’être, non seulement lisible mais également d’offir en même temps à l’internaute facilité pour surfer et une émotion.

Quelques références :

EYE CANDY pour un utilisateur agréablement surpris.

USABILIS. Conseils en ergonomie 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.

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é.

D’autres conseils : voyez nos articles sur

– le contraste

– les lignes trop longues

  1. alexandre
    05/09/2013 à 22:23 | #1

    des références en fin de d’article mais…..
    pas le site à partir duquel le copier-collé a été fait

    http://www.patrickgregoire.com/index.php/2010/03/comprendre-la-lisibilite-du-texte-sur-ecran-vs-sur-papier/comment-page-1/#comment-126

    plagiat!?

  2. 14/09/2013 à 10:21 | #2

    Bonjour Alexandre. Merci pour ton commentaire. En vérifiant tous les liens et leur historique, je constate que l’article initial date de 2008. C’est moi qui l’ai écrit ! Je ne peux donc pas me plagier moi-même. Si les blogueurs citaient leur(s) source(s) quand ils font du copier-coller cela permettrait de savoir qui est l’auteur initial. En l’occurrence,ici, moi. Jean-Paul MATHELOT.

  3. 26/04/2016 à 15:15 | #3

    Bonjour,
    j’ai également traité de la mise page notamment sur livre numérique ou ebook sur mon blog que je vous invite à consulter à cette page :
    http://creationdiffusionebook.com/blog/category/creation-ebook/mise-en-page/
    ainsi que d’autre sujets tel que « Comment écrire facilement votre Ebook » par exemple :
    6 articles pour vous aider à y voir plus clair :
    (1) Choisissez un bon Titre pour votre Ebook
    (2) Créez également de bons titres pour vos chapitres
    (3) Démarrez votre e-book avec une aide très précieuse : la Table des Matières
    (4) Organisez, écrivez, corrigez
    (5) Rendez agréable la lecture de l’Ebook : utilisez des Images ou Visuels
    (6) Concluez votre ouvrage
    à bientôt de vous y retrouver

  1. 09/05/2012 à 09:08 | #1
  2. 31/07/2015 à 16:57 | #2
  3. 03/12/2016 à 02:41 | #3