Université F.

Rabelais de Tours

UFR Sciences et Technologies

IUP Blois
Master 2 SIR

Ergonomie des IHM

TRAVAUX DIRIGÉS

Enseignant Jean-Yves ANTOINE (Jean-Yves.Antoine AT univ-tours.fr)

 IHM

Principes ergonomiques

Facteurs humains et qualité ergonomique des interfaces (examen septembre 2005 – 15’)

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 ?

L’interaction ne se limite pas aux logiciels (examen septembre 2005 ; 15’ maximum)

Avant l’arrivée des portables, les combinés téléphoniques 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.

Quand Microsoft est pris en faute…

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
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 ?

—3— © J-Y Antoine

 IHM

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 redimensionner le 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.

Gestion de messages d'erreurs (examen 2006 – 3 pts)

Les deux figures ci-dessous 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.
Εξερχιχε 1 Mozilla

Εξερχιχε 2 Opera

L’interaction ne se limite pas aux logiciels (examen 2006 – 3 pts)

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 incové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).

—5— © J-Y Antoine

 IHM
Manipulation directe (adapté de A. Dix et al., 2004)
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.

Design général de l'affichage (inspiré du cours d'ergonomie des interfaces du CNAM)

On propose, pour un logiciel grand public standard (éditeur de texte par exemple), le schéma d'organisation général de
l'affichage présenté ci-dessous :

Titre

Zone des
commandes
Zone de travail (boutons)
Exit

Zone d'affichage des informations ou des messages d'alertes

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.

Evaluation d'une IHM : éphéméride électronique

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-dessous l'interface d'un logiciel
d'éphéméride composé d'une seule fenêtre :

—6— © J-Y Antoine

 IHM
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 (donc connaisseurs du domaine de la tâche) que
comme 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.

Formats d’affichage (adapté de Nogier 1995, pp. 57-58)

On considère l’interface d’une base de donnée, 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. Cinq 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 ?

Conception d'une interface interactive : aide à la saisie de données (examen sept. 2006 – 3 ts : 10')

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.

—7— © J-Y Antoine

 IHM

Menus - Formulaires
Organisation d'items dans des menus (adapté de A. Dix et al., 2004)
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évu. Discutez des différences rencontrées : vous incitent-elles à reprendre vos regroupements ?
Même exercice mais en plus complexe: on se propose de réaliser un éditeur de texte qui autorise les fonctions suivantes:
Enregistrer, enregistrer sous, nouveau, supprimer, envoyer comme mail, mise en page,
quitter, annuler, répéter, insérer tableau, index, 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, 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 ?

Sélection d'une police de caractère dans un menu: comparaisons

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:

—8— © J-Y Antoine

 IHM
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,

 soit directement 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 premier 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:

—9— © 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 peu
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).

— 10 — © J-Y Antoine
 IHM
Les polices sont présentées de manière statique par ordre alphabétique, le curseur se positionnant automatique à
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
derniers 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.

— 11 — © J-Y Antoine
 IHM
Organisation de menus et utilisibilité (inspiré de Nogier, 2005)
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 :

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.

Signifiance des icônes

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 ?
Signifiance des icônes
On considère la capture d’écran ci-dessous, qui représente le panneau de configuration Windows XP d’un ordinateur :

— 12 — © J-Y Antoine
 IHM
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 ?

Signifiance des icônes : un exemple Web à éviter (inspiré de Nogier 2005)

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 ESME

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.

— 13 — © J-Y Antoine
 IHM

Interfaces WWW
IHM et Web (examen septembre 2005 – 10’ maximum)

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é ?

Critiques d'interface Web (examen septembre 2006 – 6 pts)

1. La figure ci-dessous 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.

— 14 — © 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.

— 15 — © 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 rigoureusement identique à celle de voyages-sncf.com :

— 16 — © 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.

— 17 — © J-Y Antoine
 IHM

Dispositifs d'entrée
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 ?

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

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?

— 18 — © J-Y Antoine
 IHM

Evaluation
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.

— 19 — © J-Y Antoine