Conception et utilisation d'interactions avancées avec la boîte à outils MaggLite

Figure 1: Conception de l'interface d'un jeu de puzzle avec MaggLite.
(a) Dessin des composants graphiques. (b) Configuration des interactions. (c) Utilisation de l'application.

RÉSUMÉ:

Cette démonstration présente deux applications réalisées avec la boîte à outils post-WIMP MaggLite: le constructeur d'interfaces de la boîte à outils (MaggLite Interface Builder) et une application de dessin à main levée (Svalabard). MaggLite repose sur une nouvelle architecture et un grand nombre d'interactions avancées "enfichables", offrant ainsi une grande flexibilité et de nouvelles possibilités pour la conception d'interfaces.

MOTS CLES : Boîte à outils, techniques d'interaction, conception d'interfaces, ICon, MaggLite.

ABSTRACT

This demonstration presents two applications developed with the MaggLite post-WIMP toolkit: the interface builder of the toolkit (MaggLite Interface Builder) and a freehand sketching tool (Svalabard). MaggLite relies on a new model and includes a large set of advanced "pluggable" interaction techniques. It improves flexibility and offers new possibilities for the design of interfaces.

CATEGORIES AND SUBJECT DESCRIPTORS: H.5.2 [Information Interfaces]: User Interfaces --- Graphical user interfaces (GUI), User interface management systems (UIMS), Interaction styles, Prototyping, Input devices and strategies; D2.11 [Software Engineering]: Software Architectures.

Additional Keywords and Phrases: GUI toolkits, GUI architectures, ICON, MaggLite, interaction techniques, interaction design.

© Copyright ACM, (2004). This is the author's version of the work. It is posted here by permission of ACM for your personnal use. Not for redistribution. The definitive version was published in Proceedings of the 16th French-Speaking Conference on Human-Computer Interaction (IHM'04). {ISBN : , (2004)}

INTRODUCTION

MaggLite est une boîte à outils permettant le prototypage et la conception d'interfaces graphiques avancées. Elle fournit les abstractions et mécanismes nécessaires à la création d'objets graphiques, mais propose aussi un ensemble de techniques d'interaction avancées (reconnaissance de gestes, reconnaissance et synthèse vocale, techniques de manipulation directe, toolglass, fisheye, etc.). Ces techniques, pouvant être utilisées dans les applications et configurées graphiquement (figure 1), sont dites "techniques d'interaction enfichables".

MaggLite repose sur un modèle original de "graphes combinés" qui permet une grande flexibilité lors de la conception des interfaces mais aussi au niveau de leur utilisation: une interface développée avec MaggLite est représentée par un graphe de scène (partie graphique de l'interface) et un graphe d'interaction (comportement des objets graphiques). Ce graphe d'interaction connecte les périphériques d'entrée avec les techniques d'interaction génériques de MaggLite, les manipulateurs directs des objets graphiques ou les outils de l'application.

Ces deux graphes sont combinés à l'exécution de l'application, et peuvent être changés ou modifiés dynamiquement. Le graphe de scène peut être conçu avec un constructeur d'interfaces ou par programmation (en Java). Le graphe d'interaction est construit avec l'éditeur graphique d'ICon 1]. L'architecture de MaggLite et les outils proposés facilitent le prototypage, le développement et la réification de techniques d'interaction avancées et non conventionnelles.

DEUX APPLICATIONS MAGGLITE

Notre démonstration repose sur deux applications développées avec MaggLite et représentatives de ses capacités: le constructeur d'interfaces de MaggLite, MaggLite Interface Builder, et une application de dessin à main levée, Svalabard.

Conception avec MaggLite Interface Builder

MaggLite Interface Builder (MIB) permet de construire rapidement des interfaces MaggLite. Nous le présenterons à travers la création d'un simple puzzle.

Dessin de l'interface graphique (figure 1a)

MIB utilise les outils de reconnaissance de gestes et de dessin à main levée de MaggLite pour rendre la conception d'interfaces plus simple. Il y a 2 modes de création, sélectionnés à l'aide d'une "toolglass":

1. Mode dessin libre: Chaque zone de la toolglass représente un type d'objet graphique. Lorsqu'un trait débute dans l'une de ces zones, un objet de la classe correspondante est créé avec la forme dessinée. Pour le puzzle, il suffit de créer chaque pièce en partant de la zone "MaggLiteComponent" de la toolglass (figure 2). La dernière zone de la toolglass est utilisée pour changer la couleur des composants.
   
   

   Figure 2 : Dessiner un composant avec MIB.
2. Mode geste: Si un trait débute en dehors de la toolglass, il est interprété comme un geste. Si ce geste est reconnu, un objet du type correspondant est créé ou une action est exécutée (suppression, par exemple). Si le geste n'est pas reconnu, le trait est conservé comme an-notation (figure 3).
   
   

   Figure 3: MIB - Utilisation des gestes.
   (a) début d'un nouveau geste. (b) reconnu. (c) non reconnu.

Dans la configuration par défaut, l'outil principal (dessin, gestes et couleurs) est manipulé avec une tablette graphique, la toolglass est déplacée avec un Magellan (périphérique isométrique à 6 degrés de liberté) et une souris permet de déplacer les objets. Etant donné la configurabilité des périphériques d'entrée dans MaggLite, d'autres périphériques et techniques d'interaction peuvent être utilisés (reconnaissance vocale pour sélectionner les types d'objets, souris pour dessiner, etc.).

Configuration de l'interaction (figure 1b)

Dès lors qu'un composant est ajouté à l'interface, le concepteur peut configurer la façon de le contrôler à l'aide du configurateur graphique d'ICon. Cela est rendu possible grâce aux interactions génériques et aux manipulateurs directs des objets MaggLite, représentés par des modules d'ICon. L'interface peut alors être sauvegardée dans un fichier XML et réutilisée ultérieurement (figure 1c).

Dessin à main levée avec Svalabard

Svalabard est une interface de dessin en perspective pour la modélisation 3D, conçue pour s'insérer dans un processus de dessin créatif [2].

Figure 4: Svalabard.
(a) Périphériques. (b) Interface.

Les interactions avancées fournies par MaggLite ont permis de produire une interface épurée, proche d'une table à dessiner (figure 1b). Le dessinateur n'est pas limité par les périphériques d'entrée, et peut facilement adapter et configurer l'interface à son système (figure 1a). De plus, le modèle des graphes d'interaction de MaggLite a permis d'y insérer simplement des filtres de dessin (segmentation, concordance de points, détection du contexte, etc.) et de la rendre évolutive.

Une première distribution Java de MaggLite, ainsi que d'autres informations (images, vidéos et démonstrations) sont disponibles sur Internet: http://www.emn.fr/x-info/magglite.

BIBLIOGRAPHIE