Interaction et contexte dans les interfaces zoomables

Abstract

La plupart des logiciels interactifs font un usage intensif des systèmes de menus. Ceux-ci permettent de sélectionner des opérations variées mais n'offrent généralement pas de moyen de contrôler leur exécution. Un second interacteur doit alors être utilisé (typiquement une boîte de dialogue) ce qui impose une décomposition d'une action unique (du point de vue de l'utilisateur) en une suite d'interactions successives. Nous proposons un nouveau type de menu, appelé Control Menu, qui permet de fluidifier l'interaction en unifiant la sélection et le contrôle des opérations. L'accès interactif aux bases de données et la navigation dans les espaces d'information de grande taille constituent des tâches primordiales pour de nombreuses applications. Or, les systèmes de visualisation posent souvent des problèmes de désorientation, les utilisateurs ayant fréquemment des difficultés à se localiser précisément dans l'espace d'information et à trouver les données recherchées. Cette thèse propose plusieurs techniques d'aide contextuelle pour remédier à ces problèmes dans le cadre des interfaces basées sur le concept de zoom sémantique (ou interfaces zoomables). Le premier type d'aide, qui offre une vue " en profondeur " de l'espace d'information via une représentation hiérarchique, permet non seulement de faciliter la localisation de la position courante et des informations recherchées mais aussi d'accélérer la navigation. La seconde technique est basée sur la génération dynamique de vues transparentes et temporaires que les utilisateurs peuvent créer et contrôler en un seul geste. Ces vues interactives se superposent à la vue courante en y rajoutant des informations contextuelles ou historiques qui aident l'utilisateur à comprendre ce qui entoure le point de focus ou quel chemin a été effectué pour arriver à ce dernier. Ces aides contextuelles nécessitent un couplage étroit entre interaction et présentation, qui est obtenu en utilisant des Control Menus.

Full text

Page 1

publié dans les actes de RJC-IHM 2000, pp 57–60, Île de Berder, Golfe du Morbihan, France, 3–5 mai 2000
Contexte et Interaction dans les Interfaces Zoomables
Stuart Pook1,2,4
Eric Lecolinet1,5
Guy Vaysseix2,3
Emmanuel Barillot2,3,6
1ENST, INFRES/CNRS URA 820, 46 rue Barrault, 75634 Paris cedex 13, France4stuart@acm org
2Infobiogen, 7 rue Guy Môquet – BP 8, 94801 Villejuif cedex, France
3Généthon, 1 bis rue de l’Internationale, 91000 Évry, France
5elc@enst.fr
6manu@infobiogen.fr
Résumé — Les interfaces zoomables (IZs) sont difficiles à utiliser sur un grand espace d’information, en partie parce
qu’elles ne fournissent pas suffisamment de contexte à l’utilisateur. Même après une courte période d’utilisation, les
utilisateurs ne savent plus où ils sont dans l’espace d’information ni ce qu’ils sont en train de regarder. Nous proposons
deux nouvelles aides temporaires, une couche de contexte et une couche historique, qui aident les utilisateurs à se situer
dans l’espace d’information. Elles sont transparentes et sont dessinées sur le focus de telle sorte que l’aide et le focus sont
visibles. La couche de contexte contient une vue du contexte et aide l’utilisateur à se situer dans l’espace d’information.
Avec la couche historique l’utilisateur peut revisiter le chemin parcouru dans l’espace d’information. Nous complétons
cesaidesavecunefenêtresupplémentairequimontreàtoutmomentlastructuredel’espaced’informationetlapositionde
l’utilisateur dans cet espace.De plus, il est difficile d’interagir avec des IZs avec des modèles classiques d’interaction. Les
IZs fournissent des commandes qui doivent être utilisées souvent sur une image très changeante. La souris et ses boutons
sont trop limités pour un accès rapide à toutes ces commandes sans l’utilisation de nouvelles techniques d’interaction.
Nous présentons un nouveau type de menu, un control menu, qui facilite l’accès rapide à ces commandes. Notre IZ inclut
ces nouvelles techniques et peut être testée à l’URL http://www.infobiogen.fr/services/zomit/.
1Introduction
Les interfaces zoomables (IZs) ne sont plus une nouveauté
et leurs principes (Furnas et Bederson, 1995) et applications
pratiques (Bederson et al., 1996) ont déjà été présentés.
Quand un utilisateur interagit avec une IZ, il voit une vue
d’un espace d’information. La vue initiale montre l’espace
entier à une échelle permettant de la faire tenir sur l’écran
de l’utilisateur. L’utilisateur peut alors zoomer (agrandir)
une partie de la vue qu’il trouve intéressante. Les objets
graphiques s’agrandissent jusqu’à ce qu’il y ait suffisam-
ment de place sur l’écran pour les remplacer par d’autres
objets graphiques qui montrent les données sous-jacentes
avec plus de détails. Nous avons employé cette technique
de zoom sémantique pour visualiser et parcourir la base
de données HuGeMap des principales cartes génétiques et
physiques du génome humain. Pour comprendre les exem-
ples présentés, il suffit de savoir que la vue initiale montre
les 24 chromosomes (figure 1a), que chacun de ces chromo-
somes a trois cartes génétiques, et que ces cartes consistent
en des marqueurs génétiques positionnés le long d’un axe
(figure 1b).
Les IZs sont utilisées pour présenter des espaces d’informa-
tionàl’utilisateur. Unedesraisonspourlesquellestoutesles
potentialités des IZs ne sont pas exploitées est que la vue de
l’information présentée à l’utilisateur, le focus, ne comporte
pas toujours suffisament de contexte pour que l’utilisateur
puisse situer ce qu’il voit dans l’espace d’information. Une
fois arrivé dans cette situation l’utilisateur est désorienté,
parfois jusqu’à ne plus comprendre ce qu’il voit et ne plus
savoir où aller. Nous présentons deux nouveaux outils tem-
porairesquel’utilisateurpeutfaireapparaîtreetutiliserlors-
qu’il arrive dans cette situation. Le premier, la couche de
contexte, permet à l’utilisateur de situer le focus dans des
vues plus globales de l’espace d’information. Le deuxième,
la couche historique, lui permet de parcourir en sens inverse
le chemin qui l’a amené à se perdre. Nous présentons égale-
ment une troisième aide à la navigation, la hiérarchie. Elle
consiste en une deuxième fenêtre permanente qui montre la
structure de l’espace d’information et la position de l’uti-
lisateur dans cette structure. Les IZs proposent des nom-
breux contrôles qui sont difficiles à manier avec les menus
classiques. Nous proposons un nouveau type de menu qui
combine la sélection des commandes et leur contrôle.
2Couche de contexte
Avec une IZ, un utilisateur ne voit qu’une vue à la fois: le
focus. Son contexte a été perdu. D’autres types d’interfaces
telles que les vues fisheye (Furnas, 1986) et le Document
Lens (Robertson et Mackinlay, 1993) intègrent le focus et
le contexte en affichant une partie de l’information qui en-
toure le focus. Ces techniques déforment la représentation
graphique de l’espace d’information en éliminant certains
objets ou en modifiant leur taille ou leur position.
Contrairement à ces techniques, nous proposons une cou-
che de contexte qui combine le focus et son contexte sans
déformation. La couche de contexte est temporaire et affi-
chée uniquement quand l’utilisateur le désire. Pendant son
utilisation elle se superpose en transparence à la vue prin-
cipale (le focus). Une étude (Harrison et al., 1995) montre
que de telles vues sont bien acceptées par les utilisateurs.
De plus, l’affichage de cette couche est temporaire afin de
ne pas surcharger l’écran quand l’utilisateur n’a pas besoin
de voir le contexte. Elle disparaît dès que l’utilisateur ter-
mine le geste qui l’a faite afficher.
La couche de contexte peut être contrôlée dans deux direc-
tions: l’échelle (c’est-à-dire le niveau de zoom sémantique)
du contexte et le niveau relatif de transparence des deux
vues. Le réglage de l’échelle permet d’afficher, comme cou-
57

Page 2

????????
?
??
??
?
?
????????
?
?
?
???????
?
?
?
?
?
?????
??
?
????????
???
?
??
?
???????????????
?????????????
??
?
?
?
?
?
?
????????????
??
?
????????
?
?
?
?
????????????????
??
?
???
?
????????
?
?????????????????
?
???
?
??????????????????
?????????????
??
?
?
??????
?
?
?
???
?
??????????????????????
?
?
?
???
?
????????
?
?????????
??
?
????
?
???
?
????????
?
?????????
FIG. 1 – la construction des couches historique et de contexte
che de contexte, une vue à n’importe quelle échelle située
entre celle de la vue initiale et celle de la vue du focus.
La figure 1b montre une vue que l’utilisateur peut voir
après avoir navigué quelque temps dans l’IZ. Cette vue ne
contient pas d’élément permettant à l’utilisateur de savoir
sur quelle carte de quel chromosome il se trouve. L’utilisa-
teur peut alors afficher la couche de contexte, ce qui donne
la figure 1d. Celle-ci est une superposition du contexte (fi-
gure 1a) sur le focus (figure 1b). La position du focus re-
lative au contexte est indiquée par un rectangle situé au
centre. Dans lafigure 1d ce rectangle est sous le mot « 10q »
et l’utilisateur sait donc que le focus montre une partie du
chromosome 10. Dans la figure 1e, l’utilisateur a zoomé la
couche de contexte ce qui donne maintenant comme con-
texte une vue où les noms des cartes génétiques sont vi-
sibles. L’utilisateur peut voir le rectangle (indiqué par une
flèche) qui rappelle la position du focus sur le texte « Gé-
néthon ». L’utilisateur sait donc que le focus montre actuel-
lement cette carte génétique. L’utilisateur a pu voir le con-
texte à deux échelles différentes de manière à pouvoir situer
le focus dans deux contextes différents.
Notre système permet d’autre part à l’utilisateur de se con-
centrer sur l’une des deux vues en changeant la transpa-
rence relative de ces deux vues. La transparence peut varier
continuellementd’unétatoùseullefocusestvisiblejusqu’à
l’état opposé où seule la couche de contexte est visible. Par
exemple, la figure 1f est similaire à la figure 1e sauf que
l’utilisateur est maintenant en train de se concentrer sur le
contexte et a légèrement fait disparaître le focus. Le rec-
tangle qui rappelle la position du focus est toujours visible
et l’utilisateur peut voir plus clairement que le focus montre
actuellement la carte Généthon.
3
La couche de contexte décrite ci-dessus permet à l’utilisa-
teur de trouver une réponse à la question « où suis-je? ».
Une autre question importante est « comment suis-je arrivé
ici? ». Les IZs ont besoin d’un historique pour que l’utilisa-
teur puisse retourner aux régions déjà visitées dans l’espace
d’information et voir ces régions en relation avec le focus
et la vue initiale. Nous proposons une nouvelle vue tem-
poraire appelée couche historique. Cette vue permet de se
déplacer interactivement entre la vue initiale et la vue cou-
rante en suivant à nouveau le chemin emprunté par l’utili-
sateur. Comme la couche de contexte, la couche historique
est temporaire afin de ne pas surcharger l’écran.
Le parcours de l’utilisateur dans l’espace d’information
peut être considéré comme une succession de vues de
l’espace appelées vues historiques. La couche historique
contient une des vues historiques et se superpose à la vue
initiale; cette combinaison s’affiche temporairement en lieu
et place de la vue courante. La position et la taille de la vue
historique et de la vue courante sont indiquées sur la vue
initiale par des rectangles de couleurs différentes. L’utilisa-
teur, en se déplaçant dans la succession des vues historiques
peut donc revoir son parcours dans l’espace d’information
et à tout moment mettre en relation la dernière vue courante
et une vue intermédiaire de son parcours depuis la vue ini-
Couche historique
58

Page 3

tiale.
4
Les techniques présentées dans la section précédente aident
l’utilisateur à comprendre l’espace d’information de la vue
initiale jusqu’à la vue courante. Cependant, elles n’in-
forment pas l’utilisateur sur ce qui se trouve dans d’autres
régions ni, surtout, sur ce qui peut être trouvé en zoomant
d’avantage. Les IZs sont souvent utilisées pour visualiser
des données organisées hiérarchiquement mais l’utilisateur
ne peut pas non plus utiliser cette organisation pour na-
viguer dans l’espace d’information: l’utilisateur regardant
des détails d’un objet n’a pas la possibilité de dézoomer
automatiquement pour voir l’objet en entier ni utiliser la
hiérarchie pour se déplacer d’un sous-objet vers un autre
sous-objet du même type.
Les IZs ne donnent qu’une vue qui est une tranche horizon-
tale de l’espace 3D d’information (en considérant que la di-
mension verticale est celle du zoom). Nous proposons une
seconde vue orthogonale à la première, qui est une tranche
verticale aplatie de l’espace d’information. Cette seconde
vue (figure 2) affiche les noms des objets qui sont situés
au dessus de la vue courante dans la hiérarchie. Comme les
objets ont également des types (un objet peut être un chro-
mosome, une carte, une séquence, etc) la hiérarchie entière
des types d’objets peut être montrée dans la seconde vue
si l’espace d’information est suffisamment régulier. Sinon,
seulement une partie de la hiérarchie des types centrée sur
la position de l’utilisateur peut être montrée. Cette seconde
vue indique à l’utilisateur la structure de l’espace d’infor-
mation, sa position courante, quelles sont les autres infor-
mations disponibles, leur disposition spatiale, et comment
les trouver.
Dans cet espace régulier de notre IZ, les chromosomes pos-
sèdent deux « bras », des données et des cartes. Cette struc-
ture est affichée dans la vue de la hiérarchie (figure 2) dès
que l’IZ est lancée. La position de l’utilisateur dans la struc-
ture est indiquée en gris (magenta sur l’écran); dans cet
exemple l’utilisateur est en train de regarder la carte « Gé-
néthon » sur le chromosome 9. Cette vue indique également
que si l’utilisateur continue de zoomer sur la carte il trou-
vera les séquences des marqueurs.
La technique d’« Excentric Labeling » (Fekete et Plaisant,
AFM224zh10
Hiérarchie et navigation rapide
printquit
info
marker index
marker
chromosome
2
8
14
3
9
15
4
10
16
Arm
Chrband
Subchrband
data
map
CHLC v3
Genethon sex−averaged
WI/MIT RH
marker
sequence
AFMa337zh1
AFMb316yf1
AFMb014ye5
AFM183xh10
AFM343td9
AFMa311yc1
AFMa058yh9
AFM157xb12
AFMb321yf9
AFM025yb2
AFM144ye9
AFMb073xc1
AFMa054ze1
AFM144zg7
AFMb321zf1
AFMa044ta5
AFM224zh10
n sex−averaged
FIG. 2 – notre IZ avec la hiérarchie sur la droite
1999) permet d’identifier des objets sur l’écran. Cette tech-
nique étiquette, avec des bulles d’aide dans la vue princi-
pale, les objets se trouvant autour du curseur. Nous propo-
sons une autre technique, non intrusive, pour identifier les
objets autour du curseur. Quand l’utilisateur déplace le cur-
seur sur la vue principale, la vue de la hiérarchie est mise
à jour avec le type et le nom de l’objet sous le curseur. Si
le curseur quitte la vue principale ou s’il n’est pas sur un
objet, la vue de la hiérarchie indique le plus bas niveau dans
la hiérarchie auquel tous les objets visibles appartiennent.
Cette technique d’étiquetage présente des similarités avec
les « tool tips » dans la mesure où l’utilisateur n’a pas be-
soin de demander l’information. Un avantage de notre tech-
nique est qu’elle n’empiète pas sur la vue principale.
Cette technique offre également à l’utilisateur un moyen ef-
ficace de se déplacer des objets visibles vers les objets non
affichés qui leur sont liés. Si l’utilisateur clique sur le mot
« chromosome » dans la figure 2, l’IZ dézoomera suffisam-
ment pour montrer le chromosome 9 en entier. L’utilisateur
pourrait également cliquer sur les mots « CHLC v3 » (le
nom de la carte à coté de la carte « Généthon » sur la chro-
mosome 9) afin de se déplacer vers la même région sur la
carte « CHLC v3 ».
Pour faire une évaluation des techniques de visualisation
proposées dans cette communication nous avons créé une
version modifiée de notre IZ sans la vue de la hiérarchie.
Huit sujets, des volontaires parmi nos collègues d’Infobio-
gen, ont été formés sur notre IZ. Pendant l’évaluation on
leur a demandé de répondre à 22 questions de type choix
multiple. La séance d’entraînement leur a montré comment
répondre à ce genre de questions avec et sans la vue de la
hiérarchie. Les sujets ont été divisés en 4 groupes, et ont
traité 11 questions avec aide de la hiérarchie, et 11 sans:
2 groupes ont commencé par répondre à 11 questions avec
aide de la hiérarchie, les 2 autres groupes ont commencé
sans cette aide. Aussi chaque question a été traitée avec
l’aide de la hiérarchie par 2 groupes de sujets, et sans par
les deux autres groupes.
Pour chaque sujet nous avons calculé le temps pris pour
répondre aux 11 questions sans la vue hiérarchique divisé
par le temps pris pour répondre aux 11 questions avec la
vue hiérarchique. Une valeur supérieure à 1 voulait donc
dire que la vue hiérarchique aidait dans l’exécution des
tâches. La moyenne était de 1,58 avec un écart type de 0,54.
Ce grand écart type venait du fait que certains utilisateurs
ne connaissaient pas la structure de l’espace d’information
avant cette étude. Ces utilisateurs trouvaient que la séance
d’entraînement n’était pas suffisante et donc que la seconde
partie des questions était plus facile. En général, cependant,
les sujets étaient plus rapides avec la vue hiérarchique et les
commentaires étaient positifs.
5
Des menus standards tels que pull-down, pop-up et mar-
king menus (Kurtenbach et Buxton, 1994) permettent aux
utilisateurs de choisir des opérations à effectuer. Les pop-
up et marking menus sont contextuels: ils sont activés à un
endroit précis dans l’interface. L’interface peut alors adap-
Interaction dans les IZs
59

Page 4

ter le contenu du menu à cette position et associer l’action
choisie grâce au menu à cette même position.
Ces menus ne permettent pas de contrôler l’opération choi-
sie de façon continue (par exemple pour effectuer un défi-
lement). Ils ne permettent pas non plus aux utilisateurs de
fournir des paramètres pour l’opération. Par exemple, une
opération telle que le changement de taille de police dans
un traitement de texte nécessite souvent une boîte de dia-
logue pour fournir la nouvelle taille. Les utilisateurs doivent
utiliser le menu et ensuite se concentrer sur un deuxième
interacteur, typiquement une boîte de dialogue. Une fois la
nouvelle taille entrée, la boîte de dialogue disparaît et l’uti-
lisateur doit à nouveau changer de contexte.
L’opération de déplacement dans une IZ nécessite soit un
bouton de souris dédié (ou un bouton de souris et un mo-
dificateur) afin que l’utilisateur puisse faire glisser l’image,
soit deux barres de défilement. On ne peut se déplacer avec
un menu standard à moins d’avoir des commandes peu er-
gonomiques telles que « déplacer un peu vers la gauche ».
De même, zoomer est une autre opération qu’il est malcom-
mode de faire avec un menu. Les utilisateurs veulent zoo-
mer jusqu’à ce que la bonne échelle ait été trouvée. Avec un
menu standard l’utilisateur ne peut zoomer que par étapes
prédéfinies et par utilisation répétitive du menu.
Nous proposons un nouveau type de pop-up menu, appelé
control menu, qui peut intégrer jusqu’à deux barres de dé-
filement ou « spin-boxes ». Avec ce menu les utilisateurs
peuvent choisir des opérations et les contrôler d’un seul
geste.
Un control menu fonctionne un peu comme un marking
menu. L’utilisateur novice enfonce le bouton de la souris,
attend 0,3 secondes jusqu’à ce que le menu soit affiché cen-
tré sur la position du curseur, puis déplace le curseur dans
la direction de l’opération désirée (figure 3). Le menu dis-
paraît et l’opération commence dès que le curseur a été dé-
placé de la distance d’activation depuis le centre du menu.
L’opération se termine quand l’utilisateur relâche le bouton
de la souris. Les utilisateurs experts font le même geste sans
attendre l’affichage du menu. Ainsi, les utilisateurs experts
ne sont pas distraits par l’apparition du menu et les utilisa-
teurs novices apprennent progressivement le geste expert.
Une entrée dans un control menu peut être utilisée pour mo-
difierleniveaudezoomdansuneIZ.Cetteopérationillustre
l’intégration d’un menu et une barre de défilement dans un
seul interacteur. La figure 4 montre les mouvements de la
souris pendant l’utilisation d’un control menu pour choisir
et contrôler une opération de zoom ou de dézoom. L’utili-
sateur enfonce le bouton de la souris et déplace celle-ci de
la distance d’activation (le mouvement 1 dans la figure 4)
vers la droite (l’opération « zoom » étant sur la droite du
control menu représenté figure 3). Ceci amorce l’opération
de zoom et le curseur change à ce moment sur l’écran. À
FIG. 3 – le control menu dans notre IZ
?? !"?!#$%&'(
)
? *?+,#$-
?? !"?.!#??(
)
? *?+,#$-
/0
,(1??2#!
!#? $*-*3"+-$4,(1??25
60
1??2#!
70
&'?"?"!1??28
0
1??2#!
FIG. 4 – zoomer avec un control menu
partir de ce moment, les mouvements de la souris vers la
droite (mouvements 2 et 4 dans la figure 3) zooment la vue
et les mouvements vers la gauche (mouvement 3) la dézoo-
ment. Le contrôle par retour d’information est immédiat: la
vue change dès que l’utilisateur bouge la souris. L’utilisa-
teur relâche le bouton de la souris lorsque l’échelle voulue
(un dézoom dans la figure 4) a été obtenue.
Un control menu peut aussi être utilisé pour effectuer des
défilements bi-dimensionnels. Il remplace alors deux barres
de défilement. Un défilement est sélectionné en enfonçant
le bouton de la souris et en déplaçant la souris vers le haut
(« pan » sur la figure 3). La vue suit le curseur pendant
l’opération.
6
Les aides utilisant les couches historique et de contexte per-
mettent à l’utilisateur de s’orienter dans les grands espaces
des IZs. La superposition de ces couches permet d’intégrer
le focus et le contexte dans la même vue. La hiérarchie
permet à l’utilisateur de voir la structure de l’espace et de
l’utiliser pour naviguer. Le nouveau control menu facilite la
maîtrise des IZs; son utilisation dans d’autres types d’inter-
face est en cours d’étude.
Ce travail a bénéficié du soutien de l’EU (contrat BIO4-
CT96-0346) et du CNET (contrat 97 754 21).
Conclusion
Références
Bederson, B. B., Hollan, J. D., Perlin, K., Meyer, J., Bacon, D., et
Furnas, G. Pad++: A zoomable graphical sketchpad for explo-
ring alternate interface physics. J. Vis. Lang. Comput., 7:3–32,
mar 1996.
Fekete, J.-D. et Plaisant, C. Excentric labeling: Dynamic neigh-
borhood labeling for data visualization. CHI ’99, pp 512–519,
Pittsburgh, PA, USA, mai 1999. ACM.
Furnas, G. W. Generalized fisheye views. CHI ’86. Conference
proceedings on Human factors in computing systems, pp 16–
23, Boston MA, USA, avr 1986. ACM.
Furnas, G. W. et Bederson, B. B. Space-scale diagrams: unders-
tanding multiscale interfaces. CHI ’95, pp 234–241, Denver
CO, USA, mai 1995. ACM.
Harrison, B. L., Kurtenbach, G., et Vicente, K. J. An experimental
evaluation of transparent user interface tools and information
content. UIST ’95, pp 81–90, Pittsburgh PA, USA, nov 1995.
ACM.
Kurtenbach, G. et Buxton, W. User learning and performance with
marking menus. CHI ’94, pp 258–264, Boston MA, USA, avr
1994. ACM.
Robertson, G. G. et Mackinlay, J. D. The document lens. UIST
’93, pp 101–108, Atlanta GA, USA, nov 1993. ACM.
60