#09 Styles d`interaction

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 homme-
machine 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)