Cet article est une reprise d’un article publié il y a une dizaine d’années sur mon site « interface », mais le sujet est toujours d’actualité.

Depuis quelque temps on voit fleurir des écrans, sur les téléphones, les smartphones, les ordinateurs portables ou encore sur les tablettes PC, avec des résolutions toujours plus importantes. Alors quand est-il de la lisibilité et de la fatigue visuelle sur ces écrans ?

Définition, résolution et lisibilité.

Pour commencer, précisons deux termes, qui ne sont pas synonymes, et qu’il ne faut pas confondre : la définition, et la résolution.

Définition : nombre de points ou de lignes affichées. Le Robert donne l’exemple suivant : « La télévision couleur classique a une définition de 625 lignes en Europe.  »
Résolution : c’est la finesse du point d’affichage moyen à l’écran, elle se mesure classiquement en dpi ou ppp (points par pouce : un pouce = 25,4 mm). Exemple : une imprimante Laser à 300 dpi ou 600 dpi, un écran à 72 dpi (en théorie).

Rappelons aussi la norme ISO 9241 qui précise que : « l’angle de vue doit être situé au minimum entre 0°16’et 0°22’ soit 3 et 4 millimètres à 60 cm de l’écran pour une lettre capitale* »

A partir de là, calculons sa résolution maximum et minimum : Si on prend une fonte qui fait 12 pixels** de haut, il faut que sa hauteur minimum soit de 3 mm et maximum de 4 mm donc 4 à 3 pixels par mm soit 101,6 à 76,2 ppp. Donc une résolution maximale de l’ordre de 100 ppp.

La formule en clair : résolution (en ppp) = taille (en pixel)/hauteur (en mm) x 25,4 (conversion en pouce)

Dans la réalité.

Ceci posé, abordons le problème avec un petit comparatif :

• Un ordinateur portable DELL 15,4″.
• Un Macbook pro 17″ Apple.
• Un écran Iiyama 22″.
• Un smartphone HD2 par HTC.
• Un iPad d’Apple.

Les résolutions proposées vont du simple au double.

Sur les ordinateurs, la résolution va 90 à 133 ppp. Sur les smartphones et autres tablette la résolution est en moyenne plus élevée (Un iphone à une résolution de 160 ppp). Au-dela de 100 ppp sur les ordinateurs, il devient difficile de lire les menus et les divers textes des interfaces pour une grande partie de la population.

Pour les smartphones, l’utilisateur peut rapprocher dans une certaine mesure l’appareil afin de lire plus facilement. Mais à partir de 40 ans, la presbytie se développe. Il devient difficile de lire de prés.

Les tablettes, comme l’iPad, sont présentées pour être utilisées comme un cahier électronique, donc à bout de bras. On retrouve donc une distance d’environ 50 à 60 cm, mais les résolutions sont souvent supérieures à 100 ppp.

Une IHM lisible ?

La question qui se pose rapidement c’est : « comment faire pour que l’IHM soit lisible sur les différents écrans ? » La réponse est différente suivant éle type d’interface : web ou application locale (WIMP notamment).

• Dans le cas du web, il est nécessaire de suivre les recommandations en termes d’accessibilité du W3C. Il est pertinent de coder la taille des caractères, la largeur des colonnes de textes et divers aspects de mise en page de manières relatives avec utilisant des tailles en « em » et non en pixels. C’est clairement plus compliqué à mettre en œuvre que des tailles fixes et généralement ça ne plaît pas au graphiste qui veut que ce soit comme dans Photoshop ! Mais l’exercice est vraiment intéressant en terme de conception car cela permet un travail « sémantique » sur le contenu et au final un vrai confort de lecture pour l’utilisateur. Il est aussi possible de prévoir une feuille de style par support (écran, papier et même audio).
• Paradoxalement, pour les applications locales que ce soit sous Windows ou Mac OS X, la taille des textes dans les menus est standard. Elle ne prend pas en compte la résolution de l’écran, ni ne permet un réglage manuel. C’est assez étrange, surtout chez Apple qui fait à la fois le matériel et l’OS, de ne pas avoir une  fonction augmentant de quelques pixels la taille des caractères dans les IHM sur les écrans avec une forte résolution. Pour le reste des IHM, c’est lors du développement qu’il faut définir les tailles de caractères ou proposer une option de personnalisation.

Pour la définir approximativement la taille des caractères(en pixel) d’un texte sur un périphérique donné, je proposerai la formule simplifiée suivante :

T = D x R /500

• T : la taille des caractères en pixels
• D : la distance d’utilisation en centimètres
• R : la résolution en ppp

Si on reprend le tableau initial, cela donne :

A noter : La distance d’utilisation reste assez variable suivant les utilisateurs. Le résultat est une approximation qui ne prend pas en compte tous les facteurs (qualité de l’écran, contraste, condition d’utilisation,…).

Pour conclure.

La taille des caractères et plus largement la lisibilité des textes reste un élément primordial des IHM. Le développement récent de l’offre d’ebook, de journaux sur les ordinateurs, les tablettes et autres périphériques va renforcer cette nécessité. Nos amis typographes ont encore de beaux jours devant eux !

Remarques :
* La taille d’une police de caractère est supérieure de la taille de ces majuscules, mais cela diffère suivant les polices.
** Sous Windows les polices de caractères s’affichent en 96 ppp sur un écran en 72 ppp, elle comporte donc 4/3 de pixel en plus, exemple : une police de taille 9 fera 12 pixels à l’écran (et seulement à l’écran). Mais par exemple sur le web, on peut spécifier la taille de la police en pixels (exemple : texte sous forme d’une image ou utilisation de feuilles de styles).