![Page 1: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/1.jpg)
1
Interaction homme-machine
Interaction homme-machine MASTER INFORMATIQUE
2ème année, PLS et EID
C a t h e r i n e R e c a n a t iU n i v e r s i t é d e P a r i s 1
3
MASTER INFORMATIQUE2ème année, PLS et EID
C a t h e r i n e R e c a n a t iU n i v e r s i t é d e P a r i s 1
3
![Page 2: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/2.jpg)
2
Organisation du cours• Premières séances : 1- introduction, vocabulaire, généralités, contours du domaine, 2- historique des technologies de l’interaction homme-machine, et 3- conseils ergonomiques pour la conception d’interface graphique.
• Cours suivants sous la forme d’exposés d’étudiants (1 ou 2 exposés par séance).
• 1 examen sur table. Questions de synthèse ou portant sur les exposés. (Prenez des notes!). Note finale = 2/3 exposé + 1/3 examen.
![Page 3: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/3.jpg)
3
Vous avez dit IHM ?I H M• Interface Homme – Machine
• Interaction(s) Homme – Machine
mais aussi• CHM: Communication Homme – Machine
• DHM: Dialogue Homme – Machine
• IPM: Interaction Personne – Machine
![Page 4: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/4.jpg)
4
Vous avez dit IHM ?En anglais• UI - User Interface• GUI - Graphical User Interface• HMI - Human-Machine Interface• HCI - Human-Computer Interaction• ...
![Page 5: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/5.jpg)
5
Interface Homme-Machine (1970)
Ensemble des dispositifs matériels et logiciels permettant à un utilisateur d’interagir avec un système interactif
UI, GUI, Interface Graphique (écran/clavier/souris) IHM = langage d’entrée, de sortie, gestion de
l’interaction
![Page 6: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/6.jpg)
6
Communication Homme-Machine
Etude de la conception des systèmes informatiques interactifs
contrôle aérien, centrale nucléaire : sécurité
bureautique : productivité jeux : engagement des utilisateurs
![Page 7: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/7.jpg)
7
Les interactions homme-machineInteraction
phénomène que l’on souhaite contrôler
capacités de perceptiond’action, de cognition
Environnementphysique, organisationnel, social, etc.
capacités de stockage, decalcul, d ’entrées/sorties
![Page 8: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/8.jpg)
8
Interaction Homme-Machine (1980) On va parler alors de la psychologie de
l’interaction homme-machine, et on va essayer de la modéliser, en modélisant le système interactif global (système informatique + l’utilisateur).
IHM = Interaction Homme-MachineDiscipline englobant l’ensemble des aspects de la conception, de l’implémentation et de l’évaluation des systèmes informatiques interactifs
![Page 9: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/9.jpg)
9
Système (informatique) interactif
« prend en compte les entrées de manière interactive »
• il fournit à l'utilisateur, lors de son exécution, une représentation perceptible d’une partie de son état interne, afin que ce dernier puisse le modifier en fournissant des entrées.
• les entrées permettent de modifier l’état interne du système, et il y a ainsi interaction: les entrées fournies par l'utilisateur dépendent des sorties produites par le système et inversement.
• le système est ouvert : les dépendances entre entrées et sorties sont inaccessibles au système.
![Page 10: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/10.jpg)
10
Modèle conceptuel• Modèle du fonctionnement du système (ici un système à base de commandes)
• Modèle mental de l’utilisateur (idéalement)
ModèleVue du modèle
![Page 11: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/11.jpg)
11
Conception des systèmes interactifs
• Importance des facteurs humains (human factors)– absence de théories constructives ou qualitatives
– apports de la psychologie expérimentale
• Aspect chaotique de la conception.– petits changements, grands effets
• Nécessité d’une approche itérative– approche empirique (essais- erreurs)– cycle de vie en spirale
![Page 12: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/12.jpg)
12
Conception centrée sur l’utilisateur
• centrée sur l’homme (ou encore anthropocentrée qui s’oppose à technocentrée). En anglais User Centered Design.
Analyse
Facteurshumains
Conception
Participation
utilisateurs
Développement
Prototypage
instrumentation
Evaluation
Etudesutilisateu
rs
![Page 13: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/13.jpg)
13
L’ergonomie au centre de l’Interaction Homme-Machine
![Page 14: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/14.jpg)
14
Définition de l’Ergonomie: Science du travail et des activités humaines
• Ergon (travail) et nomos (règles)• prise en compte des facteurs humains
Elle vise la compréhension des interactions humains/système et concerne
• Optimisation du bien-être des personnes et de la performance globale des systèmes qui doivent être:– Efficaces– Fiables, sûrs– Favorables à la santé de leurs utilisateurs– Favorables au développement de leurs compétences
![Page 15: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/15.jpg)
15
Définition donnée par la S.E.L.F.Définition donnée par la S.E.L.F. (Société (Société
dd’’Ergonomie de Langue Française): Ergonomie de Langue Française):
« L« L’’ergonomie (ou lergonomie (ou l’’étude des facteurs humains) est étude des facteurs humains) est
la discipline scientifique qui vise la compréhension la discipline scientifique qui vise la compréhension
fondamentale des interactions entre les êtres fondamentale des interactions entre les êtres
humains et les autres composantes dhumains et les autres composantes d’’un système, et un système, et
la mise en œuvre dans la conception de théories, de la mise en œuvre dans la conception de théories, de
principes, de méthodes et de données pertinentes principes, de méthodes et de données pertinentes
afin d'améliorer le bien-être des hommes et afin d'améliorer le bien-être des hommes et
l'efficacité globale des systèmes »l'efficacité globale des systèmes » (2001)(2001)
![Page 16: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/16.jpg)
16
L’ergonomie au centre de l’Interaction H-M
• Définition du métier d’Ergonome: Métier contribuant à la planification, la conception, l’évaluation et la correction– des tâches– des emplois– des produits– des organisations
en compatibilité avec les besoins, les capacités et les limites des personnes
![Page 17: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/17.jpg)
17
Objectifs de l’ergonomie
• Objectifs centrés sur les personnes– Santé– Sécurité– Confort, facilité d’usage, satisfaction, plaisir
=> comment concevoir des systèmes qui favorisent le développement de compétences
• Objectifs centrés sur la performance– Efficacité, productivité, fiabilité, qualité
![Page 18: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/18.jpg)
18
Domaines d’applications• Ergonomie physique
– Caractéristiques anatomique, physiologiques, biomécaniques
– Postures de travail, mouvements répétitifs, disposition du poste de travail, des terminaux, la sécurité et la santé
• Ergonomie cognitive– Focus sur les processus mentaux (perception, mémoire, raisonnement, réponses motrices) dans les interactions humain-systèmes
– Charge mentale, prise de décision, performance experte, interaction homme-machine, fiabilité humaine, le stress professionnel et la formation dans leur relation à la conception personne-système
![Page 19: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/19.jpg)
19
Domaines d’applications
• Ergonomie organisationnelle– Optimisation des systèmes sociaux-techniques (structures organisationnelles, règles et processus)
– Communication et gestion des ressources des collectifs, conception du travail, conception des horaires de travail, travail coopératif, télétravail, ...
![Page 20: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/20.jpg)
20
Un domaine pour l’ergonomie: le marché des Nouvelles Technologies de l’Information et la Communication (NTIC)ex. les appareils multifonctions
– Imprimante PC– Imprimante appareil photo – Fax– Scanner– Photocopieuse– …
![Page 21: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/21.jpg)
21
– Téléphone– SMS/MMS– Lecteur MP3– Vidéo– Télévision– Tablettes– Les jeux en réseaux – Appareil photo– Écran tactile – Wifi– Visiophone– E-mail– Système d’exploitation
intégré
Etat du marché des NTICles nouveaux téléphones
![Page 22: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/22.jpg)
22
Un logiciel
et ses manuels faciles
d ’utilisation de 800 pages et
leurs annotations
État du marché des NTIC
![Page 23: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/23.jpg)
23
Pourquoi a-t-on besoin d’ergonomie ?
• Les nouvelles Technologies sont de plus en Les nouvelles Technologies sont de plus en plus puissantes et plus puissantes et ““envahissantesenvahissantes””, alors que les , alors que les utilisateurs sont de moins en moins compétentsutilisateurs sont de moins en moins compétents
• Les logiciels ont de plus en plus de Les logiciels ont de plus en plus de fonctionnalités, mais moins de 40% dfonctionnalités, mais moins de 40% d’’entre entre elles sont réellement utiliséeselles sont réellement utilisées
• LL’’introduction de nouveaux dispositifs introduction de nouveaux dispositifs informatiques en entreprise correspond souvent informatiques en entreprise correspond souvent à une baisse de la productivitéà une baisse de la productivité
![Page 24: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/24.jpg)
24
Exemple de non-sens
![Page 25: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/25.jpg)
25
Dans les projets à forte composante technologique, nous oublions souvent l ’utilisateur final
Qu’est ce que l’utilisateur achète ? Une technologie ?Un produit ? Surtout ce que ce dernier lui permet de faire…
Technologie et usager
![Page 26: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/26.jpg)
26
A l’intersection de plusieurs disciplines
HardWare
SoftWare
Physiologie & Anthropométrie
I.A.
Architecture
Sociologie & Psychologie Sociale
Psychologie Cognitive
![Page 27: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/27.jpg)
27
Où l’ergonomie se situe-t-elle ?
Machine
UtilisateurDéveloppeurs
Ergonomie?
Commanditaire
Marketing
…
L’ergonomie est au coeur de l’IHM
Utilisateur
Utilisateur
![Page 28: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/28.jpg)
28
Interaction Homme-Machine
Rappel :I H M =
Discipline englobant l’ensemble des aspects de la conception,, de l’implémentation, et de l’évaluation des systèmes informatiques interactifs
![Page 29: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/29.jpg)
29
Adapter l’IHM• Caractéristiques de l’utilisateur
– Différences physiques (âge, handicap)– Connaissances et expériences (dans le domaine de la tâche: novice, expert, professionnel, en informatique, sur le système: usage occasionnel, quotidien)
– Caractéristiques psychologiques (visuel / auditif, logique / intuitif, analytique / synthétique)
– Caractéristiques socio-culturelles (snes de l’écriture, format de date, langue, signification des icônes, des couleurs, ...)
• Contexte– Grand public (proposer une prise en main immédiate)– Loisirs (rendre le produit attrayant)– Industrie (augmenter la productivité, systèmes critiques: sécurité)
![Page 30: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/30.jpg)
30
Adapter l’IHM• Caractéristiques de la tâche
– répétitive, régulière, occasionnelle, sensible aux modifications de l’environnement, contrainte par le temps, risquée, ...
• Contraintes techniques– Plateforme– Taille mémoire,– Ecran, capteur, effecteurs– Réutilisation de code ancien
![Page 31: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/31.jpg)
31
L’IHM : domaine pluridisciplinaire
• Informatique– Programmation (en particulier IG)– Génie logiciel– Synthèse et reconnaissance de la parole, langue naturelle
– IA, image, système, etc.
• Psychologie cognitive, psychologie expérimentale• Ergonomie cognitive, ergonomie des logiciels• Science de l’éducation, didactique• Anthropologie, sociologie, philosophie, linguistique
• Communication, graphisme, audiovisuel• ...
![Page 32: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/32.jpg)
32
Le cycle en V
Analyse des besoins et faisabilité
Spécifications
Conception architectural
e
Conception détaillée
Codage
Tests unitaires
Tests
d ’intégration
Tests
de validation
Recette
Analyse des besoins
utilisateurs
Spécifications d ’Utilisabilité
Prototypage
Evaluation Experte
Tests d ’Utilisabilité
Evaluation Experte
![Page 33: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/33.jpg)
33
Principes ergonomiques• Adéquation des modes et des modalités sensorielles• Adéquation des représentations• Traitements compatibles avec les objectifs et avec le raisonnement
H = humain, E = environnement, M = machine
H ► E + M modalités sensorielles modes
représentations modèles, objets de
raisonnements traitements
![Page 34: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/34.jpg)
34
Processus interactionnel
Théorie de l ’action [Norman, 86]
Modèle de [Rasmussen, 86]• Habiletés• Comportement• Raisonnement
Habiletés
Comportement
Raisonnement
![Page 35: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/35.jpg)
35
Le modèle ICS [Barnard & May 93]Interactive Cognitive
Subsystems
ICS peut se voir, en première approximation, comme un affinement du Modèle du Processeur Humain [Card 83]. ICS est une architecture parallèle multiprocessus modélisant le système cognitif en un ensemble de neuf sous-systèmes spécialisés communicants.
![Page 36: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/36.jpg)
36
Le développement de ces modèles et la suite dans vos exposés ...
![Page 37: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/37.jpg)
37
Historique rapide
• Points de repères
• Styles d’interaction
![Page 38: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/38.jpg)
38
Points de repère
•Memex (Vannevar Bush, 1945)système hypertexte sur des micro-fiches
•Sketchpad (Ivan Sutherland, 1963)manipulation directe de formes géométriques
•NLS/Augment (Douglas Engelbart, 1968)travail collaboratif, partage de documents, visio-conférence
![Page 39: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/39.jpg)
39
Points de repère
• Star (Xerox PARC, 1981)station de travail et environnement de programmation graphique
• Macintosh (Apple, 1984)ordinateur personnel graphique
• X-Window System (MIT, 1985)plateforme graphique pour Unix
• World-Wide Web (CERN, 1990)modèle hypertexte en réseau
![Page 40: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/40.jpg)
40
Styles d’interaction
•Conversationnellangage de commandesdialogue imposé par le système
•Menus, formulairesguidage du systèmedialogue contrôlé par le système
![Page 41: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/41.jpg)
41
Styles d’interaction
•Navigationnoeuds, ancres, liensdifficultés de repérage
•Manipulation directeactions physiques sur des représentations d’objetsinspire toutes les interfaces actuelles
mmmm mmmmmmm mmmmmm mmm
mmmm mmmmmmm mmmmmm mmm
mmmm mmmmmmm mmmmmm mmm
mmmm mmmmmmm mm
mmmm mmm
![Page 42: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/42.jpg)
42
Styles d’interaction•Edition de documentdialogue contrôlé par l’utilisateurWhat
You
See
Is
What
You
Get
![Page 43: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/43.jpg)
43
Styles d’interaction
•Interaction iconiqueinterface génériqueapproche métaphorique« drag-and-drop » = « glisser-et-déposer »
![Page 44: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/44.jpg)
44
Styles d’interaction
•Reconnaissance de tracesinterfaces à stylo
•Réalité virtuelleimmersion sensori-motrice de l’utilisateur dans le système
•Réalité augmentéeintégration de capacités de traitement de l’information dans des objets physiques
![Page 45: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/45.jpg)
45
Aspects humains
Eléments de Psychologie appliquée aux systèmes interactifs
– Perception
– Action
– Cognition
![Page 46: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/46.jpg)
46
Couplage Action-Perception•Agir pour percevoirperception de la profondeur par des mouvements de la têteperception de la texture en déplaçant le doigt à la surface de l’objet
•Percevoir pour agirajuster les mouvements du bras pour saisir un objet
![Page 47: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/47.jpg)
47
La vue•Champ visuel de 180°•Focus d’attentionacuité visuelle: 0.04 mm à 50 cm
•Perception périphériquemoins sensible aux couleurs, plus sensible aux mouvements
•Perception de la couleur, du mouvement, de la profondeur
![Page 48: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/48.jpg)
48
Le toucher•Sens tactiletempérature, pression (texture),douleur
•Sens proprioceptifconfiguration du corps dans l’espace,appréhension de la forme d’un objet.
•Sens kinesthésiqueperception de l’effort des muscles,donc de la résistance d’un objet
![Page 49: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/49.jpg)
49
Système moteur•Loi de Fitts : temps de pointage
•Bi-latéralisationmain non dominante : situe le contexte,main dominante : agit dans le contexte.
![Page 50: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/50.jpg)
50
Mémoire et apprentissage•Mémoire à court termemémoire de travailcapacité de quelques unités (7 +/- 2)
durée de stockage de 10 à 30 secondes •Mémoire à long termecapacité infiniedurée de stockage illimitéeaccès associatif
•Apprentissage par répétition
![Page 51: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/51.jpg)
51
Résolution de problèmes Théorie de l’action
distance distance
d’exécution d’évaluation
But
Système
intention évaluation
interprétationspéc. actions
exécution perception
![Page 52: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/52.jpg)
52
Résolution de problèmes•Stratégies en cas d’erreurs
•Modèles mentauxreprésentations mentales permettantde résoudre les problèmes
![Page 53: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/53.jpg)
53
Aspects informatiques
• Périphériques d’entrée/sortie
• Outils de développement
![Page 54: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/54.jpg)
54
Ecrans•Ecrans cathodiques ou LCD•Ecrans bitmaprésolution : pixels par inchprofondeur : bits par pixelsraffraîchissement : images par secondetaille mémoire (1024 x 1024 pixels) :
1 bit/pixel 128Ko 2 couleurs
8 bits/pixel 1 Mo 256 couleurs24 bits/pixel 3 Mo 16 millions
de couleurs
![Page 55: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/55.jpg)
55
Ecrans•Couleurs directes
•Tables de couleurs
![Page 56: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/56.jpg)
56
Périphériques d’entrée•Clavier, boîte à boutons•Potentiomètres (rotatifs, linéaires)
•Souris, Tablettes,Manches à balais, Boules
•Ecran tactiles, Crayons optiques•Capteurs de position et de direction
•Dispositifs simulés
![Page 57: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/57.jpg)
57
Gestion des entrées
![Page 58: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/58.jpg)
58
Systèmes de fenêtrage•Structurer l’espace
d’affichage•Partager la ressource écran•Gestionnaire de fenêtresinterface utilisateurdu système de fenêtrage
•Fenêtre = zone autonome- pour l’affichage- pour les entrées
![Page 59: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/59.jpg)
59
Modèles de fenêtrage
![Page 60: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/60.jpg)
60
Modèle de dessin• Dessin direct• Problème :réaffichage des parties cachées- par le système de fenêtrage
nécessite de mémoriserle contenu des fenêtres
- par les applicationsnécessite de communiquer les demandesde réaffichage aux applications
![Page 61: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/61.jpg)
61
Nouveaux événements• Liés aux périphériqueschangement de focus
entrée / sortie du curseur dans une fenêtre
• Liés aux fenêtredemandes de réaffichage,
création, destruction, etc.autres
![Page 62: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/62.jpg)
62
Boîte à outils d’interface• Abstraction : le widgetObjet interactif : bouton, menu, barre
de défilement, boîte de dialogue, etc.
• Arbre de widgetsnoeuds = widgets conteneurs
feuilles = widgets simplesimbrication géométrique d’un widget dans son widget parent
![Page 63: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/63.jpg)
63
Interface d’application• Fonctions de rappel (callbacks)enregistrées dans le widget à sa création
appelées par le widget lorsqu’il est activé
![Page 64: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/64.jpg)
64
Interface d’application• Valeurs activeslien bi-directionnel entre une variable d’état du widget et une variable du noyau fonctionnel
![Page 65: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/65.jpg)
65
Interface d’application•Evénements ou messages
![Page 66: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/66.jpg)
66
Boîtes à outils•X toolkit / MotifX11, langage Cfonctions de rappel
•Tcl /TkX11, Mac, PC /langage Tclfonctions de rappel, valeurs actives
•AWTX11, Mac, PC / langage Javamessages
![Page 67: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/67.jpg)
67
Sources• http://www.lri.fr/~mbl/ENS/IHM/ecole-in2p3/720x540/intro-index.html
• http://www/clips.imag.fr/geod/User/jean.caelen/transparents_fichiers/IHM.ppt
•users.polytech.unice.fr/~pinna/MODULEIHM/Ergonomie1.ppt (T. Colombi – LudoTIC )
![Page 68: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/68.jpg)
68
![Page 69: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/69.jpg)
69
Planning (provisoire) et Sujets
![Page 70: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/70.jpg)
70
Sujets d’Exposés
![Page 71: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/71.jpg)
71
Sujets d’Exposés
![Page 72: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/72.jpg)
72
Sujets d’Exposés
...ou éventuellement, d’autres sujets si vous avez d’autres propositions. N’hésitez pas à venir m’en faire part.
![Page 73: 1 Interaction homme-machine MASTER INFORMATIQUE 2ème année, PLS et EID C a t h e r i n e R e c a n a t i U n i v e r s i t é d e P a r i s 1 3 MASTER INFORMATIQUE](https://reader035.vdocuments.fr/reader035/viewer/2022062512/551d9db9497959293b8dd70a/html5/thumbnails/73.jpg)
73