L’ergonomie des documents

1. 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 11 décembre 2013 Présentation réalisée par Mireille Bétrancourt

2. Plan de la séance • Rappel projet : où vous devez être • Design de document « centré utilisateur » : activité de conception d’affiche d’information • Debriefing – Modèle de conception de documents « centré utilisateur » et recommandations • Eléments complémentaires sur les documents multimédia à consulter si le sujet vous intéresse

3. Rappel rapide sur le test utilisateur

4. Contexte global d’utilisation Analyse de l’activité Analyse du système 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 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

5. Design de documents techniques Activité de conception d’affiche • Références : • Dillon, A. (2004) Designing Usable Electronic Text. 2nd Edition, London: CRC Press (1st edition, 1994). • Caro, S. & Bétrancourt, M. (2013). Ergonomie des documents numériques. in Traité Informatique, H7 220, Techniques pour l’Ingénieur (TPI) : Paris (1ère édition 2000).

6. Attention ATTENTION Produit corrosif Produit corrosif Eviter le contact avec la peau et les yeux. Eviter le contact avec la peau et les yeux. Quel enjeu ? Un document = un contenu + sa mise en forme (disposition, lisibilité, interactivité) Le format de présentation participe à la construction d ’une représentation de ce que dit le texte

7. Du modèle transmissif de la communication… Message ? Message Personnages de @EinarFaanes, CC codage décodage Signal Source Emetteur Récepteur Destinataire Shannon, C. E. & Weaver, W. (1949).A Mathematical Model of Communication. Urbana, IL: University of Illinois Press Journée PECUSI – Lyon, 12 Juillet

8. …au modèle pragmatique de la communication Représentation de la situation, Modèle de l’autre Représentation de la situation, Modèle de l’autre Objectif Objectif Vous avez l’heure ? Oui 11h30 Searle, J. R. (1975). A Taxonomy of Illocutionary Acts. In: Gunderson, Keith (ed.) Language, Mind, and Knowledge. Minneapolis: University of Minnesota: 344-369. Sperber, D. & D. Wilson (1986/1995) Relevance: Communication and Cognition. 2nd edition. Oxford: Blackwell.

9. Vous avez l’heure ? Les actes de langage Searle, Austin Interagir avec un document, c’est comme interagir avec une interface. locutoire L demande si j ’ai l’heure illocutoire L veut savoir l’heure perlocutoire L souhaite que je lui donne l’heure

10. 16h25 ! Les actes de langage Searle, Austin Vous avez l’heure ? locutoire L demande si j ’ai l’heure illocutoire L veut savoir l’heure perlocutoire L souhaite que je lui donne l’heure

11. Oui. Les actes de langage Searle, Austin Vous avez l’heure ? locutoire L demande si j ’ai l’heure illocutoire perlocutoire

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

13. Les dispositifs non linguistiques de mise en forme du texte

14. 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 MAJUSCULES : MOINS LISIBLES QUE MINUSCULES Majuscules : moins lisibles que minuscules Quelle police choisir ?

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

16. Au niveau physiologique : effet de battement insupportable effet de battement insupportable Quelle couleur de fond / police ? 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. C ’est plus lisible que blanc sur fond noir. Pour tester : http://tecfa.unige.ch/perso/lombardf/CPTIC/couleurs/bleu-noir.htmll

17. Au niveau physiologique : Quelle couleur de fond / police ? Attention à l ’utilisation de couleurs ! Ressources sur le Web : Pour tester : http://tecfa.unige.ch/perso/lombardf/CPTIC/couleurs/bleu-noir.htmll Appli interactive Colortester

18. Au niveau cognitif : Quelle utilisation des couleurs ? Se limiter à un nombre réduit de couleurs (7 maximum), faciles à distinguer Utiliser la couleur pour coder de l ’information Consistance du choix de couleur sur tout le document Le choix des couleurs doit être consistant avec leur signification commune.

19. Ce produit est très irritant, évitez de l ’inhaler. Ce produit est très irritant, Évitez de l ’inhaler. 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

20. enrichissement typographique : taille > gras > italique augmenter l ’interlignage ajouter un cadre de couleur différente ajouter une icône simple ou une animation 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. Références : http://edutechwiki.unige.ch/en/Font_readability

21. Risque d ’explosion : tenir éloigné des flammes. Risque d ’explosion : tenir éloigné des flammes. 4 2 3 1 Risque d ’explosion : tenir éloigner des flammes. Risque d ’explosion : tenir éloigner des flammes. Comment mettre une information en avant ? Young & Wogalter, 1990

22. Deux règles d ’or Toute variation de mise en forme sera interprétée ! On ne pense pas le document sur écran comme sur papier Principes généraux Utiliser un codage redondant Préserver l’homogénéité Deux règles d ’or

23. Pour aller plus loinEléments complémentaires sur les documents informatisés et multimédia

24. Ceci est une fenêtre ponctuelle qui s ’active dynamiquement lorsque la souris entre dans une zone sensible Les fenêtres ponctuelles

25. Les atouts diminution de la charge présente sur l ’écran introduit plusieurs niveaux de lecture flexibilité par rapport au niveau d ’expertise Les fenêtres ponctuelles

26. Les attributs vidéo Effet de flash Effet de flash Inverse vidéo Inverse vidéo clignotement

27. poignée piston valve d ’entrée valve de sortie L ’effet multimédia 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.

28. 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 Denis, 1984; Levie & Lentz, 1982

29. Rôle esthétique, attractif et motivant identifier un objet, un scène Organiser des informations spatial ou temporelles Utiliser l’espace comme métaphore d’autres relations Fonction des graphiques

30. L’effet de contiguïté temporelle 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 si les deux sources d’information ne sont pas complémentaires Sweller & collègues

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

32. blabla rétention transfert rétention transfert Effet de contiguïté temporelle blabla rétention transfert

33. Le principe de contiguïté

34. Le principe de contiguïté Mayer & Anderson, 1992

35. Effet de modalité Le commentaire qui accompagne un graphique ou une animation doit-il être présenté sous une modalité écrite ou orale ? Mayer et Moreno, 1998

36. blabla Effet de modalité D ’après Mayer (2001) sélection organisation intégration codage pictural Modèle mental codage verbal R° verbale

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

38. blabla blabla 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. 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 seul Ecrit seul Oral et écrit Effet de redondance

39. Ex de site Web : http://www.lesurbanophiles.com/ Effet de cohérence Quel effet de l ’ajout d ’informations attractives (illustrations, exemples, sons, vidéos...) ? Hypothèse motivationnelle Hypothèse de la charge cognitive

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