interaction homme-machine › ~cfleury › teaching › et3-info › ihm-2018 › ...interaction...

Interaction Homme-Machine Cours 1 : introduction

Année 2017/2018 – Et3 Info - Polytech Paris-Sud Cédric Fleury (cedric.fleury@lri.fr)

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/ cedric.fleury@lri.fr => [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

42https://vimeo.com/2116172OctoPocus

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 (cedric.fleury@lri.fr)

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 ?