↳Lille - Nord Europe

UniverCité ouverte de Gif - 22 janvier 2015cycle de conférences : L’informatique hier, aujourd’hui et demain

Des ordinateurs et des Hommes ↳ les défis de l’Interaction Homme-Machine

Stéphane Huot↳ stephane.huot@inria.fr | mjolnir.lille.inria.fr/~huot/

S. HUOT ↳ Gif - 01|2015 ↳ 2

qu’est-ce que l’Interaction Homme-Machine ?

S. HUOT ↳ Gif - 01|2015 ↳ 3

“COMPUTER SCIENCE IS NO MORE ABOUT COMPUTERS THAN ASTRONOMY IS ABOUT TELESCOPES, BIOLOGY IS ABOUT MICROSCOPES OR CHEMISTRY IS ABOUT BEAKERS AND TEST TUBES.”

MICHAEL R. FELLOWS AND IAN PARBERRY COMPUTING RESEARCH NEWS, 5(1):7, 1993

HCI IS ABOUT INTERACTION,NOT INTERFACES.

MICHEL BEAUDOUIN-LAFON “DESIGNING INTERACTION, NOT INTERFACES”

PROC. OF AVI’04, ACM, 2004

S. HUOT ↳ Gif - 01|2015 ↳

paradigmes d’interaction

4

ordinateur outil

interface ‘première personne’

augmenter les capacités des utilisateurs

ordinateur serviteur

interface ‘deuxième personne’

déléguer les tâches

ordinateur media

interface ‘troisième personne’

communiquer

Interaction Homme- Machine

Intelligence Artificielle

Social media Multimedia

[Verplank & Moggridge], [Beaudouin-Lafon & Mackay]

S. HUOT ↳ Gif - 01|2015 ↳

Interaction Homme-Machine ?

la science de l’Interaction↳ un phénomène socio-technique co-adaptatif

que l’on veut contrôler

la recherche en IHM vise à‣ comprendre ce phénomène↳ le décrire, l’expliquer, l’évaluer

‣ proposer de nouvelles formes d’interaction‣ intégrer les connaissances et le savoir-faire↳ théories, méthodes et outils pour améliorer

la conception et le développement5

S. HUOT ↳ Gif - 01|2015 ↳

pointage à la souris

6

S. HUOT ↳ Gif - 01|2015 ↳

Loi de Fitts (1954)

7

dw

MT = a + bLog2(1 + d/w)

S. HUOT ↳ Gif - 01|2015 ↳

pointage avec cibles extensibles

8

S. HUOT ↳ Gif - 01|2015 ↳ 9

DESIGN

FACTEURS HUMAINS

INFORMATIQUE

IHM

S. HUOT ↳ Gif - 01|2015 ↳

pourquoi s’intéresser à l’IHM ?

tout système informatique a au moins un utilisateur

pour répondre aux promesses du numérique,les systèmes doivent être accessibles et utilisables

pour permettre le passage à l’échelle,l’interaction doit être transparente (au sens figuré)

10

S. HUOT ↳ Gif - 01|2015 ↳11

S. HUOT ↳ Gif - 01|2015 ↳12

SCIENCE FINDS,INDUSTRY APPLIES,MAN CONFORMS

EXPOSITION UNIVERSELLE, 1933, CHICAGO

S. HUOT ↳ Gif - 01|2015 ↳

Science Finds, Industry Applies, Man Conforms exposition universelle 1933, Chicago

13

Limites de cette vision du progrès

Au-delà d'un certain seuil de complexité, notre capacité d'adaptation ne suffit plus

La technologie se heurte chaque jour un peu plus à ce seuil

De nombreuses fonctions offertes par les systèmes actuels restent hors de notre portée

La machine paraît alors rigide, inutilement complexe, inadaptée à nos besoins et laisse un

sentiment de frustration...

Rappel : loi de Moore,

loi de Buxton, loi de Dieu (ou de la nature)

1965 2008

De l'interface à l'interaction contextualisée

De beaux boutons, des menus et des animations ne suffisent pas à rendre un système utilisable

Exemples de mesures possibles de l’utilisabilité

! temps nécessaire pour apprendre

! rapidité d’utilisation (benchmarks)

! taux d’erreurs

! facilité à se souvenir

! satisfaction subjective

Au delà de l'interface

! séquence d’actions nécessaires pour accomplir une tâche

! adéquation entre le système et le contexte dans lequel il est utilisé

MOORE’S LAW

BUXTON’S LAW

AND ...

GOD’S LAW (NATURE)

1965 2008‘less is more (more or less)’

[W. Buxton]

S. HUOT ↳ Gif - 01|2015 ↳

une question de compromis…

14

power

simplicity

power

Design Trade�o s�

simplicity

The research challenge:� � �to move the curve!�

“simple things should be simple, complex things should be possible”[A. Kay]

l’Interaction soulève un problème fondamental:comment trouver le bon compromis entre

pouvoir d’expression etsimplicité d’utilisation ?

S. HUOT ↳ Gif - 01|2015 ↳

une question de compromis…

15

power

simplicity

power

Design Trade�o s�

simplicity

The research challenge:� � �to move the curve!�le défi de la recherche en IHM

↳ déplacer la courbe !

[W. E. Mackay]

S. HUOT ↳ Gif - 01|2015 ↳

pourquoi c’est difficile ?

les motivations de l’utilisateur, son comportement,ses attentes sont très difficiles à modéliser

des théories, modèles et lois empiriques existent,mais pas de cadre unifié pour l’interaction en général

pour étudier un phénomène, il faut qu’il se produise‣ un important travail d’implémentation‣ un choix à faire entre approche écologique et réduction

le “poids de la preuve” nous occupe beaucoup

l’IHM nécessite des compétences pluridisciplinaires

16

S. HUOT ↳ Gif - 01|2015 ↳

déduction

17

théorie

observation

*

hypothèse

*

*

*

hypothèse révisée

expérience nouvelle expérience

*phénomène naturel

[Mackay & Fayard, 97]

S. HUOT ↳ Gif - 01|2015 ↳

induction

18

théorie

observation

*

cadre conceptuel

*

*

cadre conceptuel révisé

étude de terrainspécifique

*phénomène naturel*étude de terraingénérale

[Mackay & Fayard, 97]

S. HUOT ↳ Gif - 01|2015 ↳

design et ingénierie

19

conceptiond’artefacts

* *

*artefacts

prototype 1 prototype 2 produit

recommendations‘guidelines’

[Mackay & Fayard, 97]

S. HUOT ↳ Gif - 01|2015 ↳

IHM: triangulation…

20

théorie*

modèle

*

modèle révisé

conceptiond’artefacts

* *simulation prototype

observation*

évaluation

*interaction avec des artefacts

*

étude de terrain

[Mackay & Fayard, 97]

S. HUOT ↳ Gif - 01|2015 ↳21

une fois le but atteint, ces difficultés sont souvent invisibles

S. HUOT ↳ Gif - 01|2015 ↳

la recherche en IHM dans le monde et en France

dans le monde‣ ACM SIGCHI, créé en 1983

↳ plus de 4000 membres en 2012↳ 11% des membres pros ou étudiants de l’ACM↳ 17% des téléchargements de la digital library↳ 2043 articles soumis à CHI 2014, 465 acceptés (23%)

en France‣ l’AFIHM (Association Francophone d’Interaction Homme-Machine), créée en 1996

↳ une conférence annuelle (IHM) créée en 1989‣ quelques formations dédiées (e.g., Master IHM à Toulouse et Orsay)‣ un domaine encore émergent mais de plus en plus visible dans les universités et instituts de recherche

↳ pôles à forte visibilité : Saclay, Grenoble, Toulouse, Lille, …

22

S. HUOT ↳ Gif - 01|2015 ↳23

des ordinateurs…↳ une brève histoire subjective et désordonnée de l’IHM

S. HUOT ↳ Gif - 01|2015 ↳24

Harvard MARK I - 1944↳ commutateurs et cartes perforées

S. HUOT ↳ Gif - 01|2015 ↳25

terminaux - ~60↳ texte

S. HUOT ↳ Gif - 01|2015 ↳26

SketchPad - [I. Sutherland, 63]↳ 1er système de CAO

S. HUOT ↳ Gif - 01|2015 ↳27

Xerox Alto - 1973↳ interface graphique (GUI)

S. HUOT ↳ Gif - 01|2015 ↳28

Xerox Star - 1981↳ interface graphique (GUI)

S. HUOT ↳ Gif - 01|2015 ↳29

Apple iMac - 2012↳ (la même) interface graphique (GUI)

S. HUOT ↳ Gif - 01|2015 ↳30

‘multi-touch’ - [N. Mehta] 1982↳ A Flexible Machine Interface

S. HUOT ↳ Gif - 01|2015 ↳31

Simon - IBM & Bell South, 1992↳ 1er ‘smartphone’ tactile

S. HUOT ↳ Gif - 01|2015 ↳32

tables interactives - ~2000↳ MERL Diamond Touch, Microsoft Surface 1st Gen.

S. HUOT ↳ Gif - 01|2015 ↳33

iPhone -Apple, 2007↳ lance l’ère des smartphones multi-tactile grand public

S. HUOT ↳ Gif - 01|2015 ↳34

Video Place / Video Desk - [M. Krueger, 1983]↳ interaction gestuelle

S. HUOT ↳ Gif - 01|2015 ↳35

Kinect - Microsoft, 2010 ↳ interaction gestuelle

S. HUOT ↳ Gif - 01|2015 ↳36

Digital Desk - [P. Wellner, 1991]↳ réalité augmenté et interaction tactile/tangible

S. HUOT ↳ Gif - 01|2015 ↳37

Augmented Surfaces - [J. Rekimoto, 1999]↳ réalité ‘mixte’ et interaction tactile/tangible

S. HUOT ↳ Gif - 01|2015 ↳38

Bricks - [Fitzmaurice et al., 1995]↳ interaction tangible (& ‘graspable’)

↳ redimensionner un objet

↳ créer une courbe

↳ déformer un object

S. HUOT ↳ Gif - 01|2015 ↳39

‘Embodied Interaction’ - ~2000↳ interaction tactile, gestuelle, tangible, …

S. HUOT ↳ Gif - 01|2015 ↳

chronologie des ‘interfaces’

40

1940 1960 1980 2000 2015

commutateurscartes perforées texte

graphique‘embodied’

adapté de [ToCHI special Issue, 2011, ed. Dourish]

S. HUOT ↳ Gif - 01|2015 ↳

chronologie des ‘interfaces’

40

1940 1960 1980 2000 2015

commutateurscartes perforées texte

graphique‘embodied’

adapté de [ToCHI special Issue, 2011, ed. Dourish]

S. HUOT ↳ Gif - 01|2015 ↳41

… et des hommes↳ trois visions qui ont forgé l’IHM (et l’informatique)

S. HUOT ↳ Gif - 01|2015 ↳42

Douglas C. Engelbart↳ augmenting human intellect - 60s

S. HUOT ↳ Gif - 01|2015 ↳43

Memex↳ As We May Think - [V. Bush, 1945]

S. HUOT ↳ Gif - 01|2015 ↳

la vision d’Engelbart

augmenter l’intelligence collective

↳ aider à développer, intégreret appliquer des connaissances

↳ outils et moyens pour acquérirde l’expérience et devenir plus performant

↳ la méthode du ‘bootstraping’

44

S. HUOT ↳ Gif - 01|2015 ↳

oN-Line System (NLS)

9 décembre 1968↳ la mère de toutes les démos

entre autres “inventions” technologiques↳ souris↳ téléconference↳ collaboration distante↳ ‘fenêtres’↳ hypertexte

faire mieux ce que l’on fait déjà,rendre possible ce que l’on ne fait pas encoremême si cela nécessite de l’entrainement

45

“pendant une heure et demie, il a lancé des éclairs avec ses mains”

Chuck Thacker

S. HUOT ↳ Gif - 01|2015 ↳46

S. HUOT ↳ Gif - 01|2015 ↳47

S. HUOT ↳ Gif - 01|2015 ↳48

S. HUOT ↳ Gif - 01|2015 ↳49

S. HUOT ↳ Gif - 01|2015 ↳50

S. HUOT ↳ Gif - 01|2015 ↳51

Alan C. Kay↳ a personal computer for children of all ages - 70s

S. HUOT ↳ Gif - 01|2015 ↳52

Dynabook↳ a personal computer for children of all ages - [A. C. Kay, 1972]

S. HUOT ↳ Gif - 01|2015 ↳

Xerox Alto, “the interim Dynabook"

entre autres “inventions” technologiques↳ écran ‘bitmap’↳ clavier et souris↳ interface graphique ‘WIMP’

(Windows Icon Menu Pointer)↳ fenêtres que l’on peut manipuler

(et faire se chevaucher)

programmation orientée objet↳ Smalltalk

53

S. HUOT ↳ Gif - 01|2015 ↳54

Squeak / Etoys↳ implémentation de Smalltalk pour les applications éducatives

S. HUOT ↳ Gif - 01|2015 ↳55

Dynabook = tablette

S. HUOT ↳ Gif - 01|2015 ↳55

iPad = Dynabook ?

S. HUOT ↳ Gif - 01|2015 ↳55

iPad = Dynabook ?

S. HUOT ↳ Gif - 01|2015 ↳56

Mark D. Weiser↳ integrating computers seamlessly into the world - ~90s

S. HUOT ↳ Gif - 01|2015 ↳57

Mark D. Weiser↳ integrating computers seamlessly into the world - ~90s

“Ubiquitous computing names the third wave in computing, just now beginning. First were mainframes, each shared by lots of people. Now we are in the personal computing era, person and machine staring uneasily at each other across the desktop. Next comes ubiquitous computing, or the age of calm technology, when technology recedes into the background of our lives.”

S. HUOT ↳ Gif - 01|2015 ↳58

S. HUOT ↳ Gif - 01|2015 ↳59

S. HUOT ↳ Gif - 01|2015 ↳60

a

u

g

m

e

n

t

e

r

a

d

a

p

t

e

r

i

n

t

é

g

r

e

r

S. HUOT ↳ Gif - 01|2015 ↳61

un monde numérique

accessible à tous ?

S. HUOT ↳ Gif - 01|2015 ↳62

le monde est complexe↳ en finir avec le mythe du “walk-up and use”

S. HUOT ↳ Gif - 01|2015 ↳63

S. HUOT ↳ Gif - 01|2015 ↳64

S. HUOT ↳ Gif - 01|2015 ↳65

S. HUOT ↳ Gif - 01|2015 ↳66

S. HUOT ↳ Gif - 01|2015 ↳

aider l’acquisition d’expertise

67

S. HUOT ↳ Gif - 01|2015 ↳

aider l’acquisition d’expertise

68Octopocus [Bau et Mackay, 08]

S. HUOT ↳ Gif - 01|2015 ↳69

Maîtriser la complexité↳ plateforme WILD (LRI - Univ. Paris-Sud)

S. HUOT ↳ Gif - 01|2015 ↳70

Maîtriser la complexité↳ plateforme EVE (LIMSI - CNRS)

S. HUOT ↳ Gif - 01|2015 ↳

s’inspirer des capacités et des pratiques expertes

71Ewe [Ghomi et al., 12]

S. HUOT ↳ Gif - 01|2015 ↳72

“If ease of use was the only valid criterion, people would stick to tricycles and never try bicycles.”↳ D. C. Engelbart

S. HUOT ↳ Gif - 01|2015 ↳73

le monde n’est pas plat↳ de la réalité physique dans l’interaction

S. HUOT ↳ Gif - 01|2015 ↳74

S. HUOT ↳ Gif - 01|2015 ↳75

S. HUOT ↳ Gif - 01|2015 ↳76

sensory & motor homunculus[© London Natural History Museum]

S. HUOT ↳ Gif - 01|2015 ↳77

d’après [B. Victor, 11]http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/

S. HUOT ↳ Gif - 01|2015 ↳78

d’après [B. Victor, 11]http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/

S. HUOT ↳ Gif - 01|2015 ↳79

d’après [B. Victor, 11]http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/

S. HUOT ↳ Gif - 01|2015 ↳79

d’après [B. Victor, 11]http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/

S. HUOT ↳ Gif - 01|2015 ↳

interaction tangible

80Reactable [Jorda et al., 05]

S. HUOT ↳ Gif - 01|2015 ↳

retour haptique (tactile)

81Revel [Bau et Poupyrev, 12]

S. HUOT ↳ Gif - 01|2015 ↳82

interfaces cerveau-ordinateur↳ Mind-Mirror [Mercier-Ganady et al., 14]

[@inria - Kaksonnen]

S. HUOT ↳ Gif - 01|2015 ↳83

(a) (b)

(c) (d)

Fig. 6. SyncTap operations can be used in various settings. (a) A Digital camera and a PC. (b)Connecting two PCs. (c) Printing a document from a PDA to a nearby printer. (d) Presentationusing wireless connection between a notebook PC and a presentation screen.

users had to manually configure the environment. This is cumbersome especially whenmobile computers are using DHCP.

A combination of HyperCursor and SyncTap addresses the problem. For example,when a user brings a tablet PC (without keyboard) to his or her office’s desk, and wantsto manipulate the tablet PC with his or her desktop PC’s keyboard and mouse. Toset this, a user simply presses the PC’s SyncTap button (e.g., Escape key) and syn-chronously taps the tablet PC’s screen2 . Next, one controls the mouse to hit the screenedge of the desktop computer screen. This operation tells the system about the rela-tive location of the tablet PC, and the cursor automatically jumps to the tablet PC’sscreen. We are also trying another method in which a user can specify physical layoutby choosing SyncTap buttons. For example, pressing the left Shift key on a device tellsthe system that the other device is placed on the left.)

2 Some of the tablet PC have physical ”hot” buttons, and these buttons are often act as the”Escape” key. In this case, these hot buttons can also be used as a SyncTap button.

(a) (b)

(c) (d)

Fig. 6. SyncTap operations can be used in various settings. (a) A Digital camera and a PC. (b)Connecting two PCs. (c) Printing a document from a PDA to a nearby printer. (d) Presentationusing wireless connection between a notebook PC and a presentation screen.

users had to manually configure the environment. This is cumbersome especially whenmobile computers are using DHCP.

A combination of HyperCursor and SyncTap addresses the problem. For example,when a user brings a tablet PC (without keyboard) to his or her office’s desk, and wantsto manipulate the tablet PC with his or her desktop PC’s keyboard and mouse. Toset this, a user simply presses the PC’s SyncTap button (e.g., Escape key) and syn-chronously taps the tablet PC’s screen2 . Next, one controls the mouse to hit the screenedge of the desktop computer screen. This operation tells the system about the rela-tive location of the tablet PC, and the cursor automatically jumps to the tablet PC’sscreen. We are also trying another method in which a user can specify physical layoutby choosing SyncTap buttons. For example, pressing the left Shift key on a device tellsthe system that the other device is placed on the left.)

2 Some of the tablet PC have physical ”hot” buttons, and these buttons are often act as the”Escape” key. In this case, these hot buttons can also be used as a SyncTap button.

ubiquitous computing↳ SyncTap [Rekimoto et al., 03]

S. HUOT ↳ Gif - 01|2015 ↳84

“There is more information available at our fingertips during a walk in the woods than in any computer system, yet people find a walk among trees relaxing and computers frustrating. Machines that fit the human environment, instead of forcing humans to enter theirs, will make using a computer as refreshing as taking a walk in the woods.”↳ M. D. Weiser

S. HUOT ↳ Gif - 01|2015 ↳85

le monde n’est pas figé↳ faire des systèmes interactifs de vrais ‘outils’

S. HUOT ↳ Gif - 01|2015 ↳86

S. HUOT ↳ Gif - 01|2015 ↳87

S. HUOT ↳ Gif - 01|2015 ↳

end-user programming

88Pygmalion [Smith, 75]

S. HUOT ↳ Gif - 01|2015 ↳

programmation ‘créative’

89

SketchMachine [Huot, …]

S. HUOT ↳ Gif - 01|2015 ↳

adaptabilité

90Façades [Stuerzlinger et al., 06]

S. HUOT ↳ Gif - 01|2015 ↳91

“One can imagine one of the first programsan owner will write is a filter to eliminate advertising!”↳ A. C. Kay

S. HUOT ↳ Gif - 01|2015 ↳92

S. HUOT ↳ Gif - 01|2015 ↳

crédits et sources

quelques transparents deNicolas ROUSSELWendy MACKAYMichel BEAUDOUIN-LAFON

l’article‘Douglas Engelbart, inventeur et visionnaire’[Jonathan Aceituno et Nicolas Roussel, Interstices, 2013]https://interstices.info/jcms/ni_76304/douglas-engelbart-inventeur-et-visionnaire

93

S. HUOT ↳ Gif - 01|2015 ↳94

l’Interaction Homme-Machine estune branche de l’Informatique

S. HUOT ↳ Gif - 01|2015 ↳94

l’Informatique est une branche del’Interaction Homme-Machine

?