User Tools

Site Tools


ipm:tech-interaction

Au cours de l'histoire de l'informatique différents styles d'interaction sont apparus, en général à la suite d'avancées dans le matériel ou le logiciel (invention de la souris, des écrans graphiques, systèmes pour le graphisme 3D, etc.) Les styles d'interaction se distinguent essentiellement par les appareils d'entrée/sortie qu'ils nécessitent, les objets d'interactions mis en jeu et les techniques de manipulation de ces objets

Ligne de commande

Ce style trouve son origine dans l'utilisation des terminaux reliés à des machines et systèmes d'exploitations interactifs d'usage général (les ancêtres de Linux). L'objet d'interaction en entrée est une ligne de texte comprenant un nom de commande et une liste de paramètres. L'utilisateur compose sa ligne de commande puis l'envoie au système. En réponse le système effectue une opération et présente le résultat, généralement sous forme de texte. En règle générale les commandes ont une syntaxe du type

<commande> <options> <objet>

par exemple

ls –l abc  

pour obtenir une liste détaillée (option -l) des éléments du répertoire abc (shell linux).

L’interaction par ligne de commande présente deux difficultés majeures

  1. difficulté d'apprentissage : pour être efficace l’utilisateur doit connaître par coeur les noms des commandes et des options les plus fréquemment utilisées
  2. lenteur de la saisie : il faut taper en entier et de manière exacte les noms des fichiers sur lesquels porte la commande.

Par contre on peut atteindre une puissance d'expression et une compacité irréalisable avec des interfaces graphiques. Par exemple, pour supprimer tous les fichiers dont le nom commence par Z et finit par .out il suffit d'entrer la commande rm Z*.out dans le langage de commande bash de Linux. Pour réaliser cette opération dans une interface graphique il faudra repérer visuellement chacun des fichiers à supprimer, le sélectionner et le déplacer vers la corbeille ou sélectionner la commande Supprimer dans le menu Fichier. De même, la commande

sed -e "s/ \([^e]*\) / (*\1*) /g" <f1 >f2 

correspond à « Lire le fichier f1, remplacer les mots qui ne contiennent pas la lettre e par le mot entouré de (* et *) et écrire le résultat dans le fichier f2. On peut imaginer le nombre d'opérations qu'il faudrait pour réaliser cette opération à l'intérieur d'un traitement de texte.

Par sa forme purement textuelle, la ligne de commande est facile à enregistrer dans un simple fichier texte, au contraire des opérations effectuées dans une interface graphique, qui nécessitent un système particulier d’enregistrement, en général propre à chaque logiciel ou ajouté au système d’exploitation. De plus, les commandes enregistrées peuvent facilement être modifiées et exécutées à nouveau dans un autre contexte. Pour ces raisons, l’interaction par ligne de commande reste la plus efficace dans de nombreux cas et en particulier pour la gestion et la configuration des systèmes d’exploitation ou des bases de données.

Formulaires

Origine: systèmes dédiés à une activité (vente de billets et enregistrement des passagers dans les compagnies aériennes, opérations bancaires, …) . Le principal objet d'interaction est le formulaire composé de texte et de champs de saisie. L'utilisateur remplit les champs puis envoie le formulaire au système. Le système répond par l'affichage de résultats et d'autres formulaires de saisie.

L'interaction par formulaire ne nécessite pas de capacités graphiques avancées tels les écrans bitmap. Un simple écran alphanumérique de type 24 lignes x 80 colonnes est suffisant, pour autant que la machine puisse contrôler la position du curseurs de lecture/écriture. Le déplacement d'un champ à l'autre peut se faire avec des touches particulières du clavier (tabulateur, flèches, CTRL+touche, etc.) Le navigateur web Lynx utilise une interface de ce type. De nombreuses applications écrites pour le système MS/DOS, et souvent encore en usage (voir image ci-dessous), possèdent également une interface de type formulaire.

Le style formulaire est très souvent utilisé pour la saisie de données qui iront mettre à jour une base de données. Du reste, les principaux systèmes de gestion de bases de données (Oracle, Microsoft Access, etc.) proposent tous des systèmes pour l'aide à la conception et à la réalisation de formulaires de saisie.

Formulaires et Web

L'interaction par formulaire a été reprise dans le Web. Pratiquement dès son origine le langage HTML a contenu un élément <FORM> pour définir des formulaires d'entrée. Les formulaires Web peuvent contenir les éléments classiques : champs de texte (une ligne), zone de texte (plusieurs lignes), étiquettes, boutons, … .

À l'origine l'interaction par formulaire Web était de type “page” : l'utilisateur remplit le formulaire puis clique le bouton d'envoi une fois que celui-ci est plein et attend la réponse du système. Avec l'arrivée de la technologie des requêtes http asynchrone et des scripts Javascript, l'interaction peut être plus fine. La communication avec le serveur peut avoir lieu pendant que l'utilisateur entre des données dans un champ. On arrive ainsi à produire “en direct” des suggestions pour compléter le champ ou à détecter immédiatement des erreurs de saisie.

L'utilisation de scripts permet également de reconfigurer dynamiquement l'affichage d'une page, et donc d'un formulaire : des éléments peuvent apparaitre ou disparaitre en fonction des données saisies dans les champs.

WIMP

Le style d'interaction WIMP, pour windows, icon, menu, pointing device, est basé sur l'utilisation d'un appareillage physique (souris, trackpad, joystick, etc.) qui contrôle la position d'un pointeur visible sur l'écran. L'information est présentée dans des fenêtres sous forme d'icônes, de textes, de graphiques. Le principal objectif du WIMP est de faciliter l'utilisation du logiciel en réduisant la charge cognitive, en particulier le temps d'apprentissage.

L'histoire du WIMP

1968 : Douglas Englebart présente un modèle de la souris avec un certain nombre de concepts associés (sélectionner, glisser, copier/coller).

1970-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 très limitée à Apple mais qui du point de vue marketing est génial car le concept de fenêtre est désormais associé à la marque Microsoft.

1990 : Microsoft sort MS-Window 3.0 qui est la première version vraiment exploitable pour les PC.

Principe

Le principe d'interaction du WIMP comprend trois fonctions principales :

Présenter. Des fenêtres présentent l'état du système. Par exemple, un traitement de texte présente le texte dans son état actuel, un système de gestion de fichier présente la hiérarchie des dossiers et les fichiers qu'ils contiennent. La présentation est constituée d'icônes, de textes, ou d'autres éléments graphiques élémentaires qui sont organisés selon une technique de présentation : en séquence, en lignes, en tableau, etc. .

Désigner. La manipulation du pointeur permet de désigner des informations sur lesquelles ont désire appliquer une opération. Différents gestes seront utilisés suivent le type et le nombre d'éléments à désigner : pointer et cliquer, pointer et « tirer» pour sélectionner tous les éléments d'une zone de la fenêtre, etc.

Interagir. Un ensemble d'éléments graphiques interactifs, tels que les menus, les boîtes de dialogues, les listes, les barres de défilement ou des points de contrôle d'objets graphiques servent à déclencher des actions qui modifieront l'état du système (par exemple : supprimer un fichier) ou l'état de la présentation (p.ex. faire un zoom ou un défilement de la fenêtre) .

Les objets d'interaction élémentaires

Les objets d'interaction remplissent diverses fonctions, indiquée dans le tableau ci-dessous

Catégorie
Commande menu, bouton
Navigation barre de défilement, hyperlien, “main”
Organisation de la présentation étiquette, séparateur, boite de regroupement, barre de menus, barre d'outils, onglets, ruban
Information barre de progression, infobulle, icône, curseur contextuel
Saisie de données boite de texte, case à cocher, bouton radio, bouton poussoir, liste, liste déroulante, curseur, table
Organisation du dialogue fenêtre, boite de dialogue, fenêtre modale, fenêtre flottante

Commande/Action

Le menu est le principal composant 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, …) Le menu est basé sur le principe « reconnaître et désigner » . Contrairement à ce qui se passe dans l'interaction par ligne ou code de commande, l'utilisateur n'a pas besoin de se souvenir du nom des commandes ou des options car il les voit toutes dans le menu. Il y a donc réduction du risque d'erreur (on ne peut sélectionner une action inexistante) et surtout une très nette réduction du temps d'apprentissage.

Pour gagner de la place sur l'écran on utilise des menus déroulants qui n'apparaissent que lorsqu'on clique ou pointe le titre du menu.

Les menus peuvent être globaux ou contextuels. Les menus globaux sont en général regroupés dans une barre de menu située en haut de l'écran ou en haut d'une fenêtre. Il servent à déclencher des actions disponibles à tout moment, ou presque, lors de l'utilisation du système. Les actions indisponibles à un moment donné apparaissent dans le menu sous une forme distincte (par exemple en grisé).

Le menu contextuel s'utilise pour déclencher des actions relatives à un objet de l'interface sur lequel l'utilisateur a porté son attention. L'apparition du menu résulte d'une action (clic droit, contrôle-clic, barre d'espace) effectuée alors que le pointeur se trouve sur l'objet ou dans la zone en question. La signification de la sélection d'un élément A d'un menu contextuel affiché dans le contexte d'un objet O signifie donc « Effectue A sur O » On parle souvent de menu «pop up» car ils surgissent à l'endroit désigné.

Si l'utilisation du menu évite l'apprentissage de noms ou codes de commandes, elle est cependant moins efficace que la frappe d'une ou deux touches du clavier. C'est pourquoi les action les plus souvent exécutées doivent posséder un équivalent clavier (par exemple CTRL-C pour \emph{copier}) pour les utilisateurs avancés.

Lorsque le nombre d'éléments d'un menu devient trop important on risque de rendre son usage inefficace L'utilisateur devra lire une longue liste avant de trouver l'action souhaitée et il aura de la peine à distinguer visuellement un élément parmi les autres. On peut résoudre ce problème en constituant un menu hiérarchique. Le premier niveau d'un tel menu contient les actions les plus fréquentes et des groupes d'actions que l'on peut développer au second niveau.

Pour accélérer l'accès à des fonctions fréquemment utilisées on peut utiliser le mécanisme des menus détachables. Le menu détaché reste en permanence ouvert il suffit donc d'un seul clic pour activer l'un de ses éléments. Par contre il occupe de l'espace sur l'écran. Tout l'intérêt du menu détachable réside dans l'adaptation ou la personnalisation de l'interface qu'il permet. En fonction de la tâche à réaliser ou de ses habitudes, l'utilisateur détachera les menus les plus pertinents.

L'écran est en général bien trop petit pour contenir toute l'information à laquelle l'utilisateur a accès. On ne peut donc pas tout voir en même temps à l'écran. Il faut choisir entre les détails et la vue globale. Il faut donc que l'utilisateur puisse naviguer et adapter son niveau de vision. Les widgets du WIMP sont:

On peut distinguer plusieurs types de navigation:

  • Le défilement consiste à déplacer la “page d'information” vers le haut ou le bas ou la droite ou la gauche de manière en afficher la partie qui intéresse l'utilisateur. On le réalise généralement avec des barres de défilement ou avec un outil “main” ou encore par pointage sur une vue globale miniature
  • Le zoom, pour changer de niveau de détail
  • Le saut vers une autre page d'information. Il peut être réalisé par le clic sur un bouton ou sur une zone de texte (lien hypertexte)

Les dispositifs d'entrée tels que la souris, la molette de la souris, les flèches du clavier peuvent servir à l'un ou l'autre de ces types de navigation.

Organisation de la présentation

Les composants d'affichage statique ne changent pas de forme au cours du temps, par contre ils peuvent se déplacer, apparaitre ou disparaitre. Ils servent à représenter une information, soit sous forme textuelle (les étiquettes), soit sous forme graphique (les icônes) . Certains composants statiques, comme les séparateurs ou les boites de regroupement ne portent pas d'information en eux-mêmes mais jouent un rôle important du point de vue de l'ergonomie graphique.

Information

Les composants d'information présentent à l'utilisateur

  • les informations sur lesquelles il travaille
    • sous forme de textes, tableaux, icônes, composants spécialisés (graphiques, histogrammes, …)
  • des informations sur la tâche en cours
    • barre de titre, barre d'information, infobulles
  • des information sur l'état du système
    • barres de progression

Saisie de données

Divers composants sont adaptés à la saisie d'informations de nature différente : texte, valeur numérique, valeur à choisir dans un ensemble fixé.

Pour la saisie de texte on utilisera les champs (une seule ligne) ou les zones (plusieurs lignes) de texte.

La saisie d'une valeur peut se faire directement sous forme numérique dans un champ de texte ou, lorsque les limites inférieures et supérieures sont connues, par un curseur (réglette).

Plusieurs composants sont prévus pour la sélection d'une ou plusieurs valeurs dans un ensemble fixé.

les boutons radio sont bien adapté au choix d'un élément parmi un petit ensemble de valeurs possibles (jusqu'à 7 environ). Les boutons radio ne sont pas utilisables pour de grands ensembles car ils occuperaient alors une grande portion de l'espace disponible dans la fenêtre.

les cases à cocher ont des caractéristiques similaires mais, n'étant pas exclusives, elle permettent la sélection de plusieurs valeurs.

les listes avec défilement offrent une manière compacte de sélectionner une valeur dans un ensemble de taille «moyenne». Si l'ensemble est trop grand la liste devient inutilisable car un défilement standard prendra trop de temps et un défilement rapide sera trop imprécis pour arriver rapidement sur la bonne valeur.

Des études ergonomiques ont montré que le choix du meilleur composant est fonction de la taille de l'ensemble des valeurs possibles et du nombre de valeurs à sélectionner.

pour les petits ensembles (moins de 6),on peut choisir:

  • des bouton de radio (choix d'une et une seule valeur) ou un menu
  • les cases à cocher (choix d'une ou plusieurs valeurs)

pour les ensembles moyen (moins de 50),on choisira

  • une liste (pour choisir une seule valeur)
  • une liste accompagnée d'un bouton “ajouter”, d'un bouton “enlever” et d'une liste des éléments choisis (pour choisir plusieurs valeurs)

pour les ensembles grand (plus de 50),on peut choisir:

  • un champs de saisie

Organisations du dialogue

Les composants de dialogue sont des fenêtres qui servent à poser des questions à l'utilisateur et à obtenir des réponses. Dans sa forme la plus simple le dialogue présente une question et offre à l'utilisateur plusieurs réponses possibles sous forme de boutons cliquables. Des dialogues plus sophistiqués permettent de saisir plusieurs réponses. Par exemple, un dialogue «Enregistrer» permettra typiquement de fixer un nom du fichier, un format d'enregistrement, un encodage des caractères. Un dialogue de définition des préférences de l'utilisateur comprendra souvent de nombreux éléments de saisie de valeurs.

On parle de boite de dialogue ou fenêtre modale lorsque l'ouverture de cette boite bloque tous les autres composants de l'interface. L'utilisateur se trouve alors dans une mode de travail où sa seule interaction possible est avec cette boite. Ce type de dialogue est utilisé lorsque l'application a absolument besoin de la réponse au dialogue pour pouvoir continuer. Dans un traitement de texte l'action Enregistrer sous … ouvre en général un dialogue modal pour entrer le nom du fichier car a) l'enregistrement ne peut continuer tant que le nom n'est pas connu et b) on considère que l'utilisateur veut enregistrer le document dans l'état où il se trouve et qu'il faut donc bloquer toute action qui pourrait le modifier.

Modalité de l'interaction

Un mode d'une interface est un état dans lequel se trouve l'interface et qui définit un comportement particulier de celle-ci.

Exemples

  • La plupart des applications Web de type wiki ou blog ou gestionnaire de contenu (CMS) possèdent un mode navigation, qui sert essentiellement à trouver et lire l'information, et un mode édition pour modifier ou ajouter des informations et des liens.
  • Dans l'éditeur de texte vi il y a un mode commande et un mode insertion. En mode commande l'appui sur la touche x supprime le caractère à la position du curseur, en mode insertion cette action insère le caractère 'x' à cet endroit.
  • Sur une calculette le mode DEG indique que les angles doivent être donnés en degrés et le mode RAD qu'il doivent l'être en radians.

Le contrôle de la modalité peut prendre plusieurs formes:

Externe (explicite) : une action sur une icône ou un bouton (ou un autre élément d'interface) enclenche un mode. Le mode restera indiquée par un élément graphique de l'interface (en général l'élément sur lequel on a agi). Dans le logiciel Paint, la modalité détermine ce que dessine le pointeur.

Spatial (implicite) : l'interface est divisée en régions, le curseur se modifie pour indiquer un changement de modalité. Une action dans une région, p.ex. un double clic, aura une signification propre à celle-ci.

Temporel : par spécification du moment (début, fin) à partir duquel un mode entre en fonction.

Quasi-mode (implicite) : les boîte de dialogue sont des modalités implicite et l'action y met fin. (par exemple, la sauvegarde d'un fichier)

L'utilisation des modalités est délicate car l'utilisateur peut facilement commettre des erreurs s'il a oublié dans quel mode il se trouve. Dans ce cas ses action auront des effets inattendus et indésirables. Il est donc crucial que l'utilisateur ait toujours conscience du mode dans lequel il se trouve. Le problème est difficile à résoudre car le lieu d'attention de l'utilisateur se déplace en fonction de ses actions. Du coup il va inévitablement « perdre de vue » l'indicateur de mode. Pour certains auteurs, comme Jeff Raskin, il vaudrait mieux éviter les modes autant que possible. Ou alors il faut utiliser des quasi-modes telles les fenêtres de dialogue modales. Lorsqu'une telle fenêtre apparait l'utilisateur ne peut plus rien faire d'autre que cliquer sur l'un de ses boutons, le mode est évident. S'il évite les erreur, ce type de dialogue peut nuire à l'efficacité de l'utilisateur car il empêche d'effectuer des actions qui pourraient ou devraient être faites en parallèle.

Une autre manière de rappeler à tout instant le mode consiste à modifier l'aspect du pointeur. Le lieu d'attention de l'utilisateur étant presque toujours centré sur le pointeur, cette technique s'avère efficace.

Notons également que bien souvent la création de mode ne reflète qu'un choix d'implémentation, visant à simplifier la tâche du développeur au détriment de celle de l'utilisateur. Par exemple, dans bons nombre de logiciels bureautiques, la fonction “recherche” ouvrait une fenêtre modale. Dans les versions récentes on trouve en général une fenêtre non modale ou un champ de saisie de la recherche qui reste ouvert en permanence.

ipm/tech-interaction.txt · Last modified: 2013/03/16 16:46 by gilles