Universit Paris-Sud
Interaction graphique
Michel Beaudouin-Lafon
Laboratoire de Recherche en Informatique
Universit Paris-Sud / CNRS
mbl@[Link]
[Link]
Interaction graphique
Manipulation directe
Machines tats
Techniques dinteraction graphiques
Tches lmentaires (d'aprs Foley et van Dam)
Modes d'interaction
Nouvelles techniques dinteraction graphique
(c) Michel Beaudouin-Lafon, mbl@[Link], 2000-2009
Universit Paris-Sud
Manipulation directe
Shneiderman (1983)
1. Reprsentation permanente des objets d'intrt
2. Utilisation d'actions physiques au lieu
d'une syntaxe complexe
3. Oprations rapides, incrmentales, rversibles dont les
actions sur les objets sont immdiatement visibles
4. Apprentissage selon une approche progressive afin de
permettre l'utilisation de l'interface avec un minimum de
connaissances
Mise en oeuvre
Prsentation
Fentres
Reprsentations graphiques
Entres
Pointage, slection, trac
Boucle perception-action
Feed-back
(c) Michel Beaudouin-Lafon, mbl@[Link], 2000-2009
Universit Paris-Sud
Manipulation (in)directe
Size
Toto
Toto
24
OK
Problmes de la manipulation directe
Identifier les objets d'intrt
exemple : les styles de Word
Manipulation directe / indirecte ?
Menus
Botes de dialogue
Barres de dfilement
etc.
Approche pragmatique
Techniques dinteraction graphique
(c) Michel Beaudouin-Lafon, mbl@[Link], 2000-2009
Universit Paris-Sud
Entres : feed-back
Pointage
Slection (click, altr ou non)
OK
OK
OK
Entres : feedback
Trac
"fantmes"
ou ombres
encre
(c) Michel Beaudouin-Lafon, mbl@[Link], 2000-2009
Universit Paris-Sud
Machines tats
Automates tats fini
Etat = tat de linteraction
Transition = vnements dentre
Machine tats
actions associes aux transitions
conditions associes aux transitions
Exemple : "Rubber-band"
Down / Record (P1)
Move / Draw (P1,current)
Up / Done(P1,current)
Machines tats
Combiner slection et trac
Hystresis : le trac ne dmarre quaprs un dplacement suffisant
Down / Record (P1)
Move & dist (P1, current) >= eps
Up / Click (P1)
Move /
Drag (P1, current)
Up / Moved (P1, current)
(c) Michel Beaudouin-Lafon, mbl@[Link], 2000-2009
Universit Paris-Sud
Tches de l'interaction graphique
Tches de saisie
Tches de slection
Tches de dclenchement
Tches de dfilement
Tches de spcification d'arguments et de proprits
Tches de transformation
Tches de saisie
Saisie de texte
Bote de saisie + clavier
Saisie de quantits
Potentiomtre
hello
12
Saisie de positions
Pointage
Saisie de tracs
Echantillonage (feed-back = encre)
(c) Michel Beaudouin-Lafon, mbl@[Link], 2000-2009
Universit Paris-Sud
Tches de saisie
Adapter linteraction au type de valeur saisie
Exemple : taille dun tableau
Lignes
Colonnes
3
OK
Table 4x3
Tches de slection
Choix d'un ou plusieurs lments dans un ensemble
Cardinal fixe ou variable
Cardinal petit ou grand
Cardinal fixe
Menu, boutons radio, cases cocher
Cardinal variable
Pointage, liste, saisie de nom
(c) Michel Beaudouin-Lafon, mbl@[Link], 2000-2009
Universit Paris-Sud
Tches de slection
Slection multiple
par groupe
par intervalle
par ajout/retrait
Combinaison de techniques
Pointer lment + slection par prfixe
Tches de slection : menus linaires
Barre de menus +
menus droulants
Palettes fixes
Menus pop-up
Menus hirarchiques
Menus dtachables
(c) Michel Beaudouin-Lafon, mbl@[Link], 2000-2009
Universit Paris-Sud
Tches de slection : menus radiaux
Pie Menus (Hopkins)
Slection radiale plus rapide que slection linaire
Limit 8 items par menu
Marking menus (Kurtenbach)
Transition aise du mode novice au mode expert :
reproduire le geste de slection, sans affichage du menu
Tches de slection - exemples
(c) Michel Beaudouin-Lafon, mbl@[Link], 2000-2009
Universit Paris-Sud
Tches de dclenchement
OK
Boutons et menus
Cliquer-Tirer (drag'n'drop)
L'action dpend de la source et de la destination
Entre gestuelle
Spcification simultane de la commande et de l'objet
Tches de dclenchement
Entre gestuelle
Hello
Cration
Slection
Dplacement
Copie
Destruction
Editeur musical
Tableur
(c) Michel Beaudouin-Lafon, mbl@[Link], 2000-2009
10
Universit Paris-Sud
Tches de dfilement
Barres de dfilement
3
Sens du dfilement
Dcouplage spatial
Dfilement direct
Dplacement avec la main
Dfilement automatique
Zoom
Zoom pour voir le dtail
Dzoom pour voir le contexte
Tches de spcification d'arguments et de proprits
Botes de dialogue
Champs + boutons OK / Apply / Cancel
Modal ou non-modal
Size
24
OK
Dcouplage temporel et spatial entre la spcification de la
commande, de ses paramtres, et son excution
Partie optionnelle
Bote onglets
Problmes avec smatique
du bouton OK
(c) Michel Beaudouin-Lafon, mbl@[Link], 2000-2009
11
Universit Paris-Sud
Tches de spcification d'arguments et de proprits
Botes de proprits / inspecteurs
Inspecteur affich en permanence
Hello
Size
Le changement de slection affecte le contenu de linspecteur
Hello
Size
18
Ldition des champs a un effet immdiat sur lobjet slectionn
Hello
Size
24
Botes de proprits - exemple du Star
(c) Michel Beaudouin-Lafon, mbl@[Link], 2000-2009
12
Universit Paris-Sud
Tches de transformation
Poignes de manipulation
Manipulation directe - exemple
(c) Michel Beaudouin-Lafon, mbl@[Link], 2000-2009
13
Universit Paris-Sud
Modes d'interaction
Mode = tat de l'interface dans lequel les actions de
l'utilisateur sont interprtes de faon homogne et
diffrente des autres modes.
Problme : changements de mode
Exemples
Editeur vi :
Taper Esc pour passer du mode commande au mode entre
Editeur emacs :
Utiliser les modifieurs Control et Meta pour entrer des commandes
Palette doutils :
A
Slectionner un outil pour lactiver
Modes d'interaction
Modes temporels
La mme action des moments diffrents
produit des effets diffrents
Problme : Initiative du changement de mode
Quasi-modes : Modes temporels lis une action physique continue
Outils : Modes temporels associs un outil tenu la main
Modes spatiaux
La mme action en des endroits diffrents
produit des effets diffrents
Problme : identifier les modes spatiaux disponibles
Une interface est une collection de modes
(c) Michel Beaudouin-Lafon, mbl@[Link], 2000-2009
14
