L’interaction Les périphériques d’entrée, styles d’interaction, techniques d’interaction, et les modes.

Slides:



Advertisements
Présentations similaires
Été INF1025 Driouch Elmahdi
Advertisements

Module Systèmes d’exploitation
Le Clavier.
contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales à l'Identique 2.0 France License.
contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales à l'Identique.
Interaction Directe contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales à l'Identique.
FORMATION OUTILS « FONCTIONS »
Lexique des manœuvres de base pour utiliser à PowerPoint
La fonction Style Permet de créer des types de texte, par exemple
Principe de défilement du document dans un traitement de texte
le nom du logiciel et le nom du fichier s’appelle la barre des titres
Systèmes d’exploitation
Vidéogramme séance 2 du 13 février 2012 Les Fenêtres Windows Micro Informatique au Cellier Joseph HOHN Séance du 13 février 2012 Sur le thème de Découverte.
Tableau blanc interactif
PRÉSENTATION Logiciel de traitement de texte:
Page 1 Introduction à ATEasy 3.0 Page 2 Quest ce quATEasy 3.0? n Ensemble de développement très simple demploi n Conçu pour développer des bancs de test.
6 novembre 2013 Les modes dinteraction M. Bétrancourt & K. Benetos - Cours Ergonomie des IPM TECFA Technologies pour la Formation et lApprentissage.
PRESENTATION DU LOGICIEL
Créer votre premier document Word II
Prologue : les premiers préparatifs Première étape : Ouvrir le logiciel de création de pages au format HTML (pages Web) Deuxième étape : enregistrer la.
Créer une animation simple Gif avec ImageReady.
La souris.
Concevoir un diaporama avec Power Point.
Que puis-je faire avec WordQ ?
Création d'un diaporama Création d'un diaporama
A la découverte de la bureautique et des fichiers.
TUTO POWER POINT Parole d’école décembre 2010
Les nouveaux modes dinteraction Cours Interaction Personne-Machine 7 juin 2004 Présentation réalisée par Mireille Bétrancourt (
Introduction : Single Display Groupware Kid Pad : exemple de Multiple Input-devices Première étude sur le Multiple Input-devices Seconde étude sur le Multiple.
Les nouveaux modes dinteraction 07 décembre 2011 Mireille Bétrancourt - TECFA, FPSE - Cours Ergonomie des IPM TECFA Technologies pour la Formation et lApprentissage.
Les nouveaux modes dinteraction 23 novembre 2010 Mireille Bétrancourt - TECFA, FPSE - Cours Ergonomie des IPM TECFA Technologies pour la Formation et lApprentissage.
Les modes, et quelques exemples de techniques dinteraction (utilisant lentrée gestuelle et autre)
Interfaces perceptuelles Interaction avec une caméra.
L’interaction Les périphériques d’entrée, styles d’interaction, techniques d’interaction, et les modes.
Interfaces perceptuelles
En group de deux vous allez sassoir dos a dos. Un partenaire regards lecran lautre le mur. Sur lecran il y a un photo quils doivent expliquer au partenaire,
Tuesday, September 30,  Il y a trois types de données qui sont entrées dans les feuilles de calcules. There are three types of data entered in.
L’interaction Les périphériques d’entrée, styles d’interaction, techniques d’interaction, et les modes.
2M : un Espace de Conception pour l’Interaction Bi-Manuelle
 Sil vous plait suivis le “tutorial” dans les pages suivantes. Vous avez toutes la classe pour le finir.  Ouvrir un nouveau feuille de calculs dans.
Biologie – Biochimie - Chimie
Création et présentation d’un tableau avec Word 2007
Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus.
Gestion des fichiers et dossiers
L’interaction Les périphériques d’entrée, styles d’interaction, techniques d’interaction, et les modes.
1 Techniques de Menus : Description, Développement, Evaluation Gilles Bailly 1,2 Directeurs de thèse : Laurence Nigay 1 et Eric Lecolinet 2 LIG Grenoble.
Stuart Pook Eric Lecolinet Guy Vaysseix Emmanuel Barillot
Lancement de Microsoft Word
© 2012 Microsoft Corporation. Tous droits réservés. Planifier une réunion Lync Si vous utilisez Outlook, vous pouvez planifier une réunion Lync à l’aide.
TBI les tableaux blancs interactifs
Introduction à l’informatique en gestion 1 Plan de la leçon Modalités d’affichage La navigation Ouvrir/Enregistrer La saisie La sélection La.
Philippe Cuisinaud, ESSI3, VIMM Christophe Galant, Master ISI, VIMM Henrik Larsson, Master ISI, STREAM Julien Soula, Master ISI, VIMM Première réunion.
Cliquez sur une rubrique
Iup MIAGe 3° année Projet MIAGe Toulouse – Groupe 21 Charte graphique.
Un espace de classification pour l’interaction sur dispositifs mobiles
Modules Chapitre 1 : Système d’exploitation
Université Lyon 2 - TICE 1 : séance 111 TICE 1 - séance 11 Création de schémas Rachid Saadi, Ny Haingo Andrianarisoa
Création JJ Pellé novembre 2014Musique : David Schombert.
Comprendre le SGBDR Microsoft Access – partie 2
L’ordinateur et ses composantes
Un service Internet embarqué en véhicule : évaluation de modalités d’interaction sur simulateur de conduite Jean - François Kamp UBS - Laboratoire Valoria.
L’entrée gestuelle et la reconnaissance de gestes.
Faire déplacer le personnage à l’aide des flèches du clavier Il y a plusieurs façon de procéder selon nos attentes, mais en voici une qui est très simple:
Histoire des interfaces Homme-Machine
Types d’interaction Homme-Machine
Dreamweaver le retour Avec Les Formulaires Les Calques
Pourquoi ne faut-il pas jeter son ordinateur par la fenêtre ?
1 Tableur Excel. 2 Introduction Un tableur est un logiciel permettant de manipuler des données numériques et d'effectuer automatiquement des calculs sur.
MELISSA GOLGEM 2016 Les fonctions de l’ordinateur.
Le Tableur, MS Excel Cours de Dominique Meganck – ICC - IFC Diaporama proposé par FST et adapté par D. Meganck.
Transcription de la présentation:

L’interaction Les périphériques d’entrée, styles d’interaction, techniques d’interaction, et les modes

Les périphériques d’entrée ou dispositifs d’entrée (« input devices »)

Comment font les humains pour entrer/exprimer de l’information ? 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_Mehrabian et la règle du 7%-38%-55% (verbale, intonation, visage))

Quelles sortes d’informations sont 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 d’informations: 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 ?

Les périphériques d’entrée: les claviers

http://world.std.com/~jdostale/kbd/SpaceCadet1.jpeg

Clavier pliable pour Palm Pilot Clavier flexible; 24 $ à http://www.thinkgeek.com/computing/input/5a7f/?cpg=ab(prix de 2008)

Clavier projeté http://en.wikipedia.org/wiki/Projection_keyboard 160$ à http://www.thinkgeek.com/computing/input/8193/ (prix de 2008)

Optimus http://computer.howstuffworks.com/keyboard.htm/printable

Optimus Maximus Chacune des 113 touches contient un écran de 48x48 pixels. 1864 $ US ! (prix de 2008) http://www.artlebedev.com/everything/optimus/

Optimus Maximus Configuré pour l’anglais

Optimus Maximus Configuré pour le russe

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

Optimus Maximus Configuré pour « Photoshop »

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

Clavier de piano Close-up photo: http://afreesingingvoice.com/piano_keys.jpg Photo from side: http://www.kirstenvolness.com/p-logo.jpg Diagram from top: http://www1.webtrick.com/pt/instructors/0/4/8/PianoLayoutImagePNG.PNG

Clavier du Apple iPhone http://www.intomobile.com/wp-content/uploads/2007/06/apple-iphone-intelligent-keyboard-on-screen-demonstration.png

Clavier de Scholes versus clavier de Dvorak N’est 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.

Comparaison avec Dvorak http://infohost.nmt.edu/~shipman/ergo/parkinson.html

Boutons surchargés (“overloaded”) de fonctions Comment entrer des lettres de l’alphabet 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 d’entrer 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 n’est pas la bonne Difficile d’entrer 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 d’informations, voir aussi Wigdor et Balakrishnan 2004.) Closeup of keypad: http://www.cbc.ca/consumers/market/files/services/cellphones/gfx/keypad.jpg

Demi clavier (“Half Keyboard”) de Matias Corp. http://www.halfkeyboard.com/

« Septambic keyer » ou « chorded keyboard » http://en.wikipedia.org/wiki/Keyer 4 x 24 – 1 = 63 « accords » possibles

Les périphériques d’entrée: les périphériques de pointage (“pointing devices”)

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

Retour haptique (retoure de force, “force feedback”) 30+ ans plus tard Rotation sensing Rockin’ Mouse Retour haptique (retoure de force, “force feedback”) Touchpad

D’autres 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 lorsqu’elle est lâchée) isotonique (peut-être déplacée librement) Boule de commande (“trackball”) Command oculaire, oculométrie (“eye tracking”)

TrackPoint (manette isométrique) Images from dell.ca TrackPoint (manette isométrique) Pavé tactile (« touchpad »)

Boules de commande de Logitech

Tablettes numérisantes Wacom Bamboo 5.8x3.7 pouces; 80$ Intuos3: http://oneapiprod.synnex.com/image_technote/I115179539.jpg Others: wacom.com Wacom Intuos3 12x19 pouces; 750$ Wacom Cintiq 21UX avec écran intégré 21.3 pouces (17x12.75); 2500$ (prix de 2008)

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 ») qu’on peut tourner http://www.freetimefoto.com/blog/wp-content/uploads/2007/04/intuos_stylus_lineup.jpg

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 l’autre si on veut? Réponse: capture absolue

Propriétés des dispositifs de pointage (2) Pointage direct vs indirect Pointage direct: les espaces d’entré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

Propriétés des dispositifs de pointage (3) Capture discrète vs continue Exemple: une souris capte une position (essentiellement) continue, mais on pourrait l’arrondir 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 Contrôle de position vs contrôle de vitesse (ou contrôle de taux) Contrôle de vitesse (ou de taux): la position du périphérique détermine la vitesse à laquelle un autre variable (ex: position de curseur) change 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 qu’une contrôle de vitesse Laquelle est plus générale ? position Laquelle nécessite typiquement moins d’espace sur un bureau ? vitesse (exemple extrême de cela: le TrackPoint, qui prend < 1 cm carré)

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

Périphériques de pointage à contrôle de vitesse, pour le 3D Spaceball Spaceball 5000 Spacemouse Spaceball: http://www.schrotthal.de/sgi/misc/spaceball.html Spacemouse: http://www.schrotthal.de/sgi/misc/spacemouse.html Spaceball 5000: http://www.gamedev.net/features/reviews/productreview.asp?productid=509 Magellan photo: http://radiography.tees.ac.uk/soh_research/img/magellan.jpg Magellan diagram: http://www.dgp.toronto.edu/~gf/papers/PhD%20-%20Graspable%20UIs/Thesis.gf.html Magellan SpaceNavigator (60$) 3dconnexion.com (en 2008) D’autres produits de 3dconnexion.com (en 2008)

Taxonomie des périphériques d’entrée (Buxton) M: intermédiaire Méchanique T: Toucher

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, http://doi.acm.org/10.1145/258549.258778 )

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

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

TouchMouse (Hinckley et Sinclair 1999)

PreSence (Rekimoto et al. 2003)

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/TryJavaDasherNow.html

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

Autres périphériques d’entrée?

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

Le « Monkey » (W. Bradford Paley, didi.com) http://www.siggraph.org/publications/newsletter/v32n4/contributions/paley.html

ShapeTape measurand.com Balakrishnan et al. 1999

Un répertoire de périphériques d’entrée http://www.billbuxton.com/InputSources.html Plus de 20 catégories de dispositifs

Les styles d’interaction

Quelques styles d’interaction (“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 d’entrée beaucoup plus flexible Autres formes d’entré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

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

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 Furnas, G.W., Landauer, T.K., Gomez, L.M., Dumais, S. T., The vocabulary problem in human-system communication. Communications of the Association for Computing Machinery, 30 (11), Nov 1987, pp. 964-971

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

Langue naturelle: quelques observations … Mains et yeux libérés pour d’autres 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 l’ennui peuvent changer la qualité de la voix de l’utilisateur Une entrée multimodale (voix pour commandes, clavier pour données) serait peut-être mieux

Langue naturelle: quelques observations … (2) Utilisation pour pointer? La souris est mieux pour spécifier des points précis Messages d’erreur Ne pas donner toujours le même message d’erreur 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

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

Quelques observations On voit une indication visuelle de l’état du système, nous disant s’il nous écoute ou non REA tourne son dos vers nous lorsqu’elle n’est pas à l’écoute On est capable d’interrompre REA pour parler

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

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

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 l’entrée qui ont été mal-reconnues Remarque: nécessite un retour visuel

Sortie audio « A sad story » (vidéo) Une histoire racontée avec des sons, sans mots

Sortie audio Usine « Arkola » (vidéo) (Gaver et al. 1991) Simulation d’usine avec effets sonores

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

Entrée audio sans paroles Igarashi et Hughes 2001

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 l’audio

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, …

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

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

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

Direct Manipulation Shneiderman’s definition Examples 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 user’s real world goals into system goals. Interesting issue: In command languages, users can copy-paste fragments/sequences of commands, treating them like “macros” or “subroutines”. In some cases, users can even write scripts containing lists of commands. Is there any way to do this in direct manipulation interfaces ? Example: the MEL language in Maya mirrors everything that can be done interactively. Users can perform an action interactively, and see the script that would have performed the same action. They can then drag this script onto a tool bar, creating a button that executes it over and over.

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

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

Alvarado et Davis 2001 http://www.youtube.com/watch?v=NZNTgglPbUA

LaViola 2007 http://doi.acm.org/10.1145/1281500.1281558

Phun (≈2008) Jeu/simulateur physique gratuit avec entrée gestuelle http://www.acc.umu.se/~emilk/

Phun

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

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

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

Les modes, et quelques exemples de techniques d’interaction (utilisant l’entrée gestuelle et autre)

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

Verbes (actions, commandes, outils, opérations) Noms (objets, endroits) Point out the tools and modes here. This paradigm of tools and modes is used a lot of many software packages, not just paint programs but also in: your favourite word processing program (fonts), or video editing packages (zoom tools, splicing tools, etc.) Question: How do we indicate the current mode to the user ? - hiliting the tool’s icon, displaying text in the status bar, modifying the cursor shape, … Question: have you ever forgotten what mode you were in ? Clicked down with a tool only to realize it’s the wrong tool ? Not necessarily in a paint program, it could be in a word processor, or Premiere. Explain what a mode error is. Visual feedback, even at the cursor, isn’t enough to prevent mode errors. // Does this ever happen in the real world ? We’d like a way to allow the user to select these tools without running into mode errors. In reality, there are two things we want to allow the user to select: actions/tools/command/verbs and objects/locations/nouns. A lot of what users do with computers can be described in terms of selecting nouns and verbs, so it’d be good to have a understanding of how to ease the selection of nouns and verbs.

Verbes dans un menu déroulant Noms (objets, endroits) We could completely avoid the tool palette on the left, and have all commands in menus. We could design things so the user is always in selection mode, and goes to the menus whenever they want to create or modify an object. This avoids modes, since we’re always in selection mode, or temporarily in some creation mode after which we fall back to selection mode. So we avoid mode errors. We also save screen space. // Question: problems with this design ? Not necessarily the best design for all situations (e.g. creating multiple instances of the same class of object), but some products like Maya actually work along these lines.

Verbes dans un menu contextuel Noms (objets, endroits) Question: any advantage or disadvantage to using popup menus over pulldown menus ? User doesn’t have to travel as far with the mouse ? The popup menu also has the advantage of combining verb and noun selection into a single action, which is often faster and corresponds better to the user’s mental chunking. Earlier, we talked about visual feedback for indicating mode. It turns out that kinesthetic feedback is far superior to visual feedback (maybe mention experiment by sellen and kurtenbach et al. with vi with foot pedal vs keyboard and strong visual feedback) Kinesthetic feedback is not restricted to popup menus: talk about hitting hotkeys in 3D Studio MAX to manipulate camera versus *holding* down Alt in Maya.

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

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

Menu radial (“Radial Menu”, “Pie Menu”) These are in use now in web browsers and games.

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

Menus radiaux versus menus linéaires Directions are easier to remember and reproduce than distances. Question: why? Les directions sont plus mémorables et plus faciles à reproduire que les distances.

Menu radial hiéarchique Picture taken from Kurtenbach’s phd thesis

« Mouse Gestures » pour Firefox http://img327.imageshack.us/img327/346/027zd.gif

Marking Menu Ballistically: marks can be drawn very quickly Expert users only need to see ink stroke, which is less distracting than seeing the entire 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.

Ensemble de marques découvrables (“self-revealing”), contrairement aux interfaces gestuelles habituelles There’s a natural correspondence between pathways in the menu and marks. Self-revealing gesture set. Explain why this is so great: other systems with gestures (graffiti for palm pilot etc.) require the user first learn the gestures

Présentation graphique améliorée Picture from Kurtenbach’s phd thesis

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

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

Peuvent être utilisés sans regarder l’écran (“eyes-free operation”) Les Marking Menus Permettent une sélection plus rapide qu’avec 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électionner nom et verbe Sont limités à environ 8 commandes par sous-menu, et à une profondeur d’environ 3 niveaux Note: marking menus are actually used in products, mainly Alias products. Radial menus are also used in web browsers and games. Question: disadvantages of marking menus ?

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 Repeat that these techniques can be used in commercial software systems and are currently used in real commercial systems (web browsers and games with radial menus; Alias Maya) Mention that there are variations on Marking Menus, and there are examples of interfaces that combine Marking Menus and Toolglasses, or that combine 2-handed input with other popup widgets. See the T3 paper for (Kurtenbach et al. CHI 97 ?) for one way of combining marking menus with toolglass. There’s also an article (TOCHI 2005 ?) by Guimbretiere et al. that compares different ways of merging command selection and direct manipulation, including toolglass.

D’autres exemples de modes, outils, etc. vidéo: "Selection and Positioning tasks", Buxton 1983

Quelques observations Techniques montrées dans la vidéo: 1. Glisser-déposer 2. Barre d’outils 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 d’erreurs de mode ? Évitent des mouvements « aller-retour » entre la toile et la barre d’outils, et ne nécessitent pas de consacrer de l’espace à une barre d’outils ? Ont des affordances (barre d’outils) visibles, montrant les opérations possibles ? Permettent qu’une 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 à l’utilisateur d’apprendre les gestes par cœur et de les exécuter rapidement ?

Can we extend popup menus/widgets for other uses? Marking Menus have some really nice properties, but they aren’t the end-all of popup interaction. It’s possible to design many variations on popup widgets like marking menus. Recall that: Why should we be interested in popup widgets ? Avoid modes Better use of screen space: UI only appears when it’s needed

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)

Le « hotbox »: un menu 2D dans Maya

FlowMenus (Guimbretière et al., 2000) Now, there is another interaction technique which integrates parameter selection and adjustment. A flow menu is sorta like a radial menu, where the user selects items by crossing a boundary. Here we see the user first selecting the “item” submenu, and then the contents of the submenu appear. The user can then cross back in to the centre to select zoom, which we see in the 2nd picture, and then in the 3rd we see that the menu items have been replaced by zoom values. At this point the user crosses a final time to select a zoom of 100 %. So, FlowMenus are a hierarchical menu system.

2D manipulation with FlowMenus (Guimbretière et al., 2000) In addition, FlowMenus can be used to perform direct manipulation of a 2D value. Blah blah blah. And by the way, Control Menus can also be used to do this : as soon as the user gets past the boundary of the radial menu, they could start dragging some object.

Toolglass: bimanual input Click-through: Simultaneous selection of verb and noun!

Other uses of two hands?

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

Modèle de chaîne cinétique (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