Informatique Graphique Cours 9 - Styles d'interaction (chapitre 9 de Foley-vanDam) Par rapport au contenu initialement prévu (Dialogue, modes, manipulation directe), j'ai changé : modes, styles d'interaction, principes généraux de conception. Ca ne me satisfait pas vraiment mais ça devrai aller pour cette année. Ca reprend une bonne partie du bouquin. Modes Définition : état de l'interface dans lequel les actions de l'utilisateurs sont interprétées par le système de manière homogène et différente des autres modes. On distingue deux types de modes : les modes spatiaux et les modes temporels. Un cas particulier de modes temporels sont les micro-modes. Comme on va le voir, les modes ne sont pas forcément une mauvaise chose, comme on le dit souvent. En fait, ils sont indispensables. Mais on peut les rendre "invisibles" ou presque grâce à quelques "astuces". Modes spatiaux En fonction de la position du périphérique de pointage, l'interprétation des actions diffère. Par exemple, un clic dans une barre de menu provoque un effet différent qu'un clic sur la barre de titre d'une fenêtre, sur un objet graphique, etc. Ces modes passent inaperçu car il y a une mise en évidence graphique du lieu où ils se manifestent. C'est même leur disparition qui est souvent remarquée : lorsqu'une boîte modale est affichée, tout l'écran sauf la boîte de dialogue est dans le même mode spatial : on a l'impression que l'interface ne répond plus. Idéalement, il faudrait donner un feedback de l'absence de mode spatial, par exemple en grisant l'ensemble de l'écran hors de la boîte de dialogue. C'est d'ailleurs cette technique qui est utilisée pour mettre en évidence les commandes inactives d'un menu : les commandes grisées ont un mode spatial différent des autres. Modes temporels C'est la notion la plus courante de mode : pendant un intervalle de temps (de l'activation du mode à sa désactivation), les actions de l'utilisateur sont interprétées de manière particulière. L'exemple typique est le mode insertion et le mode commande de l'éditeur vi. Comme il n'y a pas d'indication à l'écran du mode courant, l'utilisateur ne peut pas savoir comment vont être interpétées ses actions sauf s'il mémorise le mode courant. Un exemple courant de mode temporel dans une interface graphique est l'utilisation d'une palette d'outils, comme dans MacPaint, MacDraw, etc. En fonction de l'outil sélectionné (par exemple l'outil de sélection, de création de rectangle, etc.) les mêmes actions ont des effets différents. Comme la palette n'est pas le point principal d'attention de l'utilisateur, même l'affichage du mode courant dans la palette ne suffit pas à éviter les erreurs. Une meilleure techjnique consiste à utiliser la forme du curseur (qui est le principal point d'attention) pour donner un feed-back du mode courant. Les modes temporels sont en général activés par l'utilisateur. Ils sont parfois désactivés par le système lui-même (retour à un mode par défaut). Par exemple, dans MacDraw, après une action de création (mode création activé par sélection de l'outil Rectangle dans la palette par exemple), le système revient au mode sélection par défaut. Si on veut créer plusieurs rectangles à la suite, on a une mauvaise surprise. De manière générale, les changements de mode doivent être à l'initiative de l'utilisateur. Les modes temporels sont couplés avec les modes spatiaux. Lorsqu'une boîte modale apparaît, le mode spatial qu'elle définit est actif pendant que le mode temporel l'est. Micro-modes Les micro-modes sont des modes temporels liés à une action physique continue de l'utilisateur. Par exemple, pendant un "drag" (déplacement de la souris avec le bouton enfoncé), on est dans un micro-mode : les actions de l'utilisateur (déplacement) sont interprétées différemment que lorsque le bouton est relâche. Ces modes passent inaperçu car ils correspondent à des "modes" naturels dans le monde réel : pour prendre un objet et le déplacer, il faut le tenir. Cela explique pourquoi les menus déroulants du Macintosh sont plus facile à appréhender que ceux de Windows : sur le Mac, la sélection dans un menu utilise un micro-mode, tandis que dans Windows, c'est un mode temporel sans autre feed-back que la présence du menu à l'écran. En résumé, il faut éviter les modes temporels et plutôt utiliser des modes spatiaux et des micro-modes. Dans tous les cas, il faut un feed-back adéquat pour informer l'utilisateur du mode courant. Les modes sont une manifestation "locale" du dialogue hommemachine ou de la syntaxe de l'interaction. Ainsi, si l'on choisit une syntaxe de type "verbe-objet", on impose un mode temporel par verbe, ou au moins un mode temporel de sélection de verbe et un mode temporel de sélection d'objet. Par contre si l'on choisit une syntaxe de type "objet-verbe", on utilise uniquement des modes spatiaux : la notion de sélection permet de définir l'objet de la commande par un mode de sélection spatial (sélection directe des objets) ; le verbe est sélectionné dans une palette ou un menu, qui sont comme on l'a vu des modes spatiaux. De plus, la connaissance de l'objet au moment de la sélection du verbe permet de ne rendre activable (mode spatial) que les commandes concernées. Cependant, cette syntaxe "objet-verbe" est difficile à utiliser pour les opérations de création. Les boîtes de dialogue modales sont un autre exemple de dialogue. Ces boîtes de dialogue sont généralement affichées à la suite de la sélection d'une commande dans un menu. Par exemple, une boîte de dialogue d'un outil de dessin permet en général de changer les attributs graphiques du (des) objet(s) sélectionné(s). Cette boîte est souvent modale car on estime qu'il faut définir les attributs, puis les valider avant de voir les objets graphiques modifiés : on impose un mode temporel et spatial. Ce mode est cependant superflu : le changement de valeur d'attribut peut très bien prendre effet immédiatement (plus de mode temporel) ; les objets peuvent être édités pendant que la boîte est présente à l'écran. Il suffit de la mettre à jour lorsque la sélection change. Evidemment, tout cela nécessite plus d'efforts de conception et de programmation ... Styles d'interaction (section 9.2) Definition : ensemble de règles qui régissent la forme et le contenu de la présentation et de l'interaction. Les styles s'appuient sur les techniques d'interaction et sur les modes. Saisie de formulaires (vanDam n'en parle pas). Un formulaire est une collection de champs éditables et d'éléments non éditables. L'interaction consiste à entrer des valeurs dans les champs (texte, choix multiples, etc.), et à valider l'ensemble du formulaire. Beaucoup d'interfaces dites "graphiques" sont en réalité des interfaces à formulaires. L'une des raisons est qu'elles sont plus faciles à concevoir (c'est la machine qui dirige le dialogue) et à implémenter (les boîtes à outils d'interfaces offrent tous les "widgets" nécessaires). Exemple : la plupart des services Minitel. Navigation (hypertexte) (vanDam n'en parle pas) Un système hypertexte permet la navigation dans un ensemble de nœuds, reliés entre eux par un ensemble de liens. Un nœud se présente typiquement comme une page à l'écran. Les liens peuvent apparaître dans le corps de la page (mots soulignés ou encadrés) et/ou dans des menus/palettes. L'interaction consiste simplement à sélectionner des liens. D'autres primitives de navigation complète les liens : navigation avant et arrière dans les nœuds visités récemment, navigation directe vers un nœud par son nom, etc. Exemples : le WorldWideWeb et ses "browsers" Mosaic, Netscape, etc. ; le systeme d'information d'Emacs. Edition de documents, notion de WYSIWYG WYSIWIG = What You See Is What You Get Le principe du WYSIWYG est de présenter un document à l'écran sous une forme la plus proche possible de sa forme imprimée : texte, schéma, partition musicale, etc. Ainsi, dans un système de traitement de texte WYSIWIG, l'équation d = √b2 - 4ac apparaît telle quelle, tandis que dans un système non WYSIWYG, elle aurait par exemple la forme $d \equal \sqr{b^2 - 4 a c}$ L'interaction avec un document WYSIWYG utilise en général • des techniques de manipulation directe ; • des techniques de manipulation "indirecte": • boîtes de dialogues ; • menus et palettes. Pour mettre en œuvre les techniques de manipulation directe, il peut être nécessaire de violer le principe de WYSIWYG. Par exemple, dans un logiciel comme Word, on peut visualiser le texte en mode pleine page ou en mode défilement, on peut afficher les caractères normalement invisibles (tabulations, espaces, retour-chariot, etc.). Cependant, la notion de WYSIWYG est indépendante de celle de manipulation directe. On peut faire de la manipulation directe de représentations non WYSIWYG, et on peut éditer un document WYSIWYG par un langage de commande... Interaction iconique Un icone est une représentation graphique d'un objet ou d'un concept. Les icones doivent être conçus pour être aisément reconnaissables, mémorisables, et différentiables les uns des autres. La stratégie la plus efficace consiste à créer des familles d'icones, comme par exemple sur le Macintosh : la forme générale de l'icone indique s'il s'agit d'un document ou d'une application, le contenu indique s'il s'agit de quel type de document il s'agit (texte, graphique...) : L'interaction iconique consiste à effectuer des commandes par manipulation directe des icones (sélection, déplacement, éventuellement vers un icone) et les techniques usuelles de manipulation indirecte (menus, boîtes de dialogues). Exercice : Décrire (par une machine à états) le feedback sémantique (mise en évidence des destinations possibles) lorsque l'on déplace un icone. Interaction par reconnaissance de traces (PenPoint, Newton, etc.) Ce style d'interaction consiste à reconnaitre les mouvements du périphérique de localisation par rapport à un vocabulaire gestuel prédéfini. Un geste définit une commande et éventuellement certains de ses paramètres (taille, portée du geste, point de départ et/ou d'arrivée). La position du geste détermine son objet. L'interaction est donc concise, mais invisible : il est difficile de savoir quel est le vocabulaire. Donner un exemple de vocabulaire gestuel. Autres styles à venir ou en émergence, par exemple réalité virtuelle. Principes généraux pour la conception d'une interface (section 9.3) Il existe de nombreuses règles, méthodes, principes, etc. pour concevoir des interfaces de qualité. Il n'est pas question ici d'en faire le tour. Nous identifions seulement quelques principes généraux, regroupés en trois catégories : • Minimiser la charge cognitive • Faciliter l'apprentissage • Soigner l'apparence graphique. Ce principe ne sera pas couvert, car il implique des connaissances en arts graphiques et en techniques de communication graphique. Minimiser la charge cognitive La charge cognitive est ce que l'utilisateur doit garder en mémoire pour pouvoir utiliser le système. Cela inclut • le vocabulaire des commandes • l'état courant de l'interface • le sens des symboles graphiques (icones par exemple) Une manière efficace de diminuer la charge cognitive est de la transférer vers le système perceptif. Ainsi, lorsque les commandes d'un menu restent fixe, la "mémoire des muscles" permet de sélectionner des commandes de manière très rapide, instinctive. De la même manière, l'usage d'une animation permet de rendre visible la transition entre deux états et d'éviter ainsi d'avoir à construire cette transition à partir de deux états discrets (avant-après). Cohérence / homogénéité La cohérence peut (doit) être interne et externe. La cohérence interne concerne les éléments internes d'une application, tandis que la cohérence externe concerne les éléments communs à plusieurs applications. Par ailleurs la cohérence concerne les sorties ou présentations (forme graphique des éléments) et les entrées (modes d'interaction). En sortie: • utiliser les même codes graphiques, les mêmes couleurs • afficher les message (erreurs et autres) aux mêmes endroits • utiliser des menus similaires (exemple: File/Edit menu sur le Macintosh) En entrée: • commandes génériques : ouvrir, fermer, copier-couper-coller, déplacer, etc. • commandes générales, indépendantes du contexte : annuler, aide, quitter, etc. • usage du clavier : équivalents clavier, modifieurs (shift, control). La cohérence permet d'une part de diminuer ce que l'utilisateur doit savoir, d'autre part d'utiliser ce savoir plus souvent, ce qui le renforce. Retours d'information Les retours d'information ont pour objet d'indiquer à l'utilisateur ce que le système est en train de faire en réponse aux actions de l'utilisateur. Les retours d'informations se manifestent à plusieurs niveaux de granularité dans l'interface : • pendant les actions de l'utiliateur (rubber-band, etc.) • état courant de l'interface (commandes grisées, forme de curseur, etc.) • état du système lors de commandes longues ("progress-bar", curseur d'attente) • messages d'erreur Faciliter l'apprentissage Les êtres humains apprennent par essais-erreurs, et de manière progressive. Il est donc particulièrement important d'anticiper les erreurs d'utilisation pour aider l'apprentissage. Cela inclut : • prévenir les erreurs en les rendant impossibles (commandes inactives) • faciliter la récupération d'erreur (qualité des messages, undo, etc.) • permettre plusieurs niveaux d'utilisation Comparaison des styles d'interface A faire en exercice...