La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Linteraction Les périphériques dentrée, styles dinteraction, techniques dinteraction, et les modes.

Présentations similaires


Présentation au sujet: "Linteraction Les périphériques dentrée, styles dinteraction, techniques dinteraction, et les modes."— Transcription de la présentation:

1 Linteraction Les périphériques dentrée, styles dinteraction, techniques dinteraction, et les modes

2 Les périphériques dentrée ou dispositifs dentrée (« input devices »)

3 Comment font les humains pour entrer/exprimer de linformation ? Mains – Mouvements, gestes, pointage (avec souris etc.) – Écriture – Appuyer/tourner des boutons, appuyer des touches (sur un clavier) Voix Visage La pensée Autres … ? (Anecdote: et la règle du 7%-38%-55% (verbale, intonation, visage))http://fr.wikipedia.org/wiki/Albert_Mehrabian

4 Quelles sortes dinformations sont exprimées par les humains ? interaction tasks classify the fundamental types of information entered (définition du livre de Foley et al., Computer Graphics: Principles and Practice) Foley et al. donnent une liste des 6 types dinformations: – spécifier une position – saisir du texte – sélectionner un objet – quantifier (c.-à-d. saisir un numéro) – spécifier une orientation – spécifier un chemin ou une trajectoire (par exemple, pour animer un objet) Autres ?

5 Les périphériques dentrée: les claviers

6

7 Clavier pliable pour Palm Pilot Clavier flexible; 24 $ à (prix de 2008)

8 Clavier projeté 160$ à (prix de 2008)

9 Optimus

10 Optimus Maximus Chacune des 113 touches contient un écran de 48x48 pixels $ US ! (prix de 2008)

11 Optimus Maximus Configuré pour langlais

12 Optimus Maximus Configuré pour le russe

13 Optimus Maximus Configuré pour le jeu « Half-life »

14 Optimus Maximus Configuré pour « Photoshop »

15 Boutons sur les magnétophones Le statu quo: des boutons uniformes Boutons avec différentes formes: permettent de les utiliser sans regarder (eyes-free operation)

16 Clavier de piano

17 Clavier virtuel du iPhone de Apple

18 Clavier de Scholes versus clavier de Dvorak Conçu en 1873 ! Reste encore la norme. Nest toujours pas la norme … :-( Remarquez que toutes les voyelles se trouvent sous une main dans la rangée du milieu

19 Comparaison avec Dvorak

20 Boutons surchargés (overloaded) de fonctions Comment saisir des lettres de lalphabet avec un clavier numérique? Stratégies: - Multitap: appuyer la touche 2 une fois pour a, deux fois pour b, trois fois pour c - Permet de saisir du texte sans regarder (eyes-free operation) - Comment saisir des lettres répétées? Avec une pause (timeout) - T9: cherche des mots probables dans un dictionnaire - Appuyer une touche Next pour corriger si la chaîne suggérée nest pas la bonne - Difficile dentrer des mots qui ne sont pas dans le dictionnaire - LetterWise (MacKenzie et al. 2001): cherche une chaîne de caractères probable dans un tableau de chaînes de N caractères - Nécessite moins de mémoire que le dictionnaire de T9 - Plus rapide que Multitap (Pour plus dinformations, voir aussi Wigdor et Balakrishnan 2004.)

21 TiltText (Wigdor et Balakrishnan, 2003)

22 Demi clavier (Half Keyboard) de Matias Corp.

23 « Septambic keyer » ou « chorded keyboard » Combien de combinaisons de touches sont possibles ? 4 x 2 4 – 1 = 63 « accords » possibles

24 Les périphériques dentrée: les périphériques de pointage (pointing devices)

25 La première souris 1968 Douglas Engelbart Stanford Research Institute Deux galets pour x et y

26 30+ ans plus tard Pavé tactile (touchpad) Rotation sensing Rockin Mouse Retour haptique (retour de force, force feedback)

27 Dautres sortes de dispositifs de pointage 2D Tablette numérisante ou tablette graphique (digitizing tablet, graphics tablet) avec stylet (stylus) et/ou souris (puck) Écran tactile (touchscreen) Crayon optique (light pen) Pavé tactile (touchpad) Manette, manche à balai (joystick) –isométrique (rigide, capte la pression, exemple: Trackpoint) –élastique (comme isotonique, mais retourne au centre lorsquelle est lâchée) –isotonique (peut-être déplacée librement) Boule de commande (trackball) Oculomètre (command oculaire, eye tracking)

28 TrackPoint (manette isométrique) Pavé tactile (« touchpad »)

29 Boules de commande de Logitech

30 Tablettes graphiques Wacom Bamboo 5.8x3.7 pouces; 80$ Wacom Cintiq 21UX avec écran intégré 21.3 pouces (17x12.75); 2500$ Wacom Intuos3 12x19 pouces; 750$ (prix de 2008)

31 Périphériques pour tablettes Les stylets peuvent avoir un capteur de pression au bout un bouton sur le bout du stylet pour permettre un clic un bouton sur le côté (« barrel button ») une molette (« scroll wheel ») quon peut tourner

32 IntuPaint (Vandoren et al. 2008) et FluidPaint (Vandoren et al. 2009)

33 Propriétés des dispositifs de pointage Capture absolue vs rélative – Exemple: la souris capte des mouvements relatifs – Exemple: les tablettes numérisantes capte une position absolue, mais peuvent être utilisées en mode absolu ou en mode relatif pour déplacer un curseur – Laquelle est plus générale? Autrement dit, laquelle permet de simuler lautre si on veut? Réponse: capture absolue

34 Propriétés des dispositifs de pointage (2) Pointage direct vs indirect – Pointage direct: les espaces dentrée et de sortie coïncident – Exemple: une souris, ou une tablette numérisante sans écran intégré, permettent un pointage indirect – Exemple: un écran tactile, ou une tablette numérisante avec écran intégré, permettent un pointage direct – Lequel est plus intuitif ? direct – Lequel est plus prévisible ? direct – Lequel est moins fatiguant ? indirect – Lequel évite de cacher le retour visuel ? indirect – Lequel est préféré par les artistes/graphistes ? ça dépend – Lequel est plus précis ? ça dépend non de la dimension direct/indirect, mais si on pointe avec notre doigt ou un intermédiaire

35 Propriétés des dispositifs de pointage (3) Capture discrète vs continue – Exemple: une souris capte une position (essentiellement) continue, mais on pourrait larrondir vers une de N positions discrètes si on voulais – Exemple: touches de flêches (ou touches de direction), ou un interrupteur à N positions, permettent de capter des données discrètes – Laquelle est plus générale ? Les deux peuvent simuler lautre

36 Propriétés des dispositifs de pointage (4) Contrôle de position (ou contrôle dordre zéro) vs contrôle de vitesse (ou contrôle de taux ou contrôle de premier ordre) – Contrôle de vitesse: la position du périphérique détermine la vitesse à laquelle une autre variable (ex: position de curseur) change – Exemple de contrôle de vitesse avec une souris, dans Microsoft Word 2007: La vitesse de défilement est déterminée par le déplacement de la souris – Exemple: la fenêtre sur une porte dautomobile peut être ouverte/fermée avec un levier (contrôle de position) ou bien un interrupteur (contrôle de vitesse) – Exemple: souris capte une position, et permet une contrôle de position ou bien une contrôle de vitesse – Exemple: manette isométrique ne permet quune contrôle de vitesse – Laquelle est plus générale ? position – Laquelle permet mieux dêtre précis ? position – Laquelle nécessite typiquement moins despace sur un bureau ? vitesse (exemple extrême de cela: le TrackPoint, qui prend < 1 cm carré)

37 Périphériques de pointage à contrôle de vitesse, pour le 3D Spaceball Spacemouse Spaceball 5000 Magellan SpaceNavigator (60$) 3dconnexion.com (en 2008) Dautres produits de 3dconnexion.com (en 2008)

38 Taxonomie des périphériques dentrée (Buxton) M: intermédiaire Méchanique T: Toucher

39 Quelques propriétés avantageuses de la souris Le poids de la souris stabilise et atténue les tremblements dans la main. La direction de mouvement des boutons est perpendiculaire au plan de mouvement de la souris. Donc, on peut appuyer un bouton sans affecter la position de la souris (contrairement aux boutons sur le côté des stylets). On peut lâcher et ressaisir la souris sans changer sa position. Quels autres périphériques ont ces propriétés ? (Pour une analyse plus détaillée des propriétés avantageuses de la souris, voir, par exemple, Balakrishnan et al. 1997, )

40 Modèle à trois états de Buxton (1990) État 0: pas de coordonnées (x,y) États 1 et 2: la position (x,y) est captée Exemples: Tablette numérisante: états 0, 1, 2 Souris: états 1, 2 Écran tactile: états 0, 1

41 Modèle à trois états de Buxton (1990) État 0: pas de coordonnées (x,y) États 1 et 2: la position (x,y) est captée Exemples: Tablette numérisante: états 0, 1, 2 Souris: états 1, 2 Écran tactile: états 0, 1 État 0: hors de portée sans coordonnées État 1: survol (x,y) État 2: glissement (x,y)

42 TouchMouse (Hinckley et Sinclair 1999) États 0, 1, 2

43 TouchMouse (Hinckley et Sinclair 1999)

44 Pop Through Buttons ( Zeleznik et al. 2001, )

45 PreSence (Rekimoto et al. 2003)

46 Haptic Pen Lee et al., "Haptic pen: a tactile feedback stylus for touch screens", UIST 2004

47 Handheld Projector and Pen Cao et Balakrishnan, "Interacting with Dynamically Defined Information Spaces using a Handheld Projector and a Pen", UIST 2006

48 PenLight Song et al., "PenLight: combining a mobile projector and a digital pen for dynamic visual overlay", CHI 2009

49 Pointing Devices used for Text Entry ? Dasher (David MacKay) –http://www.inference.phy.cam.ac.uk/dasher/http://www.inference.phy.cam.ac.uk/dasher/ –http://www.inference.phy.cam.ac.uk/dasher/TryJavaDasherNow.htmlhttp://www.inference.phy.cam.ac.uk/dasher/TryJavaDasherNow.html –http://www.youtube.com/watch?v=0d6yIquOKQ0http://www.youtube.com/watch?v=0d6yIquOKQ0

50 Typing Devices used for Pointing ? QPointer, by Commodio –http://www.commodio.com/products_keyboard.htmlhttp://www.commodio.com/products_keyboard.html –video

51 Autres périphériques dentrée?

52 Périphériques à plusieurs degrés de liberté (« High Degree-of-Freedom devices »)

53 Le « Monkey » (W. Bradford Paley, didi.com)

54 ShapeTape measurand.com Balakrishnan et al. 1999

55 Un répertoire de périphériques dentrée Plus de 20 catégories de dispositifs

56 Les styles dinteraction

57 Quelques styles dinteraction (interaction styles,interaction paradigms) Entrée via langage de commande –Entrée habituellement par texte, mais pourrait être par reconnaissance de la parole –Syntaxe rigide et vocabulaire limité Entrée via langue naturelle –Entrée par texte ou par reconnaissance de la parole –Syntaxe dentrée beaucoup plus flexible Autres formes dentrée audio –Entrée de parole numérisé (sans reconnaissance), par exemple: message destiné à une boîte vocale –Entrée vocale sans parole (exemple: Igarashi et Hughes 2001) Sortie audio –Sortie audio sans parole (effets sonores, alarmes, etc.) –Synthèse de la parole Menus Formulaires WIMPs / GUIs Manipulation directe Interaction gestuelle

58 Command Languages User-initiated Harder for beginner, can be more efficient for expert Demands good retention by casual, infrequent users User must remember syntax Example: UNIX –ls -l *.doc –grep "^From:" inbox | grep –i robert Some command languages (e.g. shell languages in UNIX) are extremely flexible (e.g. pipelining, macros, scripts …)

59 Command Names Hard to choose best, most natural command name –(Bad) Example: grep Designers have difficulty choosing best name –Probability( 2 individuals generating same name) = (Furnas et al. 1987) –Delete, remove, expunge, wipe out, take away,... A possible solution: rich aliases in command names Use of abbreviations –Can increase typing efficiency, but is dangerous too ! –Compromise: have full words and abbreviations (e.g. gdb) –Alternative solution: use auto-completion Spelling a problem –But spelling checkers and correctors feasible

60 Langue naturelle (« Natural Language ») DEC Voice (vidéo) (Cowley et Jones, 1993) – Reconnaissance de paroles – Synthèse de paroles

61 Langue naturelle: quelques observations … Mains et yeux libérés pour dautres tâches Fiabilité de la reconnaissance? Dépend de … – Emplacement du micro – Bruits de fond – Taille du vocabulaire à reconnaître Utilisation pour entrer beaucoup de données? – La fatigue et lennui peuvent changer la qualité de la voix de lutilisateur – Une entrée multimodale (voix pour commandes, clavier pour données) serait peut-être mieux

62 Langue naturelle: quelques observations … (2) Utilisation pour pointer? – La souris est mieux pour spécifier des points précis Messages derreur – Ne pas donner toujours le même message derreur – Donner plûtot progressivement plus de conseils ou des instructions différentes si une erreur est répétée Recherche de mots clés dans une phrase entrée – Reconnaissance plus fiable car le vocabulaire est restreint – Peut donner une fausse impression que la machine comprend vraiment

63 Langue naturelle Avatar REA (vidéo) (Cassell et al. 1999) – Reconnaissance de paroles – Synthèse de paroles

64 Quelques observations On voit une indication visuelle de létat du système, nous disant sil nous écoute ou non – REA tourne son dos vers nous lorsquelle nest pas à lécoute On est capable dinterrompre REA pour parler

65 Langue naturelle « Put that there » (vidéo) (Bolt 1980) – Reconnaissance de paroles – Pointage – Multimodal

66 Langue naturelle « Spoken Language Shell » et « Office Manager » (vidéo) (Lunati et Rudnicky 1991) – Reconnaissance de paroles – Pointage – Multimodal

67 Quelques observations Notion de focus de voix – Chaque application à moins de mots à reconnaître, donc la fiabilité est meilleure Contrôle sur le « endpointing » (segmentation des phrases entrées) – Une contrôle manuelle va augmenter la fiabilité aussi Correction (par voix ou par clavier) des parties de lentrée qui ont été mal-reconnues – Remarque: nécessite un retour visuel

68 Voice + Gestural Input Gestures as annotations Voice annotations VIDEO Wang Freestyle (Hsiao & Levine 1989) Remarque: une fois enregistrés, les gestes pourraient être utilisés pour indexer dans laudio

69 Entrée audio sans paroles Igarashi et Hughes 2001

70 Sortie audio Usine « Arkola » (vidéo) (Gaver et al. 1991) – Simulation dusine avec effets sonores

71 Sortie audio Le « Earpod » (vidéo) (Zhao et al. 2007)

72 Menu Dialogues Computer-initiated display of alternatives –Text –Voice, e.g., Would you like to speak to Linda Susie Pierre... or 4. The operator Items can have arguments –Either typed in, or in submenus Menu display and organization –Menu items displayed as words or pictographs (icons)? –Menu pages simple, pull-down, pop-up, scrolled, …

73 Menu Dialogues Depth (d) versus breadth (b) tradeoff: n = b d –Very deep: b=2d=6 –Intermediate: b=4d=3 –Shallower: b=8d=2 –One-level:b=64d=1 –Generally, breadth is better than depth Menu organization –Logical, alphabetic, frequency of use, recency of use –Adaptive versus adaptable menus

74 WIMPs (Windows, Icons, Mouse Program or Windows, Icons, Menus, Pointer) or GUIs (Graphical User Interfaces) Components: –Windows (one of them active) –Menus –Icons –Controls and control panels –Query and message boxes –Mouse/keyboard interface –Direct manipulation

75 Les fenêtres (windows) Habituellement rectangulaires Une ou plusieurs fenêtres par logiciel ou par tâche Fenêtres non-chevauchantes (Tiled windows) Fenêtres chevauchantes (Overlapping windows)

76 Fenêtres non-chevauchantes dans Eclipse

77 Elastic Windows (Kandogan et Shneiderman)

78 Compiz : système de fenêtrage sur linux avec des effets visuels 2D/3D accélérés par GPU

79 Direct Manipulation Shneidermans definition –Continuous representation of the object of interest –Manipulation through physical actions –Rapid, incremental, reversible operations Examples –Dragging a file to a trash can instead of typing del foo.txt –WYSIWYG text editors (like Xerox Star, Microsoft Word) –Spreadsheets –Musical score editors –Programming languages ? Why Direct Manipulation ? –One goal of interaction design: Minimize the effort required to translate the users real world goals into system goals.

80 Direct Manipulation Text fields for entering positions vs 3D widgets that can be dragged.

81 Gestural Input Gestures can be executed rapidly, and can be used as symbols to activate commands or select objects Sketches –can be used to quickly enter text or diagrams, without requiring the user to switch from the pointing device to something else –Have an informal, loose, implicit structure –Can carry much more (implicit) information than typed text Gestures as characters to recognize –Graffiti, Unistroke

82 Alvarado et Davis 2001

83 LaViola 2007

84 Phun (2008) Jeu/simulateur physique gratuit avec entrée gestuelle

85 Phun

86 Entrée gestuelle « Teddy » (Igarashi et al. 1999)

87 Entrée gestuelle Les gestes comme données, exemple: objets et mouvements VIDEO GENESYS Animation (Ron Baecker, MIT, 1971) Le stylet sert pour faire de la capture de mouvements (motion capture ou mocap)

88 Entrée gestuelle Kurtenbach et Buxton (vidéo) –Exemple de geste: encercler, déplacer, et une lettre "C" pour copier des formes

89 Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)

90 Techniques dinteraction (Interaction Techniques) are ways to use input devices to enter information "are made up of single input-device actions. (Foley, et al. Computer Graphics: Principles and Practice)

91 Verbes (actions, commandes, outils, opérations) Noms (objets, endroits)

92 Verbes dans un menu déroulant Noms (objets, endroits)

93 Verbes dans un menu contextuel

94 Les modes créent la possibilité davoir des erreurs de mode, où lutilisateur se croît en un mode lorsquil est dans un autre Un retour visuel indiquant le mode actuel est bien, mais souvent nest pas assez pour empêcher les erreurs de mode –Exemples de retours visuels indiquant le mode: icône doutil surligné, forme de curseur, barre détat Les menus contextuels aided… –À éviter les erreurs de mode, via des modes temporaires et (parfois) un retour kinesthésique (pression dans le doigt qui tient une touche appuyée) –À augmenter lespace décran disponible pour montrer le contenu/données (quoique ce contenu/données seront cachés temporairement pendant que le menu est affiché) –Diminuent la distance à traverser avec le curseur –Peuvent fusionner la sélection de nom et verbe (sélection plus rapide; meilleur couplage mental (mental chunking – Buxton 1986))

95 Étant donné tous ces avantages des menus contextuels, pouvons- nous améliorer leur conception? Y a t-il des widgets ou des techniques dinteraction encore mieux?

96 Menu radial (Radial Menu, Pie Menu)

97 Exemple utilisant, effectivement, des menus radiaux Yatani et al., CHI 2008

98 Menus radiaux versus menus linéaires Les directions sont plus mémorables et plus faciles à reproduire que les distances.

99 Menu radial hiéarchique

100 « Mouse Gestures » pour Firefox

101 Marking Menu Scale invariant recognition: Reconnaissance des gestes (marques) qui ne dépend pas de la longueur des segments; seule les angles des segments importe. Donc, les marques peuvent être dessinées en petit et donc rapidement, de façon balistique. Un utilisateur qui sait quelle marque dessiner na même pas besoin de voir le menu safficher.

102 Ensemble de marques découvrables (self-revealing), contrairement aux interfaces gestuelles habituelles

103 Présentation graphique améliorée

104 Marking Menus Vidéo Démonstration (cobaye voluntaire s.v.p.?)

105 Transition de néophyte en expert Menus traditionels: Pointage versus racourcis Marking Menus: Transition graduelle et naturelle !

106 Les Marking Menus Permettent une sélection plus rapide quavec les menus linéaires (marques directionnelles et ballistques) Peuvent être utilisés sans regarder lécran (eyes-free operation) Ont un ensemble de gestes découvrables Permettent une transition graduelle et naturelle de novice en expert Peuvent être utilisés pour sélectionner nom et verbe Sont limités à environ 8 commandes par sous- menu, et à une profondeur denviron 3 niveaux

107 Résumé Les modes temporaires, maintenus en appuyant un bouton ou touche avec retour kinesthésique … –Permettent déviter les erreurs de mode –Exemple: une touche/racourci quon doit garder appuyée pour maintenir un changement temporaire de mode –Exemple: widgets popup (contextuels) Peuvent combiner la sélection de nom+verbe Consomment moins despace sur lécran Un widget popup avec plusieurs avantages: Marking Menus –Permettent des gestes balistiques –Transition graduelle dutilisateur novice en utilisateur expert

108 Dautres exemples de modes, outils, etc. vidéo: "Selection and Positioning tasks", Buxton 1983

109 Quelques observations Techniques montrées dans la vidéo: –1. Glisser-déposer –2. Barre doutils modale –3. « Moving menu » (menu contextuel) –4. « Moving menu » avec mémoire Questions: parmi les 4 techniques, lesquelles … –Ne sont pas modales (ou bien ont seulement des modes temporaires avec retour kinesthésique), donc ont peu de possibilités derreurs de mode ? –Évitent des mouvements « aller-retour » entre la toile et la barre doutils, et ne nécessitent pas de consacrer de lespace à une barre doutils ? –Ont des affordances (barre doutils) visibles, montrant les opérations possibles ? –Permettent quune même forme soit créée plusieurs fois de suite, très rapidement ? –Assurent que chaque forme est toujours sélectionnée avec le même geste de glissement, permettant à lutilisateur dapprendre les gestes par cœur et de les exécuter rapidement ?

110 Can we extend popup menus/widgets for other uses?

111 Dautres menus et widgets contextuels Hotbox (Kurtenbach et al., 1999), Control Menus (Pook et al., 2000), Flow Menus (Guimbretière et Winograd, 2000), FaST Sliders (McGuffin et al., 2002), Tracking Menus (Fitzmaurice et al., 2003), Trailing Widget (Forlines et al., 2006) Hover Widgets (Grossman et al., 2006), PieCursor (Fitzmaurice et al., 2008) Ces widgets et techniques dinteraction sont adaptés pour: –Un grand nombre de commandes –Le contrôle de variables continues –Lentrée de texte et de nombres avec des gestes –Lutilisation dun stylet (par exemple, sur un tablet PC)

112 Le « hotbox »: un menu 2D dans Maya

113 FlowMenus (Guimbretière et al., 2000)

114 Manipulation 2D avec un FlowMenu (Guimbretière et al., 2000)

115 Toolglass : manipulation bimanuelle Clic-à-travers: sélection simultanée de nom (objet) et de verbe (commande) !

116 Dautres utilisations des deux mains?

117 Entrée bimanuelle (à deux mains) Utilisations possibles: Main dominante (MD) sur la souris, main non-dominante (MND) sur le clavier Deux souris, deux curseurs, symétrique : –Est-ce quon peut cliquer plus rapidement en alternant entre les deux mains? –Translation+rotation+changement déchelle simultanée en 2D Deux souris, asymétrique : –MND pour la caméra, MD pour sélectionner ou manipuler –MND pour la palette doutils, MD pour cliquer-à-travers (Toolglass)

118 Modèle de chaîne cinématique (Yves Guiard 1987) La MND (main non-dominante) effectue des mouvements plus lents et plus grossiers que la MD (main dominante) Le mouvement de la MND précède le mouvement de la MD La MND établit une référence de travail pour la MD


Télécharger ppt "Linteraction Les périphériques dentrée, styles dinteraction, techniques dinteraction, et les modes."

Présentations similaires


Annonces Google