You are on page 1of 35

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é 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 qui n'est pas respecté 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

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 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. Par contre. Si on veut agrandir après-coup la zone de dessin. pour réduire le dessin dans sa globalité (et non pas lui garder sa taille dans une zone plus grande. Quels sont vos commentaires ? 4 — Lorsqu'on intègre un nouveau dessin (Insertion / Image / Nouveau dessin) dans un document Word. Une fois la taille recherché choisie. un simple clic en dehors de la zone de dessin permet de continuer le travail d'édition. 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é. 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 sélection sur celui-ci affiche à nouveau les poignées que l'on peut tirer.

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. selon vous. très mal géré à la base. 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. inspirés d'un site WWW réel. Qu'observez-vous ? Pouvez-vous deviner ce qui explique cet affichage ? Quel recommandation ergonomique a. Observez les deux formulaires de saisie ci-dessous. Voici le résultat de ma recherche. 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.2. A quel principe ergonomique. j'ai cherché à réserver un trajet Vannes -> Lyon pour le 8 avril 2008 (demande résumée à gauche de l'écran). été joyeusement foulée du pied par la SNCF ? —5— © J-Y Antoine . Exercice 3 Les principes ergonomiques généraux s'appliquent aussi au WWW (objectif 2. La capture d'écran (page suivante) est issue d'un usage réel du site de réservation de la SNCF.) 1. Le 6 janvier 2008 au soir. un appui sur le bouton "OK" permet une mise à jour de l'affichage avec le dessin redimensionné.1.IHM Après sélection du rapport de réduction (ou d'agrandissement désiré). les concepteurs du site ont-ils tenté de remédier ? 2.

Donnez au moins un critère ergonomique qui n’était pas respecté par ce type de combiné. qui représentent différentes configurations possibles pour une plaque à 4 feux. Il sera remplacé par un joystick équivalent aux commandes des avions. 2. Dix et al. Résultat des courses. on considère un éditeur graphique de texte de type Microsoft Word ou Star Office. bien sûr). 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. Pouvez-vous classer ces configurations d'un point de vue ergonomique ? 2.) En 1982.1.) 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. Dans une voiture. Dans cet exercice. Discutez des avantages et inconvénients de ce nouveau dispositif de commande. les mouvements vers la droite et la gauche du joystick gèreront la direction. Réfléchissez à l’utilisation d’un tel combiné. 2004 – objectif 1.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. 1. 2..2. Observez les dessins ci-dessous. Proposez une solution pour remédier à ce problème sans utilisation d’un écran. Exercice 5 L’utilisatibilié concerne l'informatique comme d'autres domaines (objectif 2.1..2) 2005 : Avant l’arrivée des portables. et que l’utilisation d’un écran a pu corriger. je ne sais jamais quel bouton correspond à quelle plaque électrique. Renault a déjà présenté des véhicules d'exhibition sans volant.2. tandis que les mouvements en avant et en arrière piloteront les accélérations et freinages. objectif 2. 1. 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.IHM Exercice 4 - L’interaction ne se limite pas aux logiciels (examens 2005 et 2006 . et par quels aspects il s'en éloigne. 1 — En étudiant les critères définis par Shneiderman.. —6— © J-Y Antoine . 1. dire en quoi cet type de logiciel répond au concept de manipulation directe. les téléphones classiques (à touche ou à cadran) ne comportaient pas d’écran. Expliquez ce qui pourrait empêcher cette prédiction de se réaliser (hors contraintes économiques. Ce type de dispositif équipe déjà les voitures adaptées à certains handicaps.

pas si ancienne que cela. Critiquez les solutions proposées par ces deux navigateurs en reliant vos remarques à des critères ergonomiques vus en cours.2. pour un logiciel grand public (éditeur de texte par exemple). Titre Zone des commandes (boutons) Zone de travail Exit Zone d'affichage des informations ou des messages d'alertes —7— © J-Y Antoine .IHM Exercice 7 - Gestion de messages d'erreurs (objectif 3.1. objectif 3. Exemple 1 – Mozilla Exemple 2 – Opera L Considérez maintenant le message d'erreur ci-dessous. le schéma général de l'affichage ci-après..) On propose. 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 .) 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). issu d'une application Mac ..2.2.

Cas d’utilisation 1 – Microsoft Outlook Microsoft est plutôt doué pour la gestion des erreurs. Easy CD Creator est un des logiciels d’aide au gravage les plus répandus. Exercice 9 Disposition générale de l’interface : quelques exemples (objectif 3. Ce site truculent n’est plus mis à jour depuis 2000. 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.mac. 3 — Proposez une autre organisation générale de l'affichage pour répondre à ces problèmes. les développeurs furent mal inspirés. en oubliant que la gestion des erreurs participe de la robustesse d’un logiciel. Justifiez votre réponse.2. 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. 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. Mais en tous cas.IHM 1 — Enoncer les points qui vous paraissent satisfaisants dans cette interface. obtenus dans deux situations différentes en fin d’opération. mais la plupart des erreurs qui ont été recueillies sont toujours d’actualité. Avez-vous des commentaires à faire ? —8— © J-Y Antoine . 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. cette interface n’a rien de particulier.com/bradster/iarchitect/shame. Reconnaissons tout de même qu’il faut désormais (un peu) plus de temps pour dénicher certaines perles.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. 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.htm.1) Cas d’utilisation 1 – MIDI Orchestrator MIDI Orchestrator est un petit logiciel de lecture de fichier MIDI. A priori. sur le logiciel de messagerie Outlook (version 2000).1/3. Les personnes mal intentionnées diront que c’est parce que leurs logiciels sont tout sauf fiables.2. Justifiez votre réponse. Au final. Ce qui ne le dispense pas d’évaluation ergonomique… Considérez les deux messages ci-dessous. 2 — Enoncer les points qui au contraire ne vous pas paraissent satisfaisants.

Ce message risque fortement de perturber l’utilisateur. Erreur fréquente car. 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. Visiblement le concepteur du logiciel avait (trop) bien retenu la leçon de ses cours d’ergonomie. Microsoft est soucieux de notre confidentialité. 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. assez insidieuse.IHM Cas d’utilisation 4 – Quand Internet Explorer cause à ma grand-mère. 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 . 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. avouons-le. Lorsque nous surfons avec son navigateur. 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. et il le prouve avec cette boîte de dialogue. 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.

Un clic sur un objet affiché dans le ciel permet d'avoir différentes informations sur ce dernier : nom de l'objet céleste. Bastien et Scapin. mn.2 . heure) donné et ce pour une position donnée. l'heure GMT (et non pas locale. comme sur les télescopes à monture équatoriale. — 10 © J-Y Antoine . en terme d'ascension droite (h. On propose ci-après l'interface d'un logiciel d'éphéméride composé d'une seule fenêtre. sec) et de déclinaison (degrés). un éphéméride est une table qui indique la position de tous les astres à chaque moment (jour. celui-ci doit définir : les conditions d'observation : il doit donner la date d'observation (au format jj/mm/aaaa). un clic sur le bouton "afficher" permet de voir le ciel virtuel correspondant aux conditions d'observation demandées. Nielsen. Pour cela. Une fois que ces paramètres sont définis. aucune information ne s'affiche immédiatement. ainsi que la position (latitude et longitude) du lieu d'observation. en vous appuyant sur les principes de Norman. 1 — Faites l’évaluation critique de cette interface. 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. ces tables austères sont désormais à la portée du grand public. Lorsqu'une information saisie n'est pas valide. Les données rentrées saisies restent apparentes dans la zone de saisie. 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. On doit également définir un facteur de grossissement (zoom) dont dépendra la largeur du champ de vision. les paramètres de visée (on n'affiche qu'une partie du ciel à l'écran) : l'orientation se définit. date. position en ascension droite et déclinaison magnitude (intensité de l'éclat perçu) distance à la Terre.IHM Exercice 11 - Evaluation d'une IHM : éphéméride électronique (objectifs 2. 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. 3. 2 — Proposez une autre interface pour répondre aux problèmes rencontrés.2) En astronomie. Principes de fonctionnement Le système affiche à l'écran une vue partielle du ciel suivant les informations fournies par l'utilisateur. Le facteur de grossissement est un entier. Avec l'outil informatique. au format hh:mm).

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. 57-58 – objectif 3.…) se traduisant par une tétraplégie ou une athétose accompagnée d’une perte de l’usage de la parole. — 11 © J-Y Antoine . les utilisateurs doivent remplir dans un formulaire une information concernant leur pays d'origine.2. Quatre solutions sont proposées pour le design de cette zone de saisie: a) Nom Prénom Fonction Courrier Electronique Nom Prénom Fonction Courrier Electronique b) Nom Prénom Fonction Courrier Electronique Nom Prénom Fonction Email c) d) (optionnel) Critiquez chacune de ces propositions : quels sont leurs points forts et leurs points faibles ? Exercice 13 Conception : aide à la saisie de données (contrôle 2006 – objectifs 2. dans lesquels l’utilisateur doit saisir des informations concernant son nom.2 . en l'analysant directement ou éventuellement en vous aidant de la nouvelle interface (qui a répondu à certains problèmes mais pas à tous). 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. et discutez-en les avantages et les inconvénients a priori en regard des tâches réalisables et des connaissances des utilisateurs. Article 1 – Ancienne version du logiciel Sibylle : Considérations ergonomiques et adaptation aux besoins des utilisateurs 1. Le premier article présente la version originelle de cette interface. la nouvelle interface telle que modifiée suite à un stage de Master Recherche réalisée à l'Université de Bretagne Sud.2. 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. syndrome d’enfermement.2) Pour une application interactive quelconque.1) On considère l’interface d’une base de données.2) Dans ce problème. Le second article présente.2 et 4. telle qu'elle a été définie en 2006 par un stagiaire de Master Recherche de l'Université de Tours. La communication est alors privée de son support oral habituel. Introduction Les communicateurs. ou bien encore un formulaire de saisie de données sur un site WWW.IHM Exercice 12 - Formats d’affichage (adapté de Nogier 1995. Il vous est demandé de caractériser les faiblesses ergonomiques de la première interface. 3. sa fonction et son adresse électronique. présentez deux stratégies d'organisation de votre interface pour faciliter cette saisie. son prénom. pour vous aider dans cet exercice.2 et 4.2. pp. Scléroses Latérales Amyotrophiques. Exercice 14 Etude de l'ergonomie de l'interface d'un logiciel interactif (objectifs 2. Sachant qu'il existe plus de 200 pays reconnus par l'ONU. 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.

Ces regroupements permettent de minimiser le nombre de touches à balayer lors de la saisie. par prédiction de mots. Une fois le message saisi. nous présentons l'interface de la version 2. Il peut s’agir d’un joystick. 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é. L'idée est la suivante : après chaque saisie d'une lettre. a). on va reconfigurer le clavier pour afficher en premier (dans l'ordre de défilement) les caractères les plus probables. le plus souvent par un mode de défilement linéaire. h) et de plusieurs sous-claviers.. Ces derniers regroupent les fonctionnalités par contexte d'utilisation (sous-clavier de commandes (figure 1. nous avons essayé de dépasser les performances du défilement ligne/colonne à l'aide d'un défilement linéaire dynamique. Cette interface matérielle dépend des capacités motrices de l’utilisateur.) sur leur mode de pointage (. 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. sous-clavier des chiffres (figure 1. La tâche de saisie est généralement longue (1 à 5 mots par minute en moyenne) et fatigante pour les sujets. le long du clavier. (. Pour cela. la saisie reste toujours lente et pénible. 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 »). Pour l’utilisateur qui ne peut pas manipuler directement le pointeur de la souris. de déplacement (figure 1.. il peut modifier la place et la dimension de chaque sous-clavier selon ses préférences et ses besoins. e). Certains systèmes envisagent cette aide sous forme de complétion directe à partir du mot le plus probable. c).) 2. En dépit de ces performances. Les différences portent surtout (.7. des caractères soit dans un éditeur intégré. Une caractéristique importante est le degré de liberté qu’elle permet pour manipuler l’ordinateur. couplé à une synthèse vocale. la sélection des symboles ne peut être réalisée que par un système de défilement automatique du curseur.. Cette disposition est modifiable par l’utilisateur.. Dans cette partie. — 12 © J-Y Antoine . etc. il peut être vocalisé par l’intermédiaire d’une synthèse de parole artificielle (text-to-speech synthesis).. 4. En effet. d). Les claviers simulés Appelé aussi clavier à l'écran ou clavier logiciel. 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. un curseur se déplace caractère par caractère. compte tenu de ceux qui viennent d'être déjà saisis. d’un simple bouton poussoir. Il existe une diversité de types de claviers virtuels. les claviers virtuels sont de plus en plus adaptés à l'handicap de l'utilisateur.) Le mode d’interaction avec un clavier virtuel est étroitement lié au degré de liberté offert par l’interface matérielle. Le problème majeur des systèmes de communication assistée est la lenteur de la composition des messages.2 de Sibylle actuellement installée au CMRRF de Kerpape. sousclavier de lettres (figure 1. 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. Pour accélérer la saisie. Cette redondance permet d’éviter le déplacement d'un sous-clavier à l'autre. l’utilisateur n’a plus qu’à valider. Le plus souvent. 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 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. Le curseur met en surbrillance successivement les touches une à une. Lorsque le curseur désigne la lettre désirée. soit dans une autre application MS-Windows. la solution actuellement adoptée par plusieurs claviers logiciels est le défilement « ligne / colonne ». b) et la liste des mots prédits (figure 1... 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). d’une commande oculaire. 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). deux approches complémentaires sont envisageables. 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. (. d’une commande par souffle. C'est pourquoi nous essayons également d'éviter des saisies à l'utilisateur. L'idée étant ici de compléter automatiquement un début de mot pour éviter la saisie de ses dernières lettres. L’interface est composée d’une zone d’édition (figure 1. Aujourd’hui.) Dans le système Sibylle. Ce mode de saisie est excessivement lent. Dans le cadre de clavier à défilement linéaire.IHM Ces systèmes reposent sur l’écriture de phrases à l’aide d’un clavier virtuel affiché à l’écran. L'interface du système Sibylle Le clavier virtuel de Sibylle offre un ensemble de fonctionnalités permettant de saisir.

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. retourner à la ligne.2). Une touche de saut (figure 1. (e) (f) (a) (c) (h) (d) (g) (b) Figure 1 : L’interface de Sibylle (version 2. effacer le dernier caractère saisi. 4. Pour le clavier dynamique. la touche début et la touche fin. 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. etc. La navigation entre les différents sous-claviers est réalisée en sélectionnant des touches spéciales (figure 1. cette touche est située en haut à droite dans le sous-clavier de lettres.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.7. Il contient une touche de retour à ce dernier. 4.IHM 4. enregistrer. Le sousclavier déplacement comprend les touches de déplacement gauche. g) permet d’accéder rapidement aux caractères de ponctuation. L’utilisateur peut y accéder à partir du sous-clavier de commandes. la touche Tab. — 13 © J-Y Antoine .2 Le sous-clavier de lettres Afin de permettre une large adaptation. le sous-clavier des lettres comprend les lettres accentuées et non accentuées et les caractères de ponctuation. 4. le clavier alphabétique (clavier par défaut). Alors que les caractères de ponctuation sont toujours statiques et situés dans la partie basse du sous-clavier. Tabb).1 Le sous-clavier de commandes Il s’agit du sous-clavier principal qui comporte les commandes standards pour ouvrir. 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. haut et bas. Quelque soit le type d’organisation. droite. il est possible de choisir entre trois types d’organisation pour le sousclavier des lettres dans Sibylle. 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.3 Le sous-clavier de chiffres Le sous-clavier de chiffres correspond au pavé numérique d’un clavier standard. 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. les touches des lettres apparaissent d’une façon dynamique dans la partie supérieure du sous-clavier.

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. etc. L’interface de l’application regroupe plusieurs sous-claviers qui permettent respectivement de sélectionner des caractères. – la liste de mots. 2002) permet ainsi de présenter la lettre attendue dans les trois premières positions en moyenne (2. ainsi que l’espace comme marque de fin de mot. Cette prédiction est par contre beaucoup plus friable si elle concernait les caractères de ponctuation. que l’on retrouve sur les claviers physiques classiques. allemande et anglaise. 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. SIBYLLE s’adresse en premier lieu à des personnes lourdement handicapées qui ne peuvent actionner qu’un simple contacteur.7 Le clic long En pratique. La figure 3 (page suivante) présente l’interface utilisateur tenant lieu de clavier virtuel. 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. il est utilisable en défilement linéaire ou ligne-colonne. est utilisé pour composer les messages caractère par caractère. 4.0 pour l’allemand). nous avons implémenté un clic long de durées et de fonctions paramétrables. 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é. un changement de couleur du curseur indique à l’utilisateur qu’il réalise un clic long. Une touche de saut de claviers permet de revenir au clavier de lettres. Il ne comprend que des caractères alphabétiques avec leurs diacritiques. Cette organisation. si la prédiction linguistique permet de réduire le temps de saisie et la fatigue qui en résulte. Dans ce cas. correspond aux prédictions lexicales données par SIBYLLE en fonction du message déjà composé. Un module de prédiction basé sur un pentagramme de lettres (Schadle et al.). il est utile de présenter le fonctionnement du système SIBYLLE tel qu’il apparait à un utilisateur. Des touches de saut de clavier permettent de naviguer d’un sous-clavier à un autre suivant les besoins de la saisie. Lorsque l’utilisateur sélectionne un de ces mots.7 pour le français. 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. 4. Dans ce cas. Le clic long consiste à appuyer de façon prolongée sur une touche quelconque jusqu’au changement de la couleur de sa bordure. Bien qu’utilisable avec une souris. 3. sur la gauche de l’interface.6 Modes d’interaction Sibylle permet à l’utilisateur de sélectionner une touche selon trois modes. au centre. L’activation de l’option clic long permet de minimiser un certain nombre de défilement selon l’action qui lui correspond. Ce feedback peut être inactivé par l’utilisateur.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. le message est alors automatiquement complété. Le mode souris est destiné aux personnes pouvant encore contrôler une souris ou un joystick. 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. correction. afin de présenter en priorité les lettres les plus probables compte tenu des caractères déjà saisis. Article 2 – Nouvelle version du logiciel 2. En termes de feedback.IHM 4. SIBYLLE existe en versions française. L’action associée au clic long est alors réalisée par le système. La figure 3 permet de distinguer les différents sous-claviers de l’interface : – le clavier de lettres. 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. Les caractères de ponctuation sont situés dans un clavier à part. est dictée par le caractère dynamique du sousclavier lorsqu’on se trouve en mode de défilement linéaire. — 14 © J-Y Antoine . Pour les personnes qui peuvent maîtriser suffisamment leur « clic » en terme de durée. des nombres. la disposition des lettres est actualisée après chaque saisie. évitant ainsi la saisie des caractères correspondants. 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.

. permet le pilotage complet de l’ordinateur. les durées minimales et maximales autorisées pour un appui. Les versions antérieures du système SIBYLLE ne comprenaient qu’un éditeur de texte intégré. Ces messages peuvent être composés par l’utilisateur luimême (cf. On notera que l’interface utilisateur est largement paramétrable pour répondre au mieux aux besoins de l’utilisateur. Ces derniers paramètres sont essentiels pour distinguer les appuis volontaires des actions non maîtrisées.. Enfin.IHM Figure 3. — 15 © J-Y Antoine . Figure 4. naviguer sur la Toile. ligne-colonne. le pavé numérique présente plusieurs modes d’utilisation qui s’affichent alternativement à la demande. SIBYLLE distingue des clics longs et très longs qu’il est possible d’associer à des actions prédéfinies (effacement. 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. – comme sur un clavier ordinaire (Num-lock). puisque l’utilisateur a la possibilité de donner une sémantique différente à ces clics suivant le sous-clavier où se trouve le curseur. les personnes handicapées ont souvent du mal à anticiper les sauts du curseur d’une touche à l’autre. Ce permet à l’utilisateur d’utiliser Sibylle pour écrire des textes mais également des courriers électroniques. Ce dernier peut ainsi choisir son mode de sélection (souris. nous avons ajouté une barre de temporisation qui glisse doucement du haut au bas du curseur lors de chaque saut (figure 4). communiquer à « l’oral » (synthèse de parole) avec son entourage. Ce feedback dynamique permet à l’utilisateur de paramétrer temporellement ses actions. linéaire). etc… Afin de faciliter ce pilotage intégrale de l’ordinateur. Interface utilisateur du système SIBYLLE (version française 3. Le système émule désormais intégralement le clavier physique de l’ordinateur et est donc utilisable pour piloter toute application Windows. aller en début de clavier. L’utilisateur sélectionne ainsi fréquemment la touche qui précède ou qui suit celle recherché. l’appel à la synthèse de parole ou encore l’appel du menu Démarrer de Windows. La configuration de ces actions peut-être très fine. De même. Afin de réduire la fréquence de ces erreurs très pénalisantes. un dernier mode associe chaque touche du sous-clavier à la composition immédiate de messages prédéfinis. ceci pour des utilisateurs qui arrivent à contrôler leur geste. figure 3). la vitesse de défilement du curseur.1) – la barre horizontale de touches fonctions.). mise en majuscule. Il sert à saisir des chiffres mais permet également être l’insertion de signes de ponctuation. ce sous-clavier présente des touches de fonction réalisant des actions aussi diverses que la sauvegarde d’un ficher. Curseur avec barre glissante de temporisation Enfin. en haut de l’interface.

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.2) fermer fichier. créer table des matières. 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. supprimer sélection. changer On se propose de réaliser un logiciel de dessin qui autorise les fonctions suivantes : Nouveau dessin. affichage page. 1 — On demande de grouper ces fonctions sous différents sous-menus dont vous définirez le nombre et les titres.4) Dans ce problème. répéter. 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. insérer saut de page. 1 — Définir une structure de menu pour grouper ces fonctions sous différents sous-menus dont vous définirez les titres. droite. il vous est demandé d’expliquer quel est le problème que risque de rencontrer l’utilisateur. mise en page.. insérer note de bas de page. changer fonte. couper. ouverture fichier dessin. réduire taille de casse.2. dessiner cercle. dupliquer. insérer image. quitter. casse gras.2. Dix et al. casse normale.2. Comparez sa catégorisation à celle que vous aviez prévu. ouvrir comme copie. a. rechercher mot. Définissez ensuite l'organisation de vos fonctions dans chaque sous-menu (vous pouvez également définir des sous-menus sous ces sous-menus). 2004 . dessiner ligne changer police de caractères.2 et 4. style de caractères. et de le relier le problème de conception sous-jacent à un critère ou principe ergonomique étudié en cours. fermer ficher. repaginer. vérification orthographe. enregistrer sous. objectif 4. Microsoft Windows XP — 16 © J-Y Antoine . copier. page précédente. casse italique. formats de paragraphe. envoyer comme mail. nous allons vous présenter différentes copies d’écran révélant un problème de conception ergonomique donné. augmenter taille de casse. Comparez sa catégorisation à celle que vous aviez prévue. coller. supprimer. remplacer mot. nouveau document. préférences.2. 1. aperçu avant impression.IHM Interfaces WIMP Exercice 15 Organisation d'items dans des menus (adapté de A.1. 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. ouvrir fichier. 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 — 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. insérer tableau. page suivante. A chaque fois. compter nombre de mots. insérer texte dans objet. alignement texte. casse souligné. imprimer. 4. annuler. aide. Comparez les points forts et les points faibles de ces différentes solutions.

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. Un raccourci clavier (Ctrl i . 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.2. nous allons étudier différents éditeurs de texte. Linux (distribution Fedora 8) Exercice 17 - Sélection d'une police de caractère dans un menu (objectif 4. 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. Dans Amaya. Sous Thunderbird. — 17 © J-Y Antoine .2. é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.2.1. et 2. Apple Mac OS X c.) Dans cet exercice.IHM b.

En haut de la liste s'affichent deux options d'espacement (Largeur fixe et Largeur variable) puis les polices de caractères. 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.IHM soit par sélection dans une zone (liée à une combo-liste) d'une barre de style toujours présente à l'écran. A ce titre. Bloc Notes — Le Bloc Notes est un accessoire de Microsoft Windows XP qui permet simplement l'édition de fichiers ASCII. Il s'active et est présenté à l'écran (lettres O et P soulignées) sur appui de la touche Alt. cette zone affiche le 1er item de la liste (Largeur variable. l'édition de documents aux styles complexes ne répond pas au cahier des charges de cet utilitaire. Les trois premières polices affichées correspondent aux plus fréquentes (présentation statique: choix défini lors de la conception). modifier la police de caractère d'affichage revient à sélectionner les sous-menus Format puis Police dans la barre de menu. Le menu de choix de la police (boite de dialogue) se présente alors comme suit: — 18 © J-Y Antoine . Quand elle n'est pas sélectionnée. 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). cf. Quel que soit l'option suivie. Les autres sont données par ordre alphabétique. Un raccourci clavier (combinaison Alt O-P) est disponible pour accéder à ce sousmenu. Dans le Bloc Notes. plus loin).

Les polices sont présentées de manière statique par ordre alphabétique. Ces sous-menus sont directement invocables par le raccourci Alt-T-O (combinaison toujours affichée à l'écran: caractères soulignés). Un aperçu est également proposé en bas de la boîte 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). 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. le curseur se positionnant — 19 © J-Y Antoine . Word —Sous l'éditeur Micrsoft Word de la suite Office XP. synthétise toutes les options paramétrables dans la boite de dialogue. Un aperçu. 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.IHM On remarquera que le type de police (True Type par exemple) est représenté par un icône. visible sous tous les signets.

ainsi que d’assurer un suivi des stocks. puis l'ensemble des polices classées par ordre alphabétique. objectif 4. L'organisation de la liste est par contre contextuelle : s'affichent en premier les 10 dernières polices styles utilisées. Par ailleurs. L'aperçu correspondant à la police utilisée est rendu directement dans le nom de celle-ci. Pour chacune de ces unités comptables. de l’imprimer et enfin de le transmettre (courrier électronique) au service de comptabilité centrale de la chaîne de magasins concernée. 2005 . Il correspond à une liste combo attachée (non repositionnable) à la zone de saisie. Le sous-menu qui s'affiche (cf. mais qu'au contraire. La fenêtre est par ailleurs repositionnable. l'ensemble des items se déplacent. Lorsqu'on parcourt la liste avec l'ascenseur ou les touches up and down. Quand elle n'est pas sélectionnée. 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. Celui-ci permet de gérer distinctement les ventes et les commandes du magasin. Deux propositions sont envisageables pour organiser les menus du programme : — 20 © J-Y Antoine . PowerPoint permet également une gestion avancée des styles de texte. et 2.1. Une fois un objet texte sélectionné. PowerPoint — Logiciel de présentation de la suite Office XP. cette zone affiche la police correspondant au texte courant (où se trouve le curseur). page suivante) est ici spécifique au choix de la police de caractères. La taille de la liste est fixée statiquement à 12 items. soit directement par sélection dans une zone (liée à une combo-liste) d'une barre d'outils présente à l'écran. le type de police (True Type par exemple) est figuré dans la liste à l'aide d'un icône. la boite de dialogue qui s'affiche ne propose pas d'aperçu.) Dans cet exercice.2.2.2. il est possible d’éditer un état (affichage à l’écran). dans le cas d'une sélection par la barre d'outils. à quelques exceptions près : dans le cas d'une sélection par la barre de menus. le nombre de polices affichées est limité à 9 items dont 6 contextuels. Exercice 18 - Organisation de menus et utilisibilité (inspiré de Nogier. la modification de la police de caractères se déroule d'une manière analogue à celle de Word.IHM automatiquement à l'ouverture sur la police de caractère courante. on considère un système de gestion d’une petite supérette.

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. donner la règle (ressemblance. analogie. couper séquence. qui représente le panneau de configuration Windows XP d’un ordinateur : 1.1) On considère la capture d’écran ci-dessous.) On désire réaliser l'interface d'un logiciel de création vidéo. quelle organisation vous paraît la plus appropriée ? 2 — Quelle est la logique qui a présidé à chacune de ces deux organisations ? Conclusion. l'ensemble des actions autorisées se retrouve dans les commandes suivantes: ouvrir un projet. sous-titrer une séquence ou encore ajouter des effets spéciaux. enregistrer séquence. effet spécial. fermer le projet. 2 — Montrez à votre voisin les icônes que vous avez défini. 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é). importer séquence. Leur identification est-elle plus facile ? Exercice 20 Signifiance des icônes (objectif 4.IHM EDITER Ventes Commandes Stocks IMPRIMER ENVOYER VENTES Editer Imprimer Envoyer COMMANDES STOCKS 1 — En considérant les critères ergonomiques de Bastien et Scapin. quitter. compresser séquence. sous_titre. transition.1. en la mettant en regard de sa règle de construction : retrouve-t-on la hiérarchie vue en cours ? — 21 © J-Y Antoine . Pour chacun de ces icônes. déplacer séquence. afficher plan de montage. enregistrer le projet.2. On doit pouvoir également gérer les transitions entre deux séquences (fondus enchaînés par exemple).2. propriétés.. L'ensemble du montage vidéo est sauvegardé dans un fichier de projet. Arrive-t-il à retrouver la signification de chacun d'eux ? Quelle est la caractéristique des icônes qui posent problème? 3 — Organisez vos icônes par groupes de signification. 2. supprimer séquence. nouveau projet. Discuter de la facilité d’identification du sens de ces icônes. copier séquence. etc. Exercice 19 Signifiance des icônes (objectif 4.) qui a présidé à sa création. Au total. symbole.

2. par un simple clic sur sa partie gauche suivi d’un déplacement. Cas d’utilisation 2 – Microsoft Word 97 Word semble être le logiciel roi en termes de flexibilité : en effet. Cas d’utilisation 1 – PowerBuilder Dans la version considérée ici. Certains relèvent de recommandations très spécifiques.) : choisir le bon type d’objet. il s’agit de principes ergonomiques très généraux qu’il vous est demandé d’identifier. il est même possible de transformer. Ces erreurs sont dues à une utilisation à mauvais escient des objets de base des interfaces WIMP (menus. L’image ci-dessous montre un exemple de boite de dialogue proposé à l’utilisateur. On donne ci-dessous l’évolution de l’interface suivant les actions successives de l’utilisateur.4) Tout au cours de cet exercice. boutons etc. 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é. Mais mis à part ce côté suranné.. mais également l’utiliser en respectant les critères ergonomiques vus en cours n’est en effet pas si évident que cela. Quel pourrait-être selon vous l’intérêt d’une telle fonctionnalité ? Qu’en pensez-vous d’un point de vue ergonomique ? Cas d’utilisation 3 – Webform Webform était un petit gratuiciel disponible initialement sous Windows 95. 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.Comment utiliser à mauvais escient les objets WIMP (menus.2 et 4.2.IHM Exercice 21 . boutons…) (objectifs 4. quel reproche pourriez-vous faire à ce widget dynamique ? — 22 © J-Y Antoine . le logiciel PowerBuilder fait appel à des menus très graphiques. mais dans d’autres cas. la barre d’outils horizontale en une superbe barre verticale. Pouvez-vous lister les problèmes ergonomiques rencontrés.

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. Considérons par exemple la définition avancée d’une police de caractères sous la suite Office. un appui sur un item Filter (non présenté ici) lançait la recherche. cas de figure où l’on rencontre effectivement souvent des onglets. un type de menus particulier (objectifs 4.1. dont le choix a été validé.) Les menus à onglets constituent certainement le type de menus dont les concepteurs de logiciel maîtrisent le moins l’utilisabilité.2. Plusieurs critères pouvaient être considérés en parallèle pour une même recherche. Les exemples que nous allons étudier dans cet exercice donnent quelques exemples de mauvaise conception.2. Microsoft fut le premier éditeur de logiciel et de système d’exploitation à recourir en masse à ce type de menus. ainsi que l’indiqué le rendu grisé de la zone de saisie). on choisissait la boîte aux lettres à considérer en cliquant sur le bouton Folder (ici. Inbox. Considérons par exemple le logiciel de messagerie Exchange. 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.2 et 2.IHM Cas d’utilisation 4 – Formulaire d’enregistrement Les formulaires n’existent pas que sous les applications WWW. Enfin. Si Amazon fut le promoteur des menus à onglet dans le monde du Web. 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). Cas d’utilisation 1 – Onglet et paramétrage d’application Les deux exemples ci-dessous correspondent à des menus de paramétrage d’application. 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. Ensuite. Cela nous permet en tous cas de découvrir des problèmes ergonomiques qui peuvent être rencontrés par le grand public. Les menus ci-dessous — 23 © J-Y Antoine . on déterminait ses critères de recherche en remplissant à loisir les champs de saisie en regard des items à considérer (From. Que pensez-vous de leur conception ergonomique ? Cas d’utilisation 2 – Microsoft Office et gestion des onglets. 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é. Sent To…). qui a précédé Outlook sous Windows. Quel(s) problème(s) ergonomique(s) pose le formulaire ci-dessous. Il semble pourtant qu’il n’ait pas encore bien intégré une réflexion ergonomique dans la conception de ces menus.

choix assez rare. Observez bien les différents menus à onglets. Surtout. Je ne peux en dire plus sans vous mettre sur la piste. il y est fait un usage vraiment bizarre d’un onglet. 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 . mais il me plait bien.IHM correspondent à trois versions successives de la suite Office. 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. Cette application Windows de compression de fichier utilisait les onglets comme menu principal.

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. fait appel à des icônes dont le moins qu’on puisse dire est qu’ils sont peu explicites. Comparez ensuite vos propositions avec celles de votre voisin.IHM Exercice 23 - Signifiance des icônes : un exemple Web (inspiré de Nogier 2005 . aux critiques qu’a fait Jean-François Nogier dans son ouvrage. Conclusion ? 2 — Sensible. en sachant que vous avez comme seule information que vous êtes sur le site d’une école d’ingénieur. cette école propose un cours d’ergonomie et IHM. le site de l’école propose désormais la nouvelle interface WWW donnée page suivante. — 25 © J-Y Antoine .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. Scan Nogier à intégrer 1— Cherchez à trouver une signification à chacun des icônes. Au vu de ce site WWW. objectif 4. Que pensez-vous des icônes utilisés ? La leçon a-telle entendue ? 3 — En troisième année. Le graphisme. assez sympathique. peut-être.2.

On présente ci-dessous la page d’accueil du site WWW officiel de la ville de Beaugency.) 1.3) 1.2.3. Critiquez cette page WWW en reliant vos remarques à des critères ergonomiques vus en cours. 5.1 et 5. La figure ci-après correspond à la page d'accueil du site de renseignements « Pages Jaunes ». 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.1.2.2. — 26 © J-Y Antoine . Que pensez-vous de la gestion de menus de ce site WWW ? Reliez vos critiques à des recommandations ergonomiques étudiés en cours. 2.2.IHM Interfaces WWW Exercice 24 IHM et Web (examen 2005 – objectif 5.

IHM 2. l'hébergement et le référencement d'annuaires WWW (de type Yahoo !). Pouvez-vous me dire quelles sont les recommandations qu'il n'a pas suivi à cette occasion. — 27 © J-Y Antoine . On cherchera là encore à relier toute remarque à des critères ergonomiques étudiés en cours. La figure page suivante correspond à la page d'accueil d'un site marchand proposant à chacun la création. Cette page d'accueil a été mise à jour cette année par un étudiant de Master 2 lors de son stage.

qui permet de réserver en ligne un billet de TGV sur certaines relations. Lorsqu'il arrive dans une gare équipée et qu'il ouvre un navigateur sur son ordinateur. ces hotspots proposent néanmoins deux services gratuits : iDTGV. 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. Cette agence en ligne.IHM 3. permet aussi bien d'acheter un billet de train que d'avion. et l'agence en ligne voyages-sncf. sur la gauche. de louer une voiture ou réserver une chambre d'hôtel. Il se retrouve sur une page d'accueil identique à celle de voyages-sncf. Ce service.com. 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 correspondante. un utilisateur lamba se trouve automatiquement redirigé vers la page d'accueil ci-dessous : Outre le service payant d'accès intégral à Internet. qui fait partie des 5 sites francophones les plus parcourus. géré par les opérateurs de téléphonie présents sur le territoire français. est payant.com : — 28 © J-Y Antoine .

. quel est l'activité de cette entreprise? A votre avis.2. 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. 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 .. si je clique sur le bouton recherche après avoir défini un vol sans avoir choisi une connexion payante.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. Selon vous. seules les informations sur les trains sont accessibles dans cette réplique de l'agence en ligne. En effet.). je me retrouve sans autre forme de procès sur la page d'accueil du hotspot vue précédemment (en fait. 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.4) On considère la page d'accueil du site de la société Accenture.

bons de réduction). y-a-t-il des raisons qui peuvent justifier le choix des concepteurs. on sous-menu se développe (cf. bonnes affaires. points Bonus. Page d’accueil – Ce site respecte-t-il les recommandations ergonomiques en matière de page d’accueil WWW. la page d’accueil est remplacée par la page de domaine suivante. image précédente) qui laisse le choix entre quatre options (autres magasins U.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. 2. Lorsqu’on sélectionne « Mes courses » dans la zone de menu de gauche. Page de domaine – Si on sélectionne l’option «Bons de réduction» dans le menu précédent. 1. La bande horizontale rouge en haut de l’interface sert également de barre de menu. Si non. Que pensez-vous de cette gestion de l’interaction ? — 30 © J-Y Antoine .

4) Comparez la gestion des zones de navigation des trois sites marchands ci-dessous.IHM Exercice 27 - Gestion de zones de navigation: onglets et combi-listes (exam 2008 – objectif 5.2. 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 . L’écran n’est pas rétro-éclairé et n’est pas tactile. choix et implémentation du dispositif d’entrée c.1.) Les critères ergonomiques vues en cours s’appliquent également aux interfaces informatiques intégrées dans des dispositifs autres que des ordinateurs. nous allons nous intéresser à une calculatrice électronique telle que celles utilisées par les lycéens. Discuter de l’utilisabilité de l’interface utilisateur ainsi réalisée en fonction des critères ergonomiques suivants : a. Dans cet exercice. Le seul dispositif d’entrée est le clavier de l’appareil (pas d’utilisation avec un stylet).2.1. objectifs 6. principes ergonomiques de base en particulier en matière d’organisation b. La figure page suivante présente cette calculatrice. choix et implémentation du dispositif de sortie — 32 © J-Y Antoine . et 2.

41 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).30 0.38 0.32 7. Faites de même pour une suppression de 10 caractères adjacents. Le temps pour effectuer un clic de la souris est de 0.10 0.30 3.32 Exercice 31 - Loi de Fitts et organisation de menus (adapté du cours de M.00 1.56 0.32 D 1 1 d 0. Conclusion? 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. 1.23 2.37 6.64 0. Enfin. d \ D 0. quel est la méthode la plus rapide pour effacer une partie de texte sous un éditeur standard.64 5. Retrouve-t-on un résultat connu? — 33 © J-Y Antoine .32 4.48 0.5 1 0.1 0. Calculer le temps moyen de sélection pour des tailles de menus non hiérarchiques de respectivement 12 et 24 items. Baudoin-Lafon) On considère quelques temps (en secondes) donnés par la Loi de Fitts pour un dispositif donné: d \ D 0.32 3. vous pouvez sélectionner l'item "supprimer" du menu édition de la barre de menus.53 0.57 0. 1.1s.00 0. 3.00 0.46 0.45 0.5 2D/d 20 4 log2(2D/2) 4. 2.10 0.31 0. 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).00 0. choix des polices de caractères utilisées e.00 0.13 0.00 0.22 1 1 2 1 10.60 0.00 0.00 0.5 cm.64 4.1 0.34 4. utilisation des couleurs Dispositifs d'entrée Exercice 29 Keystroke model A votre avis. 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.07 5. soit vous sélectionnez l'ensemble du texte indésirable à supprimer avant d'appuyer (une fois) cette touche.IHM d.44 0. En vous appuyant sur le modèle Keystroke.5 1 10 200 40 20 100 20 6.37 0. Pour ce dispositif. 2.00 0.00 1. une fois le texte sélectionné. Les résultats obtenus sont-ils intuitifs ? Quels sont les limites de ces calculs ? Evaluation expérimentale des paramètres de la loi de Fitts Exercice 30 - On considère quelques temps (en secondes) mesurés lors d'un expérimentation avec un dipositif particulier.32 2 5 5 5 10 10 10 0. pouvez-vous déterminer (grossièrement) les valeurs des constantes expérimentales C1 et C2 utilisées de la loi de Fitts. Chaque item d'un sous-menu est séparé du suivant par une distance de 0.1 0. estimez le temps nécessaire pour la suppression d'un texte de 3 caractères adjacents.30 0.50 1.50 1.

même si on découvre pour la première fois la galerie. tarifs. Par ailleurs. 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 restitution) que sur la vitesse de téléchargement des pages. le second au site d’un musée quelconque. Musée 1.Stratégie d’évaluation : des spécifications d’utilisabilité à leur caractérisation suivant plusieurs dimensions (adapté de Stone et al. 1. A chaque fois. un certain nombre de conditions qui devront être satisfaites en matières d’utilisabilité. 2. 2005) On considère dans cet exercice la conception de deux sites WWW. La structure du site doit favoriser l’accès aux informations les plus importantes (expositions en cours. B. Cette évaluation doit être réalisée dans le mois à venir. 5.. efficacité. le premier consacré à une exposition temporaire dans une galerie d’art. vous disposez d'une personne ayant une bonne expérience en matière d'évaluation des interfaces ainsi que de matériel vidéo. apprenabilité. Le site doit répondre clairement et facilement aux questions que se posent les visiteurs sur l’artiste et l’exposition (localisation. Il est essentiel que le site leur donne envie de venir le visiter. il en va de la réputation de la galerie auprès des acheteurs et des spécialistes. Pouvez-vous déterminer un ensemble de méthodes d'évaluation qui permettraient de répondre à ces besoins ? Justifiez vos réponses.) en un minimum de navigation. horaires d’ouvertures. symboles). heures d’ouvertures…) Aucune information donnée sur l’artiste ne doit être erronée. 4. le MAO (maître d’ouvrage) a défini. Ce système interactif autorise une seule modalité d'entrée : l'écran tactile. 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. pouvez-vous hiérarchiser les facteurs d’utilisabilité à tester lors de l’évaluation ? Pour chaque facteur d’utilisabilité testé. On s'interroge également sur le type d'informations supplémentaires qui pourraient intéresser les utilisateurs.IHM Evaluation Exercice 32 . 3. 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. 4. 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. des mesures doivent être prises pour éviter le blocage de la navigation lors du téléchargement des images en haute définition. 1994) Exercice 33 - L'office du tourisme de la ville de Vannes souhaite développer une borne d'information touristique qui sera située dans ces locaux. Méthodes d'évaluation : système d'information touristique (adapté de Preece. Une spécification complète du système ainsi qu'un premier prototype ont été élaborés. caractère engageant. Il doit également fournir des informations nouvelles pour les historiens d’art déjà experts de l’artiste. A. C. proposez une métrique quantitative d’évaluation. 5. Afin de définir votre stratégie d’évaluation. les concepteurs du système sont prêts à modifier la structure et les aspects graphiques de l'interface si nécessaire. 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é. Les qualités auxquelles doit répondre ce système concernant avant tout l'affichage graphique (icônes. Un des objectifs principaux du site doit être d’encourager la découverte et donc l’exploration aussi libre que possible du site. L’apparition d’une page d'erreur du fait du site même doit être absolument proscrite. Le site doit pouvoir répondre aux principales questions des visiteurs et l’accès à ces informations doit être aisé à trouver. accès etc. Exposition Temporaire 1. Toutefois. couleurs. et l'office désirerait une évaluation ergonomique du produit avant d'aller plus loin dans le développement du système. Au vu des ces spécifications. — 34 © J-Y Antoine . leur de la rédaction des spécifications du site. tolérance aux erreurs. pouvez-vous relier ces demandes aux dimensions d’utilisabilité étudiées en cours : efficience. 3. 2.

ce nouveau site doit apporter des réponses à deux soucis principaux : 1. et les techniques de recueil des données d’observation ? Phase d’évaluation – Ecrire le ou les scripts d’évaluation correspondant(s). Stratégie d’évaluation – Quelles sont la ou les populations cibles qui seront concernées ? Quels sont les critères d’utilisatibilité (norme ISO par exemple) qui seront vérifiés ? Quel protocole d’évaluation précis retenir ? Le cas échéant. Il est important qu’un utilisateur qui a une idée déjà très claire de son achat (par exemple.IHM Exercice 34 - Evaluation expérimentale : cas d’école On considère un site de commerce électronique dont une nouvelle version doit être conçue. l’efficacité signifiant avant tout qu’une recherche exploratoire sur le site se traduira par un achat ! Cette petite définition des besoins tient lieu de cahier des charges pour la conception du nouveau site. A savoir : 1. Il est important que le site guide efficacement un utilisateur qui a une idée encore floue sur l’achat à effectuer (par exemple « je voudrais acheter un réfrigérateur mais je ne sais de quel type » voire « quel cadeau je pourrais faire à mes parents pour leur anniversaire »). sur quelles métriques baser cette vérification ? Plan d’évaluation – Comment seront recrutés les utilisateurs ? Comment et où se dérouleront les sessions d’expérimentation : dans le cadre d’une évaluation expérimentale. quelles seront les tâches étudiées. Il vous est demandé de définir l’ensemble de la stratégie d’évaluation correspondante. 3. référence précise du produit) puisse le commander le plus rapidement possible sur le site. dans l’objectif d’un accroissement des ventes et du nombre de clients de ce site marchand. — 35 © J-Y Antoine . Plus précisément. 2. Analyse – Comment seront analysées et synthétisées les observations ? 2. La MAO tient toutefois à ce que ces objectifs soient validés expérimentalement (étude par tests en utilisation réelle) lors de la recette du nouveau site. 4.