L

1
Linteraction

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

2
Les périphériques dentréeou dispositifs
dentrée( input devices )
3
Comment font les humains pour entrer/exprimer de
linformation ?

• Mains
• Mouvements, gestes, pointage (avec souris etc.)
• Appuyer/tourner des boutons,appuyer des touches
  (sur un clavier)
• Voix
• Visage
• Autres ?
• (Anecdote http//fr.wikipedia.org/wiki/Albert_Meh
  rabianet la règle du 7-38-55 (verbale,
  intonation, visage))

4
Quelles sortes dinformationssont entrées par
les humains ?

• interaction tasks classify the fundamental types
  of information entered (Foley et al., Computer
  Graphics Principles and Practice)
• Foley et al. donnent une liste des 6 types
  dinformations
• spécifier une position
• enter du texte
• sélectionner un objet
• quantifier (c.-à-d. entrer un numéro)
• spécifier une orientation
• spécifier un chemin (par exemple, pour animer un
  objet)
• Autres ?

5
Les périphériques dentrée les claviers
6
http//world.std.com/jdostale/kbd/SpaceCadet1.jpe
g
7
Clavier pliable pour Palm Pilot
Clavier flexible 24 à http//www.thinkgeek.com/
computing/input/5a7f/?cpgab(prix de 2008)
8
Clavier projeté
http//en.wikipedia.org/wiki/Projection_keyboard
160 à http//www.thinkgeek.com/computing/input/81
93/(prix de 2008)
9
Optimus
http//computer.howstuffworks.com/keyboard.htm/pri
ntable
10
Optimus Maximus
Chacune des 113 touches contient un écran de
48x48 pixels. 1864 US ! (prix de
2008) http//www.artlebedev.com/everything/optimu
s/
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 du Apple iPhone
18
Clavier de Scholes versus clavier de Dvorak
Nest toujours pas la norme -( Remarquez que
toutes les voyelles se trouvent sous une main
dans la rangée du milieu
Conçu en 1873 ! Reste encore la norme.
19
Comparaison avec Dvorak
http//infohost.nmt.edu/shipman/ergo/parkinson.ht
ml
20
Boutons surchargés (overloaded) de fonctions

• Comment entrer 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 dentrer du texte sans regarder
  (eyes-free operation)
• Comment entrer 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
Demi clavier (Half Keyboard) de Matias Corp.
http//www.halfkeyboard.com/
22
 Septambic keyer ou  chorded keyboard 
4 x 24 1 63  accords  possibles
23
Les périphériques dentréeles périphériques de
pointage(pointing devices)
24
La première souris

• 1968
• Douglas Engelbart
• Stanford Research Institute
• Deux galets pour x et y

25
30 ans plus tard
Rotation sensing
Rockin Mouse
Retour haptique(retoure de force,force
feedback)
Touchpad
26
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)
• Command oculaire, oculométrie (eye tracking)

27
TrackPoint (manette isométrique)
Pavé tactile ( touchpad )
28
Boules de commande de Logitech
29
Tablettes numérisantes
Wacom Bamboo 5.8x3.7 pouces 80
Wacom Intuos3 12x19 pouces 750
Wacom Cintiq 21UX avec écran intégré 21.3 pouces
(17x12.75) 2500
(prix de 2008)
30
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

31
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

32
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

33
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 ? continue

34
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éepar 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 lt 1 cm carré)

35
Périphériques de pointageà contrôle de vitesse,
pour le 3D
Spaceball
Spaceball 5000
Spacemouse
Magellan
SpaceNavigator (60) 3dconnexion.com (en 2008)
Dautres produits de 3dconnexion.com (en 2008)
36
Taxonomie des périphériques dentrée (Buxton)
M intermédiaire Méchanique T Toucher
37
Quelques propriétésavantageuses 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,
  http//doi.acm.org/10.1145/258549.258778 )

38
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

39
TouchMouse(Hinckley et Sinclair 1999)
États 0, 1, 2
40
TouchMouse(Hinckley et Sinclair 1999)
41
PreSence (Rekimoto et al. 2003)
42
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/TryJavaD
  asherNow.html

43
Typing Devices used for Pointing ?

• QPointer, by Commodio
• http//www.commodio.com/products_keyboard.html
• video

44
Autres périphériques dentrée?
45
Périphériques à plusieursdegrés de
liberté( High Degree-of-Freedom devices )
46
Le  Monkey (W. Bradford Paley, didi.com)
47
ShapeTape
measurand.com
Balakrishnan et al. 1999
48
Un répertoire de périphériques dentrée

• http//www.billbuxton.com/InputSources.html
• Plus de 20 catégories de dispositifs

49
Les styles dinteraction
50
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

51
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 )

52
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)
  0.07-0.18(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

53
Langue naturelle( Natural Language )

• DEC Voice (vidéo) (Cowley et Jones, 1993)
• Reconnaissance de paroles
• Synthèse de paroles

54
Langue naturellequelques 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

55
Langue naturellequelques 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

56
Langue naturelle

• Avatar REA (vidéo) (Cassell et al. 1999)
• Reconnaissance de paroles
• Synthèse de paroles

57
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

58
Langue naturelle

•  Put that there  (vidéo) (Bolt 1980)
• Reconnaissance de paroles
• Pointage
• Multimodal

59
Langue naturelle

•  Spoken Language Shell  et  Office
  Manager  (vidéo) (Lunati et Rudnicky 1991)
• Reconnaissance de paroles
• Pointage
• Multimodal

60
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

61
Sortie audio

•  A sad story  (vidéo)
• Une histoire racontée avec des sons, sans mots

62
Sortie audio

• Usine  Arkola  (vidéo) (Gaver et al. 1991)
• Simulation dusine avec effets sonores

63
Sortie audio

• Le  Earpod  (vidéo) (Zhao et al. 2007)

64
Entrée audio sans paroles

• Igarashi et Hughes 2001

65
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

66
Menu Dialogues

• Computer-initiated display of alternatives
• Text
• Voice, e.g., Would you like to speak to... 1.
  Linda... 2. Susie... 3. 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,

67
Menu Dialogues

• Depth (d) versus breadth (b) tradeoff n bd
• Very deep b2 d6
• Intermediate b4 d3
• Shallower b8 d2
• One-level b64 d1
• Generally, breadth is better than depth
• Menu organization
• Logical, alphabetic, frequency of use, recency of
  use
• Adaptive versus adaptable menus

68
WIMPs (Windows, Icons, Mouse Program or Windows,
Icons, Menus, Pointer) orGUIs (Graphical User
Interfaces)

• Components
• Windows (one of them active)
• Menus
• Icons
• Controls and control panels
• Query and message boxes
• Mouse/keyboard interface
• Direct manipulation

69
Windows

• Rectangular areas
• Multiple, concurrent, interleaved tasks
• Individual contexts
• Tiled (left, below) overlapping (right, below)
  windows

70
Elastic Windows (Kandogan et Shneiderman)
71
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.

72
Direct Manipulation
Text fields for entering positions vs
3D widgets that can be dragged.
73
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

74

• Alvarado et Davis 2001
• http//www.youtube.com/watch?vNZNTgglPbUA

75

• LaViola 2007 http//doi.acm.org/10.1145/1281500.12
  81558

76
Phun (2008)

• Jeu/simulateur physique gratuit avec entrée
  gestuelle
• http//www.acc.umu.se/emilk/

77
Phun
78
Entrée gestuelle

•  Teddy  (Igarashi et al. 1999)

79
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)

80
Entrée gestuelle

• Kurtenbach et Buxton (vidéo)
• Exemple de geste encercler, déplacer, et une
  lettre "C" pour copier des formes

81
Les modes, et quelques exemplesde techniques
dinteraction(utilisant lentrée gestuelle et
autre)
82
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)

83
Verbes(actions,commandes,outils,opérations)
Noms(objets,endroits)
84
Verbes dans un menu déroulant
Noms(objets,endroits)
85
Verbes dansun menu contextuel
Noms(objets,endroits)
86

• 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
  modeicô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))

87
É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?
88
Menu radial(Radial Menu, Pie Menu)
89
Exemple utilisant, effectivement, des menus
radiaux
Yatani et al., CHI 2008
90
Menus radiaux versusmenus linéaires

• Les directions sont plus mémorables et plus
  faciles à reproduire que les distances.

91
Menu radial hiéarchique
92
 Mouse Gestures  pour Firefox
93
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.

94
Ensemble de marques découvrables
(self-revealing), contrairement aux interfaces
gestuelles habituelles
95
Présentation graphique améliorée
96
Marking Menus

• Vidéo
• Démonstration (cobaye voluntaire s.v.p.?)

97
Transition de néophyte en expert
Marking MenusTransition graduelleet naturelle !
Menus traditionelsPointage versus racourcis
98

• Les Marking Menus
• Permettent une sélection plus rapidequavec 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 néophyte en expert
• Peuvent être utilisés pour sélectionnernom et
  verbe
• Sont limités à environ 8 commandes par sous-menu,
  et à une profondeur denviron 3 niveaux

99
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 nomverbe
• Consomment moins despace sur lécran
• Un widget popup avec plusieurs avantages
  Marking Menus
• Permettent des gestes balistiques
• Transition graduelle dutilisateur néophyte en
  utilisateur expert

100
Dautres exemplesde modes, outils, etc.

• vidéo "Selection and Positioning tasks", Buxton
  1983

101
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 ?

102
Can we extend popup menus/widgetsfor other uses?
103
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)

104
Le  hotbox  un menu 2D dans Maya
105
FlowMenus (Guimbretière et al., 2000)
106
2D manipulation with FlowMenus(Guimbretière et
al., 2000)
107
Toolglass bimanual input
Click-through Simultaneousselection of verb and
noun!
108
Other uses of two hands?
109
Two-Handed (Bimanual) Input

• Potential uses
• Dominant hand (DH) on mouse,non-dominant hand
  (NDH) on keyboard
• Two mice, two cursors, symmetric
• Rapid clicking by alternating between hands?
• Simultaneous rotationscalingpositioning in
  2Dor rotationzoomingpanning in 2D
• Two mice, asymmetric
• NDH for camera, DH for selection/manipulation
• NDH for tool palette, DH for clicking-through
  (Toolglass)

110
Modèle de chaîne cinématique(Yves Guiard 1987)

• MND (main non-dominante) effectue des mouvements
  plus lents et plus grossiers que la MD (main
  dominante)
• Mouvement de la MND précède le mouvement de la MD
• MND établit une référence de travail pour la MD