L’ergonomie des documents TECFA Technologies pour la Formation et l’Apprentissage Faculté de Psychologie et de Sciences de l’Education L’ergonomie des documents Cours Ergonomie des Interactions Personne-Machine 15 décembre 2010 Présentation réalisée par Mireille Bétrancourt

Plan de la séance Présentation de groupes Modèle d’interaction de Norman Mise au point sur test utilisateurs et question Design de document « centré utilisateur » : activité de conception d’affiche d’information

Modèle de Norman (1986!)

Manipulation directe et interaction « naturelle »

Affordances Voir aussi photos bacs de recyclage Cartons vs. bouteilles plastiques References Gibson, J.J., 1986. Chapter 4 “The Ecological Approach To Visual Perception” 1st ed., Lawrence Erlbaum. Vicente, K.J. and Rasmussen, J. (1992): Ecological Interface Design: Theoreticalfoundations. IEEE Transactions on Systems, Man, and Cybernetics, Vol. 22(4), p.589␣606. Vicente, K.J. (1999). Cognitive Work Analysis. LEA Publiher Affordance dans le courant du « ecological interface design » Voir références dans les commentaires

Mise au point sur le test utilisateur

Contexte global d’utilisation Analyse du système Analyse de l’activité 1 entretien Contenu, organisation, fonctionnalités, outils d’aide Pb d’utilisabilité « supposés » Un ou plusieurs exemples de tâches authentiques Problèmes rencontrés Vous êtes ici Relations entre vos analyses (en bleu) et le résultat de ces analyses (en jaune). Scénario d’utilisation Test utilisateurs 5 utilisateurs / -trices d’un même public cible Pb d’utilisabilité observés : Diagnostic, propositions de remédiation

Le scénario Est l’ensemble des tâches proposées aux utilisateurs d’une même population cible Déterminé selon l’analyse de l’activité et l’analyse préalable du site Recommandations : Voir dans le site du cours http://tecfa.unige.ch/tecfa/teaching/LMRI41/projet_phase2.html#scenario Ou suivre Description du projet > Fin de la section II analyse de l’activité

Le test utilisateur Permet de tester le site, pas les utilisateurs ! Méthode de « verbalisation concurrente » : inciter l’utilisateur à penser tout haut pendant qu’il exécute les tâches. Recommandations : Voir dans le site du cours http://tecfa.unige.ch/tecfa/teaching/LMRI41/projet_phase4.html Ou suivre Description du projet > IV Test utilisateurs, lien dans partie A

Présentation en tableau (exemple) Recommandations : Voir dans le site du cours http://tecfa.unige.ch/tecfa/teaching/LMRI41/projet_phase4.html#Diagnostic

Design de document technique Activité de conception d’affiche

Quel enjeu ? Le format de présentation participe à la construction d ’une représentation de ce que dit le texte Attention Produit corrosif Eviter le contact avec la peau et les yeux. ATTENTION Produit corrosif Eviter le contact avec la peau et les yeux.

Les actes de langage Searle, Austin Vous avez l’heure ? locutoire L demande si j ’ai l’heure illocutoire L veut savoir l’heure Quand on communique quelque chose, on ne ommunique pas une information, mais des intentions, qui vise nt un effet sur l ’interlocuteur. 3 forces : locutoire : loc demande a interloc s ’il a l ’heure illocutoire : locuteur veut savoir l ’heure perlocutoire : interlocuteur donne l ’heure Tout acte de langage s ’insère dans une chaîne d ’actes (langage et réels) perlocutoire L souhaite que je lui donne l’heure

Les actes de langage Searle, Austin Vous avez l’heure ? locutoire L demande si j ’ai l’heure illocutoire L veut savoir l’heure Ainsi, quand on vous demande si vous avez l ’heure, vous faites toute la chaîne sans vous en apercevoir et vous donnez l ’heure (sans m^me dire oui d ’ailleurs). perlocutoire L souhaite que je lui donne l’heure 16h25 !

Les actes de langage Searle, Austin Vous avez l’heure ? locutoire L demande si j ’ai l’heure illocutoire Au passage, c ’est la difficulté pour concevoir des systèmes d ’interprétation de la parole. Il est très compliqué de déduire des phrases les portées illocutoire et surtout perlocutoire, sauf à les prévoir d ’avance. perlocutoire Oui.

La mise en forme du document David (1985) M + K => S M = mise en forme du message Ainsi, on peut résumer les choses avec cette formule. Au-delà de l ’aspect mathématisant, il faut retenir que: - 1) toujours l ’importance des connaissances sur le domaine - 1) la mise en forme du message fait partie de la signification, au sens où elle renseigne l ’util sur les intentions de l ’auteur ; par exemple tout-àl ’heure, la mise en rouge indique un danger. K = connaissances des lecteurs sur le domaine S = signification que l ’auteur veut transmettre

Méthodologie d’investigation Etude expérimentale de performances Exploration de mouvements oculaires Etude d’utilisabilité sur panel d’utilisateurs

Les dispositifs non linguistiques de mise en forme du texte Ils sa ’agit de tous les dispositif dont on peut se servir pour mettre en avant ou faire passer une certaine intention sur une information. On va voir 4 attributs : la densité d ’informations, la typographie, la couleur, les attributs vidéo

Quelle police choisir ? Sur écran choisir des polices sans sérif (Arial, Helvetica, Geneva par exemple) Elles sont plus lisibles que les polices avec sérif. Gras, italique : ralentissent la lecture Sur gras italique qui ralentissent la lecture -> pas forcéement négatif, cela veut dire aussi que cela va attirer l ’attention de l ’util, qu ’il va se dire c ’est important. Donc pas mettre tout un paragraphe. MAJUSCULES : MOINS LISIBLES QUE MINUSCULES Majuscules : moins lisibles que minuscules

Quelle police choisir (2) ? L ’œil lit le haut des lettres. L ’œil lit le haut des lettres. L ’OEIL LIT LE HAUT DES LETTRES

Quelle couleur de fond / police ? Au niveau physiologique : Attention à l ’utilisation de couleurs ! Éviter les combinaisons rouge/bleu Lisibilité maximale : caractères noirs sur fond blanc, ou en tout cas foncés sur fond clair. effet de battement insupportable Attention car - tout le monde ne perçoit pas les couleurs de la même façon - différence entre plate-formes et entre résolutin d ’écran - un texte coloré perturbe la stratégie de balayage du texte C ’est plus lisible que blanc sur fond noir. Pour tester : http://tecfa.unige.ch/perso/lombardf/CPTIC/couleurs/bleu-noir.htmll

Quelle couleur de fond / police ? Au niveau physiologique : Attention à l ’utilisation de couleurs ! Ressources sur le Web : Pour tester : http://tecfa.unige.ch/perso/lombardf/CPTIC/couleurs/bleu-noir.htmll Attention car - tout le monde ne perçoit pas les couleurs de la même façon - différence entre plate-formes et entre résolutin d ’écran - un texte coloré perturbe la stratégie de balayage du texte Appli interactive Colortester

Quelle utilisation des couleurs ? Au niveau cognitif : Se limiter à un nombre réduit de couleurs (7 maximum), faciles à distinguer Utiliser la couleur pour coder de l ’information Rappeler au passage que lorsqu ’on utilise une couleur, on provoque une attente, une R° chez le lecteur. (acte de communication) Consistance : cf critères ergonomiques Signification = significativité des codes. Par exemple, utiliser le rouge pour avertir d ’un danger. Consistance du choix de couleur sur tout le document Le choix des couleurs doit être consistant avec leur signification commune.

Mise en page et densité d’information Quantité d ’espace : 20 à 40% sur papier, 40 à 60% sur écran Longueur des lignes : 50 à 70 caractères Ce produit est très irritant, évitez de l ’inhaler. Ce produit est très irritant, Évitez de l ’inhaler. Tant que possible, respecter les unités d ’information. Valable par exemple pour les sites Web.

Comment mettre une information en avant ? L'écrit est particulièrement touché par les bouleversements induits par les technologies de l'information dans tous les domaines de l'activité humaine, qu'il s'agisse du travail, de la vie sociale, de la recherche ou de la création artistique. L'écriture est l'une des plus anciennes technologies culturelles. Ses interrelations avec les structures sociales. Ses incidences sur le développement de la pensée abstraite, ses effets sur le fonctionnement de la mémoire ont été étudiés depuis longtemps. Images fixes et animées Certains vont jusqu'à prédire la disparition à courte échéance de l'écrit par obsolescence complète de l'écriture et de la lecture ; d'autres, d'une manière moins radicale, anticipent son cantonnement à la seule lecture, la prise en charge de la production de la trace matérielle étant entièrement dévolue à des dispositifs techniques. Appel à propositions L'appel à propositions est plus particulièrement centré sur deux thématiques complémentaires. enrichissement typographique : taille > gras > italique augmenter l ’interlignage ajouter un cadre de couleur différente ajouter une icône simple ou une animation Références : http://edutechwiki.unige.ch/en/Font_readability

Comment mettre une information en avant ? Risque d ’explosion : tenir éloigné des flammes. Risque d ’explosion : tenir éloigné des flammes. 1 2 3 4 Young & Wogalter, 1990 Les résultats montrent que plus on ajoute de mise en forme, mieux c’est retenu. La présence de l'icône est bénéfique à la compréhension et à la mémorisation, surtout dans la quatrième condition (icône et typographie). Cette dernière améliore les résultats, tant en ce qui concerne la mémorisation que la compréhension du message. La mise en relief typographique produit des résultats moindres que la présence d'icône. Enfin, la présence des deux dimensions de saillance amène de meilleures performances que lors de la présence d'une seule. Risque d ’explosion : tenir éloigner des flammes. Risque d ’explosion : tenir éloigner des flammes.

Principes généraux Utiliser un codage redondant Préserver l’homogénéité Toute variation de mise en forme sera interprétée ! On ne pense pas le document sur écran comme sur papier Deux règles d ’or Deux règles d ’or - Utiliser un codage redondant : couleur + typographie, ... - Homogénéité : une même mise en forme pour une même intention

Les documents informatisés et multimédia Ils sa ’agit de tous les dispositif dont on peut se servir pour mettre en avant ou faire passer une certaine intention sur une information. On va voir 4 attributs : la densité d ’informations, la typographie, la couleur, les attributs vidéo

Les fenêtres ponctuelles Ceci est une fenêtre ponctuelle qui s ’active dynamiquement lorsque la souris entre dans une zone sensible Utiliser des fenêtres ponctuelles sur écran pour des informations qui seront mieux mémorisées que le reste du texte (si elles sont consultées) : définitions, explications, exemples [19], [42], Ne pas utiliser les fenêtres ponctuelles pour des informations indispensables à la tâche à effectuer conformément au texte [39]. Utiliser les fenêtres ponctuelles pour une lecture à deux niveaux. Utiliser des fenêtres ponctuelles quand il est nécessaire de trouver rapidement des informations. Une fois que les utilisateurs ont appris à utiliser ce système de fenêtrage, ils sont capables de retrouver une information plus rapidement [42]. La présentation en fenêtre ponctuelle doit suivre les recommandations valables pour toute interface. Notamment la zone à cliquer pour accéder à l'information doit être suffisamment explicite

Les fenêtres ponctuelles Les atouts diminution de la charge présente sur l ’écran introduit plusieurs niveaux de lecture flexibilité par rapport au niveau d ’expertise Utiliser des fenêtres ponctuelles sur écran pour des informations qui seront mieux mémorisées que le reste du texte (si elles sont consultées) : définitions, explications, exemples [19], [42], Ne pas utiliser les fenêtres ponctuelles pour des informations indispensables à la tâche à effectuer conformément au texte [39]. Utiliser les fenêtres ponctuelles pour une lecture à deux niveaux. Utiliser des fenêtres ponctuelles quand il est nécessaire de trouver rapidement des informations. Une fois que les utilisateurs ont appris à utiliser ce système de fenêtrage, ils sont capables de retrouver une information plus rapidement [42]. La présentation en fenêtre ponctuelle doit suivre les recommandations valables pour toute interface. Notamment la zone à cliquer pour accéder à l'information doit être suffisamment explicite

Les attributs vidéo Effet de flash Effet de flash Inverse vidéo clignotement Ne pas mettre en avant par les attributs vidéo plus de 10% des informations présentées [39]. Effet de flash : Un mot ou une phrase apparaissent d’une façon plus vive pour une période donnée, par exemple en s’affichant sur un arrière plan ou en alternant l’affichage d’un texte en maigre et en gras (ces animations doivent pouvoir être annulées par le lecteur : bouton Stop dans les feuilleteurs web). Ce peut être le soulignement seulement qui a l’effet de flash ou qui clignote plutôt que le mot lui même [20]. L’inverse vidéo est utilisé généralement pour indiquer un texte sélectionné. Il peut l’être aussi pour des titres. Si le texte est en noir sur fond blanc, l’inverse vidéo consistera à afficher en blanc sur fond noir [15], [20]. Le clignotement est à utiliser seulement pour guider l’attention vers des messages ou des signaux d’alerte. La fréquence recommandée est de 2 à 7 Hz selon les études avec un flash d’une durée minimale de 50 ms. Le clignotement doit pouvoir être annulé, et doit s’éteindre après que l’utilisateur eut réagi. Il peut être utilisé pour les tâches de détection de cibles dans les écrans à haute densité informative (recherche d’un mot dans un texte par exemple). Le clignotement est un bon moyen pour attirer l’attention à la périphérie du champ visuel. Plutôt que de faire clignoter le message affiché, il semble préférable de présenter le message sous une forme fixe et de signaler son importance en juxtaposant un symbole clignotant [15], [16], [27]. La surbrillance est à utiliser soit pour attirer l’attention dans un affichage dense, soit pour fournir une rétroaction [27].

L ’effet multimédia Fonctionnement d’une pompe à vélo. poignée piston valve d ’entrée valve de sortie Fonctionnement d’une pompe à vélo. Lorsque l’on tire la poignée, le piston monte, la valve d’entrée s’ouvre, la valve de sortie se ferme et l’air entre dans la partie basse du cylindre. Il est assez intuitif de penser que les grapèhiques vont faciliter la compréhension de textes abstraits ou complexe. Parenthèse : on considère les illustrations explicatives, cad qui représente les objets, les actions à entreprendre ou les relations entre éléments (ex : explic du fonctionnement d ’un moteur, shéma légendé en anatomie, etc.). On ne considère pas ici les diagrammes abstraits (histogrammes, abbaques), qui demande un traitement très particulier.

L ’effet multimédia L ’effet positif de l’ajout d ’illustrations graphiques à un texte : apparaît dans plus de 80% des études améliore la mémorisation d ’environ 36% améliore la compréhension et le transfert Plusieurs études on été menées dans les années 60 à 80 ont montré un effet positif des illustrations graphiques sur le mémorisation du texte, mais aussi la compréhension telle que mesurée par la capacité de résoudre des inférences ou des problèmes de transfert. Dès les années 70-80, la recherche typique est la comparaison mémorisation et compréhension texte seul et texte plus illustrations. Cas particulier des animations. Comme vous pouvez le voir dans le papier que je vous ai fait lire, les illustrations animées ont le même effet positif que les illustrations statiques. Cependant, peu d ’étude montrent qu ’elles sont plus efficaces que les illustration statiques. je vous en parlerai peut-être plus tout-à-l ’heure si on a le temps. Justification théorique : on voit plus tard dans l’exposé. Denis, 1984; Levie & Lentz, 1982

Fonction des graphiques Rôle esthétique, attractif et motivant identifier un objet, un scène Organiser des informations spatial ou temporelles Mars retrograd motion: http://alpha.lasalle.edu/~smithsc/Astronomy/retrograd.html Subduction: http://volcanoes.free.fr/indexl.htm Utiliser l’espace comme métaphore d’autres relations

Effet de contiguité spatiale Format séparé

Effet de contiguité spatiale Format intégré

Effet de contiguité spatiale Format escamot

Effet de contiguité spatiale L’intégration spatiale des informations verbales et graphiques facilite la mémorisation et la compréhension Deux cas où l’intégration est défavorable : si les deux sources d’information sont redondantes Résultat : intégration spatiale facilite la compréhension Justif théorique de Sweller et ses collaborateurs : - effet de split attention - intégration sémantique Théorie de la charge cognitive: la capacité cognitive de la MT est limitée. Si on augmente la charge lié au traitement du doc à cause de son format inadapté, on diminue les ressources allouées à l ’apprentissage. si les deux sources d’information ne sont pas complémentaires Sweller & collègues

Effet de contiguïté temporelle Animation et commentaires audio (ou écrits) doivent-ils être présentés simultanément Ou séparément ?

Effet de contiguïté temporelle blabla rétention transfert blabla rétention transfert Pour tester ces mêmes hypothèses dans la dimension temporelle, Mayer & Anderson (1992) comparent 5 conditions : animation et explication concurrentes, animation et explication successives, animation seule, explication seule ou sans explication (contrôle). Dans un test de rétention, seul le groupe contrôle a de moins bonnes performances. Dans un test de résolution d’inférences, seul le groupe concurrent a de meilleurs scores. Une expérience de Baggett (1984) avait utilisé le même paradigme que Mayer & Anderson (1992), mais pour une tâche d’identification (autrement dit d’association entre une image et son nom), ce que les derniers auteurs désignent par la création de liens représentationnels. Les résultats montrent que l’association est meilleure lorsque le commentaire est présenté en même temps mais également juste après (7 s. maximum) la séquence visuelle. rétention transfert

Le principe de contiguïté D ’où principe de contiguïté. Ces résultats sont cohérents avec les hypothèses : tous les groupes (sauf contrôle) ont bien construit des relations représentationnelles, ce qui explique l’absence de différence en rétention. Mais seul le groupe “concurrent” aurait construit des relations référentielles, ce qui lui permet d’obtenir de meilleurs scores en résolution d’inférences.

Le principe de contiguïté Si les deux médias ne sont pas contigus, alors les connections référentielles ne sont pas, ou avec une autre perspective, il n ’y a pas véritablement formation d ’un MM. Mayer & Anderson, 1992

Effet de modalité Le commentaire qui accompagne un graphique ou une animation doit-il être présenté sous une modalité écrite ou orale ? Ne pas confondre : - médias : verbal vs pictural - modalité : auditive ou visuelle pour le verbal Exemple : Moreno et Mayer, 1998 Dans le même sens, Mayer et Moreno (1998) ont réalisé deux expériences. Dans l’une, une animation décrivait la formation des éclairs ; dans l’autre une animation décrivait le fonctionnement des freins d’une automobile. Dans chaque expérience, il y avait deux conditions : - dans l’une, l’animation était accompagnée d’explications orales - dans l’autre, l’animation était accompagnée des explications écrites sur l’écran. Dans les deux expériences, les sujets qui recevaient les explications oralement ont obtenu de meilleurs résultats que les autres dans trois tests : un test de mémoire, un test d’appariement (entre éléments visuels et éléments verbaux) et un test de transfert (à la résolution de problèmes). Donc il vaut mieux varier les modalités, pour des docuemnts courts et des novices, mais…: pour docs longs et textes difficiles, la modalité écrite est supérieure si l’utilisateur a le contrôle C’est le cas pour docs où texte et graphiques sont nécessaires à la compréhension Mayer et Moreno, 1998

Effet de modalité D ’après Mayer (2001) sélection organisation intégration codage pictural Modèle mental Explication théorique : chaque canal a une capacité limitée (cf. modèle de Mayer 2001). Remarque : évidemment l’effet de contiguité s’applique dans le cas de l ’écrit et de l’oral. codage verbal blabla R° verbale

Effet de redondance Faut-il présenter les commentaires à la fois à l’oral et à l’écrit ? Ou uniquement à l’oral ou uniquement à l’écrit ?

Effet de redondance blabla Oral seul blabla Oral et écrit Ecrit seul L’ampoule doit être connectée à la pile selon deux directions: l’un des fils va au pôle positif, l’autre au pôle négatif. Oral et écrit L’ampoule doit être connectée à la pile selon deux directions: l’un des fils va au pôle positif, l’autre au pôle négatif. Ecrit seul Mousavi, Low et Sweller (1995) ont présenté à des sujets des exemples de problèmes de géométrie avec des présentations de figures fixes. Dans deux expériences, 3 conditions différentes étaient comparées : -Condition “ visuel-auditif ” : les sujets examinaient la figure tout en entendant les explications dispensées oralement par le magnétophone. -Condition “ tout visuel ” : les sujets examinaient la figure et pouvaient seulement lire les explications écrites ; -Condition “ oral et écrit ” : les sujets examinaient une figure et pouvaient lire des explications associées tandis qu’en même temps, ils entendaient ces explications fournies oralement par un magnétophone. Dans les deux expériences, l’apprentissage était amélioré en condition avec présentation auditive (condition 1), la condition oral et écrit étant la pire en termes de perf et de charge cognitive perçue. Interprétation : les sujets doivent réconcilier les deux infos auditive et verbale, et comme elles sont identiques, ils utilisent des ressources cognitives pour rien.

Effet de cohérence Quel effet de l ’ajout d ’informations attractives (illustrations, exemples, sons, vidéos...) ? Hypothèse motivationnelle Ex de site Web : http://www.lesurbanophiles.com/ Exemple de recherche Matériel sur la formation des éclairs Si on ajoute des illustrations ou des commentaires de type « Les joueurs de golf sont particulièrement exposé », on diminue les perf de compréhension. De même si on ajoute des sons (genre bruits de tonnerre). Justif théorique : théorie de la charge cognitive: toute info non essentielle pour la compréhension augmente le traitement et dérive l’attention de l’apprenant vers des informations non essentielles pour la compréhension. S ’oppose à la théorie motivationnelle qui dit que la motivation de l’apprenant augmente et donc les perf. aussi. Hypothèse de la charge cognitive

Le design de document multimedia Un principe de base : diminuer la charge cognitive inutile liée au traitement des informations : - Perception, attention - Mise en relation entre différentes sources - Informations et relations implicites Je vais vous présenter les 6 principes de conception issus de la recherche (Mayer and coll): - principe multimédia - p multi-modalité - p de contiguité spatiale - p de contiguité temporelle - p de redondance - p de cohérence