Contexte et interaction dans les interfaces zoomables

1. Stuart Pook Eric Lecolinet Guy Vaysseix Emmanuel Barillot École Nationale Supérieure des Télécommunications (Département INFRES) Infobiogen Généthon Contexte et interactiondans lesinterfaces zoomables

2. 1. Perdu dans l’hyperespace • Problème de désorientation • perte de contexte après plusieurs zooms • Trois nouvelles aides contextuelles • couche de contexte • couche historique • hiérarchie

3. Couche de contexte • Transparente • Temporaire • Dynamique • Superposition • focus (fixe) :dernière vue courante • contexte (variable) :vue globale

4. Couche de contexte (vidéo) • Rappel de la position du focus dans le contexte • Contrôle interactif de l’échelle de contexte • mieux situer le focus • Le mouvement aide à séparer les 2 vues

5. Même principe transparente dynamique temporaire Superposition vue globale : fixe vue historique : variable Positions de la dernière vue courante la vue historique Contrôle interactif de la position dans le temps « revenir dans le temps » Couche historique

6. Couche historique (contruction)

7. Hiérarchie • Permanente • À coté de l’IZ • Représentation hiérarchique de l’espace • Indique l’existence des informations pas encore visibles • Outil de navigation

8. 2. Les opérations continues • Choisir et contrôler des opérations continues • Exemple : Acrobat Reader • trois façons de zoomer : • boîte de dialogue, option menu, souris • trois façons de faire défiler : • boîte de dialogue, ascenseurs, souris • Plusieurs problèmes : • trop de modes et façons de faire • nombreux changements de focus • non contextuel • place écran • usages répétés

9. We propose a new type of pop-up menu that is circular and visually similar to marking menu. • A control menu is shown here. • As this menu is a pop-up it is contextual. The mouse click used to pop-up the menu indicates where the action chosen by the menu is to be applied. • The gesture used to pop-up the menu continues so as to select an operation from the menu and to then control this operation. Control Menu • Nouveau type de menu contextuel • Ressemble à un « marking menu » • Combine choix et contrôle • une seule action continue et réversible • pas de changement de focus • feedback immédiat 1. choisir zoom 2. zoomer bouton de la souris pressé 3. dézoomer bouton de la souris relâché 4. zoomer résultat final (dézoom)

10. this short video shows the mouse movements used to select the zoom operation from the menu and to zoom the image. • The mouse logo next to the cursor shows when the mouse button was pressed. I was not able to capture the change in cursor at the start and end of the zoom operation. Application aux interfaces zoomables • Beaucoup d’opérations contrôlées à la souris • Un seul control menu suffit pour toutes • Un seul geste pour chaque opération • Unification des opérations

11. Both marking and control menus have novice and expert gestures. We saw the novice’s gesture on the video. The gesture of an expert is the same as that of a novice except without the third of a second pause that causes the menu to be shown. A user that knows the location of a menu item doesn’t have to wait to see menu. If she is unsure a short pause at the beginning of the operation will cause the menu to be drawn. • Control menus differ from marking menus in that with a marking menu it is the form not the scale of the user’s gesture that is important. With a control menu it is the distance that is important. • A control menu incorporates the control of an action into the gesture used to select it. This control is proportional to the user’s mouse movements and can be in two different directions. • A control menu can thus replace up to two scroll bars for each menu item. Control versus Marking Menus • Control et marking menus : • les novices voient le menu • les experts ne le voient pas • Control menu : • distance versus forme du geste • contrôle (proportionnel) • interacteur bidirectionnel • remplace un menu et deux ascenseurs

12. i3: • The second (and last) video will show a control menu used to pan an application and the use of the control menu by someone who knows the location of the difference menu items. Zoom expert puis défilement

13. classes Java serveur web navigateur web Client (applet Java) page html serveur biblio. (C++) code applicatif (C++) Implémentation • Architecture client/serveur • Client • en Java • Serveur • bibliothèque • en C++ • Jaune : générique • Bleu : spécifique à l’application machine client notre machine serveur base de données connexion TCP/IP

14. We have used a control menu to control a Zoomable User Interface. The user interface part of this program is in Java and can be tested over the Web. • This Zoomable User Interface is a browser for a biological database. • We are currently working on adapting our control menu for use in different types of applications. Word processor are one example that we are developing. État courant et perspectives • Zomit et HuGeMap • base de données biogénétiques • disponible à http://www.infobiogen.fr/services/zomit • Autres applications • traitement de texte