Ergonomie & Design

**Ceci est une ancienne révision du document !**

http://www.ergolab.net/articles/faciliter-lecture-informations-web.phphttp://www.inrs.fr/dms/inrs/CataloguePapier/ED/TI-ED-924/ed924.pdfhttps://blocnotes.iergo.fr/articles/quelques-bonnes-pratiques-pour-la-redaction-darticles-sous-wordpress/

# Lisibilité

lisibilité matérielle de la lisibilité cognitive d'un texte.

Physique

nos caractéristiques physiologiques ne nous permettent pas de lire sur écran comme sur papier.

Déchiffrer les caractères et les assembler est en général plus lent et plus fatiguant sur écran. La lecture sur écran serait plus lente de 25% comparativement à la lecture papier. problèmes de fatigue visuelle, dus en grande partie à une sollicitation importante de l'œil.

Couleurs et contrastes

La vitesse de perception se caractérise par le temps qui s'écoule entre la présentation d'un objet au sujet et la perception visuelle de cet objet. La perception est d'autant plus rapide que les différences de luminances entre l'objet et l'ambiance sont plus marquées.

On peut globalement dire d'un point de vue ergonomique que le contraste positif (fond clair / caractères sombres) est plus adéquat que le contraste négatif (fond sombre / caractères clairs).

A éclairement égal, le diamètre pupillaire est plus petit en contraste positif qu'en contraste négatif. En conséquence, la focalisation sur l'écran est plus facile pour l'œil en contraste positif car la profondeur du champ augmente. Le contraste positif s'avère donc moins fatigant pour la vision que le contraste négatif.

Il est toutefois à noter qu'un contraste de luminances trop élevé peut provoquer un éblouissement gênant pour l'opérateur.

En contraste positif, le contraste est moindre entre les images réfléchies et le fond de l’écran. Par rapport aux écrans en contraste négatif, les écrans en contraste positif présentent les avantages suivants : – le diamètre pupillaire est plus petit afin d’éviter l’éblouissement; en conséquence, la profondeur de champ est accrue ce qui facilite l’accommodation ; – la vision est photopique, ce qui réduit le risque d’éblouissement ; – l’équilibre des luminances est préservé à l’intérieur de la tâche visuelle (en particulier entre l’écran et les documents) ; – les reflets sont moins visibles; – la fatigue visuelle est moindre; – l’éclairement du plan de travail peut être proche de celui employé pour un travail de bureau.

8 à 10 % de la population masculine ne perçoit pas correctement la couleur

Sur fond sombre, les couleurs verte, jaune, orange, blanche et cyan (bleu- vert) sont à privilégier pour l’affichage des caractères alphanumériques. Sur fond clair, le rouge et le bleu sont bien contrastés mais le bleu est à éviter pour les détails fins (caractères à petite police, curseurs, etc.) car la fovéa est peu sensible à cette couleur. De plus, la transparence du cristallin est particulièrement réduite avec cette couleur chez les personnes âgées. L’af- fichage simultané des couleurs bleue et rouge engendre un effet de relief (effet chromostéréoscopique) surtout lorsque ces couleurs sont saturées.

Caractères

  • taille des caractères affichés (même si cette taille doit être pondérée par la distance entre l'œil de l'utilisateur et l'écran, la taille du caractère peut d'ailleurs compenser un mauvais contraste)
  • espacement des lettres
  • espacement des mots et des lignes
  • typographie

Taille des caractères : Il faudra sans doute une valeur pour PC par exemple : à 60 cm de l’écran donc 0,8em (environ 12 pixels sur un écran en 100PPP Point Par Pouce) et une pour mobile un peu inférieur car on est plus près de l’écran (environ 10 à 11 pixels sur un écran en 100PPP) .

IL NE FAUT PAS ECRIRE TOUT EN MAJUSCULE MEME POUR UN SEUL MOT OU MEME DANS LE TITRE, c’est plus dur à lire que quand on écrit normalement. Pour mettre en évidence une phrase il faut la mettre en gras (et uniquement en gras). Le souligné et la couleur sont généralement associés aux liens sur le web. Souligner un texte va donc faire croire au lecteur qu’il y a un lien alors que non. Pour les citations, si elles sont courtes, on peut les mettre en italique. Si on cite un paragraphe il faut utiliser le bloc de citation en sélectionnant le paragraphe, puis en appliquant le style “bloc de citation” (les guillemets).

Cognitive

Par optimiser la lecture, on entend faciliter la distinction des groupes d'informations et de leur rôle, mais aussi faciliter la compréhension du contenu.

Toutes ces dimensions correspondent à ce que Jonassen a appelé la “technologie textuelle”, c'est à dire tous les moyens permettant de structurer les textes pour faciliter leur appréhension et leur compréhension.

Un format rédactionnel adapté à la lecture sur le web

La majorité des utilisateurs (80% selon une étude de Nielsen & Morkes, cf. référence dans les lectures complémentaires) ne lisent pas les contenus des sites Internet. Selon les experts, ils “scannent”, “survolent”, “explorent”… Quoiqu'il en soit, les caractéristiques du web font qu'on ne lit pas mot à mot.

La recherche d'information sur Internet peut être considérée comme la recherche d'un signal parmi du bruit : Il s'agit de décider rapidement si le contenu de la page web est susceptible de nous intéresser ou non. L'objectif est de fournir de l'information vite et bien. Il est donc essentiel que l'utilisateur comprenne instantanément si le contenu à l'écran correspond à l'information qu'il recherchait.

Texte court

suivre les recommandations suivantes :

Nous verrons par la suite que cette règle ne doit pas être appliquée de façon rigide. Elle est valable pour les textes de présentation, d'accroche, etc. mais son application à des textes de contenu est plus discutable.

- mettre en valeur les informations importantes, les mots-clés : - utiliser des enrichissements typographiques tels que le gras ou l'italique (prendre en compte que le style italique est moins lisible qu'un style classique) - Jouer sur les tailles de caractères - Bien distinguer les mots-clés des liens (ne pas utiliser le même format) +!Groupement / Distinction - Ecrire en minuscules plutôt qu'en majuscules (les mots écrits en lettres minuscules sont plus faciles à lire que ceux écrits en lettres capitales). On peut toutefois se permettre d'écrire en majuscules pour des informations brèves (intitulé d'un bouton, titre de page, titre de rubrique, etc.).

  • Fournir un sommaire pour les longs textes
  • Séparer le texte en parties significatives, leur attribuer des titres et sous-titres
  • Catégoriser les informations et faire ressortir cette catégorisation, soit par la localisation physique des éléments (on sépare ce qui ne se ressemble pas), soit par le format (on présente dans un format différent les éléments qui sont différents) :
  • Fournir une idée par paragraphe (on part du principe que les utilisateurs ne lisent en général pas les paragraphes en entier mais essaient d'en extraire l'idée principale)
  • Inverser les règles de style classiques (on préconise de commencer par la conclusion)
  • Diviser la quantité de mots par deux par rapport à un texte classique : “Every sentence, every phrase, every word has to fight for its life.” (Crawford Kilian, Writing for the Web)
  • Employer la voix active
  • Des lignes de texte ni trop longues ni trop courtes, environ 80 caractères

Texte long

Les études du Poynter Institute (voir les lectures complémentaires) ont montré que dès que le contenu recherché est identifié, le processus de lecture n'est plus de type “scan” et le parcours oculaire revient à la normale. 75% du texte est alors lu et non parcouru.

  • Fournir un format imprimable si le contenu présenté est long, il est alors indispensable de fournir à l'utilisateur des moyens de contourner la lecture à l'écran, par exemple en lui proposant une version imprimable ou un fichier pdf à télécharger.
  • Fournir un sommaire

Ce sommaire peut se présenter sous forme de liens hypertexte internes (ancres) ou non.

  • Fournir des repères de positionnement vertical : Un des inconvénients d'un long texte est que lors de la lecture d'une longue page verticale (haute de plusieurs écrans), on a tendance à perdre sa position verticale dans la page. On peut donc recommander de fournir des repères de positionnement vertical, qui seront des repères visuels forts dans le texte. Ces repères peuvent être des images, mais aussi les liens hypertextes à l'intérieur du texte, les enrichissements typographiques, les titres ou un découpage en paragraphes. On doit alors s'intéresser aux moyens de mise en valeur des informations importantes, évoqués précédemment.

Evitez de dépasser les 2000 mots pour un article, après c’est trop long ou vous avez matière à faire deux articles ou plus. 1200 mots forment un article “long” qui sera lu en plusieurs minutes, 200 à 400 mots forment un article court qui sera lu en moins d’une minute.

Divers

La surbrillance peut être employée pour orienter la perception vers une zone contenant un message devant être lu en priorité. La couleur rouge peut être réservée à tous les messages qui indiquent un état ou une situation dangereuse. Le clignotement devrait être réservé à des zones peu étendues et périphériques, ainsi qu’aux erreurs, anomalies ou situations nécessitant une intervention rapide.