Cours 2a : GUI et TUI et styles d intéractions

Transcription

1 Cours 2a : GUI et TUI et styles d intéractions saralaoui@lri.fr (partie de la présentation basée sur des transparents d Anastasia Bezerianos, Fanis Tsandilas, Michel Beaudouin-Lafon, Jérémie Garcia et Rebecca Fiebrink)

2 Paradigmes d interaction Ordinateur-outil Interfaces première personne (je) Augmenter l utilisateur Ordinateur-partenaire Interfaces deuxième personne (tu) Déléguer des tâches Ordinateur-media Interfaces troisième personne (il) Communication humaine (ex. collogiciel)

3 l IHM ne suit pas la loi de Moore Original Macintosh imac 20 Janvier $2500 x0.9 Novembre $2200 CPU MIPS RAM 128kB Floppy 400kB 9 n&b 512x342 Clavier, souris WIMP desktop x3000 x2000 x x2 / x10 idem idem CPU G MIPS RAM 256MB Disque dur 80GB 20 couleur, 1680x1050 Clavier, souris WIMP desktop

4 Loi de Moore Cofondateur de la société Intel, Gordon Moore avait affirmé dès 1965 que le nombre de transistors par circuit de même taille allait doubler, à prix constants, tous les ans. Il rectifia par la suite en portant à dix-huit mois le rythme de doublement. Lapuissance des ordinateurs allait croître de manière exponentielle, et ce pour des années. Il a cependant déclaré en 1997 que cette croissance des performances des puces se heurterait aux environs de 2017 à une limite physique celle de la taille des atomes. 4

5 Dourish: Graphical interfaces are not the endpoint. They are a step on path to embodied interaction. 5

6 Styles d interaction Conversationnel Manipulation directe Gestuelle Crossing

7 Interface conversationnelle Langage de commande Dialogue imposé par le système Facile à programmer, robuste, peu de ressources computationnelles, contrôle direct Mais Difficile à apprendre, contre-intuitive,

8 Manipulation directe Ben Shneiderman (1983) 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 le objets sont immédiatement visibles 4. Apprentissage selon une approche progressive, afin de permettre l utilisation de l interface avec un minimum de connaissances

9 Manipulation directe : mise en œuvre WIMP : Window [Fenêtres], Icones, Menu et Pointage Présentation fenêtres, icones, représentations graphiques Interaction Menus, boîts de dialogue, champs de saisie, etc Entrées pointage, sélection, tracé Boucle perception-action Feedback

10 Manipulation directe : exemple Edition de documents WYSIWYG: What You See Is What You Get Ex. : Traitement texte (e.g., Word, OpenOffice), Dessin bitmap/ vectoriel (e.g., Photoshop, Illustrator). Contre-exemple: Latex... Interaction iconique: Interface générique Approche métaphorique Drag-and-drop [glisser-déposer]

11 WIMP VS Manipulation Direct WIMP: L ordinateur a une representation visuelle du monde et des actions possibles L utilisateur controlle le ordinateur a travers la manipulation directe des objets familiers (e.g., desktop, fichier..etc.) Execute la tache rapidement et voit le resultat immediatement Manipulation directe (Shneiderman 1983): Attrayant pour les novices Facile a se memoriser pour les intermittent Peut etre rapide pour les utilisateurs frequents Mais manipulation direct peut prendre differentes formes! 11

12 Interfaces graphiques (GUIs) l'interaction graphique : les entrées sont spécifiées directement à partir des sorties. GUIS sont un des grands succès de l IHM

13 Interaction gestuelle Geste 2D: Gestes è Commandes / Interfaces tactiles (stylo, doigts) Geste 3D: reconnaissance de gestes de la main et du corps

14 Tâches de déclenchement Entrée gestuelle et apprentissage OctoPocus (Bau, 2008)

15 Crossing Au delà du click Crossing (Franchissement): Utiliser le franchissement pour déclencher des actions

16 Interaction bi-manuelle Le 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.

17 Multi-touch: Gestes commun 17

18 A dela du touch Flexible displays Transformable displays (Ramakers et al., 2014)

19 Pourquoi pas continuer a utiliser les GUI et les WIMP pour tout? 19

20 Parce que Stagnation, amelioration du hardware Le tangible a des bénéfices sur l abstrait, le visual, et le intangible Prendre en compte le contexte de l utilisateur et ses capacités.

21 Probleme des GUI: Les yeux sont responsables et les mains sont sous-utilisées 21

22 McCullough, Abstractng Craft: The Practiced Digital Hand, 1998 Les yeux sont en charge et les mains sont sous employées.

23 Les yeux sont en charge Seeing objectifies the world. Eyes guide tools, read notations, appraise designs. Eyes see wholes, and compare many objects simultaneously. Eyes are the great monopolists of the senses. (McCullough 1996)

24 Les mains nous apportent du savoir et du savoir faire. They are the most subtle, sensitive, probing, differentiated, and the most closely connected to the mind. They deserve to be admired. (McCullough 1996)

25 Nous utilisons des outils / instruments pas seulement des symbols: Interaction Tangible Combine les capacités de la main et du cerveau

26 Interaction instrumentale (Beaudouin-Lafon, 2000) Modèle (ou style) d interaction, extension de la manipulation directe «Instrument» : intermédiaire entre l utilisateur et les objets qu il manipule l instrument l objet l objet l instrument

27 Interaction tangible Interaction avec l information digitale en manipulant des objets physiques

28 Interactions Tangibles Au dela de l ecran et de la souris desktop Interaction qui incorpore plus de nos capacité de tous le jours du monde physique. Distribuer l informatique dans des dispositifs Augmenter notre environnement quotidien avec de l informatique.

29 Tabletop TUIs aka Digital workbenches / Augmented workbenches

30 Reactable v=mgy1s8qymx0

31 Dirty objets de tous les jours

32 Where the sea meets the land, life has blossomed into a myriad of unique forms in the turbulence of water, sand, and wind. At another seashore between the land of atoms and the sea of bits, we are now facing the challenge of reconciling our dual citizenships in the physical and digital worlds. Our visual and auditory sense organs are steeped in the sea of digital information, but our bodies remain imprisoned in the physical world. Windows to the digital world are confined to flat, square screens and pixels, or "painted bits". Ishii s Tangible bits 32

33

34

35 Graspable interfaces (Fitzmaurice, 1995) objets physiques : contrôles des objets virtuels mappings directes entre les propriétés des objets physiques et le propriétés des objets virtuels les contraintes physiques guident l interaction

36 Papier augmenté «Toolglass» physique (Mackay, 2002) Papier et table tactile (Brandl, 2008) Projection sur le papier avec des mini-projecteurs (Song, 2010)

37 Radical Atoms is our vision for human interactions with dynamic physical materials that are computationally transformable and reconfigurable. Ishii et al watch?v=2vmcnopdla4 37

38 Réalité virtuelle Immersion sensori-motrice de l utilisateur Un masque et une «cave»

39 Réalité augmentée et mixte Réalité mixte ou augmenté ou hybride : Augmenter les objets physiques Interfaces tangibles : Utiliser les objets physiques comme interface Exemples: Papier sur un écran, widgets physiques sur une table interactive, utilisation d un pda comme loupe.

40 Réalité augmentée et mixte le bureau augmenté DigitalDesk (Wellner, 1993)

41 Ubiquitaire The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it. Mark Weiser 41

42 Les ordinateurs partout L age de la technologie calme, lorsque la technology disparait au fond de nos vies. Diametriquement opposé a la realité virtuelle, c est une realité incorporée. The more you can do by intuition, the smarter you are; the computer should extend your unconscious. 42

43 43

44 44

45 Interaction Incorporée 45

46 Exemple: Conception d instruments numériques (musicaux) La relation entre le geste et le son. Instrument pour un compositeurs? Instrument pour different niveaux d expertise Les outils de conceptions forment l instrument. 46

47 Interaction du corps entier 47

48 Tout peut etre interactif 48

49 Tout peut etre interactif 49

50 Wearables! 50

51 Art Interactif 51

52 Evaluation des systèmes pour la créativité 52

53 Csikszentmihalyi s: le flow Les creatifs sont passionné par leur travail: La passion est liée au Flow : Objectifs clairs a chaque etape Retour immediat sur l action Equilibre entre le challenge et les capacités L action et la conscience sont fusionnées La conscience exlu les distractions Pas de peur de l echec La conscience de soit disparait La sens du temps est distordu L activité devient auto-elic (son sens est dans elle meme) 53