Cours ISI - Texte
From Isiwiki
| ← | ^ Cours ISI - Principes ergonomiques | → WIMP |
Contents |
[edit] Texte
Le texte reste une source primordiale pour la distribution de l'information. Cette partie définit les règles et les choix pour rendre le plus lisible et compréhensible les informations textuelles.
L'image ci-contre représente une prière en latin gravée par un imprimeur pour montrer un exemple de "belles lettres". Ceci est notre premier exemple de choix qui nuit à la lisibilité du message.
??? exergue de michel serre sur texte vs textile ...
[edit] chaud ou froid
Herbert Ernest McLuhan est un des pionnier qui s’intéresse au rapport entre le média et le message. A partir de 1962 dans la galaxie Gutenberg (McLuhan, 1962), il travaille autour de l’idée que : « Le média est le message » est qu’ils sont indissociables car leur couplage structure la société. Dans Pour comprendre les médias, (McLuhan & Lapham, 1964) Il introduit aussi deux catégories pour les médias :
- Le média chaud : s’adresse particulièrement à un sens dans un mode haute définition et par conséquent ne demande pas d’interprétation. Le cinéma et le texte sont des exemples de média chaud.
- Le média froid : est en basse résolution est demande une participation plus active de l’utilisateur pour donner une interprétation. La télévision (en 1964) et le téléphone sont considérés comme des exemples de média froid.
La chaleur du média correspond au degré d’immersion ressenti par l’usager. Dans les systèmes de réalité virtuelle, l’immersion devrait être totale. Nous vivons dans un milieu informationnel multimédia où le support des messages peut être sous une forme :
- Textuelle : un ensemble de caractères (des lettres, des chiffres et autres symboles graphiques comme les formules mathématiques).
- Graphique : une représentation statique utilisant des images ou des dessins.
- Audio : un ensemble de vibrations qui soit audible (paroles et musique)
- Vidéo : une représentation animée (une suite d’images)
- Proprioceptive : des représentations perçues au niveau du toucher (vibration, braille).
Chacun de ces médias a des caractéristiques qui lui sont propres. La forme textuelle est directement accessible, la vitesse de lecture dépend de l’utilisateur. Son support ne nécessite pas d’artefact électronique. L’interprétation du message peut ne pas dépendre du lecteur. La forme graphique est aussi accessible immédiatement comme un tout. Une image peut comporter un grand nombre de détails qu’il serait fastidieux de décrire avec un texte. Cependant l’interprétation de l’image dépend fortement de son contexte. La forme audio et vidéo doivent être accéder en temps réels. La vitesse de lecture ne dépend plus de l’utilisateur. L’interprétation des messages est plus précise pour l’audio que pour la vidéo.
[edit] Trois distances à réduire
Dans un chapitre consacré aux hypertextess (Nanard & Nanard, 2001), les auteurs proposent de distinguer es trois distances de Norman (Norman 1986) pour modéliser une interface :
La distance opératoire ; elle mesure l’effort que l’utilisateur doit effectuer pour percevoir le message (sans aucune notion d’interprétation). Trois traits caractérisent la distance opératoire :
- La lisibilité du message qui concerne le choix des fontes, des tailles, de la couleur, du contraste des caractères.
- La suggestivité qui concerne le style globale de l’interface. Par exemple, on reconnaît le style d’une application pour enfant ou pour adulte dans le choix des fontes et des fonds d’écran.
- La perturbation qui est déterminée par toutes les interférences qui nuise à la lecture du message. Un simple champ clignotant peut ruiner la lisibilité d’un texte.
La distance articulatoire ; elle mesure l’effort que l’utilisateur doit effectuer pour reconstruire le message. Cette reconstruction intervient entre la perception et l’interprétation. Il s’agit de reconnaître la nature des éléments de l’interface. La structuration de l’interface peut se décomposer de la façon suivante :
- La structure de la page établit des catégories sémantiques permettant de la reconstruction des message. Par exemple, le choix des rapports de tailles des caractères permet d’établir une distinction entre les titres, les paragraphes.
- La structure de navigation établit un système de relation entre les différentes parties du texte. Dans un système hypertextuel, ce système est de nature active. Dans un livre, l’index, la table des matières, les notes de bas de page sont des éléments de navigation que le lecteur doit traiter lui-même en tournant les pages !
- La structure d’interaction établit un système de relation entre différents éléments actifs de l’interface et les actions dans la tâche à accomplir. La reconnaissance d’un menu, d’un bouton, d’une liste de choix oriente l’utilisateur dans son activité. On remarquera que les mécanismes d’interaction réincorpore lors de leur activation les trois niveaux : opératoire, articulatoire, sémantique (par exemple, une boîte de dialogue qui s’ouvre).
distance sémantique ; elle mesure l’effort que doit faire l’utilisateur pour comprendre le message. Elle se divise en deux parties :
- La structure intrinsèque du message qui établit le sens idéal du message qui doit être compris par l’utilisateur. Ceci peut être pris dans le sens de la modélisation des bases de données.
- La structure rhétorique du message qui concerne la forme de l’énonciation du message. Par exemple, une affirmation est plus efficace qu’une double négation.
- l'ordre de présentation de l'information peut aussi contribuer à réduire cette distance. Certains préférerons donner un exemple avant de commencer la théorie, par exemple.
L’objectif est donc de réduire ces trois distances lors de la conception de l’interface. Cet objectif est délicat à réaliser car il faut effectuer des choix à tous les niveaux, garantir la cohérence de ces choix dans toutes les parties de l’interface et se préoccuper de l’efficacité de ces choix pour la tâche de l’utilisateur.
[edit] L'organisation de l'information textuelle
De nombreuses expériences ont été effectuées sur la perception, la compréhension et la mémorisation d’information textuelle, dans (CARO & BETRANCOURT, 1998) on trouvera un panorama de celles-ci. Nous ne faisons plus de distinction entre le papier et l’écran. En effet ces deux supports se distinguent essentiellement par leur résolution et par le contraste. Mais l’évolution technique des écrans d’ordinateur tend à les rapprocher du support papier. Cependant nous indiquerons explicitement les recommandations particulières pour l’écran lorsqu’elles diffèrent de celles du papier.
L'organistion de l'information textuelle
Réduire la distance opératoire, articulatoire et sémantique repose sur la relation entre le contenu informationnel et sa mise en forme.
En prenant par exemple, ce texte sur le piston de wikipédia :
"En mécanique le piston est une pièce rigide coulissant dans une chemise de forme complémentaire assurant la variation du volume de la chambre, et la conversion d'une pression en force dans le cas d'un moteur à explosion et d'un vérin, ou l'inverse dans le cas d'une pompe volumétrique à pistons et d'une seringue."
Le lecteur peut-il répondre facilement aux questions suivantes:
- dans le couple piston/chemise qui est mobile ?
- quelle est la fonction du piston ?
- donner des exemples de conversion.
L'utilisation d'information para-linguistique peut contribuer à faciliter la compréhension d'un texte, par exemple l'utilisation du gras, de l'italique. D'une manière générale, la mise en page du texte influence la représentation du message énoncé par le texte. Dans l'exemple "attention peinture", il est évident que le message de droite est plus rapidement accessible au lecture que celui de gauche, bien que formellement les textes soient identiques.
la mise en page de l'information a pour objectif par rapport à la lecture:
- de hiérarchiser l’importance de l’information
- d'établir la nature de l’information
- d'être facilement identifiés par le lecteur
L’Organisation linguistique est culturelle dans le sens ou elle est une invention. Les organisateurs sont une convention comprise par tous. Par exemple, le latin (voir stèle de Novilara) n'utilisait pas le blanc pour séparer les mots, on utilisait le point pour le faire s'il y avait un risque d'ambiguité dans la lecture. Le point, pour signifier la fin d'un phrase, sera introduit dans la chanson de Roland au Xième siècle. La table des matières, l'index, le glossaire, la note, le renvoi, la citation, le paragraphe sont des inventions du XVIIIième siècle née avec une certaine codification des conventions des éditeurs et imprimeurs. Finalement l'orthographe est aussi une convention fixée par l’académie ou par l’usage (cela dépend des langues).
Les organisateurs linguistiques (textuelles) sont par exemple:
- Il est important de …
- Soulignons que …
- Par exemple, …
- En se référant à …
Les organisateurs para-linguistiques sont les polices, les tailles, les types, les icônes, les marques de liens d'hypertexte, ... L'utilisation judicieuse et consistante des organisateurs para-linguistiques doit hiérarchiser l’importance de l’information, établir la nature de l’information, être facilement identifiable dans sa fonction par le lecteur.
[edit] Recommandations ergonomiques pour le texte
Les recommandations proposées sont valide pour le support papier et pour l'écran. Ces recommandations sont le fruit d'expérimenations que l'on retrouve en détail dans (CARO & BETRANCOURT, 1998)
La préoccupation est donc de rendre le plus lisible possible le message et d’éliminer les sources de perturbation. Nous laissons de côté le style de l’interface ou du document qui est plus une question de choix du graphiste mais qui ne doit en aucun cas être une source de perturbation.
Pour la mise en évidence, on préférera:
- la justification centrée
- le décalage
- la justification à gauche
- l'utilisation du blanc qui est le moyen le plus efficace, car il accentue le contraste.
Pour communiquer une information complémentaire, on choisira:
- un interligne différent plus petit
- un caractère plus petit
Pour augmenter la lisibilité, on appliquera les règles suivantes:
- ne pas justifier à droite (l'oeuil perd beaucoup de temps pour retrouver le début ligne)
- compter 10 à 12 mots par ligne, soit 50 à 60 caractères par ligne. Les lignes longues ralentissent la lecture. Il est préférable d'avoir plusieurs colonnes comme dans les journaux (voir l'adaption plus loin de cette règle pour les écrans!).
- Couper les lignes « naturellement »
Pour signaler un type de texte, on peut utiliser des icônes:
- utiliser en marge comme signe d'attention
- utiliser avec les marques para-linguistiques
- seulement si les icônes sont reconnaissables
Exemple 1
Ouvrir l'image non réduite pour examiner les différents organisateurs para-linguistiques.
Examiner les utilisations de l'italique, du gras, des différentes tailles.
Examiner l'utilisation du blanc et des justifications.
Remarque: écrire verticalement est moins lisible qu'horizontalement, mais pour la publicité, cela crée un effet du surprise!
Exemple 2
Ouvrir l'image non réduite pour examiner les différents organisateurs para-linguistiques.
Examiner les utilisations de l'italique, du gras, des différentes tailles.
Examiner l'utilisation du blanc et des justifications.
Examiner l'utilisation des icones dans la marge.
Remarquer la distinction claire entre le faux et le juste.
[edit] utiliser les couleurs
L'utilisation excessive des couleurs est néfaste pour la lecture. On distingue davantage les différences de contraste que de couleur·Ainsi il est préférable d'utiliser au maximum le noir sur un fond blanc.
"En effet les mouvements oculaires dans les présentations polychromatiques ne suivent plus la stratégie de balayage classique pour la lecture de caractères (en diagonale, de l’extrémité en haut à gauche d’une page à l’extrémité basse et droite de celle-ci) mais sont perturbés par des mouvements aléatoires dans la page selon les couleurs (comme dans la stratégie de lecture d’une peinture par exemple)." Tiré de (CARO & BETRANCOURT, 1998)
On va donc réserver la couleur pour:
- Mettre en évidence des parties du texte
- Faire émerger une ligne ou certaines cellules d’un tableau
- Faire resortir un titre
Il faut garder une cohérence dans l'utilisation des couleurs sur la totalité de l'interface ou du document.
L'exemple de la revue de l'ACM (image de gauche) démontre bien ces choix. les titres sont tous bleus et verts, les noms des auteurs en rouge, le résumé en double interligne, etc.
Il est intéressant de regarder la ligne éditoriale des revues, car bien qu'elles puissent faire preuve d'une grande créativité. Elles fixent toutes un ensemble de règles qui permet aux lecteurs de s'orienter.
La couleur : Au niveau physiologique
On trouve partout les conseils éviter la juxtaposition de certaines couleurs, par exemple, du rouge et du bleu ainsi que d'éviter l'utilisation des couleurs saturées.
Ces recommandations ne sont pas des considérations esthétiques mais ont des fondements physiologiques.
La rétine est composée de deux types capteurs les batonnets qui tapissent l'ensemble de la rétine et qui sont sensiblent à de faibles intensités lumineuses et les cônes qui sont réunis au centre de la rétine et qui sont sensibles à différentes couleurs. Il existe trois type de cône les bleus, les verts et les rouges (la vignette si contre détermine leur sensibilité en fonction de la longueur d'onde de la lumière. En dessous, on trouve le spectre visible par l'homme).
La pénibilité de l'association de certaines couleurs s'expliquent par le fait que simultanément des zones entières de cônes commutent d'un mode tout ou rien.
| Couleur du texte | Couleur de fond à éviter | Couleur de fond à utiliser |
|---|---|---|
| Blanc | Jaune | Majenta, Rouge, Vert, Bleu |
| Jaune | Blanc, Cyan | Bleu, (Rouge), (Majenta) |
| Cyan | Vert, Jaune | Bleu, (Blanc), (Rouge) |
| Vert | Cyan, Bleu | Jaune, Blanc, (Rouge), (Magenta) |
| Magenta | Rouge | Bleu, Blanc, (Cyan), (Vert) |
| Rouge | Magenta,Bleu | Blanc, Jaune, Cyan, Vert |
| Bleu | Rouge | Blanc, (Jaune), (Vert) |
Maximiser le contraste
La lisibilité du texte dépend grandement du contraste existant entre le texte et son fond. Le W3C consortium à édicté une norme (Techniques For Accessibility Evaluation And Repair Tools) pour calculer un contraste suffisant. Il existe plusieurs outils pour controler les pages Web ou des outils comme celui présenté dans la vignette à gauche qui permettent de choisir les couleurs du texte et du fond. Cet outil propose aussi une addaption à la vision des daltoniens.
De ce point de vue, il faut rappeler qu'environ 10% de la population souffre d'un déficit dans la vision des couleurs. (voir ce site pour tester le contraste avec les différents déficits du daltonisme
Nous insistons encore pour rappeler que le meilleur constrate et obtenu avec le noir et le blanc!
La couleur : Au niveau cognitif
La couleur est facilement utilisée pour établir des catégories cognitives (surtout avec les enfants). Dans l'exemple à gauche (tiré d'une méthode de lecture "Lire avec Léo et Léa "), la couleur est utilisée pour distinguer les voyelles et les consonnes.
Les expériences montrent que l'on doit se limiter à des couleurs facilement discernables, 7 au maximum si possible. il faut grouper les éléments par rapport au sens. Il faut conserver une cohérence couleur=signification tout au long du document.
Selon la nature du document, il est important de préserver les associations déjà reconnues par le lecteur par exemple: rouge/danger, jaune/attention, vert/normal.
Exemple (tiré d'une revue: La France agricole mars 2001)
On remarque:
- la couleur est utilisée pour faciliter la lecture du tableau
- la couleur est alternée à chaque changement de groupe
- la couleur rouge est utilisée pour les prix en Euro (préparation au passage à l'euro en 2002)
[edit] choisir les caractères: typographie
La lisibilité est principalement une question de choix des caractères.
la mise en avant
Pour mettre en évidence un ou plusieurs mots, nous avons par ordre décroissant d’accentuation les choix suivants:
choix des polices
- Utiliser au plus 2 polices différentes (ou 3 selon la tâche) comme marquage typographique dans un texte. À partir de 3 polices, les résultats sont moins bons qu’avec une seule.
- Pour une activité de lecture (sur papier) , privilégier les polices avec empattements (Times, Palatino).
- Les titres peuvent être sans empattement (Helvetica par exemple).
- Eviter de composer des textes en majuscules, ils ralentissent le lecteur de 19 % par rapport au même texte en minuscule.
- L’italique se lit plus lentement que le roman (droit)
- Le gras et l’italique peuvent être utilisés pour mettre en avant des mots ou phrases
- Le gras est un des dispositifs les plus saillants de mise en avant.
- Le soulignement ralentit la lecture, il est sans effet sur la mémorisation dans un texte de 200 mots. Par contre, il facilite la mémorisation dans un texte de 6000 mots.
- Les minuscules sont plus lisibles que les majuscules
- Par contre, les majuscules sont plus lisibles à distance !
La partie discriminante des caractères se situe dans la partie supérieure (voir exemple ci-dessous)
La conception des glyphes des caractères eux-mêmes est le fruit d'un travail hautement spécialisé. Nous conseillons au lecteur intéressé de regarder les ouvrages de Adrian Frutiger, un créateur suisse de caractères. On lui doit entre autres les polices Avenir, Garamond, Frutiger, Univers.
[edit] Du papier à l'écran
Un bon nombre de recommandations prévues pour le papier sont aussi valable pour les écrans. Certaines doivent être adaptées car les écrans et le papier diffèrent sur un certain nombre de points:
- le blanc/noir est plus contrasté sur le papier que sur les écrans
- la luminosité de l'écran est plus faible que celle du papier. Les écrans doivent produire leur luminosité, le papier réfléchit la lumière. Dans le noir les écrans sont plus lisibles! Mais sous le soleil, ils sont encore illisible.
- la précision des caractères à l'écran est moindre que celle de l'imprimerie.
Les progrès technologiques tendent à diminuer le fossé entre ces deux médias. Examinons les adaptations entre le papier et l'écran.
Ecran: mise en page
Il existe une dualité entre la densité du texte et la clareté de la page. Le papier supporte une plus grande densité soit de 25 à 40% d'usage du blanc alors que les écran ont une densité moindre de 40 à 60% d'usage du blanc à clareté identique. l'augmentation de la densité accroît les temps de recherche l'information.
la justification à droite (en plus de la gauche) n'augmente pas la lisibilité. Par contre elle peut faciliter les tâches complexe (par exemple, la recherche d’erreurs). On justifiera à gauche mais pas forcément à droite surtout avec un écran à faible résolution.
Sur les grands écrans, le texte peut être agencé en 2 ou 3 colonnes de 30 à 35 caractères avec au moins 8 caractères d’espace entre les colonnes, si le texte n’est pas justifié à droite sinon 3 à 4 blancs suffisent. Il n’est donc pas nécessaire de séparer les colonnes par une ligne.
Le découpage en paragraphe augmente la vitesse de lecture (+ 18%). Rappelons qu'un paragraphe est sensé représenter une unité de sens. Sauter une ligne pour indiquer un paragraphe plutôt que d’indenter la première ligne de chaque paragraphe.
Organiser l’écran symétriquement si possible, entre le haut et le bas, la droite et la gauche
Ecran: la couleur
Au niveau Physiologique :
- Éviter le rouge et le vert à la périphérie des écrans. Le jaune et le bleu sont meilleurs en périphérie.
- Concevoir l’interface dans les conditions de luminosité ambiante dans laquelle elle sera effectivement utilisée
Au niveau Cognitif:
Plus l’écran est chargé en information et moins il faut utiliser de couleur.Si l’écran est peu chargé, on peut utiliser un nombre de couleurs plus important.
Ecran: typographie
On préférera afficher des caractères sombres sur un fond clair plutôt que l’inverse. L’affichage en contraste positif offre deux avantages majeurs. le premier est l’adaptation aux documents (WYSIWYG). Le deuxième est une meilleure adaptation à un environnement lumineux et les reflets moins visibles.
On préférera les polices sans sérif (Helvetica, Geneva par exemple).
La taille des caractères est de 4 mm minimum sur un écran (soit environ 12 points, mais cela dépend de la résolution de l'écran nombre de points/inch)
L’anti-aliasing (anti-crénelage) contribue à une lecture plus rapide sur écran. Toutefois, cet avantage est surtout sensible avec les écrans à faible résolution.
Finalement, nous donnons quelques pistes à explorer sur les e-book et l'encre électronique.
[edit] Le livre comme écran ?
Les précurseurs, en 1998, un logiciel de lecture de pdf et de e-book édité par la société Glassbook utilisait les polices ClearType (anti-crénelage) pour faciliter la lecture.
De plus ce logiciel transformait votre PC en livre (de 3 kg!). Vous teniez votre PC comme un livre. Les boutons du "touch pad" servaient à feuilleter le livre. Glassbook sera racheté en 2000 par Adobe.
Du coté des majors regardez le Sony Reader.
Plus proche de chez nous, voir: Ganaxa http://www.ganaxa.com/ Ganaxa, designer et architecte de l'édition e-paper du journal Les Echos, intègre la toute nouvelle technologie Vizplex, de E Ink.
Regardez aussi sur YouTube les démonstrations de e-book.
[edit] Bibliographie
Caro, S. et Betrancourt, M. Ergonomie des documents techniques informatisés : expériences et recommandations sur l'utilisation des organisateurs para-linguistiques. In : A. Tricot et J.-F. Rouet (Dir.), Les hypermédias : approches cognitives et ergonomiques. Paris : Editions Hermès, 1998. p. 123-138. (Hypertextes et hypermédias).
Frutiger A.L'Homme et ses Signes, 319 pages, 2000 Atelier Perrousseaux ISBN : 2911220056
Frutiger A. A bâtons rompus, 96 pages, 2001, Atelier Perrousseaux ISBN : 2911220080
McLuhan, H. E. (1962). Gutenberg Galaxy.
McLuhan, M., & Lapham, L. H. (1964). Understanding Media: The Extensions of Man .
Nanard J., Nanard M. Principes hypermédias et systèmes d'information In Environnements Evolués et Evaluation des IHM, Interface Homme-Machine pour les Systèmes d'Information (Vol. 2), C. Kolski (Dir.), Hermès, Avril 2001, pp. 147-173.
Norman D.A., Cognitive Engineering, In " User Centered System Design on Human Factors Interaction : New Perspectives ", Lawrence Erlbaum Associates Publishers, Hillsdade, 1986.
W3C 2000, Techniques For Accessibility Evaluation And Repair Tools, [[1]]
