Download - Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)
![Page 1: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/1.jpg)
Les modes, et quelques exemplesde techniques d’interaction
(utilisant l’entrée gestuelle et autre)
![Page 2: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/2.jpg)
Techniques d’interaction (“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”)
![Page 3: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/3.jpg)
Verbes(actions,commandes,outils,opérations) Noms
(objets,endroits)
![Page 4: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/4.jpg)
Verbes dans un menu déroulant
Noms(objets,endroits)
![Page 5: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/5.jpg)
Noms(objets,endroits)
Verbes dansun menu contextuel
![Page 6: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/6.jpg)
• Les modes créent la possibilité d’avoir des erreurs de mode, où l’utilisateur se croît en un mode lorsqu’il est dans un autre
• Un retour visuel indiquant le mode actuel est bien, mais souvent n’est pas assez pour empêcher les erreurs de mode– Exemples de retours visuels indiquant le mode:
icône d’outil 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 l’espace d’écran disponible pour montrer le contenu/données
– 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))
![Page 7: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/7.jpg)
Étant donné tous ces avantages des menus contextuels, pouvons-nous améliorer leur conception?
Y a t-il des widgets ou des techniques d’interaction encore
mieux?
![Page 8: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/8.jpg)
Menu radial(“Radial Menu”, “Pie Menu”)
![Page 9: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/9.jpg)
Menus radiaux versusmenus linéaires
• Les directions sont plus mémorables et plus faciles à reproduire que les directions.
![Page 10: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/10.jpg)
Menu radial hiéarchique
![Page 11: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/11.jpg)
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 n’a même pas besoin de voir le menu s’afficher.
![Page 12: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/12.jpg)
Ensemble de marques découvrables (“self-revealing”), contrairement aux interfaces gestuelles habituelles
![Page 13: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/13.jpg)
Présentation graphique améliorée
![Page 14: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/14.jpg)
Marking Menus
• Vidéo• Démonstration (cobaye voluntaire s.v.p.?)
![Page 15: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/15.jpg)
Transition de néophyte en expert
Menus traditionels:Pointage versus racourcis
Marking Menus:Transition graduelleet naturelle !
![Page 16: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/16.jpg)
Les Marking Menus• Permettent une sélection plus rapide
qu’avec les menus linéaires(marques directionnelles et ballistques)
• Ont un ensemble de gestes découvrables• Permettent une transition graduelle et
naturelle de néophyte en expert• Peuvent être utilisés pour sélectionner
nom et verbe• Sont limités à environ 8 commandes par
sous-menu, et à une profondeur d’environ 3 niveaux
![Page 17: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/17.jpg)
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 qu’on 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 d’espace sur l’écran
• Un widget “popup” avec plusieurs avantages: Marking Menus– Permettent des gestes balistiques– Transition graduelle d’utilisateur néophyte en utilisateur expert
![Page 18: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/18.jpg)
D’autres exemplesde modes, outils, etc.
• vidéo: "Selection and Positioning tasks", Buxton 1983
![Page 19: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/19.jpg)
Can we extend popup menus/widgetsfor other uses?
![Page 20: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/20.jpg)
Other popup menus and widgets
• Hotbox, Control Menus, Flow Menus, FaST Sliders, Tracking Menus, Hover Widgets …
• These techniques and widgets incorporate adaptations for:– large numbers of commands– controlling continuous variables– entering text and numbers with strokes– use with pen input (e.g. tablet PC)
![Page 21: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/21.jpg)
Le « hotbox »: un menu 2D dans Maya
![Page 22: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/22.jpg)
FlowMenus (Guimbretière et al., 2000)
![Page 23: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/23.jpg)
2D manipulation with FlowMenus(Guimbretière et al., 2000)
![Page 24: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/24.jpg)
Toolglass: bimanual input
Click-through: Simultaneousselection of verb and noun!
![Page 25: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/25.jpg)
Other uses of two hands?
![Page 26: Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)](https://reader034.vdocuments.us/reader034/viewer/2022051515/551d9db5497959293b8da415/html5/thumbnails/26.jpg)
Two-Handed (Bimanual) InputPotential uses:
• Dominant hand (DH) on mouse,non-dominant hand (NDH) on keyboard
• Two mice, two cursors, symmetric:– Rapid clicking by alternating between hands?– Simultaneous rotation+scaling+positioning in 2D
or rotation+zooming+panning in 2D
• Two mice, asymmetric:– NDH for camera, DH for selection/manipulation– NDH for tool palette, DH for clicking-through
(Toolglass)