Université F. Rabelais de Tours UFR Sciences et Technologies Master Informatique
Ergonomie des IHM
TRAVAUX DIRIGES
Enseignant
Jean-Yves ANTOINE
(Jean-Yves.Antoine AT univ-tours.fr)
IHM
Principes ergonomiques généraux Exercice 1 -
Facteurs humains et qualité ergonomique des interfaces (exam 2005 ; objectif 2.2.1.)
1. Quel principe ergonomique, étudié étudié en cours, est non respecté par l’affichage d’erreur présenté à droite ?
2. Dans FileMaker Pro, comme dans biens d’autres logiciels interactifs, les options non utilisables à un moment donné sont affichées en grisé légers dans les menus. Quel problème présente visiblement l’utilisation des menus FileMaker Pro ? Quel principe ergonomique est visiblement non respecté dans l’affichage présenté à droite ?
3. Contrairement aux éditeurs de textes complets, WordPad comme le bloc notes Windows ne peuvent gérer plusieurs documents en même temps. Sous WordPad, l’utilisateur vient de commencer la rédaction d’un nouveau document. En essayant d’ouvrir un autre document existant pour en copier un extrait dans le texte en court de rédaction, il obtient le message affiché sur la boite de dialogue à droite. Pourquoi ce comportement pose-t-il problème ? Quel qualité ou principe ergonomique n’est pas respecté ici ? Proposez une autre stratégie pour gérer ce problème.
—2—
© J-Y Antoine
IHM
Principes ergonomiques généraux Exercice 1 -
Facteurs humains et qualité ergonomique des interfaces (exam 2005 ; objectif 2.2.1.)
1. Quel principe ergonomique, étudié étudié en cours, est non respecté par l’affichage d’erreur présenté à droite ?
2. Dans FileMaker Pro, comme dans biens d’autres logiciels interactifs, les options non utilisables à un moment donné sont affichées en grisé légers dans les menus. Quel problème présente visiblement l’utilisation des menus FileMaker Pro ? Quel principe ergonomique est visiblement non respecté dans l’affichage présenté à droite ?
3. Contrairement aux éditeurs de textes complets, WordPad comme le bloc notes Windows ne peuvent gérer plusieurs documents en même temps. Sous WordPad, l’utilisateur vient de commencer la rédaction d’un nouveau document. En essayant d’ouvrir un autre document existant pour en copier un extrait dans le texte en court de rédaction, il obtient le message affiché sur la boite de dialogue à droite. Pourquoi ce comportement pose-t-il problème ? Quel qualité ou principe ergonomique n’est pas respecté ici ? Proposez une autre stratégie pour gérer ce problème.
—2—
© J-Y Antoine
IHM
4. Quel facteur de qualité ergonomique illustre cette fenêtre de paramétrage du driver d’une souris ?
5. Considérez ces deux exemples de fenêtres pop-up activées lors de la demande de sortie d'un logiciel. Laquelle des deux solutions proposées vous paraît-elle la plus appropriée d'un point de vue ergonomique ? Quel est le principe ergonomique ergonom ique qui n'est pas respecté r especté en priorité ici ? A votre avis, quelle situation conduira le plus fréquemment à une erreur dans le cas de l'interface mal conçue ?
Exercice 2 -
Quand Microsoft est pris en faute… (objectif 2.2.1)
Dans cet exercice, on considère différentes boites de dialogue, ou copies d'interface issues de logiciels développés par la société Microsoft. Ces affichages présentent quelques défauts ergonomiques. Pour chaque exemple, expliquer ce qui pose problème, quel problème ergonomique est rencontré et proposer une solution pour améliorer l'interface.
1 — On commence tout d'abord par un exemple célèbre, qui correspond au menu de la barre des tâches à sélectionner pour arrêter son ordinateur ou changer de compte utilisateur. Cette aberration ergonomique avait même l'objet d'une blague de la part du président de General Motors qui essayait d'imaginer ce que serait la conduite d'une de ses automobiles si elles étaient conçues comme les ordinateurs tournant sous XP… Après avoir précisé quel est le problème rencontré et y en avoir proposé une solution, expliquez pourquoi cette faute de conception n'est désormais plus vraiment problématique.
2 — Eteindre son ordinateur semble être une action problématique pour les concepteurs informatiques. Dans les premières générations de Mac OS, pour éjecter la disquette (les Mac ne disposant pas de bouton sur la face avant de l'ordinateur), il fallait en effet jeter l'icône représentant le disque dur dans la poubelle. Expliquez en quoi la solution envisagée par Apple posait encore plus de problème que celle rencontrée sous Windows. Quels sont les principes —3—
© J-Y Antoine
IHM
ergonomiques qui sont enfreints ici ?
3 — La boite de dialogue donnée page suivante s'affiche lors de la réinstallation d'un élément de la suite Office Professional pour Windows XP. Quels sont vos commentaires ?
4 — Lorsqu'on intègre un nouveau dessin (Insertion / Image / Nouveau dessin) dans un document Word, une zone de dessin apparaît directement dans le texte à l'endroit de l'insertion : L'utilisateur peut redimensionner directement cette zone de dessin en saisissant les poignées visibles sur les côtés. Une fois la taille recherché choisie, l'utilisateur dessine directement (sans appel à un éditeur d'image) dans cette zone à l'aide la barre de dessin qui est présente en bas de l'interface Word.
Une fois le dessin terminé, un simple clic en dehors de la zone de dessin permet de continuer le travail d'édition. Si on veut agrandir après-coup la zone de dessin, une sélection sur celui-ci affiche à nouveau les poignées que l'on peut tirer. Par contre, pour réduire le dessin dans sa globalité (et non pas lui garder sa taille dans une zone plus grande, il faut aller (clic droit) dans les propriétés de l'objet ("format de la zone de dessin") et déterminer un rapport de réduction / agrandissement dans l'onglet taille :
—4—
© J-Y Antoine
IHM
Après sélection du rapport de réduction (ou d'agrandissement désiré), un appui sur le bouton "OK" permet une mise à jour de l'affichage avec le dessin redimensionné. Quels sont les points forts et les points faibles de l'ensemble de l'IHM proposée pour intégrer réaliser des dessins dans Word ? Justifiez votre réponse.
Exercice 3 -
Les principes ergonomiques généraux s'appliquent aussi au WWW (objectif 2.2.1.)
1. L'image ci-dessous montre la partie principale de la page d'accueil d'un site WWW dédiée à l'étude de la biologie des champignons. A quel principe ergonomique, très mal géré à la base, les concepteurs du site ont-ils tenté de remédier ?
2.
Observez les deux formulaires de saisie ci-dessous, inspirés d'un site WWW réel. Laquelle de ces deux versions vous semble-t-elle la plus ergonomique ? A quel(s) principe(s) ergonomique(s) répondent ces améliorations ?
3. La capture d'écran (page suivante) est issue d'un usage réel du site de réservation de la SNCF. Le 6 janvier 2008 au soir, j'ai cherché à réserver un trajet Vannes -> Lyon pour le 8 avril 2008 (demande résumée à gauche de l'écran). Voici le résultat de ma recherche. Qu'observez-vous ? Pouvez-vous deviner ce qui explique cet affichage ? Quel recommandation ergonomique a, selon vous, été joyeusement foulée du pied par la SNCF ?
—5—
© J-Y Antoine
IHM
Exercice 4 -
L’interaction ne se limite pas aux logiciels (examens 2005 et 2006 ; objectif 2.2.2)
2005 : Avant l’arrivée des portables, les téléphones classiques (à touche ou à cadran) ne comportaient pas d’écran. 1. Réfléchissez à l’utilisation d’un tel combiné. Donnez au moins un critère ergonomique qui n’était pas respecté par ce type de combiné, et que l’utilisation d’un écran a pu corriger. 2. Proposez une solution pour remédier à ce problème sans utilisation d’un écran.
2006 : La plupart des ergonomes travaillant pour les firmes automobiles prédisent que le volant de direction aura disparu de nos tableaux de bord d'ici une vingtaine d'année. Il sera remplacé par un joystick équivalent aux commandes des avions. Dans une voiture, les mouvements vers la droite et la gauche du joystick gèreront la direction, tandis que les mouvements en avant et en arrière piloteront les accélérations et freinages. Ce type de dispositif équipe déjà les voitures adaptées à certains handicaps. Renault a déjà présenté des véhicules d'exhibition sans volant. 1. Discutez des avantages et inconvénients de ce nouveau dispositif de commande. 2. Expliquez ce qui pourrait empêcher cette prédiction de se réaliser (hors contraintes économiques, bien sûr).
Exercice 5 -
L’utilisatibilié concerne l'informatique comme d'autres domaines (objectif 2.2.2.)
Votre serviteur loue à Blois un petit appartement assez vétuste dans lequel les boutons associés à sa plaque de cuisson ont été effacés par le temps. Résultat des courses, je ne sais jamais quel bouton correspond à quelle plaque électrique... 1. Observez les dessins ci-dessous, qui représentent différentes configurations possibles pour une plaque à 4 feux. Pouvez-vous classer ces configurations d'un point de vue ergonomique ?
2. Pourriez-vous imaginer une situation analogue dans le cas de la réalisation d'un logiciel interactif ?
Exercice 6 -
Manipulation directe (adapté de A. Dix et al., 2004 – objectif 1.1.1.)
En 1982, Ben Shneiderman a défini différents critères pour définir le concept de manipulation directe qui venait juste de rencontrer un succès (d'estime seulement à cette date) avec la sortie de l'Apple Lisa et du Xerox Star. Dans cet exercice, on considère un éditeur graphique de texte de type Microsoft Word ou Star Office.
1 — En étudiant les critères définis par Shneiderman, dire en quoi cet type de logiciel répond au concept de manipulation directe, et par quels aspects il s'en éloigne. —6—
© J-Y Antoine
IHM
Exercice 7 -
Gestion de messages d'erreurs (objectif 3.2.2.)
Les deux figures ci-après montrent l'affichage d'un message d'erreur sous deux navigateurs (respectivement Mozilla et Opera) lorsqu'un site WWW n'est pas atteignable (le plus souvent pour cause de connexion internet défaillante). Critiquez les solutions proposées par ces deux navigateurs en reliant vos remarques à des critères ergonomiques vus en cours.
Exemple 1 – Mozilla
Exemple 2 – Opera
L
Considérez maintenant le message d'erreur ci-dessous, issu d'une application Mac ... pas si ancienne que cela. Pourriez-vous dire quels sont les points forts et les points faibles de cette gestion des erreurs ?
Exercice 8 -
Design général de l'affichage (inspiré du cours d'ergonomie du CNAM ; objectif 3.2.1.)
On propose, pour un logiciel grand public (éditeur de texte par exemple), le schéma général de l'affichage ci-après.
Zone des commandes (boutons)
Exit
Zone de travail
Zone d'afficha e des informations ou des messa es d'alertes
—7—
© J-Y Antoine
IHM
1 — Enoncer les points qui vous paraissent satisfaisants dans cette interface. Justifiez votre réponse. 2 — Enoncer les points qui au contraire ne vous pas paraissent satisfaisants. Justifiez votre réponse. 3 — Proposez une autre organisation générale de l'affichage pour répondre à ces problèmes.
Exercice 9 -
Disposition générale de l’interface : quelques exemples (objectif 3.2.1)
Cas d’utilisation 1 – MIDI Orchestrator MIDI Orchestrator est un petit logiciel de lecture de fichier MIDI. A priori, cette interface n’a rien de particulier. On se rend toutefois compte que la zone supérieure (où est écrit MIDI Orchestrator – untitled sur la figure ci-dessous) sert de barre d’information changeant suivant l’état du système.
Cette zone est effectivement une des plus visible de l’interface. Pourquoi ce choix de conception est-il problématique ?
Cas d’utilisation 2 – IBM Aptiva Communicator Center Que pensez-vous de l’organisation de cette interface de configuration de télécopieur développé par IBM ?
Exercice 10 - Gestion des erreurs : rédaction des messages et codes couleur (objectifs 3.2.1/3.2.2) Cet exercice est un florilège de mauvaise gestion d’erreurs que je dois au Interface Hall of Fame que vous pouvez consulter à l’URL suivante : http://homepage.mac.com/bradster/iarchitect/shame.htm. Ce site truculent n’est plus mis à jour depuis 2000, mais la plupart des erreurs qui ont été recueillies sont toujours d’actualité. Reconnaissons tout de même qu’il faut désormais (un peu) plus de temps pour dénicher certaines perles, ce qui prouve que la prise en compte de contraintes ergonomiques est de plus en plus intégrée par les éditeurs de logiciels actuels.
Cas d’utilisation 1 – Microsoft Outlook Microsoft est plutôt doué pour la gestion des erreurs. Les personnes mal intentionnées diront que c’est parce que leurs logiciels sont tout sauf fiables, en oubliant que la gestion des erreurs participe de la robustesse d’un logiciel. Mais en tous cas, sur le logiciel de messagerie Outlook (version 2000), les développeurs furent mal inspirés. Quel sont les problèmes posés par ce message d’erreur :
Cas d’utilisation 2 – à vouloir trop bien faire : SGBD… Cet exemple est tiré d’une boîte de dialogue d’un SGBD sous Windows dont l’objectif est de prévenir au mieux les erreurs. Au final, croyez-vous que ce but est bien atteint ? Pourquoi ?
Cas d’utilisation 3 – les quiproquos d’ Easy CD Creator S’il est moins connu que les outils de la suite Nero, Easy CD Creator est un des logiciels d’aide au gravage les plus répandus. Ce qui ne le dispense pas d’évaluation ergonomique… Considérez les deux messages ci-dessous, obtenus dans deux situations différentes en fin d’opération. Avez-vous des commentaires à faire ?
—8—
© J-Y Antoine
IHM
Cas d’utilisation 4 – Quand Internet Explorer cause à ma grand-mère. Lorsque nous surfons avec son navigateur, Microsoft est soucieux de notre confidentialité, et il le prouve avec cette boîte de dialogue. La firme de Bill Gates n’aurait-elle pourtant pas oublié une recommandation essentielle en termes de messages d’erreur dans cette version ?
Cas d’utilisation 5 – CuteFTP CuteFTP est un des utilitaires graphiques de gestion de transferts FTP les plus répandus. On retrouve sur ce pop-up d’une de ses anciennes versions une des erreurs de conception les plus fréquentes en matière de gestion des erreurs. Erreur fréquente car, avouons-le, assez insidieuse. Saurez-vous la détecter ?
Cas d’utilisation 6 – Langue au chat ? Remercions Microsoft pour cette boite de dialogue que je classerais dans mon podium personnel des messages d’erreurs les plus problématiques. Ce message risque fortement de perturber l’utilisateur, pourquoi ? Au minimum, que proposeriez-vous pour le sortir d’embarras ici ? Quel est la recommandation qui n’a pas été respectée avant tout ?
Cas d’utilisation 7 – AK-mail , logiciel tout risque ? C’est cette boite de dialogue provenant d’un obscur logiciel de messagerie qui obtient ma palme d’or personnelle du message d’erreur le plus incongru. Visiblement le concepteur du logiciel avait (trop) bien retenu la leçon de ses cours d’ergonomie. Quelle recommandation ergonomique essaie-t-il de respecter ici ? Quel est le facteur d’utilisabilité qui risque d’être affecté par son choix de conception ? Au passage, ne sauriez-vous pas imaginer la raison (historique) qui a conduit à ce choix ?
—9—
© J-Y Antoine
IHM
Exercice 11 -
Evaluation d'une IHM : éphéméride électronique (objectifs 2.2 ; 3.2)
En astronomie, un éphéméride est une table qui indique la position de tous les astres à chaque moment (jour, date, heure) donné et ce pour une position donnée. Avec l'outil informatique, ces tables austères sont désormais à la portée du grand public. De nombreux logiciels jouant le rôle d'éphémérides sont désormais commercialisés et permettent une visualisation directe du ciel à une date et une position donnée. On propose ci-après l'interface d'un logiciel d'éphéméride composé d'une seule fenêtre.
Principes de fonctionnement Le système affiche à l'écran une vue partielle du ciel suivant les informations fournies par l'utilisateur. Pour cela, celui-ci doit définir : -
les conditions d'observation : il doit donner la date d'observation (au format jj/mm/aaaa), l'heure GMT (et non pas locale, au format hh:mm), ainsi que la position (latitude et longitude) du lieu d'observation.
-
les paramètres de visée (on n'affiche qu'une partie du ciel à l'écran) : l'orientation se définit, comme sur les télescopes à monture équatoriale, en terme d'ascension droite (h, mn, sec) et de déclinaison (degrés). On doit également définir un facteur de grossissement (zoom) dont dépendra la largeur du champ de vision. Le facteur de grossissement est un entier.
Une fois que ces paramètres sont définis, un clic sur le bouton "afficher" permet de voir le ciel virtuel correspondant aux conditions d'observation demandées. Lorsqu'une information saisie n'est pas valide, aucune information ne s'affiche immédiatement. C'est au moment du lancement de l'affichage que le message "Paramètres de visualisation erronés veuillez corriger" apparaît dans la zone prévue pour l'affichage du ciel. Les données rentrées saisies restent apparentes dans la zone de saisie. Un clic sur un objet affiché dans le ciel permet d'avoir différentes informations sur ce dernier : -
nom de l'objet céleste,
-
position en ascension droite et déclinaison
-
magnitude (intensité de l'éclat perçu)
-
distance à la Terre. Cette distance peut être exprimée en Unité Astronomique (UA) ou en Années Lumières (UL) suivant un choix déterminé par l'utilisateur (boutons radio)
Ce logiciel doit être utilisable aussi bien par des astronomes amateurs (connaisseurs du domaine) que par des novices. 1 — Faites l’évaluation critique de cette interface, en vous appuyant sur les principes de Norman, Nielsen, Bastien et Scapin. 2 — Proposez une autre interface pour répondre aux problèmes rencontrés.
—
10
© J-Y Antoine
IHM
Exercice 12 -
Formats d’affichage (adapté de Nogier 1995, pp. 57-58 – objectif 3.2.1)
On considère l’interface d’une base de données, ou bien encore un formulaire de saisie de données sur un site WWW, dans lesquels l’utilisateur doit saisir des informations concernant son nom, son prénom, sa fonction et son adresse électronique. Quatre solutions sont proposées pour le design de cette zone de saisie:
a)
c)
b)
Nom Prénom Fonction Courrier Electronique
d)
Nom Prénom Fonction Courrier Electronique
Nom Prénom Fonction Courrier Electronique Nom Prénom Fonction Email
(optionnel)
Critiquez chacune de ces propositions : quels sont leurs p oints forts et leurs points faibles ?
Exercice 13 - Conception : aide à la saisie de données (contrôle 2006 – objectifs 2.2.2 et 4.2.2) Pour une application interactive quelconque, les utilisateurs doivent remplir dans un formulaire une information concernant leur pays d'origine. Sachant qu'il existe plus de 200 pays reconnus par l'ONU, présentez deux stratégies d'organisation de votre interface pour faciliter cette saisie, et discutez-en les avantages et les inconvénients a priori en regard des tâches réalisables et des connaissances des utilisateurs.
Exercice 14 - Etude de l'ergonomie de l'interface d'un logiciel interactif (objectifs 2.2 ; 3.2 et 4.2) Dans ce problème, on vous présente deux articles qui décrivent l'interface utilisateur du système Sibylle d'aide à la communication pour personnes handicapées développée au sein du laboratoire d'informatique de l'Université de Tours.
Le second article présente, pour vous aider dans cet exercice, la nouvelle interface telle que modifiée suite à un stage de Master Recherche réalisée à l'Université de Bretagne Sud.
Le premier article présente la version originelle de cette interface, telle qu'elle a été déf inie en 2006 par un stagiaire de Master Recherche de l'Université de Tours.
Il vous est demandé de caractériser les faiblesses ergonomiques de la première interface, en l'analysant directement ou éventuellement en vous aidant de la nouvelle interface (qui a répondu à certains problèmes mais pas à tous). A chaque fois :
on décrira le problème ergonomique relevé en expliquant en quoi il généra l'utilisateur
on caractérisation la recommandation ergonomique (suivant une des typologies vues en cours) qui est en cause
on expliquera quel facteur d'utilisabilité sera affecté par ce problème
on donnera une solution au problème (ou on dira comment la nouvelle version de l'interface a résolu le problème.
Article 1 – Ancienne version du logiciel Sibylle : Considérations ergonomiques et adaptation aux besoins des utilisateurs
1. Introduction Les communicateurs, ou systèmes de communication palliative (AAC pour Alternative and Augmentative Communication en anglais) ont pour objectif de restaurer les capacités de communication de personnes souffrant d’un handicap moteur très sévère (Infirmités Motrices Cérébrales, Scléroses Latérales Amyotrophiques, syndrome d’enfermement,…) se traduisant par une tétraplégie ou une athétose accompagnée d’une perte de l’usage de la parole. La communication est alors privée de son support oral habituel, de même que les capacités très limitées de contrôle physique de l’environnement par la personne handicapée empêchent toute saisie directe de message sur un clavier d’ordinateur. —
11
© J-Y Antoine
IHM
Ces systèmes reposent sur l’écriture de phrases à l’aide d’un clavier virtuel affiché à l’écran. Dans le cadre de clavier à défilement linéaire, un curseur se déplace caractère par caractère, le long du clavier. L’intervention de la personne handicapée se limite à la désignation des symboles lorsque le curseur est sur la touche ou le caractère désiré. Cette sélection est réalisée à l’aide d’un dispositif physique qui remplace le périphérique d’entrée de l’ordinateur. Cette interface matérielle dépend des capacités motrices de l’utilisateur. Il peut s’agir d’un joystick, d’une commande oculaire, d’une commande par souffle, d’un simple bouton poussoir, etc. Une caractéristique importante est le degré de liberté qu’elle permet pour manipuler l’ordinateur. Le plus souvent, le patient n’a plus que la possibilité de réaliser l’équivalent d’un simple clic (commande de l’environnement de type « tout ou rien »). Une fois le message saisi, il peut être vocalisé par l’intermédiaire d’une synthèse de parole artificielle ( text-to-speech synthesis ). Le problème majeur des systèmes de communication assistée est la lenteur de la composition des messages. La tâche de saisie est généralement longue (1 à 5 mots par minute en moyenne) et fatigante pour les sujets. Pour accélérer la saisie, deux approches complémentaires sont envisageables. La première vise à optimiser la sélection sur le clavier simulé en faisant en sorte que le curseur défilant arrive au plus vite sur le caractère recherché. La seconde consiste à limiter le nombre de saisies en prédisant les mots qui peuvent survenir à la suite de ceux qui ont déjà été saisis. (...)
2. Les claviers simulés Appelé aussi clavier à l'écran ou clavier logiciel, le clavier virtuel est un outil logiciel qui permet l'accès à l'écriture sur ordinateur et remplace toutes les fonctionnalités d'un clavier standard. La sélection des touches se fait par plusieurs modes de pointages qui varient selon les facultés motrices et de contrôle de l'utilisateur. Aujourd’hui, les claviers virtuels sont de plus en plus adaptés à l'handicap de l'utilisateur. Il existe une diversité de types de claviers virtuels. Les différences portent surtout (..) sur leur mode de pointage (...) Le mode d’interaction avec un clavier virtuel est étroitement lié au degré de liberté offert par l’interface matérielle. Pour l’utilisateur qui ne peut pas manipuler directement le pointeur de la souris, la sélection des symboles ne peut être réalisée que par un système de défilement automatique du curseur. Le curseur met en surbrillance successivement les touches une à une. Lorsque le curseur désigne la lettre désirée, l’utilisateur n’a plus qu’à valider. Ce mode de saisie est excessivement lent. Pour cela, la solution actuellement adoptée par plusieurs claviers logiciels est le défilement « ligne / colonne ». La sélection se fait alors en deux temps: sélection de la ligne où se trouve la lettre puis sélection de la lettre dans la ligne. (...) Dans le système Sibylle, nous avons essayé de dépasser les performances du défilement ligne/colonne à l'aide d'un défilement linéaire dynamique. L'idée est la suivante : après chaque saisie d'une lettre, on va reconfigurer le clavier pour afficher en premier (dans l'ordre de défilement) les caractères les plus probables, compte tenu de ceux qui viennent d'être déjà saisis. En dépit de ces performances, la saisie reste toujours lente et pénible. C'est pourquoi nous essayons également d'éviter des saisies à l'utilisateur, par prédiction de mots. L'idée étant ici de compléter automatiquement un début de mot pour éviter la saisie de ses dernières lettres. Certains systèmes envisagent cette aide sous forme de complétion directe à partir du mot le plus probable. D'autres comme Sibylle préfèrent laisser l'utilisateur choisir dans une liste de mots (de 5 à 7 mots les plus probables pour le système Sibylle).
4. L'interface du système Sibylle Le clavier virtuel de Sibylle offre un ensemble de fonctionnalités permettant de saisir, le plus souvent par un mode de défilement linéaire, des caractères soit dans un éditeur intégré, couplé à une synthèse vocale, soit dans une autre application MS-Windows. Dans cette partie, nous présentons l'interface de la version 2.7.2 de Sibylle actuellement installée au CMRRF de Kerpape. L’interface est composée d’une zone d’édition (figure 1, h) et de plusieurs sous-claviers. Ces derniers regroupent les fonctionnalités par contexte d'utilisation (sous-clavier de commandes (figure 1, a), sous- clavier de lettres (figure 1, c), sous-clavier des chiffres (figure 1, d), de déplacement (figure 1, b) et la liste des mots prédits (figure 1, e). Ces regroupements permettent de minimiser le nombre de touches à balayer lors de la saisie. Cette disposition est modifiable par l’utilisateur. En effet, il peut modifier la place et la dimension de chaque sous-clavier selon ses préférences et ses besoins. Certaines touches fréquemment utilisées sont volontairement dupliquées dans plusieurs sous-claviers (comme c’est le cas de certaines touches du clavier standard). Cette redondance permet d’éviter le déplacement d'un sous-clavier à l'autre.
—
12
© J-Y Antoine
IHM
4.1
Le sous-clavier de commandes
Il s’agit du sous-clavier principal qui comporte les commandes standards pour ouvrir, enregistrer, retourner à la ligne, effacer le dernier caractère saisi, etc. Il contient aussi les commandes pour le contrôle du système d’exploitation (touche d’accès au menu démarrer de Windows) et autres applications à l’aide des commandes (Alt, Tabb). L’utilisateur peut choisir de faire prononcer la phrase saisie à l’aide de la synthèse vocale en cliquant sur l’une des deux touches, pour écouter toute une phrase ou bien le dernier mot saisi. La navigation entre les différents sous-claviers est réalisée en sélectionnant des touches spéciales (figure 1, f) de basculement de clavier (dites aussi touches de « saut de clavier ») situées dans le sous-clavier de commandes et également dans les autres sous-claviers.
Figure 1 : L’interface de Sibylle (version 2.7.2).
4.2
Le sous-clavier de lettres
Afin de permettre une large adaptation, il est possible de choisir entre trois types d’organisation pour le sous- clavier des lettres dans Sibylle, le clavier alphabétique (clavier par défaut), le clavier fréquentiel (ESAIN) et le clavier dynamique dont l’organisation des touches change à chaque saisie de lettres en fonction des résultats de la prédiction. Quelque soit le type d’organisation, le sous-clavier des lettres comprend les lettres accentuées et non accentuées et les caractères de ponctuation. Pour le clavier dynamique, les touches des lettres apparaissent d’une façon dynamique dans la partie supérieure du sous-clavier. Alors que les caractères de ponctuation sont toujours statiques et situés dans la partie basse du sous-clavier. Une touche de saut (figure 1, g) permet d’accéder rapidement aux caractères de ponctuation, cette touche est située en haut à droite dans le sous-clavier de lettres. Les caractères majuscules sont accessibles par des touches de changement de mode : mode majuscule (ABC) ou caractère suivant en majuscule (Abc) du sous-clavier de commandes.
4.3
Le sous-clavier de chiffres
Le sous-clavier de chiffres correspond au pavé numérique d’un clavier standard. L’utilisateur peut y accéder à partir du sous-clavier de commandes. Il contient une touche de retour à ce dernier.
4.4
Le sous-clavier de déplacement
Les commandes de déplacement sont indispensables non seulement pour naviguer au sein d’un éditeur de texte mais aussi pour se déplacer dans une arborescence de répertoires ou dans une page Web. Le sous- clavier déplacement comprend les touches de déplacement gauche, droite, haut et bas, la touche Tab, la touche début et la touche fin.
—
13
© J-Y Antoine
IHM
4.5
Le sous-clavier liste des mots prédits
Une liste de cinq mots prédits disposée verticalement à gauche du sous-clavier des lettres est accessible à partir de ce dernier. Une touche de saut de claviers permet de revenir au clavier de lettres.
4.6
Modes d’interaction
Sibylle permet à l’utilisateur de sélectionner une touche selon trois modes. Le mode souris est destiné aux personnes pouvant encore contrôler une souris ou un joystick. Les modes défilement linaire (clavier de lettres dynamique) et ligne/colonne (clavier de lettres statiques) sont destinés pour les personnes ne pouvant faire qu’un simple clic. Il est possible de régler la vitesse de défilement. Ce paramètre personnalisable qui contrôle le temps durant lequel le curseur reste sur une touche est très important pour la personne handicapée. Cela lui permet de prendre le temps pour décider son choix de touche et de réaliser son clic avant que le curseur qui se défile ne passe à la touche suivante. Il est également important de proposer un feedback visuel continu sous forme d’un curseur glissant sur la touche courante pour permettre à l’utilisateur d’anticiper le passage à la touche suivante. Ce feedback peut être inactivé par l’utilisateur.
4.7
Le clic long
En pratique, si la prédiction linguistique permet de réduire le temps de saisie et la fatigue qui en résulte, la composition d’un document textuel reste pénible du fait du recours à de trop nombreux sauts de claviers (mise en majuscule, caractère spécial, correction, etc.). Pour les personnes qui peuvent maîtriser suffisamment leur « clic » en terme de durée, nous avons implémenté un clic long de durées et de fonctions paramétrables. Le clic long consiste à appuyer de façon prolongée sur une touche quelconque jusqu’au changement de la couleur de sa bordure. L’action associée au clic long est alors réalisée par le système, elle peut correspondre par exemple au retour à la première touche du sous-clavier des lettres ou à l’effacement du dernier caractère saisi ou encore au passage en majuscule. L’activation de l’option clic long permet de minimiser un certain nombre de défilement selon l’action qui lui correspond. En termes de feedback, un changement de couleur du curseur indique à l’utilisateur qu’il réalise un clic long.
Article 2 – Nouvelle version du logiciel 2. Présentation générale du système SIBYLLE Avant de présenter en détail le moteur de prédiction de mots que nous avons réalisé, il est utile de présenter le fonctionnement du système SIBYLLE tel qu’il apparait à un utilisateur. La figure 3 (page suivante) présente l’interface utilisateur tenant lieu de clavier virtuel. Bien qu’utilisable avec une souris, S IBYLLE s’adresse en premier lieu à des personnes lourdement handicapées qui ne peuvent actionner qu’un simple contacteur. Dans ce cas, il est utilisable en défilement linéaire ou ligne-colonne. SIBYLLE existe en versions française, allemande et anglaise. L’interface de l’application regroupe plusieurs sous-claviers qui permettent respectivement de sélectionner des caractères, des nombres, des mots mais aussi des messages pré-enregistrés pour une communication d’urgence liée le plus souvent aux besoins vitaux de l’utilisateur. Des touches de saut de clavier permettent de naviguer d’un sous-clavier à un autre suivant les besoins de la saisie. La figure 3 permet de distinguer les différents sous-claviers de l’interface : – le clavier de lettres , au centre, est utilisé pour composer les messages caractère par caractère. Il ne comprend que des caractères alphabétiques avec leurs diacritiques, ainsi que l’espace comme marque de fin de mot. Les caractères de ponctuation sont situés dans un clavier à part. Cette organisation, que l’on retrouve sur les claviers physiques classiques, est dictée par le caractère dynamique du sous- clavier lorsqu’on se trouve en mode de défilement linéaire. Dans ce cas, la disposition des lettres est actualisée après chaque saisie, afin de présenter en priorité les lettres les plus probables compte tenu des caractères déjà saisis. Un module de prédiction basé sur un pentagramme de lettres (Schadle et al. 2002) permet ainsi de présenter la lettre attendue dans les trois premières positions en moyenne (2,7 pour le français, 3,0 pour l’allemand). Cette prédiction est par contre beaucoup plus friable si elle concernait les caractères de ponctuation. – la liste de mots , sur la gauche de l’interface, correspond aux prédictions lexicales données par S IBYLLE en fonction du message déjà composé. Lorsque l’utilisateur sélectionne un de ces mots, le message est alors automatiquement complété, évitant ainsi la saisie des caractères correspondants.
—
14
© J-Y Antoine
IHM
Figure 3. Interface utilisateur du système S IBYLLE (version française 3.1) – la barre horizontale de touches fonctions , en haut de l’interface, permet le pilotage complet de l’ordinateur. Les versions antérieures du système S IBYLLE ne comprenaient qu’un éditeur de texte intégré. Le système émule désormais intégralement le clavier physique de l’ordinateur et est donc utilisable pour piloter toute application Windows. Ce permet à l’utilisateur d’utiliser Sibylle pour écrire des textes mais également des courriers électroniques, communiquer à « l’oral » (synthèse de parole) avec son entourage, naviguer sur la Toile, etc… Afin de faciliter ce pilotage intégrale de l’ordinateur, ce sous-clavier présente des touches de fonction réalisant des actions aussi diverses que la sauvegarde d’un ficher, l’appel à la synthèse de parole ou encore l’appel du menu Démarrer de Windows. – comme sur un clavier ordinaire (Num-lock), le pavé numérique présente plusieurs modes d’utilisation qui s’affichent alternativement à la demande. Il sert à saisir des chiffres mais permet également être l’insertion de signes de ponctuation. Enfin, un dernier mode associe chaque touche du sous-clavier à la composition immédiate de messages prédéfinis. Ces messages peuvent être composés par l’utilisateur lui- même (cf. figure 3). On notera que l’interface utilisateur est largement paramétrable pour répondre au mieux aux besoins de l’utilisateur. Ce dernier peut ainsi choisir son mode de sélection (souris, ligne-colonne, linéaire), la vitesse de défilement du curseur, les durées minimales et maximales autorisées pour un appui. Ces derniers paramètres sont essentiels pour distinguer les appuis volontaires des actions non maîtrisées. De même, S IBYLLE distingue des clics longs et très longs qu’il est possible d’associer à des actions prédéfinies (effacement, mise en majuscule, aller en début de clavier...), ceci pour des utilisateurs qui arrivent à contrôler leur geste. La configuration de ces actions peut-être très fine, puisque l’utilisateur a la possibilité de donner une sémantique différente à ces clics suivant le sous-clavier où se trouve le curseur.
Figure 4. Curseur avec barre
glissante de temporisation
Enfin, les personnes handicapées ont souvent du mal à anticiper les sauts du curseur d’une touche à l’autre. L’utilisateur sélectionne ainsi fréquemment la touche qui précède ou qui suit celle recherché. Afin de réduire la fréquence de ces erreurs très pénalisantes, nous avons ajouté une barre de temporisation qui glisse doucement du haut au bas du curseur lors de chaque saut (figure 4). Ce feedback dynamique permet à l’utilisateur de paramétrer temporellement ses actions. Nos expérimentations au centre de rééducation de Kerpape (Mutualité du Morbihan) montrent qu’il permet une baisse significative des erreurs de sélection.
—
15
© J-Y Antoine
IHM
Interfaces WIMP Exercice 15 -
Organisation d'items dans des menus (adapté de A. Dix et al., 2004 ; objectif 4.2.2)
On se propose de réaliser un logiciel de dessin qui autorise les fonctions suivantes : Nouveau dessin, ouverture fichier dessin, dessiner cercle, insérer texte dans objet, alignement texte, dupliquer, supprimer.
fermer fichier, dessiner ligne changer police de caractères,
droite, changer
1 — Définir une structure de menu pour grouper ces fonctions sous différents sous-menus dont vous définirez les titres. 2 — Donnez à votre voisin le titre des items que vous avez retenus pour votre barre principale de menu et demandez-lui de répartir les différentes fonctions dans chaque sous-menu ainsi défini. Comparez sa catégorisation à celle que vous aviez prévue. Discutez des différences rencontrées : vous incitent-elles à reprendre vos regroupements ? Même exercice mais plus complexe: on se propose de réaliser un éditeur de texte qui autorise les fonctions suivantes: Enregistrer, enregistrer sous, nouveau document, supprimer sélection, envoyer comme mail, quitter, annuler, répéter, insérer tableau, préférences, style de caractères, formats de paragraphe, casse normale, casse italique, casse gras, casse souligné, ouvrir fichier, fermer ficher, ouvrir comme copie, augmenter taille de casse, réduire taille de casse, changer fonte, insérer note de bas de page, couper, copier, coller, insérer saut de page, repaginer, insérer image, imprimer, aperçu avant impression, mise en page, affichage page, rechercher mot, remplacer mot, page suivante, page précédente, vérification orthographe, créer table des matières, compter nombre de mots, aide.
1 — On demande de grouper ces fonctions sous différents sous-menus dont vous définirez le nombre et les titres. Définissez ensuite l'organisation de vos fonctions dans chaque sous-menu (vous pouvez également définir des sous-menus sous ces sous-menus). 2 — Quel(s) principe(s) avez-vous retenu pour l'organisation des items dans les menus ? Ce principe est-il identique dans chaque menu ? Conclusion ? 3 — Combien avez-vous défini d'items dans votre barre de menu ? Quel le nombre moyen d'items dans chacun de vos sous-menus ? Avez-vous défini une arborescence de profondeur supérieure à deux ? Si oui, quelle est la profondeur de votre menu ? Ces valeurs sont-elles compatibles avec les recommandations vues en cours ? 4 — Donnez à votre voisin le titre des items que vous avez retenus pour votre barre principale de menu et demandez-lui de répartir les différentes fonctions dans chaque sous-menu ainsi défini. Comparez sa catégorisation à celle que vous aviez prévu. Discutez des différences rencontrées : vous incitent-elles à reprendre vos regroupements ?
Exercice 16 - Menus et respect des principes ergonomiques de base (objectifs 2.2.1, 4.2.2 et 4.2.4) Dans ce problème, nous allons vous présenter différentes copies d’écran révélant un problème de conception ergonomique donné. A chaque fois, il vous est demandé d’expliquer quel est le problème que risque de rencontrer l’utilisateur, et de le relier le problème de conception sous-jacent à un critère ou principe ergonomique étudié en cours.
1. Pilote d’impression sur différents GUI – On considère cette fois les boites de dialogue qui apparaissent lors de l’impression sous différents systèmes d’exploitation à interface graphique. Comparez les points forts et les points faibles de ces différentes solutions.
a. Microsoft Windows XP
—
16
© J-Y Antoine
IHM
b. Apple Mac OS X
c. Linux (distribution Fedora 8)
Exercice 17 - Sélection d'une police de caractère dans un menu (objectif 4.2.2. et 2.2.1.) Dans cet exercice, nous allons étudier différents éditeurs de texte, éditeurs HTML ou de messagerie pour évaluer la qualité de leur interface en matière de choix de police de caractère. Nous avons considéré les logiciels suivants:
Amaya — Ce gratuiciel permet l'édition WYSIWYG de fichiers HTML. Dans Amaya, modifier la police de caractère d'une partie de texte revient à sélectionner les sous-menus Style puis Character Style dans la barre de menu. Un raccourci clavier (Ctrl i - Ctrl f) est disponible pour accéder à ce sous-menu qui se présente comme ci-dessous:
Mozilla Thunderbird — Il s'agit d'un logiciel gratuit de messagerie proposé dans la suite Mozilla. Sous Thunderbird, la définition de la police de caractères se fait :
soit par la sélection des sous-menus Format puis Police de caractères dans la barre de menus, —
17
© J-Y Antoine
IHM
soit par sélection dans une zone (liée à une combo-liste) d'une barre de style toujours présente à l'écran. Quand elle n'est pas sélectionnée, cette zone affiche le 1er item de la liste ( Largeur variable, cf. plus loin).
Quel que soit l'option suivie, la sélection d'une de ces deux zones lance l'affichage d'une combo-liste qui utilise tout l'espace vertical disponible et est liée à la zone de clic (fenêtre non repositionnable). En haut de la liste s'affichent deux options d'espacement (Largeur fixe et Largeur variable) puis les polices de caractères. Les trois premières polices affichées correspondent aux plus fréquentes (présentation statique: choix défini lors de la conception). Les autres sont données par ordre alphabétique.
Bloc Notes — Le Bloc Notes est un accessoire de Microsoft Windows XP qui permet simplement l'édition de fichiers ASCII. A ce titre, l'édition de documents aux styles complexes ne répond pas au cahier des charges de cet utilitaire. Les actions sur les polices de caractères ne concernent ainsi pas le document édité: il ne s'agit que d'une option d'affichage (paramétrage) du logiciel qui sera conservée à la fermeture et sera réutilisée pour l'affichage de tout document ultérieur. Dans le Bloc Notes, modifier la police de caractère d'affichage revient à sélectionner les sous-menus Format puis Police dans la barre de menu. Un raccourci clavier (combinaison Alt O-P) est disponible pour accéder à ce sousmenu. Il s'active et est présenté à l'écran (lettres O et P soulignées) sur appui de la touche Alt. Le menu de choix de la police (boite de dialogue) se présente alors comme suit:
—
18
© J-Y Antoine
IHM
On remarquera que le type de police (True Type par exemple) est représenté par un icône. Un aperçu est également proposé en bas de la boîte de dialogue.
Word —Sous l'éditeur Micrsoft Word de la suite Office XP, la définition de la police de caractères se fait :
soit par la sélection des sous-menus Format puis Police dans la barre de menus. Ces sous-menus sont directement invocables par le raccourci Alt-T-O (combinaison toujours affichée à l'écran: caractères soulignés). Le sous-menu s'affiche sous la forme d'une boite de dialogue comportant plusieurs signets où ont peut sélectionner (entre autres) sa police dans une combo-liste. Un aperçu, visible sous tous les signets, synthétise toutes les options paramétrables dans la boite de dialogue. Un message en bas de la fenêtre précise quel type de police (True Type par exemple) est utilisé et quelles sont lespropriétés de ce type de police (impression et affichage identique ou non).
Les polices sont présentées de manière statique par ordre alphabétique, le curseur se positionnant —
19
© J-Y Antoine
IHM
automatiquement à l'ouverture sur la police de caractère courante. La fenêtre est par ailleurs repositionnable.
soit directement par sélection dans une zone (liée à une combo-liste) d'une barre d'outils présente à l'écran. Quand elle n'est pas sélectionnée, cette zone affiche la police correspondant au texte courant (où se trouve le curseur).
Le sous-menu qui s'affiche (cf. page suivante) est ici spécifique au choix de la police de caractères. Il correspond à une liste combo attachée (non repositionnable) à la zone de saisie. La taille de la liste est fixée statiquement à 12 items. L'organisation de la liste est par contre contextuelle : s'affichent en premier les 10 dernières polices styles utilisées, puis l'ensemble des polices classées par ordre alphabétique. Lorsqu'on parcourt la liste avec l'ascenseur ou les touches up and down, les items contextuels sont également concernés : c'est à dire que le scroll ne se limite pas aux deux items initialement en bas de liste, mais qu'au contraire, l'ensemble des items se déplacent. L'aperçu correspondant à la police utilisée est rendu directement dans le nom de celle-ci. Par ailleurs, le type de police (True Type par exemple) est figuré dans la liste à l'aide d'un icône.
PowerPoint — Logiciel de présentation de la suite Office XP, PowerPoint permet également une gestion avancée des styles de texte. Une fois un objet texte sélectionné, la modification de la police de caractères se déroule d'une manière analogue à celle de Word, à quelques exceptions près :
dans le cas d'une sélection par la barre de menus, la boite de dialogue qui s'affiche ne propose pas d'aperçu.
dans le cas d'une sélection par la barre d'outils, le nombre de polices affichées est limité à 9 items dont 6 contextuels.
Exercice 18 -
Organisation de menus et utilisibilité (inspiré de Nogier, 2005 ; objectif 4.2.2. et 2.2.1.)
Dans cet exercice, on considère un système de gestion d’une petite supérette. Celui-ci permet de gérer distinctement les ventes et les commandes du magasin, ainsi que d’assurer un suivi des stocks. Pour chacune de ces unités comptables, il est possible d’éditer un état (affichage à l’écran), de l’imprimer et enfin de le transmettre (courrier électronique) au service de comptabilité centrale de la chaîne de magasins concernée. Deux propositions sont envisageables pour or ganiser les menus du programme :
—
20
© J-Y Antoine
IHM
EDITER
IMPRIMER
ENVOYER
VENTES
Ventes
Editer
Commandes
Imprimer
Stocks
Envoyer
COMMANDES
STOCKS
1 — En considérant les critères ergonomiques de Bastien et Scapin, quelle organisation vous paraît la plus appropriée ? 2 — Quelle est la logique qui a présidé à chacune de ces deux organisations ? Conclusion.
Exercice 19 -
Signifiance des icônes (objectif 4.2.1.)
On désire réaliser l'interface d'un logiciel de création vidéo. Ce système doit pouvoir récupérer des séquences vidéos existantes (importation) ou filmées en direct (enregistrer) puis en assurer le montage bouts à bouts. On doit pouvoir également gérer les transitions entre deux séquences (fondus enchaînés par exemple), sous-titrer une séquence ou encore ajouter des effets spéciaux. L'ensemble du montage vidéo est sauvegardé dans un fichier de projet. Au total, l'ensemble des actions autorisées se retrouve dans les commandes suivantes: ouvrir un projet, nouveau projet, enregistrer le projet, fermer le projet, enregistrer séquence, importer séquence, compresser séquence, afficher plan de montage, copier séquence, couper séquence, supprimer séquence, déplacer séquence, transition, sous_titre, effet spécial, propriétés, quitter.
1 — Définir un icône pour chacune de ces fonctions en prenant garde à les disposer n'importe où sur votre feuille (ne pas les disposer à la suite dans le même ordre que l'énoncé). 2 — Montrez à votre voisin les icônes que vous avez défini. Arrive-t-il à retrouver la signification de chacun d'eux ? Quelle est la caractéristique des icônes qui posent prob lème? 3 — Organisez vos icônes par groupes de signification. Leur identification est-elle plus facile ?
Exercice 20 -
Signifiance des icônes (objectif 4.2.1)
On considère la capture d’écran ci-dessous, qui représente le panneau de configuration Windows XP d’un ordinateur :
1. Pour chacun de ces icônes, donner la règle (ressemblance, analogie, symbole, etc..) qui a présidé à sa création. 2. Discuter de la facilité d’identification du sens de ces icônes, en la mettant en regard de sa règle de construction : retrouve-t-on la hiérarchie vue en cours ?
—
21
© J-Y Antoine
IHM
Exercice 21 - Comment utiliser à mauvais escient les objets WIMP (menus, boutons…) (objectifs 4.2.2 et 4.2.4) Tout au cours de cet exercice, nous allons étudier des logiciels interactifs WIMP très connus dans leur domaine d’application et présentant néanmoins des défauts d’utilisabilité. Ces erreurs sont dues à une utilisation à mauvais escient des objets de base des interfaces WIMP (menus, boutons etc..) : choisir le bon type d’objet, mais également l’utiliser en respectant les critères ergonomiques vus en cours n’est en effet pas si évident que cela.
Cas d’utilisation 1 – PowerBuilder Dans la version considérée ici, le logiciel PowerBuilder fait appel à des menus très graphiques. On donne ci-dessous l’évolution de l’interface suivant les actions successives de l’utilisateur. Pouvez-vous lister les pr oblèmes ergonomiques rencontrés. Certains relèvent de recommandations très spécifiques, mais dans d’autres cas, il s’agit de principes ergonomiques très généraux qu’il vous est demandé d ’identifier.
Cas d’utilisation 2 – Microsoft Word 97 Word semble être le logiciel roi en termes de flexibilité : en effet, il est même possible de transformer, par un simple clic sur sa partie gauche suivi d’un déplacement, la barre d’outils horizontale en une superbe barre verticale. Quel pourrait-être selon vous l’intérêt d’une telle fonctionnalité ? Qu’en pensez-vous d’un point de vue er gonomique ?
Cas d’utilisation 3 – Webform Webform était un petit gratuiciel disponible initialement sous Windows 95. L’image ci-dessous montre un exemple de boite de dialogue proposé à l’utilisateur. Le rendu de cette boite donne un aperçu de l’évolution de la charte de couleurs adoptée par Windows depuis sa version 95 jusqu’au nouveau Vista. Mais mis à part ce côté suranné, quel reproche pourriez-vous faire à ce widget dynamique ?
—
22
© J-Y Antoine
IHM
Cas d’utilisation 4 – Formulaire d’enregistrement Les formulaires n’existent pas que sous les applications WWW. Quel(s) problème(s) ergonomique(s) pose le formulaire ci-dessous, dont le design est très inspiré par les recommandations que l’on trouve sur les plateformes Linux ?
Cas d’utilisation 5 – Microsoft Exchange Microsoft n’a pas toujours accordé la prééminence aux études de son laboratoire d’utilisabilité. Considérons par exemple le logiciel de messagerie Exchange, qui a précédé Outlook sous Windows. La boite de dialogue (extrait d’une version datant de la fin des années 90) ci-dessous était activée lorsqu’on voulait rechercher un message archivé dans sa messagerie :
Dans un premier temps, on choisissait la boîte aux lettres à considérer en cliquant sur le bouton Folder (ici, Inbox, dont le choix a été validé, ainsi que l’indiqué le rendu grisé de la zone de saisie). Ensuite, on déterminait ses critères de recherche en remplissant à loisir les champs de saisie en regard des items à considérer ( From, Sent To…). Plusieurs critères pouvaient être considérés en parallèle pour une même recherche. Enfin, un appui sur un item Filter (non présenté ici) lançait la recherche. Quels problèmes ergonomiques montrent ici que les ingénieurs de Microsoft ne maitrisaient pas encore parfaitement les concepts WIMP près de 15 ans après leur développement grand public par Apple ?
Exercice 22 - Les onglets, un type de menus particulier (objectifs 4.2.2 et 2.2.1.) Les menus à onglets constituent certainement le type de menus dont les concepteurs de logiciel maîtrisent le moins l’utilisabilité. Les exemples que nous allons étudier dans cet exercice donnent quelques exemples de mauvaise conception.
Cas d’utilisation 1 – Onglet et paramétrage d’application Les deux exemples ci-dessous correspondent à des menus de paramétrage d’application, cas de figure où l’on rencontre effectivement souvent des onglets. Ils ont été développés par deux acteurs majeurs de l’informatique au tournant des années 2000 : Microsoft à gauche (suite Office 97 ) et IBM à droite ( Lotus ScreenCam). Que pensez-vous de leur conception ergonomique ?
Cas d’utilisation 2 – Microsoft Office et gestion des onglets. Si Amazon fut le promoteur des menus à onglet dans le monde du Web, Microsoft fut le premier éditeur de logiciel et de système d’exploitation à recourir en masse à ce type de menus. Il semble pourtant qu’il n’ait pas encore bien intégré une réflexion ergonomique dans la conception de ces menus. Il faut dire que Microsoft n’utilise jamais ces menus pour des fonctionnalités de base : peut-être ces menus n’ont-ils donc pas fait l’objet d’une évaluation ergonomique poussée. Cela nous permet en tous cas de découvrir des problèmes ergonomiques qui peuvent être rencontrés par le grand public. Considérons par exemple la définition avancée d’une police de caractères sous la suite Office. Les menus ci-dessous —
23
© J-Y Antoine
IHM
correspondent à trois versions successives de la suite Office. Observez bien les différents menus à onglets. Un problème ergonomique majeur n’a été corrigé que dans la version Office 2003. Pouvez-vous le détecter ?
Office 6
Office 95
Office 2003
Cas d’utilisation 3 – Oups … ou l’onglet fatal Cet exemple est caricatural, mais il me plait bien. Cette application Windows de compression de fichier utilisait les onglets comme menu principal, choix assez rare. Surtout, il y est fait un usage vraiment bizarre d’un onglet. Je ne peux en dire plus sans vous mettre sur la piste, sauriez-vous deviner quel problème pour le moins perturbant rencontrait l’utilisateur et l’associer à un principe ergonomique général ?
—
24
© J-Y Antoine
IHM
Exercice 23 -
Signifiance des icônes : un exemple Web (inspiré de Nogier 2005 ; objectif 4.2.1)
La capture d’écran ci-dessous montre l’ancienne page d’accueil de l’ESME Sudria, une petite école d’ingénieur privée. Le graphisme, assez sympathique, fait appel à des icônes dont le moins qu’on puisse dire est qu’ils sont peu explicites. Scan Nogier à intégrer
1— Cherchez à trouver une signification à chacun des icônes, en sachant que vous avez comme seule information que vous êtes sur le site d’une école d’ingénieur. Comparez ensuite vos propositions avec celles de votre voisin. Conclusion ? 2 — Sensible, peut-être, aux critiques qu’a fait Jean-François Nogier dans son ouvrage, le site de l’école propose désormais la nouvelle interface WWW donnée page suivante. Que pensez-vous des icônes utilisés ? La leçon a-telle entendue ?
3 — En troisième année, cette école propose un cours d’ergonomie et IHM. Au vu de ce site WWW, vous pouvez une petite conclusion sur la pertinence du travail de la Commission des Titres d’Ingénieur et sur la qualité de nombre des formations délivrant désormais le titre d’ingénieur en France.
—
25
© J-Y Antoine
IHM
Interfaces WWW Exercice 24 -
IHM et Web (examen 2005 – objectif 5.2.3)
1. Que pensez-vous de la gestion de menus de ce site WWW ? Reliez vos critiques à des recommandations ergonomiques étudiés en cours.
2. On présente ci-dessous la page d’accueil du site WWW officiel de la ville de Beaugency. Quel problème rencontre l’utilisateur en arrivant sur ce site ? Quel principe ergonomique n’est visiblement pas respecté ?
Exercice 25 -
Critiques d'interface Web (examen 2006 – objectifs 2.2.1, 5.2.1 et 5.2.3.)
1. La figure ci-après correspond à la page d'accueil du site de renseignements « Pages Jaunes ». Critiquez cette page WWW en reliant vos remarques à des critères ergonomiques vus en cours. —
26
© J-Y Antoine
IHM
2. La figure page suivante correspond à la page d'accueil d'un site marchand proposant à chacun la création, l'hébergement et le référencement d'annuaires WWW (de type Yahoo !). Cette page d'accueil a été mise à jour cette année par un étudiant de Master 2 lors de son stage. Pouvez-vous me dire quelles sont les recommandations qu'il n'a pas suivi à cette occasion. On cherchera là encore à relier toute remarque à des critères ergonomiques étudiés en cours.
—
27
© J-Y Antoine
IHM
3. La plupart des grandes gares SNCF sont désormais équipées de hotspots WiFi qui permet à tout un chacun de se connecter sur le réseau avec son ordinateur portable personnel. Ce service, géré par les opérateurs de téléphonie présents sur le territoire français, est payant. Lorsqu'il arrive dans une gare équipée et qu'il ouvre un navigateur sur son ordinateur, un utilisateur lamba se trouve automatiquement redirigé vers la page d'accueil ci-dessous :
Outre le service payant d'accès intégral à Internet, sur la gauche, ces hotspots proposent néanmoins deux services gratuits : iDTGV, qui permet de réserver en ligne un billet de TGV sur certaines relations, et l'agence en ligne voyages-sncf.com . Cette agence en ligne, qui fait partie des 5 sites francophones les plus parcourus, permet aussi bien d'acheter un billet de train que d'avion, de louer une voiture ou réserver une chambre d'hôtel. Un utilisateur qui n'a pas choisi de prendre une connexion payante peut ainsi accéder à cette agence en ligne en cliquant sur l'icône corr espondante. Il se retrouve sur une page d'accueil identique à celle de voyages-sncf.com :
—
28
© J-Y Antoine
IHM
Tous les boutons de ce simili-service WWW sont accessibles : la figure ci-dessous montre ainsi qu'il est possible de renseigner une demande de vol comme sur le service WWW standard :
Cependant, les opérateurs de téléphonie qui supportent le coût de ces hotspots ont veillé au grain lors de leur négociation avec la SNCF et ont imposé que le maximum de services soient payants. En effet, si je clique sur le bouton recherche après avoir défini un vol sans avoir choisi une connexion payante, je me retrouve sans autre forme de procès sur la page d'accueil du hotspot vue précédemment (en fait, seules les informations sur les trains sont accessibles dans cette réplique de l'agence en ligne...). Pouvez-vous expliquer ce qui a motivé ergonomiquement le choix de cette stratégie d'interaction ? Quelles sont les inconvénients de tels choix ? Justifiez vos réponses en les mettant en relation avec des critères ergonomiques vus en cours.
Exercice 26 -
Quelques pages d'accueil problématiques (objectif 5.2.4)
On considère la page d'accueil du site de la société Accenture . Selon vous, quel est l'activité de cette entreprise? A votre avis, quelles sont les zones qui sont cliquables sur cette page d'accueil ? Quelle critère ergonomique général n'est pas respecté de ce point de vue ? Auriez-vous d'autres critiques à faire ?
—
29
© J-Y Antoine
IHM
On considère maintenant le site CitiGroup . Quelle question va se poser le primo-utilisateur à son arrivée sur la page ? Quel est le problème de conception rencontré ? Quel critère ergonomique général en est affecté ?
L’image ci-dessous présente l’ancien site de la chaîne de supermarché U. Lorsqu’on sélectionne « Mes courses » dans la zone de menu de gauche, on sous-menu se développe (cf. image précédente) qui laisse le choix entre quatre options (autres magasins U, bonnes affaires, points Bonus, bons de réduction). La bande horizontale rouge en haut de l’interface sert également de barre de menu.
1.
Page d’accueil – Ce site respecte-t-il les recommandations ergonomiques en matière de page d’accueil WWW. Si non, y-a-t-il des raisons qui peuvent justifier le choix des concepteurs.
2.
Page de domaine – Si on sélectionne l’option «Bons de réduction» dans le menu précédent, la page d’accueil est remplacée par la page de domaine suivante. Que pensez-vous de cette gestion de l’interaction ?
—
30
© J-Y Antoine
IHM
Exercice 27 - Gestion de zones de navigation: onglets et combi-listes (exam 2008 – objectif 5.2.4) Comparez la gestion des zones de navigation des trois sites marchands ci-dessous. Quel est celui qui a la meilleure utilisabilité entre terme d’accès rapide à une ouvrage donné.
Alapage
Amazon
FNAC
—
31
© J-Y Antoine
IHM
Interfaces intégrées (Embedded interfaces) Exercice 28 -
Interfaces intégrées et critères ergonomiques (examen 2008 ; objectifs 6.1. et 2.2.1.)
Les critères ergonomiques vues en cours s’appliquent également aux interfaces informatiques intégrées dans des dispositifs autres que des ordinateurs. Dans cet exercice, nous allons nous intéresser à une calculatrice électronique telle que celles utilisées par les lycéens. La figure page suivante présente cette calculatrice. L’écran n’est pas rétro-éclairé et n’est pas tactile. Le seul dispositif d’entrée est le clavier de l’appareil (pas d’utilisation avec un stylet).
Discuter de l’utilisabilité de l’interface utilisateur ainsi r éalisée en fonction des critères ergonomiques suivants : a. principes ergonomiques de base en particulier en matière d’organisation b. choix et implémentation du dispositif d’entrée c. choix et implémentation du dispositif de sortie —
32
© J-Y Antoine
IHM
d. e.
choix des polices de caractères utilisées utilisation des couleurs
Dispositifs d'entrée Exercice 29 -
Keystroke model
A votre avis, quel est la méthode la plus rapide pour effacer une partie de texte sous un éditeur standard. Trois techniques sont a priori envisageables : soit vous vous placez à la fin du texte à supprimer et vous appuyez autant de fois que nécessaire la touche de suppression ( suppr), soit vous sélectionnez l'ensemble du texte indésirable à supprimer avant d'appuyer (une fois) cette touche. Enfin, une fois le texte sélectionné, vous pouvez sélectionner l'item "supprimer" du menu édition de la barr e de menus. 1.
En vous appuyant sur le modèle Keystroke, estimez le temps nécessaire pour la suppression d'un texte de 3 caractères adjacents.
2.
Faites de même pour une suppression de 10 caractères adjacents.
3.
Les résultats obtenus sont-ils intuitifs ? Quels sont les limites de ces calculs ?
Exercice 30 - Evaluation expérimentale des paramètres de la loi de Fitts On considère quelques temps (en secondes) mesurés lors d'un expérimentation avec un dipositif particulier. Pour ce dispositif, pouvez-vous déterminer (grossièrement) les valeurs des constantes expérimentales C1 et C2 utilisées de la loi de Fitts. d \ D 0.10 0.50 1.00
1.00 0.31 0.13 0.07
D 1 1 d 0,1 0,5 2D/d 20 4 log2(2D/2) 4,32 2 Exercice 31 -
5.00 0.45 0.30 0.22
1 1 2 1
10.00 0.56 0.38 0.32
5 5 5 10 10 10 0,1 0,5 1 0,1 0,5 1 100 20 10 200 40 20 6,64 4,32 3,32 7,64 5,32 4,32
Loi de Fitts et organisation de menus(adapté du cours de M. Baudoin-Lafon)
On considère quelques temps (en secondes) donnés par la Loi de Fitts pour un dispositif donné: d \ D 0.10 0.50 1.00
1.00 0.46 0.30 0.23
2.00 0.53 0.37 0.30
3.00 0.57 0.41 0.34
4.00 0.60 0.44 0.37
6.00 0.64 0.48 0.41
On désire comparer le temps moyen pour la sélection d'une commande dans un menu hiérarchique à deux niveaux (barre de menus -> menu1 -> menu2). Le temps pour effectuer un clic de la souris est de 0.1s. Comparer ce temps avec une configuration sans menu hiérarchique (menus -> menu1) mais dans laquelle les sous-menus sont trois fois plus long en moyenne que les menus hiérarchiques. Chaque item d'un sous-menu est séparé du suivant par une distance de 0,5 cm. 1.
Calculer le temps moyen de sélection pour des tailles de menus non hiérarchiques de respectivement 12 et 24 items. Conclusion?
2.
On désire maintenant comparer les résultats obtenus pour des menus de 24 items avec une solution à trois niveaux pour laquelle les sous-menus sont de taille six fois moindre. Retrouve-t-on un résultat connu?
—
33
© J-Y Antoine
IHM
Evaluation Exercice 32 - Stratégie d’évaluation : des spécifications d’utilisabilité à leur caractérisation suivant plusieurs dimensions (adapté de Stone et al., 2005) On considère dans cet exercice la conception de deux sites WWW, le premier consacré à une exposition temporaire dans une galerie d’art, le second au site d’un musée quelconque. A chaque fois, le MAO (maître d’ouvrage) a défini, leur de la rédaction des spécifications du site, un certain nombre de conditions qui devront être satisfaites en matières d’utilisabilité.
A.
Afin de définir votre stratégie d’évaluation, pouvez-vous relier ces demandes aux dimensions d’utilisabilité étudiées en cours : efficience, efficacité, caractère engageant, tolérance aux erreurs, apprenabilité.
Exposition Temporaire 1.
Le site doit inciter les personnes qui ne connaissent pas l’artiste faisant l’objet de cette exposition à ne pas quitter le site et à explorer ce dernier. Il doit également fournir des informations nouvelles pour les historiens d’art déjà experts de l’artiste.
2.
Un des objectifs principaux du site doit être d’encourager la découverte et donc l’exploration aussi libre que possible du site, même si on découvre pour la première fois la galerie.
3.
Le site doit répondre clairement et facilement aux questions que se posent les visiteurs sur l’artiste et l’exposition (localisation, heures d’ouvertures…)
4.
Aucune information donnée sur l’artiste ne doit être erronée, il en va de la réputation de la galerie auprès des acheteurs et des spécialistes.
5.
La navigation doit mettre l’accent plus sur l’intérêt des œuvres présentées (qui doivent être rendues sur le site avec une grande qualité de r estitution) que sur la vitesse de téléchargement des pages. Toutefois, des mesures doivent être prises pour éviter le blocage de la navigation lors du téléchargement des images en haute définition.
Musée 1.
Le musée est ouvert au grand public : tout le monde doit pouvoir l’explorer sans avoir une expérience particulière de la navigation Web.
2.
La structure du site doit favoriser l’accès aux informations les plus importantes (expositions en cours, horaires d’ouvertures, tarifs, accès etc.) en un minimum de navigation.
3.
L’apparition d’une page d'erreur du fait du site même doit être absolument proscrite.
4.
Le site doit donner un aperçu fidèle de ce que propose le musée aux personnes qui ne l’ont encore jamais visité. Il est essentiel que le site leur donne envie de venir le visiter.
5.
Le site doit pouvoir répondre aux principales questions des visiteurs et l’accès à ces informations doit être aisé à trouver.
B.
Au vu des ces spécifications, pouvez-vous hiérarchiser les facteurs d’utilisabilité à tester lors de l’évaluation ?
C.
Pour chaque facteur d’utilisabilité testé, proposez une métrique quantitative d’évaluation.
Exercice 33 -
Méthodes d'évaluation : système d'information touristique (adapté de Preece, 1994)
L'office du tourisme de la ville de Vannes souhaite développer une borne d'information touristique qui sera située dans ces locaux. Ce système interactif autorise une seule modalité d'entrée : l'écran tactile. Une spécification complète du système ainsi qu'un premier prototype ont été élaborés, et l'office désirerait une évaluation ergonomique du produit avant d'aller plus loin dans le développement du système. Les qualités auxquelles doit répondre ce système concernant avant tout l'affichage graphique (icônes, couleurs, symboles), la facilité d'accès à l'information et la facilité d'utiliser les menus présents sur l'interface à l'aide de l'écran tactile. On s'interroge également sur le type d'informations supplémentaires qui pourraient intéresser les utilisateurs. Cette évaluation doit être réalisée dans le mois à venir, vous disposez d'une personne ayant une bonne expérience en matière d'évaluation des interfaces ainsi que de matériel vidéo. Par ailleurs, les concepteurs du système sont prêts à modifier la structure et les aspects graphiques de l'interface si nécessaire. 1.
Pouvez-vous déterminer un ensemble de méthodes d'évaluation qui permettraient de répondre à ces besoins ? Justifiez vos réponses.
—
34
© J-Y Antoine
