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

 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

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.

Titre

Zone des
commandes
(boutons)

Zone de travail Exit

Zone d'affichage des informations ou des messages 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) Nom b) Nom
Prénom Prénom
Fonction Fonction
Courrier Electronique Courrier Electronique

c) Nom d) Nom
Prénom Prénom (optionnel)
Fonction Fonction
Courrier Electronique Email

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.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éfinie 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.

(e) (c) (d)

(f) (h) (g)

(a) (b)

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, SIBYLLE
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 SIBYLLE
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 SIBYLLE (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 SIBYLLE 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,
SIBYLLE 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, fermer fichier, dessiner ligne droite,
dessiner cercle, insérer texte dans objet, changer police de caractères, changer
alignement texte, dupliquer, supprimer.
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 sous-
menu. 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 organiser les menus du programme :

— 20 © J-Y Antoine
 IHM
EDITER IMPRIMER ENVOYER VENTES COMMANDES STOCKS
Ventes Editer
Commandes Imprimer
Stocks Envoyer
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 problè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 problè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 ergonomique ?

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-t-
elle 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 correspondante.
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. choix des polices de caractères utilisées
e. 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 barre 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 1.00 5.00 10.00

0.10 0.31 0.45 0.56
0.50 0.13 0.30 0.38
1.00 0.07 0.22 0.32

D 1 1 1 5 5 5 10 10 10
d 0,1 0,5 1 0,1 0,5 1 0,1 0,5 1
2D/d 20 4 2 100 20 10 200 40 20
log2(2D/2) 4,32 2 1 6,64 4,32 3,32 7,64 5,32 4,32

Exercice 31 - 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 1.00 2.00 3.00 4.00 6.00

0.10 0.46 0.53 0.57 0.60 0.64
0.50 0.30 0.37 0.41 0.44 0.48
1.00 0.23 0.30 0.34 0.37 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 restitution) 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
 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, dans l’objectif d’un
accroissement des ventes et du nombre de clients de ce site marchand. Plus précisément, ce nouveau site doit apporter
des réponses à deux soucis principaux :
1. Il est important qu’un utilisateur qui a une idée déjà très claire de son achat (par exemple, référence précise du
produit) puisse le commander le plus rapidement possible sur le site,
2. 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 »), 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. 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. Il vous est demandé de définir l’ensemble de la stratégie d’évaluation correspondante. A savoir :
1. 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, sur quelles métriques baser cette vérification ?
2. 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, et les
techniques de recueil des données d’observation ?
3. Phase d’évaluation – Ecrire le ou les scripts d’évaluation correspondant(s).
4. Analyse – Comment seront analysées et synthétisées les observations ?

— 35 © J-Y Antoine