Universit Paris-Sud

Interaction graphique
Michel Beaudouin-Lafon
Laboratoire de Recherche en Informatique
Universit Paris-Sud / CNRS
mbl@lri.fr
http://insitu.lri.fr

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@lri.fr, 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@lri.fr, 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@lri.fr, 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@lri.fr, 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@lri.fr, 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@lri.fr, 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@lri.fr, 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@lri.fr, 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@lri.fr, 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@lri.fr, 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@lri.fr, 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@lri.fr, 2000-2009

12

Universit Paris-Sud

Tches de transformation
Poignes de manipulation

Manipulation directe - exemple

(c) Michel Beaudouin-Lafon, mbl@lri.fr, 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@lri.fr, 2000-2009

14