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 15 décembre 2010 Présentation réalisée par Mireille Bétrancourt

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

3. Modèle de Norman (1986!)

4. Manipulation directe et interaction « naturelle »

5. Affordances Voir aussi photos bacs de recyclage Cartons vs. bouteilles plastiques Affordance dans le courant du « ecological interface design » Voir références dans les commentaires

6. Mise au point sur le test utilisateur

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

8. 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é

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

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

11. Design de document technique Activité de conception d’affiche

12. 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 ? Le format de présentation participe à la construction d ’une représentation de ce que dit le texte

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

28. Les documents informatisés et multimédia

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

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

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

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

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

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

35. Effet de contiguité spatiale Format séparé

36. Effet de contiguité spatiale Format intégré

37. Effet de contiguité spatiale Format escamot

38. 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 si les deux sources d’information ne sont pas complémentaires Sweller & collègues

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

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

41. Le principe de contiguïté

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

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

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

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

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

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

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