Interaction Homme-Machine Cours 1 : introduction
Année 2017/2018 – Et3 Info - Polytech Paris-Sud Cédric Fleury ([email protected])
Une partie de ce cours est basée sur les transparents de Ignacio Avellino, Anastasia Bezerianos et Michel Beaudouin-Lafon
https://www.lri.fr/~cfleury/teaching/et3-info/IHM-2018/
Plan du cours
A - Qu’est ce que l’interaction homme-machine ?
B - Déroulement de ce cours
C - Introduction à l’IHM
D - Styles d’interaction
2
Plan du cours
A - Qu’est ce que l’interaction homme-machine ?
B - Déroulement de ce cours
C - Introduction à l’IHM
D - Styles d’interaction
3
Interaction Homme–Machine
4
Interactionphénomène à contrôler
Capacités : action, perception, cognition Capacités : calcul,
stockage, entrée/sortie
Environnement : physique, social, organisationnel, culturel, etc
En réalité : Interaction Située
5
Environnement
UtilisateursArtefacts Ordinateurs
Plan du cours
A - Qu’est ce que l’interaction homme-machine ?
B - Déroulement de ce cours
C - Introduction à l’IHM
D - Styles d’interaction
6
Déroulement du CoursSeances
6 cours théoriques (6 x 2h) 6 séances de travaux pratiques (6 x 2h)
Evaluations 1 note de TP (TP à rendre + TP noté) 1 examen (2h)
https://www.lri.fr/~cfleury/teaching/et3-info/IHM-2018/ [email protected] => [Et3-IHM] dans l’objet !
7
Objectifs du Cours
Faire découvrir les spécificités des systèmes interactifs
Apprendre à comprendre les utilisateurs Besoins, modèles mentaux, psychologie
Aborder l’implémentation des systèmes interactifs techniques de programmation, outils
Aborder leur conception et leur évaluation
Donner quelques éléments sur la recherche et l’innovation dans ce domaine
8
Contenu du coursCours 1 : introduction & styles d’interaction
Cours 2 : interface graphique & programmation avec JavaFX
Cours 3 : architecture logicielle & programmation avec JavaFX
Cours 4 : psychologie des utilisateurs - partie 1
Cours 5 : Psychologie des utilisateurs - partie 2 Modèles conceptuels
Cours 6 : Histoire de l’IHM Conception & évaluation de systèmes interactifs
9
Plan du cours
A - Qu’est ce que l’interaction homme-machine ?
B - Déroulement de ce cours
C - Introduction à l’IHM
D - Styles d’interaction
10
Vocabulaire
Dans la suite :
interface = interface homme-machine
système interactif = système interactif homme-machine
11
DéfinitionUn système interactif n’est pas…
Un système algorithmique qui :
=> lit des données en entrée
=> traite ces données
=> écrit le résultats de ces traitements
Voir l’article de Peter Wegner : Why Interaction Is More Powerful Than Algorithms (1997)
12
DéfinitionUn système interactif est…
Un système informatique qui :
=> maintient un état interne
=> crée des représentations perceptibles d’un partie de cet état
=> Lit et traite les entrées au fur et à mesure qu’elles arrivent
13
Boucle action/perception
14
Perception
Actions
Système interactif
Propriétés d’un système interactif
Réactif : l’Utilisateur fournit des entrées au Système (actions) S doit les traiter immédiatement et générer un sortie pour U
Ouvert : La relation entre les sorties de S et les futures entrées de U est inconnue pour S
Asymétrique : U n’a pas à réagir immédiatement aux sorties de S U aime connaitre les relations entre ces entrées et les sorties de S
15
Deux conceptions« l’humain dans la boucle »
Vue centrée sur le système U doit se conformer aux règles de S, i.e. fournir des entrées dans un ordre ou un format spécifiques
Adresse des tâches opérationnelles où U effectue des actions que l’ordinateur ne peut pas (encore) faire
« l’ordinateur dans la boucle » Vue centrée sur l’human
S doit s’adapter au capacités de U Adresse des tâches créatives
où l’ordinateur étend ou augmente les capacités de U
16
Modèle conceptuel
Modélise le fonctionnement du système :
17
Réponses
Feedback
Commandes
Opérations Données
Dans l’ideal, il devrait correspondre au modèle mental de U
Attention !Nous utilisons tous des systèmes interactifs Nous avons tous des idées sur comment les améliorer
… mais peu d’entre nous sont des designers ou des chercheurs spécialisés en IHM
Paradoxe de l’interaction homme-machine (IHM) Mesure de la réussite = invisible, transparent Rendre les choses simples est difficile (et difficile à comprendre)
=> L’IHM est un domaine complexe et multidisciplinaire => Etre designer ou chercheur en IHM nécessite des
compétences particulières
18
Approche multidisciplinaire
19
Design
psychologie
sociologie
anthropologie
design industriel
typographie
arts graphiques
Sciences de la nature
Systèmesinteractifs
Ingénierie
architectureinformatique
électroniquemécanique optique
physiologie
Physiologie
20Ergonomic Workstation by Berkeley Lab Wikimedia Commons
Occupational Safety and Health Administration Guidelines for Retail Grocery Stores (OSHA 3192-05N 2004), OSHA Supplemental Info: Ergonomic Principles Index
Anatomie humaine Caractéristiques
anthropométriques physiologiques bio mécaniques et leur relation à l’activité physique
Design du comfort fonctionnel
But : concevoir des produits, systèmes ou des processus en prenant en compte l’interaction entre eux et les utilisateurs.
Psychologie
21
Perception multistable: candlestick-face et cube de Necker
Processus mentaux perception memoire réponse moteur
Comment ils affectent les interactions entre personnes et autres éléments du système.
Sociologie
22
Inclus la communication gestion des ressources travail d’équipe (teamwork) conception participative (participatory design) travail collaboratif (cooperative work) organisations virtuelles travail à distance
Environnemental
23
Les utilisateurs et leur environnement.
L’effet de la temperature de l’ambiance les vibrations le bruit la lumière, etc
dans la santé le comfort la performance des personnes
Attention !
Les informaticiens ne sont pas les mieux placés pour concevoir des interfaces
Ils sont experts de l’usage des ordinateurs Leur centre d’intérêt est l’ordinateur ou l’interface
Ce qui intéresse les utilisateurs, c’est ce que l’interface et l’ordinateur leur permet de faire
Il faut donc concevoir POUR et AVEC les utilisateurs.
24
Importance de l’IHM
L’enjeu de la qualité des interfaces homme-machine devient important car ils sont utilisés :
Par tout le monde
Dans tous les domaines, y compris des systèmes critiques (qui mettent des vies humaines en jeu).
25
Importance de l’IHM
26
Plan du cours
A - Qu’est ce que l’interaction homme-machine ?
B - Déroulement de ce cours
C - Introduction à l’IHM
D - Styles d’interaction
27
Paradigmes d’interaction Ordinateur-outil
Interfaces à la première personne (je) «Augmenter» l’utilisateur
Ordinateur-partenaire Interfaces deuxième personne (tu) Déléguer des tâches
Ordinateur-medium Interfaces troisième personne (il) Communication humaine (ex. collogiciel)
28
Styles d’interaction
Conversationnel
Manipulation directe
Gestuelle
Crossing
...
29
Interface conversationnelle
Langage de commande Dialogue imposé par le système
Facile à programmer, robuste, peu de ressources de calcul, contrôle direct
Mais… Difficile à apprendre, contre-intuitive
30
Terminal Mac. Image Personnelle—Ignacio Avellino
Manipulation directe
1. Représentation permanente des objets d’intérêt
2. Utilisation d’actions physiques au lieu d’une syntaxe complexe
3. Opérations rapides, incrémentales, réversibles, dont les actions sur les objets sont immédiatement visibles
4. Apprentissage selon une approche progressive, afin de permettre l’utilisation de l’interface avec un minimum de connaissances
31
Ben Shneiderman (1983)
Manipulation directeWIMP :
Window [Fenêtres], Icônes, Menu et Pointage
Présentation Fenêtres, icônes, représentations graphiques
Interaction Menus, boîtes de dialogue, champs de saisie, etc
Entrées Pointage, sélection, tracé
Boucle perception-action Feedback
32
Interfaces WIMP
33
Word 5 (Microsoft)
Manipulation directe
Edition de documents WYSIWYG: What You See Is What You Get
Ex : Traitement de texte (Word, OpenOffice, …), Dessin bitmap/ vectoriel (Photoshop, Illustrator, ..).
Contre-exemple: LaTeX
Interaction iconique : Interface générique Approche métaphorique Drag-and-drop [glisser-déposer]
34
Manipulation Directe
35http://www.youtube.com/watch?v=M0ODskdEPnQBumpTop 3D
Manipulation directe ?
36
Problèmes de la manipulation directe
Identifier les objets d’intérêt exemple : les styles de Word
Feedback immédiat difficile quand il y a un délai entre l’action et son résultat
Manipulation directe ou indirecte ? menus, boîtes de dialogue, barres de défilement, etc.
37
Geste 2D : Commandes / Interfaces tactiles (stylo, doigts)
Geste 3D : Reconnaissance de gestes de la main et du corps
Interaction gestuelle
38
https://en.wikipedia.org/wiki/Multi-touch http://josvanleeuwen.org/uploads/jos/projects/Multi-touch-multi-user.png
http://www.malte-weiss.de/portfolio/img.php?file=slap-knob.png&fmt=f1
Minority Report
39
40
Tâches de déclenchement
Entrée gestuelle et apprentissage
41
Olivier Bau and Wendy E. Mackay. 2008. OctoPocus: a dynamic guide for learning gesture-based command sets. (UIST ’08).
http://doi.acm.org/10.1145/1449715.1449724
Crossing et steering
Steering (trajectoire) : commandes qui dépendent de la trajectoire.
Exemples: Menu Hiérarchique
43
Au delà du “clic”
Crossing (franchissement) : Utiliser le franchissement pour déclencher des actions
https://www.youtube.com/watch?v=VAWnIGo9Kro
http://www.youtube.com/watch?v=WPbiPn1b1zQ
Interaction bi-manuelLe modèle de la chaîne cinématique (Guiard, 1987):
L’action de la main dominante se repère par rapport au contexte fourni par la main non-dominante ; La main dominante offre des mouvements plus fins (les gestes macros sont relayés à la main non-dominante) ; Et l’action de la main non-dominante précède l’intervention de la main dominante.
Exemples: BiTouch and BiPad : la main non-dominante sert de support pour taper, faire des gestes ou accord («chord») pour modifier les actions de la main dominante Pan et zoom : pan avec la main dominante et zoom avec la main non-dominante
44
BiTouch et BiPad
Main non-dominante sert de support change les actions de la main dominante
45
Julie Wagner, Stéphane Huot, and Wendy Mackay. 2012. BiTouch and BiPad: designing bimanual interaction for hand-held tablets. (CHI ’12). http://doi.acm.org/10.1145/2207676.2208391
46https://www.youtube.com/watch?v=BwIAcczLUUAToolGlasses
Interaction multi-touch
Dans la vie réelle, nous faisons des actions avec les 2 mains, pas avec un seul doigt
L’interaction multi-tactile ou multi-touche permet des actions parallèles réduit la complexité de la tâche augmente le parallélisme réduit le temps
47
http://obamapacman.com/2010/05/ironman-inspired-ipad-app-shows-apple-tablet-
supports-11-multitouch-inputs/
http://i1-news.softpedia-static.com/images/news2/Evoluce-One-47-Inch-Multi-Touch-Screen-Is-Touched-
from-Afar-2.jpg
Interaction tangible
Interaction avec l’information digitale en manipulant des objets physiques
48https://www.youtube.com/watch?v=I2rDHUUkd5Y
Modèle de l’interaction tangible
49
GUI - Graphical User Interface
Représentation de l’information avec des pixels (intangibles)
Les dispositifs d’entrée généraux permettent aux utilisateurs de contrôler cette représentation
TUI - Tangible User Interface
Représentation tangible (physique) de l’information digital
Informations directement saisissables et manipulables avec retour haptique
La représentation immatériel peut complémenter la représentation tangible en se synchronisant avec elle.(exemple : projection vidéo)
Hiroshi Ishii. 2008. Tangible bits: beyond pixels. (TEI '08). http://doi.acm.org/10.1145/1347390.1347392
Graspable interfaces
Objets physiques : contrôles des objets virtuels
Mappings directs entre les propriétés des objets physiques et les propriétés des objets virtuels
Les contraintes physiques guident l’interaction
50George W. Fitzmaurice, Hiroshi Ishii, and William A. S. Buxton. 1995. Bricks: laying the foundations for graspable user interfaces.
(CHI ’95). http://dx.doi.org/10.1145/223904.223964
Fitzmaurice et al., 1995
Papier augmenté
51
« Toolglass » physique (Mackay, 2002)
Song H et al. MouseLight: bimanual interactions on digital paper using a pen and a spatially-aware
mobile projector. (CHI '10). http://doi.acm.org/10.1145/1753326.1753697
Réalité virtuelleImmersion sensori-motrice de l’utilisateur
52
Réalité virtuelle
53
Application de la réalité virtuelle
54
Visualisation scientifique
Conception industrielle PSA, Dassault Systems, EDF Renault, EADS, Airbus, CEA
Nombreuses startups Immersion, Realiz « I’m in VR », VRXL, Clarte
Plateforme réalité virtuelle - JPO - 13 février 2016 - Cédric Fleury ([email protected])
Plateforme réalité virtuelle de l’école
Option « réalité virtuelle et interaction » 5ème année du département Informatique
55
Réalité augmentée Réalité augmentée :
Augmenter les objets physiques avec des informations virtuelles
56https://www.youtube.com/watch?v=Yq8_cvpOnSA
Interaction Multi-modale
Combiner différents styles d’interaction Par exemple : interaction gestuelle + commandes vocales
57
Put That There, Bolt, 1979
Quel futur pour les IHM ?
Interface cerveau-ordinateur (BCI) ?
Agents émotionnels
Robots
58
Qu’en pensez-vous ?