L'éditeur de configurations d'ICON permet de visualiser, modifier, sauver et charger des configurations d'entrée. La construction et l'édition des configurations d'entrée se font essentiellement par manipulation directe. Bien que les configurations d'entrée soient indépendantes de l'éditeur et peuvent être implémentées directement en Java, cet outil constitue l'élément central de la boîte à outils ICON, et lui confère toute sa souplesse. Le développeur d'applications peut, à travers cet outil, construire et tester un grand nombre de configurations d'entrée potentielles qui répondent à des situations spécifiques en termes de dispositifs d'entrée. L'utilisateur avancé peut ensuite personnaliser l'interaction pour la plier à ses besoins spécifiques.
Dans cette section, nous présenterons brièvement l'éditeur de configurations d'ICON. Puis, nous donnerons aperçu des différents types de configuration d'entrée qu'il est possible de construire avec cet éditeur. Nous avons construit et testé de nombreuses méthodes d'entrée avec ICON, et nous n'en fournirons que les exemples les plus représentatifs.
L'efficacité d'un outil de programmation visuelle repose en grande partie sur le choix des techniques d'interaction, choix qui détermine sa facilité d'apprentissage ainsi que les performances effectives dans les différentes tâches de programmation. Les techniques employées dans notre éditeur, simples et standards pour la plupart et plus spécifiques pour d'autres, répondent aux tâches courantes de construction et d'édition de configurations d'entrée. Nous les évoquons dans ce court descriptif. Des clips vidéo montrant des constructions ou des modifications de configurations sont également disponibles en téléchargement [Dragicevic, 2002].
![]() |
La fenêtre d'édition. Une capture d'écran de la fenêtre d'édition de configurations d'entrée est donnée figure 4.12. Celle-ci est divisée en trois parties: En haut à gauche, l'arborescence des dossiers de dispositifs-prototypes, qui comprend les dispositifs d'entrée disponibles, les dispositifs utilitaires d'ICON, et le cas échéant, le dossier de l'application en cours d'édition. En bas à gauche, la liste des dispositifs-prototypes pour le dossier actif. À droite, l'espace de travail zoomable où est visualisée la configuration d'entrée.
Instanciation et inspection de dispositifs. Pour être utilisé dans une configuration, un dispositif est instancié à partir de son prototype par cliquer-glisser sur l'espace de travail (figure 4.13, image de gauche). Une technique de type fisheye peut être activée par un quasi-mode afin de « pousser » les dispositifs voisins si la place manque. Des info-bulles (tooltips) permettent d'obtenir des informations sur le dispositif: courte description du dispositif et de ses slots, nom complet et type de chaque slot, fenêtre d'aide détaillée sur le dispositif (figure 4.13 au centre). La hiérarchie des slots peut être inspectée à la manière des répertoires dans les explorateurs de fichiers (figure 4.13, image de droite).
![]() |
Techniques de connexion. Les slots sont connectés par cliquer-glisser Les compatibilités de types et les cycles sont explicités par des retours graphiques et magnétiques. Le rendu des connexions est automatique et emploie un algorithme simple et original, optimisé pour les graphes acycliques4.2. Des techniques d'interaction dédiées permettent de faciliter certaines tâches de connexion courantes. L'auto-expand est une technique gestuelle qui ouvre et ferme automatiquement les slots composites pendant une interaction de connexion (figure 4.14)4.3. Une technique de reconnexion permet également de déplacer l'une des deux extrémités d'une connexion, et des connexions groupées peuvent être créées automatiquement entre des slots composites.
![]() |
Copie et lien. La copie d'un dispositif (figure 4.15, image de gauche) et la création d'un lien (figure 4.15, image de droite) se font par manipulation directe. L'opération de copie crée une nouvelle instance du dispositif et en reproduit le paramétrage. Les liens, explicités par des lignes verticales épaisses (figure 4.15, image de droite), permettent d'afficher le même dispositif en différents endroits de la configuration, afin de réduire sa complexité visuelle. Comme nous le verrons dans certaines configurations-exemples, les liens peuvent être déployés dans la dimension verticale, perpendiculairement au flux de connexions qui est essentiellement horizontal.
Niveau de détail. Les dispositifs peuvent être réduits pour ne montrer que les slots utilisés, et diminuer ainsi la complexité visuelle d'une configuration. Le passage d'un mode à l'autre se fait par un simple clic sur le dispositif, ou automatiquement par la technique de l'auto-expand décrite précédemment. L'espace de travail est zoomable, ainsi que les dispositifs individuels (pas de zoom sémantique pour l'instant, en dehors d'une prise en charge minimale des niveaux de détail).
Cycle d'édition-exécution. Une fois construite, une configuration d'entrée peut être immédiatement testée en lançant son exécution (figure 4.17, à gauche). Par la suite, la configuration peut à nouveau être éditée par l'emploi du raccourci Alt+C ou par une option de menu si l'application interactive le prévoit (figure 4.17, à droite). L'édition dynamique permet d'affiner une configuration d'entrée par des cycles d'édition-exécution, ce qui est particulièrement utile pour tester des techniques d'interaction, ou régler des paramètres arbitraires comme des niveaux de sensibilité.
Dans cette partie, nous donnons un aperçu des techniques d'interaction qui peuvent être construites avec l'éditeur de configurations. Nous évoquerons des exemples de méthodes d'entrée adaptées à des configurations matérielles standard, enrichies ou appauvries, puis des configurations exploitant des techniques d'interaction novatrices et avancées. Tous les exemples sont issus de captures d'écran de l'éditeur d'ICON, ou de l'application contrôlée.
![]() |
Des méthodes d'interaction standards souris/clavier peuvent être construites et livrées avec les applications sous forme de configurations d'entrée par défaut. La figure 4.19 illustre une configuration qui reproduit le contrôle positionnel standard des composants de Swing à la souris. Les positions relatives de la souris bas-niveau sont transformées en valeurs absolues qui déplacent un curseur, puis sélectionnent le composant cible et contrôlent ce composant en générant des événements souris.
Cette configuration peut être étendue pour une description plus fine du comportement standard de Swing. La figure 4.18 met en évidence tous les slots disponibles sur les dispositifs de la figure 4.19. Par des connexions supplémentaires, il est possible de prendre en compte les autres boutons de la souris et leurs modificateurs. Le slot but1 du curseur peut être connecté au slot state.focus de JComponent pour décrire le changement de focus à la souris. La configuration peut également être complétée pour prendre en compte les mécanismes relatifs au clavier: la figure 4.20 montre un exemple de contrôle du focus avec les touches Tab et Shift+Tab, ainsi que la simulation du clic avec la touche espace.
Des méthodes d'interaction standard, basées sur la souris et le clavier peuvent également être construites pour des applications spécifiques. Sur la figure 4.21, l'outil de dessin à main levée est contrôlé à la souris de manière triviale. Pour être complète, cette configuration minimale peut être étendue en insérant un feedback supplémentaire sur le pointeur, et en décrivant le contrôle des attributs de brosse, ainsi que le contrôle modal d'outils multiples.
Parce que chaque curseur gère son propre retour graphique, l'utilisation de curseurs multiples est élémentaire avec ICON. Comme illustré sur la figure 4.22, la duplication de la configuration de la figure 4.18 et le remplacement de la souris par un autre dispositif suffit à permettre un contrôle bimanuel ou multi-utilisateurs des applications Swing. Deux composants interactifs (ou plus, selon le nombre de pointeurs) peuvent être contrôlés en même temps. Cependant les interactions concurrentes ne sont pas permises au sein d'un même composant. En outre, certains mécanismes de Swing, conçus sur la base d'un pointeur unique, peuvent se révéler gênants: par exemple, le fait de cliquer avec un pointeur peut fermer un menu qui vient d'être ouvert par un autre pointeur. Nous discuterons de ce problème dans la section 5.6.2
Contrairement aux dispositifs Swing, les dispositifs d'applications peuvent être conçus pour gérer la concurrence, et des techniques d'interaction bimanuelle peuvent être décrites avec une granularité bien plus fine. La figure 4.23 montre comment, avec un dispositif supplémentaire, une technique d'interaction standard peut être remplacée par une technique d'interaction bimanuelle. Le cadre supérieur gauche illustre le contrôle par défaut de l'outil de tracé de lignes d'ICONDraw, construit avec des dispositifs de routage conditionnel. Cette technique consiste à placer successivement une extrémité de la ligne puis l'autre. Dans le cadre inférieur, la configuration a été modifiée afin que le curseur (contrôlé par la souris) soit directement relié à une extrémité de la ligne, et qu'une tablette graphique soit reliée à la deuxième.
Dans ICON, les dimensions supplémentaires fournies par les dispositifs étendus peuvent être facilement exploitées. La figure 4.24 montre comment, dans une configuration ICONDraw, le canal de pression d'une tablette graphique peut être assigné à la dimension de la brosse.
![]() |
Les dispositifs d'entrée riches, comme les dispositifs à multiples degrés de liberté, peuvent également être exploités à leur maximum. La figure 4.25 illustre une configuration où une application zoomable, décrite par le dispositif ZCanvas, est contrôlée par un dispositif isométrique à six degrés de liberté de type Magellan. La technique employée (que nous nommons PZR pour « Pan/Zoom/Rotate ») permet de contrôler simultanément la position, le zoom et l'orientation du document.
Dans cette configuration-exemple, les dimensions x et z du dispositif, parallèles aux axes de la souris, déplacent la zone de travail. Sur chaque axe, trois dispositifs de traitement enchaînés convertissent des valeurs relatives réelles en valeurs absolues entières. La dimension y du dispositif, qui traduit la pression ou la traction verticale sur le dispositif, envoie des commandes de zoom au document à travers un dispositif scriptable, dont le code a été donné en exemple dans la section 4.3.1. Enfin, la dimension u envoie des commandes de rotation au document, à travers une simple remise à l'échelle.
Deux dispositifs compatibles (par exemple, deux dispositifs positionnels) peuvent être facilement intervertis dans ICON. Si les dispositifs sont de nature différente, la puissance d'expression d'ICON peut être exploitée pour construire des techniques d'interaction capables d'émuler un dispositif. La bibliothèque d'ICON fournit en outre des adaptateurs prédéfinis pour ce type de tâche. La figure 4.26 montre comment un tel adaptateur peut être inséré entre un clavier et un curseur: l'adaptateur KeyControl est un dispositif composite construit avec ICON, qui permet un contrôle fluide de dimensions continues à partir de dispositifs à deux états. Des techniques plus spécifiques de contrôle adaptées à des entrées appauvries peuvent également être construites. Des touches clavier peuvent par exemple être directement assignées à des boutons ou à des commandes dans une application graphique.
Bien qu'il ne gère pas les grammaires, le dispositif de commande vocale peut être employé pour un contrôle vocal simple d'applications interactives. La figure 4.27 illustre une configuration permettant de manipuler les barres de défilement de Swing à partir de commandes telles que plus, un peu moins, ou minimum. Sur cette figure sont représentés la fenêtre de propriétés dans laquelle le vocabulaire est spécifié, ainsi que le dispositif de contrôle conditionnel Switch permettant d'activer une commande en fonction de l'index de la chaîne reconnue.
La figure 4.28 montre comment, dans ICONDraw, des attributs de brosse peuvent être contrôlés à la voix, avec des commandes comme bleu, rouge, plus gros, ou moins gros. La taille de la brosse est contrôlée par un dispositif de commande vocale suivi d'un dispositif Switch, puis d'un dispositif Cycle qui permet un contrôle incrémental paramétrable d'une valeur entière. Le contrôle de la couleur emploie un second dispositif de commande vocale paramétré avec un vocabulaire de couleurs. La chaîne de caractères reconnue est convertie en composantes RGB par un dispositif qui a été implémenté pour l'occasion (voir section 4.3.1).
Parmi d'autres mécanismes de contrôle vocal que nous avons expérimentés, une technique de curseur contrôlé à la voix, décrite dans la section 4.4.4, a été implémentée pour permettre un contrôle vocal générique des applications interactives.
Les dispositifs de traitement de données et de retour graphique d'ICON peuvent servir à construire des techniques d'interaction à part entière. Ces techniques d'interaction peuvent être spécifiques à une application, ou réutilisables si elles sont décrites à un niveau assez bas dans la configuration. Ces dernières peuvent être transformées en dispositifs composites et être réutilisées dans d'autres configurations.
![]() |
Nous présentons en guise d'exemple un nouveau paradigme d'interaction conçu et testé avec ICON, le pointage augmenté. Le pointage augmenté décrit un ensemble de techniques d'interaction positionnelles qui emploient un double pointeur, composé d'un pointeur témoin (ou de bas niveau) et d'un pointeur augmenté (ou de haut niveau) (figure 4.29). Le premier pointeur produit un retour graphique direct sur le dispositif positionnel sans agir sur l'interface. Le second pointeur, qui agit sur l'interface, est lié au premier mais possède un comportement supplémentaire destiné à faciliter certaines tâches de pointage.
![]() |
Pour des utilisateurs présentant des difficultés motrices ou dans certaines tâches positionnelles telles que le dessin à main levée, il peut être utile de lisser les déplacements du pointeur. La figure 4.30 présente la partie d'une configuration d'entrée décrivant cette technique appliquée au pointage augmenté: le premier dispositif Cursor constitue le pointeur témoin. Le second, renommé smoothCursor, placé à la suite de filtres passe-bas, constitue le pointeur augmenté. Ce dernier fait office de dispositif virtuel et contrôle d'autres parties de la configuration. Cette configuration a rapidement été obtenue en modifiant une configuration de contrôle positionnel standard. Sur la partie droite de la figure, la technique est utilisée pour le dessin à main levée dans ICONDraw: au départ et à la fin du tracé, les deux curseurs sont confondus. Pendant le tracé, le curseur effectif (en gris foncé) subit un retard et se désolidarise du premier pour tracer une ligne fluide.
Ici comme dans les exemples qui vont suivre, le pointeur témoin est utile pour la compréhension et la visualisation du comportement du pointeur augmenté par rapport aux mouvements réels du dispositif, tout en conservant une sensation de contrôle sur ce dernier.
![]() |
La figure 4.31 décrit une autre technique de pointage augmenté, le pointage de second ordre. Les filtres passe-bas sont remplacés par des dispositifs dérivateurs, qui calculent la vitesse d'évolution de valeurs numériques (ces derniers ont été décrits avec ICON puis transformés en dispositifs composites). Ici, le pointage augmenté est activé par le bouton droit de la souris, le bouton gauche effectuant un cliquer-glisser standard.
Le pointage de second ordre permet d'agir sur la vitesse du pointeur au lieu de sa position. Il est utile lors de tâches de pointage qui requièrent un déplacement uniforme et prolongé de celui-ci: recherche dans un long document, ou recherche dans une liste avec sélection successive des éléments. Il permet également des cliquer-glisser non limités aux bords de l'écran, utiles pour la navigation (pan) dans un large espace de travail. Sur la partie droite de la figure 4.31, l'utilisateur met à contribution la technique sur une barre de défilement Swing4.4
D'autres techniques de pointage augmenté ont été mises en
uvre, comme le
pointage contraint (une aide au tracé de lignes horizontales ou verticales
nécessite uniquement un blocage conditionnel des valeurs en x ou y dans la
configuration), ou la grille magnétique de bas-niveau. Toutes ces techniques
géométriques permettent d'ajouter des fonctionnalités à des applications
interactives sans modifier le code de celles-ci.
Pour finir, nous décrirons une technique assimilable à un pointage augmenté, le curseur vocal. Un pointeur est contrôlé à l'aide de commandes vocales agissant sur sa direction et sa vitesse, et deux autres commandes permettent de « simuler » l'appui et le relâchement du bouton de la souris. Le temps de reconnaissance, de l'ordre de la seconde pour la plupart des moteurs, pose d'importants problèmes pour le contrôle positionnel. Notre technique du curseur vocal permet de prendre en compte le contexte d'une commande, c'est-à-dire le moment où cette commande a commencé à être prononcée.
![]() |
Le curseur vocal est composé d'un curseur effectif et d'un curseur contextuel (figure 4.32). En temps normal, ils se déplacent de façon solidaire. Lorsque l'utilisateur commence à parler (augmentation brutale du niveau d'entrée), le curseur contextuel s'arrête et le curseur effectif continue à se déplacer. Si un bruit ou une commande non-contextuelle (contrôle de la vitesse) est finalement reconnue, le curseur contextuel rejoint le curseur effectif. Si une commande contextuelle (changement de direction ou appui/relâchement) est reconnue, le curseur effectif rejoint le curseur contextuel et la commande est validée.
La configuration d'entrée de la figure 4.33 décrit le gros du mécanisme du curseur vocal. Un dispositif SpeechCursor effectue les principaux calculs en déterminant les positions successives des deux curseurs en fonction des commandes reçues. Le dispositif de commande vocale est configuré conformément aux commandes supportées par SpeechCursor, et est relié au dispositif de synthèse vocale afin d'avoir un retour sur les commandes reconnues. Dans cette variante de pointage augmenté, les deux curseurs sont situés au même niveau dans la configuration. En effet, le déplacement de chacun des deux curseurs est fonction de l'autre.
Le dispositif SpeechCursor, principal dispositif de cette configuration, est un dispositif composite construit avec des dispositifs utilitaires de base. Celui-ci est relativement complexe: il comporte 17 dispositifs et emploie un dispositif composite lui-même constitué de 21 dispositifs de base. Nous y reviendrons dans la section 5.4 lorsque nous développerons le problème de la complexité.
Avec la technique du curseur vocal vue précédemment, nous ne sommes plus très loin des limites pratiques de la construction de comportements complexes à partir de briques de base. Pour décrire des techniques d'interaction complexes, l'emploi de dispositifs scriptables ou l'implémentation de dispositifs monolithiques sont des solutions à privilégier.
Les techniques d'interaction implémentées sous forme de dispositif, « prêtes à l'emploi », rendent possible la description rapide d'interfaces évoluées. La bibliothèque d'ICON comporte actuellement trois de ces techniques d'interaction, toutes trois basées sur la semi-transparence: la Toolglass, le Floating Quikwriting, et le dispositif de Commande Gestuelle.
Le dispositif Toolglass permet d'animer une barre d'outils semi-transparente, manipulable en interaction bimanuelle. Ce dispositif implémente la technique d'interaction de même nom (voir section 1.3.3), avec de plus une transparence contrôlable. La présentation visuelle de cette barre d'outils (liste et disposition des icônes à afficher) est spécifiée dans la fenêtre de propriétés du dispositif (figure 4.34).
Les slots
et
de la toolglass ont fonction de picking: lorsque
son slot
est à vrai, le dispositif émet vrai sur l'un des slots de
selon l'outil qui se trouve à la position donnée. Cette position est également
retransmise en sortie sur les slots
et
. Dans la configuration
de la figure 4.34, chaque slot booléen de
est
connecté au slot
d'un curseur dédié (seul le contrôle de l'outil
Freehand est représenté ici, les autres étant similaires). Lorsqu'aucune
icône n'a été sélectionnée, le curseur actif est le curseur par défaut (en haut
sur la figure). Dans le cas contraire, un autre curseur est activé (en bas sur
la figure), et à travers lui, l'outil correspondant. Pour finir, la toolglass
peut être déplacée à travers ses slots
et
, et sa transparence
peut également être contrôlée. Ici, l'emplacement et la transparence de la
barre d'outils sont simultanément contrôlées au stylet et les outils sont
contrôlés à la souris.
![]() |
Le dispositif QuikWrite implémente une version semi-transparente de la technique d'interaction gestuelle de même nom (voir section 1.3.2), appelée Floating QuikWriting. Au lieu d'être fixe, la zone de saisie gestuelle est flottante et est solidaire d'un pointeur en forme de caret (figure 4.35). Dans le mode pointage, la position de l'ensemble est contrôlée par un dispositif positionnel. Lors du passage au mode gestuel (bouton enfoncé), le curseur textuel est déplacé à la position du pointeur, et l'objet flottant s'immobilise pour passer la main à son curseur gestuel interne.
Cette technique est efficace pour la révision de documents, car des éditions simples comme la suppression ou l'insertion d'un caractère dans le texte se font en un geste rapide, et parce qu'elle ne requiert pas de changement de dispositif entre la navigation et la saisie.
Le dispositif QuikWrite reçoit simplement des événements positionnels et les transcrit en commandes booléennes, en plus de produire un retour graphique. La configuration de la figure 4.36 illustre son utilisation avec les composants texte de Swing.
Implémenté récemment, le dispositif GestureCmd offre une prise en charge de l'interaction gestuelle conventionnelle. Il repose sur le moteur de classification de Satin [Hong and Landay, 2000] dont il emploie également les vocabulaires prédéfinis et l'interface d'entraînement. La fenêtre de propriétés du dispositif permet de lancer celle-ci, et de paramétrer l'aspect de la trace affichée en incrustation. Le dispositif de commandes gestuelles émet, en plus des commandes et des classes de commandes reconnues, des propriétés géométriques telles que le rectangle englobant, le point de départ et le point d'arrivée du geste. Nous avons employé ce dispositif pour dessiner des formes géométriques dans ICONDraw et pour saisir du texte dans les applications Swing avec l'alphabet Graffiti [MacKenzie and Zhang, 1997].