Cours ISI - WIMP
From Isiwiki
| ← Texte | ^ Cours ISI - Techniques d'interaction | → |
[edit] WIMP définition
WIMP est un acronyme pour "Windows, Icons, Menus and Pointing device"
L'histoire du wimp peut se résumer de la façon suivante:
- Fin 60 : En 1968, Douglas Englebart présente un modèle de la souris avec un certain nombre de concepts associés (sélectionner, glisser, ...).
- 70-80 : cette décennies est celle de smallTalk, un langage orienté objets développé au Xerox parc. Tous les éléments du WIMP sont présents dans l'interface du Xerox Star la machine spécialisée pour l'exécution de smalltalk, la notion de GUI (graphical User Interface) est totalement conceptualisée.
- 1983: Apple sort une machine appelée « Lisa » qui implémente le paradigme du WIMP.
- 1984: Apple sort le « MacIntosh » qui va véritablement populariser les interfaces graphiques
- 1985: Microsoft sort MS-Window 1.0 qui est une réponse à Apple. Mais qui du point de vue marketing est génial car le concept de fenêtre est amalgammé avec Microsoft.
- 1990: Microsoft sort MS-Window 3.0 qui est la première version vraiment exploitable pour les PC.
de droite à gauche: la première souris, le GUI de la Xerox Star, le Macintosh, les menus dans Windows 1.0
[edit] Les concepts du WIMP
Le WIMP se constitue autour des action suivantes:
- Présenter: les fenêtres, les icones, ... sont les mécanismes pour afficher à l'utilisateur les informations sur l'état du système.
- Interagir: un ensemble de dispositifs tels les menus, les boîtes de dialogues, listes, ... constituent les standards de l'interaction. Ils sont reconnus immédiatement par l'utilisateur.
- Désigner: Un ensemble de geste exécuter avec le pointeur sur les objets de l'interface constitue une gestuelle de base. On y trouve: sélectionner, glisser, marquer, ...
L'ensemble de ces concepts va construire un "paysage" pour l'utilisateur après un apprentissage court va constituer une interface signifiante. Les mécanismes de base de l'interaction seront les mêmes pour toutes les applicactions.
Par exemple: dans cette interface d'une application de traitement de texte, l'utilisateur reconnaît immédiatement:
- les boutons de la fenêtre,ascenseurs
- les règles de tabulation
- les barre de menus, barre de status
- les boutons de mise en page
- les pointeurs,
- les zones modifiables
- ...
Mais attention, la standardisation des éléments de l'interface est une des conditions nécessaires pour que l'utilisabilité des applications mais n'est pas une condition suffisante.
Pour démontrer cela, nous avons volontairement repris l'exemple de notre traitement de texte, en modifiant l'interface. On peut facilement passer à la surchage informationnelle. En sortant toutes les palettes d'outils. Le paysage s'est transformé et l'utilisateur perd ses repères (image 1). Dans la suivante, les palettes sont affichées verticalement ce qui donne une impressions d'écriture asiatique(image 2). Dans l'image 3, nous avons encadré la surface de travail avec les palettes, c'est baroque! Et finalement, nous avons placé chaque palette dans une fenêtre, on a une impression de tetris ?
[edit] La manipulation directe
On dit que la manipulation est direct si l'effet d'une action est immédiatement perceptible sinon la manipulation est indirect.
Dans l'exemple qui suit la mise en page des caractères est:
- directe - le fond du texte change au fur et à mesure que l'on choisit une couleur.
- indirecte - les changements dans la boîte de dialogue ne sont pas répercutés immédiatement.
Un autre exemple est celui du zoom dans "Starry night" un programme de simulation du ciel. Le Zoom est activable par:
- une réglette avec un curseur
- deux boutons +/-
- une liste d'optiques différentes (des jumelles au gros télescope)
voir vidéo ZOOM (charger depuis le cui!! todo)
Remarque il est tout à fait possible de créer des interfaces WIMP sans manipulation directe. Cependant la manipulation directe présente de nombreux avantages du point de vue de l'utilisabilité. Donc il est en général préférable de l'introduire quand c'est possible.
[edit] Techniques de désignation
Les quatres actions élémentaires que l'on fait avec le pointeur sont:
- Pointer
- Sélectionner
- Glisser
- Marquer
Pour mener à bien une opération complexe, on va les utiliser successivement et itérativement (rappelons que chacune de ces actions est soumise à la loi de Fitts!)
[edit] Pointer
L'action de pointer consiste à déplacer le pointeur (sans cliquer), généralement la flèche de la souris sur un objet ceci en vu e d'exécuter une action.
Le couplage pointeur/objet peut:
- modifier l'objet, par exemple le griser, montrer des poignées, afficher une liste d'action, ...
- modifier le pointeur pour montrer une action possible. Dans un traitement de texte, en déplacant le pointeur, il apparaît comme une barre d'insertion quand il est dans la zone texte, il prend la forme d'une flèche quand il est sur les barres de l'ascenceur et quand il arrive sur les bords de la fenêtre, il montre une double flèche.
Le couplage pointeur/objet dépend du contexte qui est déterminer par l'état de l'application, la pertinence des actions sur cet objet et du temps passé autour de l'objet.
Le couplage pointeur/objet doit inciter l'utilisateur à agir. Il doit lui montrer les possibilités d'actions.
voir la vidéo, observez les changements du pointeur
[edit] Sélectionner, glisser, marquer
L'action de sélectionner consiste à pointer et à cliquer. La combinaison dépend de l'objet, pour:
- un bouton: pointer cliquer
- une icône: pointer, double cliquer
- un texte: pointer, cliquer, taper
- un texte: pointer, cliquer, glisser, lacher
- …
pour les boutons on observera le jeu des ombres! (insérer ici les automates à états finis pour modéliser les différents états Gilles)
D'autres gestuelles permettent aussi de désigner, par exemple:
- entourer: permet de désigner un ensemble d'objets.
- glisser: permet d'associer un objet à une action
- glisser: permet de ranger un objet dans un conteneur
- glisser: permet de désigner la nouvelle position d'un objet ou ses nouvelles dimensions
- ...
[edit] Widget = composant graphique élémentaire
Les interfaces WIMP sont composées avec des composants graphiques élémentaires (Widget en anglais). Chaque Widget correspond à une action spécifique à accomplir pour la tâche de l'utilisateur. On a donc une associations composants/tâche. Les principales tâches élémentaires sont:
- La saisie
- La sélection de valeur
- Le déclenchement d'une action
- La navigation
- La spécification des paramètres
- La transformation
[edit] Composants de saisie
saisir un texte:
- clavier + champ texte
saisir une valeur:
- réglette+curseur
- clavier + champ texte
saisir une position:
- Souris (x,y)
- clavier (les flèches)
saisir un trait :
- échantillonage de positions
[edit] Composant de sélection dans un ensemble de valeurs
La taille de l'ensemble va déterminer le composant.
pour les petits ensembles (moins de 6),on peut choisir:
- bouton de radio
- les cases à cocher
- les menus
pour les ensembles moyen (moins de 50),on peut choisir:
- les icônes
- les listes
pour les ensembles grand (plus de 50),on peut choisir:
- les champs de saisie
Généralement ces composants sont utilisés pour des sélections simples. Cependant, il est possible d'effectuer des sélections multiples.
[edit] Sélections multiples
Les mécanismes utilisés pour la sélection multiple sont:
- La définition d'intervalle: [depuis .. jusqu'à]
- Le regroupement: délimiter tous les objets qui sont sélectionnés
- L'ajout/retrait par rapport à un ensemble.
[edit] Composant de sélection d'actions: les menus
Le menu est un composant principalement dédié à la sélection d'action. La sélection d'un item de menu initie l'action. Par exemple, la sélection de l'item imprimer initie l'impression (choix de l'imprimante, paramètres d'impression, ...)
Il est structuré avec une barre qui regroupe les menus. Lorsqu'un menu est sélectionné, il déroule ses éléments de menu.
Les éléments sont éventuellement regroupés par item de même nature.
Des divisions des menus accentuent les regroupements.
Un élément de menu (ou item) possède:
- un nom
- une icône
- un raccourci clavier
- un marque si l'item représente un état.
Autres menus
On trouve aussi les types suivant de menus:
- les menus hiérachiques qui permettent de raffiner une action.
- Les "popup" menu qui sont associés directement aux objets. Sous Windows, le clique droit sur un objet invoque un popup menu.
- Les menus détachables qui permettent de rapprocher ou de créer un contexte pour mener à bien une tâche.
[edit] Composant de déclenchement d’actions
Le déclenchement d'actions est possible avec des éléments WIMP:
- Bouton (simple click)
- Menu
- Glisser lacher (obj+ cible= action)
- Icône (double click)
[edit] Spécifier des paramètres
- Les boîtes de dialogue sont généralement utilisées pour fixer les paramètres de la tache. La spécification des paramètres peut être une manipulation direct ou indirect.
- Si les paramètres sont nombreux, un système d'onglets permet de regrouper les paramètres par catégorie.
- L'utilisation d'assistant permet aussi de fixer un paramètrage. Un assistant est un ensemble de boîtes de dialogue liées par une séquence. L'installation des programmes se fait généralement avec un assistant.
[edit] Positionnnement et navigation
L'écran est petit et les objets sont volumineux. On ne peut donc pas tout voir à l'écran. Il faut choisir entre les détails et la vue globale.I l faut donc que l'utilisateur puisse naviguer et adapter son niveau de vision. Les widgets du WIMP sont:
- un défilememnt continu
- un positionnement par sélection
- un défilement par section ou page
- un positionnement sur le début ou la fin
L'objet doit donc être linéaire (comme un texte, exemple)
La Main permet le déplacement de l’objet. L'objet est saisi, déplacé et laché. Ceci convient parfaitement au surface plane.
Le zoom permet de régler le niveau de détail. Mais il permet aussi la navigation. GoogleEarth est un excellent exemple de cela. Je passe facilement de Paris à Genève en prenant de l'altitude et ensuite en zoomant sur la destination
La carte permet d'afficher simultanément le contexte et le détail. La navigation de fait en cliquant sur un point du contexte. Les exemples de navigation par carte sont nombreux dans les jeux. On peut considérer que les signets dans les documents PDF ou les powerpoints sont aussi des cartes de navigation.
Les flèches cardinales (Nord/Sud - Est/Ouest) ou (haut/bas - droite/gauche) sont aussi très utilisées pour le déplacement des objets plans
La molette de la souris permet de défiler un texte dans une fenêtre.
[edit] Objets de transformation
Le dimensionnement des objets est fait à travers des poignées. Ces poignées peuvent être permanentes comme dans le cas des fenêtres (coin en bas à droite) ou être activées que si l'objet est selectionné.
[edit] Modalité de l'interaction
La modalité de l'interaction définit un ensemble d'actions possibles. On sera par exemple dans un mode de lecture ou de mise à jour. Généralement, on souhaite des interfaces non-modales.
L'éditeur vi des systèmes unix est typiquement une interface modale avec ses modes: insertion / commande.
Le contrôle de la modalité peut être:
- Externe (Explicite); les palettes et les menus sont des moyens de modifier le mode. Dans paint, la modalité détermine ce que dessine le pointeur.
- Spacial (Implicite); l'interface est divisée en régions, le curseur se modifie indiquer un changement de modalité.
- Temporel; par spécification du moment (début, fin)
- Quasi-mode (implice);les boîte de dialogue sont des modalités implicite et l'action y met fin. (par exemple, la sauvegarde d'un fichier)
