Http://www.irit.fr/~Philippe.Truillet 12 septembre 2004 v. 1.5 interaction homme-machine : un rapide survol “The best way to predict the future is to invent.

Présentation au sujet: "Http://www.irit.fr/~Philippe.Truillet 12 septembre 2004 v. 1.5 interaction homme-machine : un rapide survol “The best way to predict the future is to invent."— Transcription de la présentation:

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

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é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 humains ainsi qu’à l’étude des principaux phénomènes qui les entourent.

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

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

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

12 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)

13 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) !                                           

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

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

16 historique de l’IHM points 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’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

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 utilité utilisabilité adéquation aux besoins
basique options utilité adéquation aux besoins utilisabilité adéquation aux capacités de l’utilisateur

21 U&U exigences exemples 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 modèles 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 interface utilisateur
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 systèmes E/S 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 : le savoir-faire reste artisanal
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érence fondement
Noyau fonctionnel IHM

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

44 modèles de référence Arch : 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 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

47 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 vert rouge bleu orange noir violet

48 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

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

50 notion de perception compréhension
nous percevons mieux ce qui a une signification pour nous … SCNDLXEAAU SNDEACUAXL SCANDALEUX

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

52 notion de perception sensations erronées
figures de Luckiesh [1965]

53 notion de perception illusion correctrice
effets d’optique et correction d’optique

54 notion de perception contraste de couleurs
contraste simultané interaction de la couleur instabilité optique et vibration de la couleur

55 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

56 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

57 conception modèle humain : processeur … 3/7
le processeur humain : système sensoriel Système sensoriel visuel £ 17 lettres ³ 100 ms et £ 200 ms Système sensoriel auditif £ 1500 ms

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

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

60 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

61 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)

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

63 modèle du processeur … acquisition de cibles 1/5
Fitts [1954] sélection alternative de cibles T= a +b log2( ) 2A W

64 modèle du processeur … acquisition de cibles 2/5
formulation de MacKenzie : T= a +b log2( +1) indice de difficulté : ID=log2( +1) A W A W W ID A

65 modèle du processeur … acquisition de cibles 3/5
exemple d’usage : atteindre une barre de défilement A W

66 modèle du processeur … acquisition de cibles 4/5
tiré de Accot [2001]

67 modèle du processeur … acquisition de cibles 5/5
acquisition de cibles par curseurs étendus : lentilles magiques (magic lenses) Alias|wavefront ( palettes transparentes (toolglasses) …

68 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é

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

70 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 la distance entre les deux modèles détermine l’utilisabilité du système réponses opérations objets feedback commandes

71 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 ?

72 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

73 conception théorie de l’action 6/7
un mauvais exemple et des solutions “affordantes”

74 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 …

75 nouveaux paradigmes de l’IHM
applications tangibles pick and drop itsy

76 nouveaux paradigmes de l’IHM
multimodalité en situation de mobilité

77 nouveaux paradigmes de l’IHM
réalité mixte symbiose entre les mondes réel et virtuel Monde Numérique Monde Réel Réalité Mixte

78 nouveaux paradigmes de l’IHM
réalité mixte Monde Numérique Monde Réel Virtualité Augmentée IHM clavier IHM gestuelle IHM vestimentaire IHM graphique IHM tangible

79 nouveaux paradigmes de l’IHM
réalité mixte Monde Numérique Monde Réel Réalité Augmentée 2D 3D Son Force ... Action

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

81 nouveaux paradigmes de l’IHM aller plus loin que WIMP … 1/6
de nouveaux interacteurs apparaissent : pie menus (Don Hopkins) marking menus

82 nouveaux paradigmes de l’IHM aller plus loin que WIMP … 2/6
fish-eye view (Univ. Grenoble) hyperbolic view (Star Tree Studio)

83 nouveaux paradigmes de l’IHM aller plus loin que WIMP … 3/6
Tree Map (GUIR Berkeley)

84 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)

85 nouveaux paradigmes de l’IHM aller plus loin que WIMP … 5/6
interaction multimodale réalité augmentée, mixte, … Réalité Augmentée (AR Toolkit) /research/shared_space

86 nouveaux paradigmes de l’IHM aller plus loin que WIMP … 6/6
pour des interfaces “humaines” coopératives écologiques voire “invisibles”

87 User Centered Design pourquoi ? c’est quoi ? ça marche comment ?

88 méthode conception centrée utilisateur évaluation 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

89 méthode magicien d’Oz (WOz)
simuler les fonctions manquantes d’un logiciel Opérateurs hyper-entraînés Ergonomes – Psycho-ergonomes - …

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

91 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”

92 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

93 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

94 ergonomie

95 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

96 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

97 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

98 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

99 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é

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

101 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