1 Contexte et interaction dans les interfaces zoomables Stuart Pook Eric Lecolinet Guy Vaysseix Emmanuel Barillot École Nationale Supérieure des Télécommunications.

Présentation au sujet: "1 Contexte et interaction dans les interfaces zoomables Stuart Pook Eric Lecolinet Guy Vaysseix Emmanuel Barillot École Nationale Supérieure des Télécommunications."— Transcription de la présentation:

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

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

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

4 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 5 Couche historique 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 »

6 6 Couche historique (contruction)

7 7 Hiérarchie Permanente À coté de lIZ Représentation hiérarchique de lespace Indique lexistence des informations pas encore visibles Outil de navigation

8 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 9 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 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. 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. bouton de la souris pressé 1. choisir zoom2. zoomer 3. dézoomer 4. zoomerrésultat final (dézoom) bouton de la souris relâché

10 10 Application aux interfaces zoomables Beaucoup dopérations contrôlées à la souris Un seul control menu suffit pour toutes Un seul geste pour chaque opération Unification des opérations 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. 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.

11 11 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 Both marking and control menus have novice and expert gestures. We saw the novices 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 doesnt 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 users 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 users mouse movements and can be in two different directions. A control menu can thus replace up to two scroll bars for each menu item. Both marking and control menus have novice and expert gestures. We saw the novices 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 doesnt 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 users 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 users mouse movements and can be in two different directions. A control menu can thus replace up to two scroll bars for each menu item.

12 12 Zoom expert puis défilement 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. 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.

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

14 14 É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 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. 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.