[Publié dans les actes de RJC-IHM 2000, pages 57-60, 3-5 mai 2000, Île de Berder, Golfe du Morbihan, France. Imprimez la version PDF.]

Contexte et Interaction dans les Interfaces Zoomables

Stuart Pook1,2,4 Eric Lecolinet1,5 Guy Vaysseix2,3 Emmanuel Barillot2,3,6
1 ENST/CNRS UMR 5141, 46 rue Barrault, 75634 Paris cedex 13, France 4
2 Infobiogen, 7 rue Guy Môquet - BP 8, 94801 Villejuif cedex, France 5 elc@enst.fr
3 Généthon, 1 bis rue de l'Internationale, 91000 Évry, France 6 manu@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 ces aides avec une fenêtre supplémentaire qui montre à tout moment la structure de l'espace d'information et la position de 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/.

1  Introduction

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 suffisamment 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 exemples présentés, il suffit de savoir que la vue initiale montre les 24 chromosomes (figure 1a), que chacun de ces chromosomes 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).

Figure 1

Figure 1: la construction des couches historique et de contexte

Les IZs sont utilisées pour présenter des espaces d'information à l'utilisateur. Une des raisons pour lesquelles toutes les 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 temporaires que l'utilisateur peut faire apparaître et utiliser lorsqu'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 également 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'utilisateur dans cette structure. Les IZs proposent des nombreux 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.

2  Couche 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 entoure 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 couche de contexte qui combine le focus et son contexte sans déformation. La couche de contexte est temporaire et affichée uniquement quand l'utilisateur le désire. Pendant son utilisation elle se superpose en transparence à la vue principale (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 termine le geste qui l'a faite afficher.

La couche de contexte peut être contrôlée dans deux directions : 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 couche 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'utilisateur peut alors afficher la couche de contexte, ce qui donne la figure 1d. Celle-ci est une superposition du contexte (figure 1a) sur le focus (figure 1b). La position du focus relative au contexte est indiquée par un rectangle situé au centre. Dans la figure 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 contexte une vue où les noms des cartes génétiques sont visibles. 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 actuellement cette carte génétique. L'utilisateur a pu voir le contexte à 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 concentrer sur l'une des deux vues en changeant la transparence relative de ces deux vues. La transparence peut varier continuellement d'un état où seul le focus est visible jusqu'à 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 rectangle 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  Couche historique

La couche de contexte décrite ci-dessus permet à l'utilisateur 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'utilisateur 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 temporaire appelée couche historique. Cette vue permet de se déplacer interactivement entre la vue initiale et la vue courante en suivant à nouveau le chemin emprunté par l'utilisateur. 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 initiales ; 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'utilisateur, 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 initiale.

4  Hiérarchie et navigation rapide

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'informent 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 naviguer 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.

Figure 2

Figure 2: notre IZ avec la hiérarchie sur la droite

Les IZs ne donnent qu'une vue qui est une tranche horizontale de l'espace 3D d'information (en considérant que la dimension 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 chromosome, 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'information, sa position courante, quelles sont les autres informations disponibles, leur disposition spatiale, et comment les trouver.

Dans cet espace régulier de notre IZ, les chromosomes possèdent deux « bras », des données et des cartes. Cette structure 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 structure est indiquée en gris (magenta sur l'écran)s ; 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 trouvera les séquences des marqueurs.

La technique d'« Excentric Labeling » [Fekete et Plaisant (1999)] permet d'identifier des objets sur l'écran. Cette technique étiquette, avec des bulles d'aide dans la vue principale, les objets se trouvant autour du curseur. Nous proposons une autre technique, non intrusive, pour identifier les objets autour du curseur. Quand l'utilisateur déplace le curseur 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 besoin de demander l'information. Un avantage de notre technique est qu'elle n'empiète pas sur la vue principale.

Cette technique offre également à l'utilisateur un moyen efficace 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 suffisamment 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 chromosome 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'Infobiogen, 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  Interaction dans les IZs

Des menus standards tels que pull-down, pop-up et marking 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 adapter 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 choisie de façon continue (par exemple pour effectuer un défilement). 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 dialogue 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'utilisateur 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 modificateur) 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 ergonomiques telles que « déplacer un peu vers la gauche ». De même, zoomer est une autre opération qu'il est malcommode de faire avec un menu. Les utilisateurs veulent zoomer 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.

Figure 3

Figure 3: le control menu dans notre IZ

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é centré sur la position du curseur, puis déplace le curseur dans la direction de l'opération désirée (figure 3). Le menu disparaî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 utilisateurs novices apprennent progressivement le geste expert.

Figure 4

Figure 4: zoomer avec un control menu

Une entrée dans un control menu peut être utilisée pour modifier le niveau de zoom dans une IZ. Cette opération illustre 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'utilisateur 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. À 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ézooment. Le contrôle par retour d'information est immédiat : la vue change dès que l'utilisateur bouge la souris. L'utilisateur 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  Conclusion

Les aides utilisant les couches historique et de contexte permettent à 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'interface 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).

Références

Bederson et al. (1996)
Bederson, B. B., Hollan, J. D., Perlin, K., Meyer, J., Bacon, D., et Furnas, G. Pad++: A zoomable graphical sketchpad for exploring alternate interface physics. J. Vis. Lang. Comput., 7:-32, mar 1996.

Fekete et Plaisant (1999)
Fekete, J.-D. et Plaisant, C. Excentric labeling: Dynamic neighborhood labeling for data visualization. CHI '99, pp 512-519, Pittsburgh, PA, USA, mai 1999. ACM.

Furnas (1986)
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 et Bederson (1995)
Furnas, G. W. et Bederson, B. B. Space-scale diagrams: understanding multiscale interfaces. CHI '95, pp 234-241, Denver CO, USA, mai 1995. ACM.

Harrison et al. (1995)
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 et Buxton (1994)
Kurtenbach, G. et Buxton, W. User learning and performance with marking menus. CHI '94, pp 258-264, Boston MA, USA, avr 1994. ACM.

Robertson et Mackinlay (1993)
Robertson, G. G. et Mackinlay, J. D. The document lens. UIST '93, pp 101-108, Atlanta GA, USA, nov 1993. ACM.