interaction hommemachine un rapide survol The best way

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 Université Paul Sabatier – Toulouse III

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++) Université Paul Sabatier – Toulouse III

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) Université Paul Sabatier – Toulouse III

introduction étude des phénomènes. . . cognitifs matériels logiciels sociaux mis en jeu dans l’accomplissement de tâches sur support informatique Université Paul Sabatier – Toulouse III

conférences CHI (ACM) Interact (IFIP) HCI IHM (AFIHM) HCI International … Université Paul Sabatier – Toulouse III

des associations et ML http: //www. acm. org http: //www. irit. fr/SIGCHI http: //www. afihm. org Université Paul Sabatier – Toulouse III

bibliographie The Design of Everyday Things, Norman, MIT Press, 4 th printing, 2001 The Psychology of HCI, Card, Moran & Newell, Lawrence Erlbaum, 1983 Usability Engineering, Rosson, Carroll, Morgan Kaufmann Publishers, 2002 Université Paul Sabatier – Toulouse III

définitions interaction homme-machine discipline consacrée à la conception, la mise en œuvre et à l’évaluation de systèmes informatiques interactifs destinés à des utilisateurs humainsi qu’à l’étude des principaux phénomènes qui les entourent. Université Paul Sabatier – Toulouse III

définitions modèle conceptuel modèle du fonctionnement du système idéalement : c’est le modèle mental de l’utilisateur Université Paul Sabatier – Toulouse III

système interactif interface utilisateur noyau fonctionnel Système interactif Interface communication (Canal, Langage, Sens) Homme tâche (facteurs humains) Ordinateur processus (logiciels) Université Paul Sabatier – Toulouse III

historique de l’IHM points de repère 1/7 Memex (Bush, 1945) : “as we may think” définition du système hypertexte Université Paul Sabatier – Toulouse III

historique de l’IHM points de repère 2/7 Sketchpad (Sutherland, 1963) manipulation directe de formes géométriques avec le stylo optique (MIT) Université Paul Sabatier – Toulouse III

historique de l’IHM points 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) ! Université Paul Sabatier – Toulouse III

historique de l’IHM points 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 ! Université Paul Sabatier – Toulouse III

historique de l’IHM points de repère Macintosh (Apple, 1984) barre de menu boîtes de dialogue modales un succès patent Université Paul Sabatier – Toulouse III 5/7

historique de l’IHM points de repère X-Window (MIT, 1985) modèle client/serveur séparation quoi/comment utilisation transparente du réseau Université Paul Sabatier – Toulouse III 6/7

historique de l’IHM points 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 Université Paul Sabatier – Toulouse III

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 … Université Paul Sabatier – Toulouse III

pourquoi s’intéresser à l’IHM ? 2/2 un sentiment de frustration, non ? Université Paul Sabatier – Toulouse III

U&U utilité basique = adéquation aux besoins utilisabilité = adéquation aux capacités de l’utilisateur Université Paul Sabatier – Toulouse III options

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 distributeurs de boissons ? modèle des distributeurs de tickets de parking ? Université Paul Sabatier – Toulouse III

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 à propos de l’outil attendu de l’outil à propos de l’utilisateur L’IHM sera l’unique passerelle entre l’utilisateur et l’outil Université Paul Sabatier – Toulouse III

U&U dérives 60% des fonctions inutilisées - Apprentissage trop long : logiciels administratifs : technopathie Utiles mais inutilisables : domotique Utilisables mais inutiles : nouvelles technologies ? Université Paul Sabatier – Toulouse III

modèle et style d’interaction modèle : aspect morphologique, “Look” (qu’est-ce que l’on montre ? ) style : aspects morpho-lexical et morphosyntaxique, “Feel” (comment on manipule) Compromis en plus naturel et plus simple à implémenter Université Paul Sabatier – Toulouse III

objectifs d’une interface utilisateur améliorer la 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 Université Paul Sabatier – Toulouse III

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) Université Paul Sabatier – Toulouse III

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 Université Paul Sabatier – Toulouse III

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, …) Université Paul Sabatier – Toulouse III

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 Université Paul Sabatier – Toulouse III

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 Université Paul Sabatier – Toulouse III

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 Université Paul Sabatier – Toulouse III

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é Université Paul Sabatier – Toulouse III

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 Université Paul Sabatier – Toulouse III

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é … Université Paul Sabatier – Toulouse III

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é ! Université Paul Sabatier – Toulouse III

méthodes de conception méthode “en cascade” (waterfall) basée sur la programmation structurée décomposition de structures en sousstructures Université Paul Sabatier – Toulouse III

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 Université Paul Sabatier – Toulouse III

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 Université Paul Sabatier – Toulouse III

méthodes de conception méthode “en spirale” [Boehm 88] Université Paul Sabatier – Toulouse III

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 Université Paul Sabatier – Toulouse III

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 Université Paul Sabatier – Toulouse III

modèles de référence fondement Noyau fonctionnel Université Paul Sabatier – Toulouse III IHM

modèles de référence Seeheim : modèle dit séminal Contrôle de dialogue Interface avec le NF Noyau fonctionnel Université Paul Sabatier – Toulouse III Présentation

modèles de référence Arch : Seeheim révisé Contrôle de dialogue Interface avec le NF Noyau fonctionnel Université Paul Sabatier – Toulouse III Logique Physique Présentation Interaction

modèle(s) de l’humain quelle(s) capacité(s) de perception ? quelle(s) capacité(s) de traitement ? quelle(s) capacité(s) d’action ? Université Paul Sabatier – Toulouse III

notion de perception dé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 Université Paul Sabatier – Toulouse III

notion de perception le rôle du contexte tâche de Stroop [1935] : énoncer les couleurs de chaque mot vert rouge bleu orange noir violet Université Paul Sabatier – Toulouse III vert rouge bleu orange noir violet

notion de perception le 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 Université Paul Sabatier – Toulouse III

notion de perception le rôle du contexte importance du contexte dans lequel se situe l’objet perçu Université Paul Sabatier – Toulouse III A C D 2 4 5

notion de perception compréhension nous percevons mieux ce qui a une signification pour nous … SCNDLXEAAU SNDEACUAXL SCANDALEUX Université Paul Sabatier – Toulouse III

notion de perception redondance importance de la redondance Aixsi, xoux poxvoxs rxmpxacxr cxaqxe txoixièxe lxttxe pxe ux x, ex voxs vxus xn txrex asxez xiex. Le chse deient u pe pls dffcie orqu nos sppimns arémnt es etre. Université Paul Sabatier – Toulouse III

notion de perception sensations erronées figures de Luckiesh [1965] Université Paul Sabatier – Toulouse III

notion de perception illusion correctrice effets d’optique et correction d’optique Université Paul Sabatier – Toulouse III

notion de perception contraste de couleurs contraste simultané interaction de la couleur instabilité optique et vibration de la couleur Université Paul Sabatier – Toulouse III

conception modèle humain : processeur … 1/7 (Card, Moran, Newell, 1983) l’humain est considéré comme un système de traitement de l’information composé de : sensoriel moteur et cognitif Université Paul Sabatier – Toulouse III

conception modèle humain : processeur … 2/7 chaque sous-système possède : une mémoire caractérisée par : une capacité une persistance et un processeur caractérisé par : un cycle Université Paul Sabatier – Toulouse III

conception modèle humain : processeur … 3/7 le processeur humain : système sensoriel Système sensoriel visuel Système sensoriel auditif £ 17 lettres ³ 100 ms et £ 200 ms £ 1500 ms Université Paul Sabatier – Toulouse III

conception modèle humain : processeur … 4/7 le processeur humain : système moteur un mouvement est une suite de micromouvements Loi de Fitts T=I log(2 D/L) I = 0, 1 L D icône D = 10 cm L = 1 cm T = 0, 4 s menu D = 30 cm L = 0, 5 cm T = 0, 7 s temps de pointage typique : entre 0, 5 et 1 s Université Paul Sabatier – Toulouse III

conception modèle humain : processeur … 5/7 le processeur humain : système cognitif cycle reconnaissance/action mémoire à court terme mémoire à long terme à capacité limitée (mnèmes) à capacité illimitée le stockage et la recherche dans la MLT sont réalisés de manière associative Université Paul Sabatier – Toulouse III

conception modèle humain : processeur … 6/7 quelques résultats appliqués : temps de réaffichage effet d’animation si réaffichage < 1/10 s suivi de la souris vitesse maximale de la main : 1 à 1, 5 m/s le chiffre magique 7 +/- 2 nombre de commandes maximales dans un menu pour qu’elles soient mémorisables Université Paul Sabatier – Toulouse III

conception modèle humain : processeur … 7/7 des modèles (Card, Moran, Newell) GOMS (Goal Operator Method Selection) cadre pour les méthodes de conception d’interfaces évaluation prédictive des performances Keystroke décomposition en tâches élémentaires pour prédire le temps d’exécution opérateurs : K (frappe), P (désignation), H (retour de la main), D (dessin), M (activité mentale), R (temps de réponse du système) Université Paul Sabatier – Toulouse III

modèle du processeur … où l’on reparle de la loi de Fitts l’importance de l’acquisition de cible est incontestable : menus, boîtes de dialogue, boutons, … et même le clavier comprendre le processus d’acquisition de cible, c’est garantir que la conception d’interface à manipulation directe ne sera pas faite sur la base de l’intuition. Université Paul Sabatier – Toulouse III

modèle du processeur … acquisition de cibles Fitts [1954] sélection alternative de cibles T= a +b log 2( 2 A ) W Université Paul Sabatier – Toulouse III 1/5

modèle du processeur … acquisition de cibles 2/5 formulation de Mac. Kenzie : T= a +b log 2( A +1) W A indice de difficulté : ID=log 2( +1) W W ID A Université Paul Sabatier – Toulouse III

modèle du processeur … acquisition de cibles 3/5 exemple d’usage : atteindre une barre de défilement A W Université Paul Sabatier – Toulouse III

modèle du processeur … acquisition de cibles tiré de Accot [2001] Université Paul Sabatier – Toulouse III 4/5

modèle du processeur … acquisition de cibles 5/5 acquisition de cibles par curseurs étendus : lentilles magiques (magic lenses) Alias|wavefront (http: //www. aliaswavefront. com) palettes transparentes (toolglasses) … Université Paul Sabatier – Toulouse III

conception théorie de l’action 1/7 modélise les processus psychologiques qui conduisent à un comportement (Norman) réalisation d’une tâche : établissement du but formation d’une intention spécification d’une suite d’actions exécution des actions perception de l’état du système interprétation de l’état du système évaluation de l’état par rapport au but fixé Université Paul Sabatier – Toulouse III

conception théorie de l’action but distances distance sémantique d’entrée intention spéc. actions distance d’exécution distance articulatoire d’entrée 2/7 évaluation interprétation exécution perception système Université Paul Sabatier – Toulouse III distance sémantique de sortie distance d’évaluation distance articulatoire de sortie

conception théorie de l’action 3/7 modèles perceptuel et conceptuel modèle perceptuel : modèle mental construit par l’utilisateur modèle conceptuel : description et fonctionnement du système réponses feedback opérations commandes la distance entre les deux modèles détermine l’utilisabilité du système Université Paul Sabatier – Toulouse III objets

conception théorie de l’action 4/7 un exemple : de quoi est fait ce dessin ? comment est fait ce dessin ? un ensemble de points que l’on peut effacer ? un rectangle et un cercle que l’on peut déplacer ? Université Paul Sabatier – Toulouse III

conception théorie de l’action 5/7 notion d’affordance (Gibson) l’affordance fait référence aux propriétés réelles et perçues d'une chose, et particulièrement à celles qui déterminent les actions pouvant être entreprises sur la chose Université Paul Sabatier – Toulouse III

conception théorie de l’action 6/7 un mauvais exemple et des solutions “affordantes” http: //www. baddesigns. com Université Paul Sabatier – Toulouse III

conception théorie de l’action 7/7 construction du modèle perceptuel affordance du système liens de causalité possibles contraintes (physiques) du système stéréotypes culturels expérience instructions d’usage … Université Paul Sabatier – Toulouse III

nouveaux paradigmes de l’IHM applications tangibles pick and drop itsy Université Paul Sabatier – Toulouse III

nouveaux paradigmes de l’IHM multimodalité en situation de mobilité Université Paul Sabatier – Toulouse III

nouveaux paradigmes de l’IHM réalité mixte symbiose entre les mondes réel et virtuel Monde Numérique Université Paul Sabatier – Toulouse III Réalité Mixte Monde Réel

nouveaux paradigmes de l’IHM réalité mixte Monde Numérique Virtualité Augmentée IHM clavier IHM gestuelle IHM graphique Université Paul Sabatier – Toulouse III Monde Réel IHM vestimentaire IHM tangible

nouveaux paradigmes de l’IHM réalité mixte Monde Numérique Monde Réel Réalité Augmentée 2 D Université Paul Sabatier – Toulouse III 3 D Son Force . . . Action

nouveaux paradigmes de l’IHM réalité mixte symbiose entre les mondes réel et virtuel Monde Numérique Virtualité augmentée L’homme devant la machine Université Paul Sabatier – Toulouse III Monde Réel Réalité Mixte Réalité augmentée L’homme autour de la machine

nouveaux paradigmes de l’IHM aller plus loin que WIMP … 1/6 de nouveaux interacteurs apparaissent : pie menus (Don Hopkins) marking menus Université Paul Sabatier – Toulouse III

nouveaux paradigmes de l’IHM aller plus loin que WIMP … fish-eye view (Univ. Grenoble) hyperbolic view (Star Tree Studio) http: //www. inxight. com Université Paul Sabatier – Toulouse III 2/6

nouveaux paradigmes de l’IHM aller plus loin que WIMP … 3/6 Tree Map (GUIR Berkeley) http: //www. cs. umd. edu/hcil/treemap Université Paul Sabatier – Toulouse III

nouveaux paradigmes de l’IHM aller plus loin que WIMP … 4/6 mais aussi d’autres façons d’interagir ! interaction gestuelle, bi-manuelle, tactile, … digistrips (CENA Toulouse) Université Paul Sabatier – Toulouse III

nouveaux paradigmes de l’IHM aller plus loin que WIMP … interaction multimodale réalité augmentée, mixte, … Réalité Augmentée (AR Toolkit) http: //www. hitl. washington. edu /research/shared_space Université Paul Sabatier – Toulouse III 5/6

nouveaux paradigmes de l’IHM aller plus loin que WIMP … pour des interfaces “humaines” coopératives écologiques voire “invisibles” Université Paul Sabatier – Toulouse III 6/6

User Centered Design pourquoi ? c’est quoi ? ça marche comment ? Université Paul Sabatier – Toulouse III

méthode conception centrée utilisateur observation sur le terrain scénarios maquettage évaluation centrée utilisateur formative : régulière prédictive : sans utilisateur expérimentale : avec utilisateur maquettes prototypes magicien d’Oz Université Paul Sabatier – Toulouse III

méthode magicien d’Oz (WOz) simuler les fonctions manquantes d’un logiciel Opérateurs hyperentraînés Ergonomes – Psycho-ergonomes -… Université Paul Sabatier – Toulouse III

méthode Sciences Humaines Ergonomie Systèmes répartis Réseaux Processus centré Utilisateur Electronique Génie logiciel Université Paul Sabatier – Toulouse III Bases de données Recherche d’information

ergonomie définie en 1988 par la Société d'Ergonomie de Langue Française définition : “la mise en œuvre de connaissances scientifiques relatives à l’homme, et nécessaires pour concevoir des outils, des machines et des dispositifs qui puissent être utilisés avec le maximum de confort, de sécurité et d’efficacité pour le plus grand nombre” Université Paul Sabatier – Toulouse III

ergonomie puise ses fondements dans la diversité et la variabilité des êtres humains et des situations d'usage dans ces diversité et variabilité, des déviations peuvent apparaître entre tâches prescrites et effectives. L’ergonomie vise à réduire ces écarts par la proposition de systèmes ajustés à l'homme Université Paul Sabatier – Toulouse III

ergonomie mais l’ergonomie ne s’arrête pas à cette incorporation de connaissances elle fournit des méthodes et outils d’analyse de l’activité humaine au travail observations et restitutions établissement de groupes et de dynamiques de travail évaluation de maquettes questionnaires et entretiens Université Paul Sabatier – Toulouse III

ergonomie Université Paul Sabatier – Toulouse III

ergonomie dans sa quête de compatibilité homme-machine, l'ergonomie travaille à trois niveaux : au niveau physique, pour une adéquation entre l’homme d’un point de vue morphologique et son poste de travail au niveau social, pour un environnement de travail compatible des attentes des utilisateurs au niveau cognitif, pour un traitement et une représentation des informations conformes aux attentes et capacités des utilisateurs = Ergonomie des logiciels Université Paul Sabatier – Toulouse III

ergonomie des logiciels niveau cognitif recherche de compatibilité à trois niveaux : perceptivo-moteur : compatibilité entre les dispositifs d’interaction et les caractéristiques physiques de l’utilisateur et la nature de sa tâche exemple : tablette graphique plus appropriée à une tâche de dessin que le triplet écran / clavier / souris Université Paul Sabatier – Toulouse III

ergonomie des logiciels linguistique : codage des informations. Éviter les codages arbitraires qui compliquent la mise en correspondance entre les mondes physique et psychologique activité : assurer une structure logicielle adaptée et adaptable aux modes de raisonnement de l'utilisateur dans la réalisation de sa tâche Université Paul Sabatier – Toulouse III

ergonomie des logiciels pour chaque niveau : des recommandations ergonomiques recensées dans des guides ergonomiques mais, volume et généralité dissuadant. . . critères ergonomiques organisant ces recommandations Université Paul Sabatier – Toulouse III

critères ergonomiques Scapin/Bastien, INRIA Rocquencourt consensus établi autour de ces critères 8 critères : guidage charge de travail contrôle explicite adaptabilité gestion des erreurs homogénéité/cohérence signifiance des codes et dénominations compatibilité Université Paul Sabatier – Toulouse III

critères ergonomiques exemple : critère de guidage incitation groupement / distinction entre items par la localisation par le format feedback immédiat lisibilité Université Paul Sabatier – Toulouse III Accident du Mont St Odile

question d’éthique … création de nouvelles formes d’interaction éthiquement correct ? démarche conséquentialiste (ex : mediaspace) conception, mise en oeuvre en entrée : instrumente l’environnement caméras ? exploitation (détournement) ? en sortie : information située contexte multi-utilisateurs ? respect de la vie privée ? évaluation Magicien d’Oz Université Paul Sabatier – Toulouse III