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 13 décembre 2011 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 docuemnts 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. 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é

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

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

8. 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. (sous presse). Ergonomie des documents numériques. in Traité Informatique, H7 220, Techniques pour l’Ingénieur (TPI) : Paris (1ère édition 2000).

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

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

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

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

13. La mise en forme du document David (1985) M + K => S M = mise en forme du message K = connaissances des lecteurs sur le domaine S = signification que l ’auteur veut transmettre

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

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

16. 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 ?

17. 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) ?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

35. Le principe de contiguïté

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

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

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

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

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

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

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