irit.fr/~Philippe.Truillet 12 septembre 2004 v. 1.5

1. interaction homme-machine :un rapide survol“The best way to predict the future is to invent it.” Alan Kay (XEROX PARC) http://www.irit.fr/~Philippe.Truillet 12 septembre 2004 v. 1.5

2. une réflexion pour commencer « J’ai toujours rêvé d’un ordinateur qui soit aussi facile à utiliser qu’un téléphone. Mon rêve s’est réalisé : je ne sais plus comment utiliser mon téléphone. » Bjarne Stroustrup (concepteur du C++)

3. introduction • émergence du domaine • dans les années 1980 aux USA (démocratisation de l’informatique) • dans les années 1990 en France (Coutaz / Caelen)

4. introduction • étude des phénomènes ... • cognitifs • matériels • logiciels • sociaux mis en jeu dans l’accomplissement de tâches sur support informatique

5. conférences • CHI (ACM) • Interact (IFIP) • HCI • IHM (AFIHM) • HCI International • …

6. des associations et ML • http://www.acm.org • http://www.irit.fr/SIGCHI • http://www.afihm.org

7. bibliographie • The Design of Everyday Things, Norman, MIT Press, 4th printing, 2001 • The Psychology of HCI, Card, Moran & Newell, Lawrence Erlbaum, 1983 • Usability Engineering, Rosson, Carroll, Morgan Kaufmann Publishers, 2002

8. définitionsinteraction homme-machine • discipline consacrée à la conception, la mise en œuvre et à l’évaluation de systèmes informatiques interactifs destinés à des utilisateurs humains ainsi qu’à l’étude des principaux phénomènes qui les entourent.

9. définitionsmodèle conceptuel • modèle du fonctionnement du système • idéalement : c’est le modèle mental de l’utilisateur

10. système interactif noyaufonctionnel interface utilisateur Système interactif Interface  communication (Canal, Langage, Sens) Homme  tâche (facteurs humains) Ordinateur  processus (logiciels)

11. historique de l’IHMpoints de repère 1/7 • Memex (Bush, 1945) : “as we may think” • définition du système hypertexte

12. historique de l’IHMpoints de repère 2/7 • Sketchpad (Sutherland, 1963) • manipulation directe de formes géométriques avec le stylo optique (MIT)

13. historique de l’IHMpoints de repère 3/7 • NLS/Augment (Engelbart, 1968) • travail collaboratif, visio-conférence, partage de documents, intuition d’internet, … • mais aussi invention de la souris (1963) !

14. historique de l’IHMpoints de repère 4/7 • Star (Xerox PARC, 1981) • station de travail et environnement de programmation graphique • système fonctionnant en réseau • interface graphique basée sur la métaphore du bureau mais un échec commercial !

15. historique de l’IHMpoints de repère 5/7 • Macintosh (Apple, 1984) • barre de menu • boîtes de dialogue modales un succès patent

16. historique de l’IHMpoints de repère 6/7 • X-Window (MIT, 1985) • modèle client/serveur • séparation quoi/comment • utilisation transparente du réseau

17. historique de l’IHMpoints de repère 7/7 • World-Wide Web (Berners-Lee, CERN, 1990) • modèle hypertexte en réseau mais • des protocoles figés • des possibilités d’interaction (très) réduites

18. pourquoi s’intéresser à l’IHM ?1/2 (Buxton) • le matériel progresse vite (loi de Moore) • les fonctionnalités aussi ! (Buxton) • mais pas l’humain …  On arrive bientôt à la limite de perception et d’action i.e. de la frustration pour l’humain …

19. pourquoi s’intéresser à l’IHM ?2/2 un sentiment de frustration, non ?

20. U&U basique options • utilité • adéquation aux besoins • utilisabilité • adéquation aux capacités de l’utilisateur

21. U&U • exigences • l’interface doit générer le bon intuit • et refléter la logique d’utilisation de la machine • affordance • respecter d’éventuels standard : compatibilité • tenir compte de la culture de l’utilisateur • exemples • sémantique du rouge ? • modèles des distributeurs de boissons ? • modèle des distributeurs de tickets de parking ?

22. U&U • modèle • représentation mentale • dépend de la connaissance acquise • évolue dans le temps • modèles • du concepteur à propos de l’outil attendu • du concepteur à propos de l’utilisateur • de l’utilisateur à propos de l’outil attendu • de l’outil à propos de l’utilisateur  L’IHM sera l’unique passerelle entre l’utilisateur et l’outil

23. U&U • dérives 60% des fonctions inutilisées - Apprentissage trop long : logiciels administratifs : technopathie Utiles mais inutilisables : domotique Utilisables mais inutiles : nouvelles technologies ?

24. modèle et style d’interaction • modèle : aspect morphologique, “Look” (qu’est-ce que l’on montre ?) • style : aspects morpho-lexical et morpho-syntaxique, “Feel” (comment on manipule) Compromis en plus naturel et plus simple à implémenter

25. objectifs d’une interfaceutilisateur • améliorer la communication • communication naturelle • cohérence inter et intra applications • métaphores • communication efficace • choix des styles d’interaction • structures de tâches et sous-tâches • étude de la fréquence des commandes • méta-communication

26. caractéristiques d’une bonne IHM • adaptée aux besoins • facile à apprendre • intuitive (prédictive) • rassurante (apprentissage par essais/erreurs) • agréable (esthétique, dynamique, ludique) • performante (tâches rapides à exécuter, réactions immédiates)

27. compétences requises • approche multi-disciplinaire • informatique • domaine de l’application • connaissance de l’utilisateur • nécessité d’être centré sur l’utilisateur • penser à lui • connaître ses caractéristiques cognitives • se mettre à sa place • communiquer avec lui

28. domaines abordés • tous et même plus • applications de bureau • systèmes temps réel critiques (ATC, spatial, …) • systèmes E/S • périphériques standards (clavier, souris, écrans) • périphériques exotiques (touchpad, PDA, tangible, …)

29. enjeux socio-économiques • un sujet “à la mode” • presse, médias • industrie • recherche • change l’aspect du développement informatique (80% du code est consacré à l’interface) • change le marché • informatique • non-informatique

30. pourquoi de nouvelles interfaces ? • information plus complexe à manipuler • nouveaux types d’application • tâches moins précises • utilisateurs plus variables (niveaux de connaissances, catégorie socio-professionnelle) • faire un outil qui exploite les caractéristiques de l’utilisateur • révolution technologique qui permet de mettre en œuvre ce type d’interfaces

31. exigences du marché • de plus en plus de produits efficaces • se tenir à jour avec la concurrence • garder la compétitivité de l’entreprise • impossibilité de revenir en arrière • il faut concevoir pour les NTIC ou savoir le faire

32. dangers d’une mauvaise IHM • rejet (“technopathie”) par les utilisateurs • coût d’apprentissage (formation) • perte de productivité des utilisateurs • utilisation incomplète : manque à gagner • coûts de maintenance • perte de crédibilité

33. rentabilité d’une IHM • concevoir une application interactive : coût important • choisir un bon compromis • deux parties • présentation –- dialogue • statique -- dynamique • facteurs humains très coûteux

34. exemples de mauvaise conception • libellés non clairs ou ambigus • fonctionnalités inutiles • écrans trop denses, mal structurés • écrans trop nombreux • contexte inconnu ou oublié • …

35. méthodes de conception constats • 80 % du code des systèmes interactifs est consacré à l’interface utilisateur • les risques d’une mauvaise interface : • rejet des utilisateurs (technopathie) • coût d’apprentissage (formation) • utilisation incomplète (manque à gagner) • coût de maintenance • perte de productivité et de crédibilité !

36. méthodes de conception méthode “en cascade” (waterfall) • basée sur la programmation structurée • décomposition de structures en sous-structures

37. méthodes de conception méthode “en cascade” (waterfall) analyse des besoins conception du système et du logiciel codage et tests unitaires intégration et test du système

38. méthodes de conception méthode “en cascade” (waterfall) • le cycle de vie en cascade aide au développement de systèmes complexes MAIS • peut priver les concepteurs d’informations critiques disponibles très tard dans le cycle de développement

39. méthodes de conception méthode “en spirale” [Boehm 88]

40. architecture des IHM • un constat : • la conception d’IHM est difficile • donc nécessairement itérative • ce qui implique de pouvoir modifier le logiciel • le savoir-faire reste artisanal • acceptable seulement pour des maquettes ou des systèmes prospectifs

41. architecture des IHM • les outils de développement des IHM sont utiles mais imparfaits • toolkits : de niveau trop bas • squelettes d’application : utiles pour la ré-utilisation mais limités • les générateurs d’IHM donnent un faux sentiment de sécurité Conséquence : il y a un besoin d’un cadre de pensée i.e. de modèles d’architecture

42. modèles de référencefondement Noyau fonctionnel IHM

43. modèles de référenceSeeheim : modèle dit séminal Contrôle de dialogue Interface avec le NF Présentation Noyau fonctionnel

44. modèles de référenceArch : Seeheim révisé Contrôle de dialogue Interface avec le NF Logique Présentation Noyau fonctionnel Physique Interaction

45. modèle(s) de l’humain • quelle(s) capacité(s) de perception ? • quelle(s) capacité(s) de traitement ? • quelle(s) capacité(s) d’action ?

46. notion de perceptiondéfinition Ensemble des mécanismes psychologiques et physiologiques dont la fonction est de prendre de l’information et de l’interpréter • pour élaborer un diagnostic • pour prendre une décision • pour construire un plan d’actions • pour emmagasiner des connaissances

47. notion de perceptionle rôle du contexte • tâche de Stroop [1935] : énoncer les couleurs de chaque mot vert rouge bleu orange noir violet vert rouge bleu orange noir violet

48. notion de perceptionle rôle du contexte • traitement automatique et non-intentionnel des mots • effet d’interférence • le temps requis pour nommer la couleur de l’encre des mots colorés est plus long aux essais incongruents (rouge) qu’aux essais neutres (salade) • ou effet de facilitation • le temps de nomination de la couleur est plus court aux essais congruents (bleu) qu’aux essais neutres

49. C D A 5 2 4 notion de perceptionle rôle du contexte • importance du contexte dans lequel se situe l’objet perçu

50. notion de perceptioncompréhension • nous percevons mieux ce qui a une signification pour nous … • SCNDLXEAAU • SNDEACUAXL • SCANDALEUX