Universit F.

Rabelais de Tours

UFR Sciences et Technologies
Licence Informatique

Ergonomie des IHM

TRAVAUX DIRIGS
Enseignant Jean-Yves ANTOINE (Jean-Yves.Antoine AT univ-tours.fr)
IHM
J-Y Antoine 2

Principes ergonomiques
Exercice 1 - Facteurs humains et qualit ergonomique des interfaces (objectif 2.2.1.)
Dans cet exercice, il vous est propos des copies dcrans (ou dautres dispositifs lectroniques) qui sont senss illustrer une
erreur ergonomique ou au contraire une bonne prise en compte de principes ergonomiques gnraux qui doivent guider la
conception dinterfaces interactives. Il vous est demander chaque fois de commenter le cas dtude propos, en donnant
chaque fois le principe ergonomique mis en eu et en citant le facteur humain qui sera le plus affect. !n rappelle la liste des
facteurs humains et principes ergonomiques principaux tudis en cours.
Facteur humain Cause (principe ergonomique)
"pprenabilit observabilit, causalit#guidage, consistance # cohrence, familiarit, gnricit
$lexibilit adaptation, st%les dutilisation
&obustesse prvention (observabilit, causalit, guidage), gestion des erreurs
1 'exemple ci(dessous gauche est extrait des MacOS User Experience Guidelines, qui fournisent des exemples de bonnes
et mauvaises conceptions dans le cadre du monde )ac. *et exemple illustre la notion de badge (le petit rond rouge
avec le chiffre + , -) qui indique dans ce cas un vnement ou une action raliser la date indique sur lic.ne du
calendrier. !n retrouve ce t%pe de petit obet informatif galement sur /0%pe, ou encore $aceboo0 comme lindique
limage droite qui montre que ,1 notifications sont en attente pour lutilisateur concern. 2uel principe ergonomique
est concern ici 3 4st(il bien gr 3

2 5 *ela fait bien longtemps que e nutilise plus Internet 4xplorer pour surfer. 6outefois, si ce navigateur a perdu de sa
superbe, on oublie quil reprsente encore entre 789 et 7:9 de part de march mondial ; en dcembre 78,<, il restait
ainsi le navigateur leader en "mrique du =ord et en *hine, par exemple. &ien ne semble toutefois freiner sa chute.
4n guise dpitaphe, e vous livre une copie dun message que la version : du navigateur mavait adresse uste avant
que e ne labandonne> 2uel principe ergonomique est directement concern par ce pop(up 3

3 5 'ergonomie ne concerne pas que les ordinateurs. ?our preuve, voici une photo de vacances dans une gare du
@iller6al, en 6%rol "utrichien (mAme en vacances il pense aux cours B). *e panneau indicateur annonce les prochains
trains (des trams(trains pour Atre prcis) venir. 2ui a(t(il de diffrent par rapport aux affichages de la /=*$ mais que
lon retrouve sur certains rseaux de transports en commun 3 4st(ce un bon point 3 2uel est le principe ergonomique
qui est concern 3

4 5 Caime beaucoup le cas dtude prsent la page suivante, qui correspond au message dinformation que vous
adressait la 6esco Dan0 en mars 78,< lorsque vous demandieE changer le mode denvoi de vos relevs de carte
bancaire. 'e suet tant sensible, la banque a vraiment essa% de bien prciser les eneux de chaque action ralise sur
linterface. 4st(ce une russite 3 "lleE, e vends la mFche, cette fenAtre a t classe par un site consacr lIG)
IHM
J-Y Antoine 3
comme faisant partie des pires erreurs ergonomiques de lanne 78,<. )ais au fait, quel est le principe ergonomique
qui a t enfreint en premier lieu 3

5 5 *es copies dcran ci(
dessous correspondent
la version lectronique
du magaEine Hired
usqu la refonte en
78,< du site, telle quest
apparait sur un cran
dordinateur, une
tablette ou un
ordiphone. In mdia
dinformation spcialis
dans linformatique
respecte(t(il bien les
recommandations
ergonomiques. 2uel
principe ai(e cherch
illustrer ici 3




6 5 4ncore un petit chouchou de votre serviteur, ici le problFme adress est presque subtil. 2ue penseE(vous du pop(up
de confirmation quaffiche le service dabonnement li la liseuse =oo0 en cas de dsinscription du service. 2uel
principe ergonomique a retenu ici votre attention 3


IHM
J-Y Antoine 4

7 5 *ette capture dcran est(celle dun s%stFme automatique de distribution de tic0ets de cinma /toc0holm. =on, le
problFme nest pas que les messages de guidage sont rdigs dans une langue quelque peu gutturale. " votre avis, quel
est le principe ergonomique qui ma conduit retenir cette photographie 3

8 5 *et exemple commence a dater (788J) mais il est tir dun rapport de stage de )aster 7 la derniFre anne avant que
nous ne dcidions dintroduire un enseignement dergonomie des interfaces. 'tudiant concern devait dvelopper un
logiciel de configuration des ordinateurs pilotant les robots dune chaKne de montage de moteurs diesels. Il % avait en
fait deux t%pes de machines ; celles pilotant les robots de fabrication, qui tournaient sous HindoLs 7888, et celles qui
supervisaient la chaKne de montage, sous HindoLs =6 1.8. 'tudiant a pourtant dcid de ne raliser quun seul
logiciel de configuration, les utilisateurs choisissant la bonne configuration suivant la machine concerne. *e choix se
dfendait, mais pas la solution ergonomique choisie. 2uel est le problFme 3 2uel est, voire quels sont les principes
ergonomiques qui ne sont pas respects 3

8 5 6ravaillant frquemment sous 'ibre !ffice, e nai plus sur mon ordinateur quune version obsolFte de )icrosoft
Hord (!ffice 788< B). 'image de la page suivante nous montrer les ic.nes lanMant les fonctionnalits de dessin dans le
IHM
J-Y Antoine 5
document Hord mAme. *omme ne lindique pas linfobulle, cliquer sur le rectangle permet de
dessiner galement des carrs. 2ue peut(on faire galement en cliquant sur lic.ne reprsentant une
ellipse votre avis 3 ?our avoir tir une conclusion aussi lumineuse, vous aveE dN supposer quun
principe ergonomique particulier tait bien respect. 'equel 3
9 Les deux captures dcran ci-dessous correspondent deux tats successifs dun formulaire de rservation sur le
WWW de locations de vacances Venise. Que sest-il pass entre les deux images ? Visiblement, les auteurs du
site ont voulu trop bien faire et ont mlang nombre de recommandations ergonomiques. Avez-vous des
commentaires faire sur le guidage, lobservabilit et la gestion des erreurs sur cet exemple.

Exercice 2 - Facteurs humains et qualit ergonomique des interfaces (objectif 2.2.1.)
1. Dvelopp par une filiale d"pple est disponible sous )ac!/ et
HindoLs, $ile)a0er ?ro est un /ODD relationnel qui est n en
,PJ:, donc trFs peu de temps avant lmergence des premiers
/ODD relationnels commerciaux (!racle ; ,PQP R ID) DD7 ;
,PJ<). Il a connu en 78,< sa ,<S version et reste bien vaillant
mAme sil nest que le ,8S /ODD(& le plus diffus, avec une
part de march oscillant entre ,9 et 79.
!n se demande pourtant comment il a pu rsister des ogres
comme !racle, ID) ou )icrosoft lorsquon voit, dans une de
ses versions antrieures, la grosse faute ergonomique commise
par ses concepteurs. ?our une fois, "pple nest pas un modFle
en termes dutilisabilit. 2uel principe ergonomique est
visiblement non respect dans laffichage prsent droite 3
*omment lutilisateur va(t(il ragir face ce problFme 3




2. 2uel facteur de qualit ergonomique illustre cette fenAtre de
paramtrage du driver dune souris 3






IHM
J-Y Antoine 6
3. *onsidreE les deux exemples de fenAtres pop(up actives lors de la demande de sortie dTun logiciel (cf page suivante).
'aquelle des deux solutions proposes vous paraKt(elle la plus approprie dTun point de vue ergonomique 3 2uel est le
principe ergonomique qui nTest pas respect en priorit ici 3 " votre avis, quelle situation conduira le plus frquemment
une erreur dans le cas de lTinterface mal conMue 3

4. 'a version pour dispositifs mobiles cran tactile (iPhone et autres smartphones, iPad et autres tablettes) du site de
rservation ferroviaire voyages-sncf.com propose deux modes dinteraction pour rechercher un traet en train.

/ur la gauche, un formulaire trFs classique permet de prciser la ville de dpart puis celle darrive. "lors que sur la gauche,
une carte de $rance saffiche, sur laquelle lutilisateur peut (mo%ennant ventuellement des oprations de Eoom) faire un
appui directement sur les lieux gographiques correspondant. DiscuteE des avantages et inconvnients pour un utilisateur de
chacun des modes dinteraction (en tenant compte du dispositif choisi). " quel principe ergonomique gnral rpond
lutilisation de ces deux modes dinteraction redondants 3
Exercice 3 - Les principes ergonomiques gnraux s'appliquent aussi au WWW (objectif 2.2.1.)
1. 'Timage ci(dessous montre la partie principale de la page dTaccueil dTun site HHH ddie lTtude de la biologie des
champignons. 2uel principe ergonomique, mal gr la base, les concepteurs du site ont(ils voulu respecter 3
IHM
J-Y Antoine 7

2. !bserveE les deux formulaires de saisie ci(dessous, inspirs dTun site HHH rel. 'aquelle de ces deux versions vous
semble(t(elle la plus ergonomique 3 " quel(s) principe(s) ergonomique(s) rpondent ces amliorations 3

3. 'a capture dTcran (page suivante) est issue dTun usage rel du site de rservation de la /=*$. 'e U anvier 788J au soir,
Tai cherch rserver un traet Vannes (W '%on pour le J avril 788J (demande rsume gauche de lTcran). Voici le
rsultat de ma recherche. 2uTobserveE(vous 3 ?ouveE(vous deviner ce qui explique cet affichage 3 2uel
recommandation ergonomique a, selon vous, t o%eusement foule du pied par la /=*$ 3


Exercice 4 - Linteraction ne se limite pas aux logiciels (objectif 2.2.2)
A) "vant larrive des portables, les tlphones classiques ( touche ou cadran) ne comportaient pas dcran.
,. &flchisseE lutilisation dun tel combin. DonneE au moins un critFre ergonomique qui ntait pas respect par ce
t%pe de combin, et que lutilisation dun cran a pu corriger.
7. ?roposeE une solution pour remdier ce problFme sans utilisation dun cran.

IHM
J-Y Antoine 8
B) 'a plupart des ergonomes travaillant pour les firmes automobiles prdisent que le volant de direction aura disparu de nos
tableaux de bord dTici une vingtaine dTanne. Il sera remplac par un o%stic0 quivalent aux commandes des avions. Dans
une voiture, les mouvements vers la droite et la gauche du o%stic0 gFreront la direction, tandis que les mouvements en avant
et en arriFre piloteront les acclrations et freinages. *e t%pe de dispositif quipe d les voitures adaptes certains
handicaps. &enault a d prsent des vhicules dTexhibition sans volant.
,. DiscuteE des avantages et inconvnients de ce nouveau dispositif de commande.
7. 4xpliqueE ce qui pourrait empAcher cette prdiction de se raliser (hors contraintes conomiques, bien sNr).
Exercice 5 - Gestion de messages d'erreurs (objectif 2.2.3. & 3.2.1)
'es deux figures ci(aprFs montrent lTaffichage dTun message dTerreur sous deux navigateurs ()oEilla et !pera) lorsquTun site
HHH nTest pas atteignable (le plus souvent pour cause de connexion internet dfaillante). *ritiqueE les solutions proposes
par ces deux navigateurs en reliant vos remarques des critFres ergonomiques vus en cours.
Exemple 1 Mozilla Firefox 3.0 (2008)


Exemple 2 Mozilla Firefox 26.0 (2013)



Exemple 3 Opera (2012)




L





IHM
J-Y Antoine 9



Exemple 4 Google Chrome 31.0 (2014) - /ous *hrome linformation donne lutilisateur se fait en deux temps. 6out dabord,
un message trFs sommaire apparait dans linterface du navigateur (cf. page suivante). Il faut cliquer sur un contr.le + ?lus - pour avoir une
information plus dtaille.






*onsidreE maintenant le message dTerreur ci(dessous, issu dTune application )ac ... pas si ancienne que cela. ?ourrieE(vous
dire quels sont les points forts et les points faibles de cette gestion des erreurs 3
Exercice 6 - Prvention des erreurs : la fin des boutons de validation (objectif 2.2.3.)
=ous avons vu en cours que les boutons de validation constituaient un mo%en privilgi pour la prvention des erreurs.
6outefois, le temps perdu abandonner le clavier pour aller cliquer sur ce bouton fait que de nombreux services de
messagerie instantane ont abandonn lusage de ce dispositif de prcaution. De mAme, la saisie au doigt sur cran tactile de
IHM
J-Y Antoine 10
taille limite fait que les applications mobiles tentent galement dviter le recours ces boutons de scurit. ?arfois, ces
choix peuvent Atre ustifis, dans dautres cas, cette solution de facilit est nettement plus contestable. Dans cet exercice,
nous allons tudier quelques cas relevs sur le blog Isabilis (http;##LLL.ergonomie(interface.com). " chaque fois, il vous
sera demand de discuter des avantage et inconvnients de la solution choisie.
Facebook X $aceboo0 ne propose aucun bouton Yenvo%erZ dans ses panneaux de communication instantane et ses Eones
de commentaire. Il force ainsi lusage unique du clavier (touche Entre) pour envo%er un message ou un commentaire.
"ucun lment nindique dailleurs quil sagit du mo%en denvo%er le texte saisi.
Google Chrome X *ette disparition du bouton de validation peut galement concerner les navigateurs eux(mAme. Dans
Ooogle *hrome, le champ dinterrogation du moteur de recherche et dadressage (l o[ vous rentreE les I&' sont unifis
en un seul champ de saisie. 4n labsence dun bouton de validation, lutilisateur peut ainsi lancer deux actions a priori
diffrentes lorsquil valide ce champ par une Entre clavier.

"fin de guider lutilisateur entre les deux options en labsence de bouton explicite (+ rechercher Heb -, + aller - par
exemple), Google hrome propose alors une aide la saisie; en plus de lauto(compltion du champ en cours de saisie,
une icne permet dillustrer laction qui va Atre excute selon la s%ntaxe du texte saisi ; une loupe pour une recherche, une
page pour un accFs direct par I&'. *et ic.ne est en outre accompagn dun texte de guidage droite dans le cas dune
recherche. 'e navigateur peut en outre laisser le choix entre diffrents t%pes de recherche, comme le montre limage ci(
dessus droite. Il est possible de descendre dans cette liste de choix avec la touche du clavier.
ntr!e d"un code de d!#errouillage X 2ue lon soit sur le Heb ou sur le monde du mobile, lentre dun code de
dverrouillage ou daccFs fait de moins en moins lobet dune validation par bouton. ?our dverrouiller un i?ad, lutilisateur
doit entrer un code daccFs dont le nombre de chiffres est dfini a priori ; quatre (figure ci(dessous gauche). DFs que lon a
saisi ces 1 chiffres, le lancement de la procdure dauthentification est automatique. /ur le site !oursorama.com, un abonn
doit tout dabord entrer son identifiant, puis un code daccFs. "u bout de < erreurs de code, laccFs au compte ncessite un
dverrouillage qui ne sera possible quaprFs demande et vrification manuelle par la banque. Ici la philosophie est
diffrente (figure ci(dessous droite). 6out dabord, lentre de lidentifiant se fait sans bouton de validation ; lutilisateur
doit utiliser la touche Entre, une fois son identifiant (de taille variable suivant les utilisateurs) saisi. "pparait alors un clavier
virtuel qui permet de rentrer le code daccFs. 'e lancement de la procdure dauthentification nest effectif quune fois
slection le bouton de validation en bas du clavier.

$aram!trage d"une a%%lication X 'e paramtrage de li?ad prend des formes diffrentes suivant le t%pe daction que
gnFre un changement doption. /ur la figure ci(dessous ( gauche), la slection de loption ILifi permet de connecter liPad
sur le rseau en question. 'a tentative de connexion est immdiate une fois loption slectionne ; le basculement sur un
fond bleu trFs visible de loption indique la recherche de connexion. /i celle(ci est possible, lic.ne dtat correspondant
changera finalement, aprFs retour sur fond blanc.
IHM
J-Y Antoine 11


" loppos, loption ode d"#cc$s nest pas activable implicitement par slection de loption comme prcdemment. "pple
nutilise pas de bouton de validation ici, mais demande lutilisateur de dplacer un interrupteur, ce qui lancera
effectivement loption requise.
&au#ergarde sur un !diteur de te'te ( /auvegarder le contenu modifi dun document est une action engageante. Microsoft
Office, comme la suite %i&re Office, utilisent ainsi un bouton(ic.ne ou une option explicite de leur barre doutil pour lancer
cette action. " loppos, les outils bureautiques collaboratifs comme Google 'ocs se passent de cette validation explicite.

'utilisateur peut aller voir dans le menu (ile de linterface (figure ci(dessus gauche), il ne trouvera pas doption de
sauvegarde. *elle(ci est en effet ralise automatiquement intervalles rguliers. *e que montre un feedbac0 daction sur la
droite de la barre doutil ; soit le s%stFme nous informe quil est en train de sauvegarder les derniFres modifications, soit il
nous informe quune telle action nest pas ncessaire. In survol sur cette Eone nous informe que lditeur ralise
automatiquement ces sauvegardes. In historique des rvisions permet de revenir un tat antrieur du document.
'utilisateur na pas le choix de contr.ler lui(mAme la sauvegarde, seul lenregistrement automatique tant disponible.
Exercice 7 - Gestion des erreurs : rdaction des messages et codes couleur (objectifs 2.2.3)
*et exercice est un florilFge de mauvaise gestion derreurs que e dois au )nterface *all of (ame que vous pouveE consulter
lI&' suivante ; http;##homepage.mac.com#bradster#iarchitect#shame.htm. *e site truculent nest plus mis our depuis
7888, mais la plupart des erreurs qui ont t recueillies sont touours dactualit. &econnaissons tout de mAme quil faut
dsormais (un peu) plus de temps pour dnicher certaines perles, ce qui prouve que la prise en compte de contraintes
ergonomiques est de plus en plus intgre par les diteurs de logiciels actuels.
Cas d"utilisation ) X #ouloir tro% bien *aire + &G,-.
*et exemple est tir dune boKte de dialogue dun /ODD sous HindoLs dont lobectif
est de prvenir au mieux les erreurs. "u final, cro%eE(vous que ce but est bien atteint 3
?ourquoi 3

Cas dutilisation 2 les quiproquos dEasy CD Creator
Easy ' reator est un des logiciels daide au gravage qui fut asseE rpandu. *e qui ne le dispense pas dvaluation
ergonomique> DiscuteE des deux messages ci(dessous, obtenus dans deux situations diffrentes en fin dopration.


IHM
J-Y Antoine 12
Cas dutilisation 3 AK-mail, logiciel tout risque ?
*est cette boite de dialogue provenant dun obscur logiciel de messagerie qui obtient ma palme dor personnelle du message
derreur le plus incongru. Visiblement le concepteur du logiciel avait (trop) bien retenu la leMon de ses cours dergonomie.
2uelle recommandation ergonomique essaie(t(il de respecter ici 3 2uel est le facteur dutilisabilit qui risque dAtre affect
par son choix de conception 3 "u passage, ne saurieE(vous pas imaginer la raison (historique) qui a conduit ce choix 3

Exercice 8 - !anipulation directe (adapt de A. Dix et al., 2004 objectif 1.1.1.)
4n ,PJ7, Den /hneiderman a dfini diffrents critFres pour dfinir le concept de manipulation directe qui venait uste de
rencontrer un succFs (dTestime seulement cette date) avec la sortie de lT"pple 'isa et du \erox /tar. Dans cet exercice, on
considFre un diteur graphique de texte de t%pe Microsoft +ord ou %i&re Office +riter.
) 5 4n tudiant les critFres dfinis par /hneiderman, dire en quoi ce t%pe de logiciel rpond au concept de manipulation
directe, et par quels aspects il sTen loigne.
IHM
J-Y Antoine 13
"rganisation de linterface
Exercice 9 - "rganisation gnrale de l'interface
) 5 Dans ses User Experience )nterface Guidelines, )icrosoft recommande douvrir
les fenAtres dinformation sur la progression dune action en bas droite de
linterface. /ur quelles donnes se base cette recommandation 3







2 5 =ormalement, on recommande de placer la barre doutil ou
de menu dune application en haut de linterface (Eone trFs
visible et peu accessible) et rserver le bas de linterface (Eon
peu accessible et peu visible) comme barre dtat. *e nest
pas ce choix qua fait )icrosoft pour son application de
visionnage Photo ,ie-er, puisque lon retrouve des contr.les
importants en bas dimage. ?ouveE(vous trouver une
ustification ce choix 3





3 !n propose, pour un logiciel grand public (diteur de texte par exemple), le schma gnral de lTaffichage ci(aprFs.








) 5 4noncer les points qui vous paraissent satisfaisants dans cette interface. CustifieE votre rponse.
2 5 4noncer les points qui au contraire ne vous pas paraissent satisfaisants. CustifieE votre rponse.
3 5 ?roposeE une autre organisation gnrale de lTaffichage pour rpondre ces problFmes.
Exercice 10 - Principes ergonomiques gnraux (objectif 3.2.1)
1 !n considFre linterface dun formulaire de saisie de donnes (sur un site HHH ou un /ODD, par exemple), dans
lesquels lutilisateur doit saisir des informations concernant des personnes. 2uatre solutions sont proposes pour le design
de cette Eone de saisie. *ritiqueE chacune de ces propositions ; quels sont leurs points forts et leurs faiblesses 3




Zone de travail
Titre
Zone des
commandes
(boutons)
Exit
Zone d'affichage des informations ou des messages d'alertes
IHM
J-Y Antoine 14
a) b)


c) d)


Exercice 11 - Lergonomie en dehors de l'informatique : placement des contr#les (objectif : 3.2.1)
,. !bserveE les dessins ci(dessous, qui reprsentent diffrentes configurations possibles pour une plaque 1 feux. ?ouveE(
vous classer ces configurations dTun point de vue ergonomique 3
2. 2ue penseE(vous de linterface de commande de ce lecteur DVD (voir figure page suivante) 3 *eci vous fait(il penser
une recommandation dorganisation dinterface tudie en cours 3

Exercice 12 - Evaluation d'une IHM : phmride lectronique (objectifs 2.2 ; 3.2)
4n astronomie, un phmride est une table qui indique la position de tous les astres chaque moment (our, date, heure)
donn et ce pour une position donne. "vec lToutil informatique, ces tables austFres sont dsormais la porte du grand
public. De nombreux logiciels ouant le r.le dTphmrides sont dsormais commercialiss et permettent une visualisation
directe du ciel une date et une position donne. !n propose ci(aprFs lTinterface dTun logiciel dTphmride compos dTune
seule fenAtre.
Principes de fonctionnement
'e s%stFme affiche lTcran une vue partielle du ciel suivant les informations fournies par lTutilisateur. ?our cela, celui(ci doit
dfinir ;
( les conditions dTo&servation ; il doit donner la date dTobservation (au format #mm#aaaa), lTheure O)6 (et non pas
locale, au format hh;mm), ainsi que la position (latitude et longitude) du lieu dTobservation.
( les paramFtres de vise (on nTaffiche quTune partie du ciel lTcran) ; lTorientation se dfinit, comme sur les tlescopes
monture quatoriale, en terme dTascension droite (h, mn, sec) et de dclinaison (degrs). !n doit galement dfinir
un facteur de grossissement (Eoom) dont dpend la largeur du champ de vision. *e facteur est un entier.
Nom
Prnom
Fonction
Courrier lectronique
Nom
Prnom
Fonction
Courrier lectronique
Nom
Prnom
Fonction
Courrier lectronique
Nom
Prnom (optionnel)
Fonction
Email
IHM
J-Y Antoine 15

Ine fois que ces paramFtres sont dfinis, un clic sur le bouton ]afficher] permet de voir le ciel virtuel correspondant aux
conditions dTobservation demandes. 'orsquTune information saisie nTest pas valide, aucune information ne sTaffiche
immdiatement. *Test au moment du lancement de lTaffichage que le message ]?aramFtres de visualisation errons veuilleE
corriger] apparaKt dans la Eone prvue pour lTaffichage du ciel. 'es donnes rentres saisies restent apparentes dans la Eone
de saisie.
In clic sur un obet affich dans le ciel permet dTavoir diffrentes informations sur ce dernier ;
( nom de lTobet cleste,
( position en ascension droite et dclinaison
( magnitude (intensit de lTclat perMu)
( distance la 6erre. *ette distance peut Atre exprime en Init "stronomique (I") ou en "nnes 'umiFres (I')
suivant un choix dtermin par lTutilisateur (boutons radio)
*e logiciel doit Atre utilisable aussi bien par des astronomes amateurs (connaisseurs du domaine) que par des novices.
, 5 $aites lvaluation critique de cette interface, en vous appu%ant sur les principes de =orman, =ielsen, Dastien et
/capin.
7 5 ?roposeE une autre interface pour rpondre aux problFmes rencontrs.
Exercice 13 - $onception : aide % la saisie de donnes (objectifs 2.2.2 et 4.2.2)
?our une application interactive quelconque, les utilisateurs doivent remplir dans un formulaire une information concernant
leur pa%s dTorigine. /achant quTil existe plus de 788 pa%s reconnus par lT!=I, prsenteE deux stratgies dTorganisation de
votre interface pour faciliter cette saisie, et discuteE(en les avantages et les inconvnients a priori en regard des t^ches
ralisables et des connaissances des utilisateurs.

IHM
J-Y Antoine 16
&nterfaces W&!P
'uestions de cours

Exercice 14 - Signifiance des icnes (objectif 4.2.1)
). Dessiner un ic.ne pour reprsenter chacune des options du panneau de configuration suivantes
( ?aramFtres daffichage ( "out#suppresion de matriel
( "out#suppression de programmes ( "limentation et conomie dnergie
( *onnections rseau ( *omptes utilisateurs
( Date et heure ( Imprimantes
( !ptions daccessibilit ( ?are(feu # options de scurit
( ?aramFtres son ( ?aramFtres souris
( ?aramFtres s%stFmes ( ?olices de caractFres
" chaque fois, on prcisera dira quel principe tudier en cours (ressemblance, s%mbolique, analogie>) a t retenu pour
raliser ce graphisme.
2. 4changeE vos dessins avec votre voisin. /a facilit reconnaKtre les icones est(elle cohrente avec la hirarchie des
principes graphiques tudie en cours 3
3. *ompareE vos choix avec ceux de HindoLs \?.


Exercice 15 - Organisation de menus et utilisibilit (inspir de Nogier, 2005 ; objectif 4.2.2. et 2.2.1.)
Dans cet exercice, on considFre un s%stFme de gestion dune petite suprette. *elui(ci permet de grer distinctement les
ventes et les commandes du magasin, ainsi que dassurer un suivi des stoc0s. ?our chacune de ces units comptables, il est
possible dditer un tat (affichage lcran), de limprimer et enfin de le transmettre (courrier lectronique) au service de
comptabilit centrale de la chaKne de magasins concerne.
Deux propositions sont envisageables pour organiser les menus du programme ;
EDITER IMPRIMER ENVOYER VENTES COMMANDES STOCKS
Ventes Editer
Commandes Imprimer
Stocks Envoyer
) 5 4n considrant les critFres ergonomiques de Dastien et /capin, quelle organisation vous paraKt la plus approprie 3
2 5 2uelle est la logique qui a prsid chacune de ces deux organisations 3 *onclusion.

IHM
J-Y Antoine 17
(xercices
Exercice 16 - Menus et respect des principes ergonomiques de base (objectifs 2.2.1, 4.2.2 et 4.2.4)
Dans ce problFme, nous allons vous prsenter diffrentes copies dcran rvlant un problFme de conception ergonomique
donn. " chaque fois, il vous est demand dexpliquer quel est le problFme que risque de rencontrer lutilisateur, et de le
relier le problFme de conception sous(acent un critFre ou principe ergonomique tudi en cours.
). $ilote d"im%ression sur di**!rents G/0 X !n considFre cette fois les boites de dialogue qui apparaissent lors de
limpression sous diffrents s%stFmes dexploitation interface graphique. *ompareE les points forts et les points faibles
de ces diffrentes solutions.
a. Microsoft Windows XP











b. Apple Mac OS X










c. Linux (distribution Fedora 8)










IHM
J-Y Antoine 18
Exercice 17 - Slection d'une police de caractre dans un menu (objectif 4.2.2. et 2.2.1.)
Dans cet exercice, nous allons tudier diffrents diteurs de texte, diteurs G6)' ou de messagerie pour valuer la qualit
de leur interface en matiFre de choix de police de caractFre. =ous avons considr les logiciels suivants;
1ma2a 5 *e gratuiciel permet lTdition H_/IH_O de fichiers G6)'. Dans la
(vieille) version d"ma%a figure ici, modifier la police de caractFre dTune partie
de texte revient slectionner des boutons radios dans une fenAtre pop(up ;








3o4illa 5hunderbird 5 Il sTagit dTun logiciel de messagerie propos dans la suite
)oEilla. /ous 6hunderbird, le choix de la police de caractFres se fait via lTaffichage
dTune combo(liste non repositionnable qui utilise tout lTespace vertical disponible.
4n haut de la liste sTaffichent deux options dTespacement puis les polices de
caractFres. 'es trois premiFres polices affiches correspondent aux plus frquentes
(prsentation statique; choix dfini lors de la conception). 'es autres sont donnes
par ordre alphabtique.











,loc 6otes 5 'e Dloc =otes est un accessoire de )icrosoft HindoLs qui
permet simplement lTdition de fichiers "/*II. " ce titre, lTdition de
documents aux st%les complexes ne rpond pas au cahier des charges de cet
utilitaire. 'es actions sur les polices de caractFres ne concernent ainsi pas le
document dit ; il ne sTagit que dTune option dTaffichage (paramtrage) du
logiciel qui sera conserve la fermeture et sera rutilise pour lTaffichage de
tout document ultrieur. Dans le Dloc =otes, modifier la police de caractFre
dTaffichage se fait suivant un menu de slection spcifique (boite de dialogue)
se prsente comme suit ;

IHM
J-Y Antoine 19

Word /ous lTditeur )icrsoft Hord (!ffice HindoLs J), la dfinition de la police de caractFres se fait soit par un menu
contextuel rduit qui souvre prFs de la Eone de texte modifier ( gauche), soit depuis une boite de dialogue plus complFte
attache au ruban ( droite). 'e menu contextuel offre un rendu de la police, une information sur les polices !pen 6%pe. ?ar
ailleurs, il prsente en premier lieu des polices de thFme, puis les polices utilises rcemment et enfin une liste statique
ordonne alphabtiquement de polices. *ette liste prend presque toute la hauteur largeur de lcran.

'e sous(menu sTaffiche sous la forme dTune boite de dialogue comporte lui plusieurs signets o[ ont peut slectionner (entre
autres) sa police dans une combo(liste. 'es polices sont affiches de maniFre statique, dans lordre alphabtique. In aperMu,
visible sous tous les signets, s%nthtise toutes les options paramtrables dans la boite de dialogue. In message en bas de la
fenAtre prcise quel t%pe de police (!pen 6rue 6%pe ou, par exemple ici, ?olice de thFme) est utilis et quelles sont les
proprits de ce t%pe (impression et affichage identique ou non).
Exercice 18 - Organisation d'items dans des menus : tri par carte(objectif 4.2.2)
!n se propose de raliser un logiciel de traitement de texte dimages qui autorise les fonctions suivantes ;
Enregistrer, enregistrer sous, nouveau document, supprimer slection, envoyer comme mail,
quitter, annuler, rpter, insrer tableau, prfrences, style de caractres, formats de
paragraphe, casse normale, casse italique, casse gras, casse soulign, ouvrir fichier,
fermer ficher, ouvrir comme copie, augmenter taille de casse, rduire taille de casse,
changer fonte, insrer note de bas de page, couper, copier, coller, insrer saut de page,
repaginer, insrer image, imprimer, aperu avant impression, mise en page, affichage
page, rechercher mot, remplacer mot, page suivante, page prcdente, vrification
orthographe, crer table des matires, compter nombre de mots, aide.
) 5 !n demande de grouper ces fonctions sous diffrents sous(menus dont vous dfinireE le nombre et les titres.
DfinisseE ensuite lTorganisation de vos fonctions dans chaque sous(menu (vous pouveE galement dfinir des sous(
menus sous ces sous(menus).
2 5 2uel(s) principe(s) aveE(vous retenu pour lTorganisation des items dans les menus 3 *e principe est(il identique dans
chaque menu 3 *onclusion 3
3 5 *ombien aveE(vous dfini dTitems dans votre barre de menu 3 2uel le nombre mo%en dTitems dans chacun de vos
sous(menus 3 "veE(vous dfini une arborescence de profondeur suprieure deux 3 /i oui, quelle est la profondeur de
votre menu 3 *es valeurs sont(elles compatibles avec les recommandations vues en cours 3
4 5 DonneE votre voisin le titre des items que vous aveE retenus pour votre barre principale de menu et demandeE(lui de
rpartir les diffrentes fonctions dans chaque sous(menu ainsi dfini. *ompareE sa catgorisation celle que vous avieE
prvu. DiscuteE des diffrences rencontres ; vous incitent(elles reprendre vos regroupements 3
IHM
J-Y Antoine 20
Mme exercice : on se propose de raliser un traitement dimages qui autorise les fonctions suivantes:
Aide, Aide contextuelle, Ajout Texte, Ajuster limage la fentre, Annuler,
Antiparasites, Aucune Slection, Augmenter le contraste, Balance des couleurs,
Conseil du jour, Copier, Coller, Coller comme nouvelle image, Colorier
slection, Couper, Crer image par capture dcran, Crer image partir dun
scanner, Dplacement, Dsaturer, Dtection de contours, Dupliquer Image, Effacer
contenu image, Effet soleil levant, Effet toile impressionniste, Effet mosaque,
Enregistrer, Enregistrer sous, Fermer image, Flou gaussien, Flou cintique,
Gomme, Historique dAnnulation, Imprimer, Inverser slection, Inverser couleurs,
Luminosit Contraste, Miroir horizontal, Miroir vertical, Mise en page, Mode
RVB, Mode niveaux de gris, Nouvelle image, Ouvrir fichier image, Pinceau, Plein
Ecran, Prfrences, Quitter, Rtablir, Retourner, Renforcer la nettet, Rotation
droite, Rotation gauche, Slectionner Tout, Slection par couleur, Slection
rectangulaire, Slection main leve, Supprimer les yeux rouges, Taille de
limpression, Taille de limage, Zoom avant, Zoom arrire
Exercice 19 - Signifiance des icnes (objectif 4.2.1.)
!n dsire raliser lTinterface dTun logiciel de cration vido. *e s%stFme doit pouvoir rcuprer des squences vidos
existantes (importation) ou filmes en direct (enregistrer) puis en assurer le montage bouts bouts. !n doit pouvoir
galement grer les transitions entre deux squences (fondus enchaKns par exemple), sous(titrer une squence ou encore
aouter des effets spciaux. 'Tensemble du montage vido est sauvegard dans un fichier de proet. "u total, lTensemble des
actions autorises se retrouve dans les commandes suivantes;
ouvrir un projet, nouveau projet, enregistrer le projet, fermer le projet,
enregistrer squence, importer squence, compresser squence, afficher plan de
montage, copier squence, couper squence, supprimer squence, dplacer
squence, transition, sous_titre, effet spcial, proprits, quitter.
) 5 Dfinir un ic.ne pour chacune de ces fonctions en prenant garde les disposer nTimporte o[ sur votre feuille (ne pas
les disposer la suite dans le mAme ordre que lTnonc).
2 5 )ontreE votre voisin les ic.nes que vous aveE dfini. "rrive(t(il retrouver la signification de chacun dTeux 3 2uelle
est la caractristique des ic.nes qui posent problFme3
3 5 !rganiseE vos ic.nes par groupes de signification. 'eur identification est(elle plus facile 3
Exercice 20 - Comment utiliser mauvais escient les objets WIMP (menus, boutons) (objectifs
4.2.2 et 4.2.4)
6out au cours de cet exercice, nous allons tudier des logiciels interactifs HI)? trFs connus dans leur domaine
dapplication et prsentant nanmoins des dfauts dutilisabilit. *es erreurs sont dues une utilisation mauvais escient des
obets de base des interfaces HI)? (menus, boutons etc..) ; choisir le bon t%pe dobet, mais galement lutiliser en
respectant les critFres ergonomiques vus en cours nest en effet pas si vident que cela.
Cas d"utilisation ) X $o7er,uilder
Dans la version considre ici, le logiciel Po-er!uilder fait appel des menus trFs graphiques. !n donne ci(dessous
lvolution de linterface suivant les actions successives de lutilisateur. ?ouveE(vous lister les problFmes ergonomiques
rencontrs. *ertains relFvent de recommandations trFs spcifiques, mais dans dautres cas, il sagit de principes
ergonomiques trFs gnraux quil vous est demand didentifier.


Cas dutilisation 2 Webform
IHM
J-Y Antoine 21
+e&form tait un petit gratuiciel disponible initialement sous HindoLs P:. 'image ci(dessous montre un exemple de boite de
dialogue propos lutilisateur. 'e rendu de cette boite donne un aperMu de lvolution de la charte de couleurs adopte par
HindoLs depuis sa version P: usquau nouveau HindoLs /even. )ais mis part ce c.t surann, quel reproche pourrieE(
vous faire ce Lidget d%namique 3

Cas dutilisation 3 Page de tlchargement dun logiciel
'a page affiche ci(dessous permet de rcuprer un pac0 de comptabilit ascendante pour la derniFre version de )icrosoft
!ffice. 2uel(s) problFme(s) ergonomique(s) pose cette page HHH et poserait galement problFme dans le cas dune
interface HI)? classique 3

Exercice 21 - 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 matrisent le moins
lutilisabilit. Les exemples que nous allons tudier dans cet exercice donnent quelques exemples de mauvaise
conception.
Cas dutilisation 1 Onglet et paramtrage dapplication
Les deux exemples ci-dessous correspondent des menus de paramtrage dapplication, cas de figure o lon rencontre
effectivement souvent des onglets. Ils ont t dvelopps par deux acteurs majeurs de linformatique au tournant des
annes 2000 : Microsoft gauche (suite Office 97) et IBM droite (Lotus ScreenCam). Que pensez-vous de leur
conception ergonomique ?

IHM
J-Y Antoine 22
Cas dutilisation 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
systme dexploitation recourir en masse ce type de menus. Il semble pourtant quil nait pas encore bien intgr une
rflexion ergonomique dans la conception de ces menus. Il faut dire que Microsoft nutilise jamais ces menus pour des
fonctionnalits de base : peut-tre ces menus nont-ils donc pas fait lobjet dune valuation ergonomique pousse. Cela
nous permet en tous cas de dcouvrir des problmes ergonomiques qui peuvent tre rencontrs par le grand public.
Considrons par exemple la dfinition avance dune police de caractres sous la suite Office. Les menus ci-dessous
correspondent trois versions successives de la suite Office. Observez bien les diffrents menus onglets. Un problme
ergonomique majeur na t corrig que dans la version Office 2003. Pouvez-vous le dtecter ?
Office 6
Office 95
Office 2003
Office Windows 8
IHM
J-Y Antoine 23
Cas dutilisation 3 Oups ou longlet 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 dun onglet. Je ne peux
en dire plus sans vous mettre sur la piste, sauriez-vous deviner quel problme pour le moins perturbant rencontrait
lutilisateur et lassocier un principe ergonomique gnral ?

IHM
J-Y Antoine 24

&nterfaces WWW
Exercice 22 - Quelques pages d'accueil problmatiques (objectif 5.2.4 mais aussi 2.2.1, 5.2.1 et 5.2.3.)
Cas d"usage ). 'a figure ci(aprFs correspond la page dTaccueil du site de renseignements + Pages .aunes -. *ritiqueE cette
page HHH en reliant vos remarques des critFres ergonomiques vus en cours.

" titre de comparaison, le site des pages aunes a t renouvel comme suit en 788P ;



IHM
J-Y Antoine 25
?our voluer trFs peu en 78,1, vers linterface (partielle) suivante ;



Cas d"usage 2. 'a figure page suivante correspond la page dTaccueil dTun site marchand proposant chacun la cration,
lThbergement et le rfrencement dTannuaires HHH. *ette page dTaccueil a t mise our cette anne par un tudiant de
)aster 7 lors de son stage. ?ouveE(vous me dire quelles sont les recommandations quTil nTa pas suivi cette occasion. !n
cherchera l encore relier toute remarque des critFres ergonomiques tudis en c

IHM
J-Y Antoine 26
Cas d"usage 3. 1ccenture ( !n considFre la page dTaccueil du site de la socit #ccenture. /elon vous, quel est lTactivit de
cette entreprise3 " votre avis, quelles sont les Eones qui sont cliquables sur cette page dTaccueil 3 2uel critFre ergonomique
gnral nTest pas respect de ce point de vue 3 "urieE(vous dTautres critiques faire 3

4t voici la version franMaise du mAme site, en 78,1 ;



IHM
J-Y Antoine 27
Cas d"usage 4. Cit2 Grou% ( !n considFre maintenant le site itiGroup, dans sa version 788J. 2uelle question va se poser
le primo(utilisateur son arrive sur la page 3 2uel est le problFme de conception rencontr 3 2uel critFre ergonomique
gnral en est affect 3















'a version 78,8 de ce site a(t(elle amlior la situation 3

IHM
J-Y Antoine 28

?our son 788S anniversaire, *I6I Oroup a renouvel laspect de son site en 78,7 (principe conserv en 78,1)

'es carrs affichs sous le 6oLer Dridge permettent, lors de leur survol, laccFs de nouveaux sous(menus (cf image ci(
dessous). Il en est de mAme pour le petit ic.ne ` sur la droite, mais cette fois il vous faudra cliquer.

'es autres Eones de menu (en haut et bas de page) sont galement accessibles par un clic. 'ors du survol, leur forme
change pour guider lutilisateur ; bleu fonc pour le menu suprieur, liens souligns pour le menu infrieur.


2ue penseE(vous de cette nouvelle organisation de la page daccueil 3
2. &u%er / ( 'image ci(dessous prsente lancien site (788J) de la chaKne de supermarch I. 'orsquon slectionne + )es
IHM
J-Y Antoine 29
courses - dans la Eone de menu de gauche, on sous(menu se dveloppe (cf. image prcdente) qui laisse le choix entre
quatre options (autres magasins I, bonnes affaires, points Donus, bons de rduction). 'a bande horiEontale rouge en
haut de linterface sert galement de barre de menu.

). $age d"accueil X *e site respecte(t(il les recommandations ergonomiques en matiFre de page daccueil HHH. /i
non, %(a(t(il des raisons qui peuvent ustifier le choix des concepteurs.
2. $age de domaine X /i on slectionne loption +Dons de rduction- dans le menu prcdent, la page daccueil est
remplace par la page de domaine suivante. 2ue penseE(vous de cette gestion de linteraction 3

'a version 78,7, touours en place en 78,1, de ce site a(t(elle correctement rsolu les problFmes voqus 3 Voici
quelques exemples de pages Heb collectes sous ce site. De nouveaux problFmes se sont(ils glisss dans cette nouvelle
version.
#ccueil X /ur la page daccueil, la barre horiEontale bleue suprieure permet daccder aux sous(pages du site par un
simple clic. 'a forme des lments de ce menu change lors dun survol souris. 'a barre verticale prsente plus bas
change laffichage de la vido prsente dans le cadre quelle introduit (ici ; vido + 'a slection Donus de novembre -.
*ette vido change dFs le survol dun lment de ce menu.
IHM
J-Y Antoine 30

Page artes-U X !n retrouve la mAme Eone de menu horiEontale que sur la page daccueil (en haut de page). /ur la gauche
apparaKt une Eone de menu spcifique cette page.

Page onseils /U X !n retrouve la mAme Eone de menu horiEontale que sur la page daccueil (en haut de page). Ici, un
second menu est galement prsent, sous forme donglets colors positionns dans un cadre spcifique.
IHM
J-Y Antoine 31


Exercice 23 - Btisier 2014 des erreurs sur site WWW
?etit florilFge des erreurs ergonomiques releves sur les sites HHH francophones au dbut de lanne 78,1>
Cas d"!tude ) X la /=*$ remporte la palme de la conception la moins acceptable pour cette erreur qui nest pas spcifique
au Heb mais des recommandations ergonomiques gnrales. /aureE(vous la dtecter 3

Cas d"!tude 2 X *heE "maEon, nous sommes en prsence dune erreur spcifique au Heb de gravit trFs modre, mais
tout de mAme, il sagit dune erreur qui est tellement rpte dans tous les traits dergonomie Heb quon stonne de la
trouver sur un site aussi important.

IHM
J-Y Antoine 32
Cas d"!tude 3 X Dart% naurait sans doute pas dN signer un contrat de confiance avec le concepteur de son site marchand.
?armi les multiples errements de conception que prsente son site, lesquels vous gAnent le plus 3


Cas d"!tude 4 X ?roblFme de &anner &lindness sur le site de =issan 3 4h bien non, pour le coup, laffaire est bien gre malgr
le menu principal hauteur de logo. /aurieE(vous expliquer pourquoi 3


Cas d"!tude 5 X ?roblFme trFs mineur pour cette page interne au site du ournal '4quipe. Vous aureE donc peut(Atre du
mal le dtecter. Il est toutefois rvlateur des soucis qui peuvent survenir lorsquon sen remet un moteur automatique
pour gnrer automatiquement du contenu.
IHM
J-Y Antoine 33


Cas d"!tude 6 X 'es sites ?orsche et ?hotoHeb ont tous deux choisi un mAme parti pris qui prennent le risque de ne pas
satisfaire la contrainte de familiarit. /i ce choix mar0eting peut se comprendre pour ?orsche (encore que e nen vois pas
le bnfice), il est plus circonspect dans le cas de ?hotoHeb. "veE(vous trouv ce point commun 3

IHM
J-Y Antoine 34

Exercice 24 - Gestion de zones de navigation: onglets et combi-listes (exam 2008 objectif 5.2.4)
n 2888, e demandais mes tudiants de comparer la gestion des Eones de navigation de trois sites marchands.
DiscuteE de leur utilisabilit respective pour un client avec une ide prcise dachat ou vague, pour un expert connaissant
bien le site ou un novice etc>
Alapage

Amazon

FNAC

n 28)2, "lapage a malheureusement et lponge face la concurrence. 'es sites restants ont(ils gagn au change 3
FNAC

1ma4on X 'e site amaEon a lui abandonn les onglets quil fut le premier promouvoir. 4tait(ce une bonne ide 3
IHM
J-Y Antoine 35

?our vous aider dans votre rflexion, avieE(vous dcouvert le mini(menu + ?arcourir les boutiques - 3

Exercice 25 - Structuration de site Web par tri par carte : mairie de Blois
/i lorganisation dune page Heb a une influence nette sur son utilisabilit, la structuration des diffrentes pages Heb, leur
regroupement en rubriques est autant essentielle. Dans cet exercice, nous vous proposons de regrouper de maniFre
cohrence les diffrentes rubriques existant ce our sur le site Leb de la ville de Dlois laide du tri par carte. *haque ligne
du tableau ci(dessous correspond une page du site, classs par ordre alphabtique. " laide de la mthode du tri par carte,
regroupeE ces pages en rubriques, sachant que vous Ates libres du niveau de larbre hirarchique de navigation dfinir.

"ctualits
"rtisanat et *ommerce 'iste des commerces
"nimaux en ville &Fglementation pour les animaux en ville
"ssociations
/noirs Informations destination des retraits
Dlois ?ass $ormule de rduction pour les touristes
Dalades
DD Doum
DibliothFque
*arnaval Dlois
*entre /ociaux
*inmas
*h^teau &o%al
*ollFges et '%ces
Dplacement et
stationnement )obilit dans la ville ; transports en communs, Eones de par0ing, train>
4cole *arte scolaire primaire
4conomie Informations sur lattractivit conomique du territoire
4mploi "ctions pour lemploi, liens vers ?ole 4mploi, mission sociale>
4nseignements artistiques *onservatoire de musique etc>
4nvironnement 4nsemble des actions de la ville en fonction de lenvironnement
4spaces Verts et Cardins
$Ate de la )usique ?rogramme de la fAte de la musique
Ouichet Inique ?rsentation du lieu daccueil commun des services ducatifs
Oastronomie
Gabitat ?age sur la rnovation des faMades, le logement social, les co dnergie
Gistoire
IHM
J-Y Antoine 36
Internet, )obile et Hifi ?oints Hifi disponibles pour tout le monde
Ceunesse 'istes des actions, lieux pour les ados
Cournes du patrimoine )anifestation organises dans le cadre de ces ournes
'ieux sportifs O%mnases, piscines >
'udothFque
)aisons de quartier
)aison de la )agie
)archs
=ouveaux habitants ?rsentation de la manifestation daccueil des nouveaux habitants
?ratiquer un sport 'iste des clubs sportifs
?etite 4nfance Informations sur les crFches etc>
?ersonnages clFbres
?ropret et dchets Oestion de la collecte des dchets
?roet 4ducatif 'ocal ?rsentation des actions runissant les acteurs locaux de lenseignement primaire
&endeE(vous de lhistoire $estival li lhistoire
&estauration /colaire *antines
/ant Infos sur les actions de la ville en matiFre de sant
/port et cole
6arifs "ide financiFres au familles, informations tarifaires sur les services de la ville
6ravaux ?rogramme des travaux dans la ville
Irbanisme Orands proets urbanistiques venir
/alons a congrFs ?rogrammes des salons
Venir Dlois
'a Ville en images
Ville d"rt et dGistoire ?rsentation gnrale de Dlois, ville patrimoniale
Vie tudiante
Exercice 26 - Structuration du site Web de lEPAD : Sarkozy, les profs dIHM lui disent merci !
4n 78,8 fin danne 788P, on causait beaucoup de la tentative de Cean /ar0oE% de suivre les traces de son prsident de ?apa
en montant lassaut de l4tablissement ?our l"mnagement de la Dfense (4?"D), premier strapontin vers la prise de
contr.le du *onseil Onral des Gauts(de(/eine. 'a Dfense est en fait gre par deux structures, l4?"D qui soccupe plus
du dveloppement de ce quartier daffaire et l4?OD (4tablissement ?ublic pour la Oestion de la Dfense) qui gFre au
quotidien le site. 'es deux structures font site HHH commun, ce qui donne un site asseE touffu rpondant des besoins
diffrents et sintressant des interlocuteurs varis allant de lhomme daffaire au touriste aponais. "u total, le premier
niveau dexploration du site nous retourne d une cinquantaine de pages ; la taille idale pour travailler la structuration
dun site laide de la mthode du tri par carte.
*onsidreE donc les pages dcrites ci(dessous et organiseE les en diffrentes rubriques qui se retrouveront comme domaines
dentre sur le menu principal du site. *ompareE ensuite votre travail avec celui effectu par les concepteurs de
l4?"O#4?OD ; leurs choix ont(ils t aviss 3 Ce me demande si le Hebmaster ne serait pas un eune de 7< ans na%ant
russi obtenir sa '7 informatique>
"ccFs piton ?lan dTaccFs la dalle pitonne de la Dfense
"ccFs transports ?lan dTaccFs la Dfense en &4& et )tro
"ccFs voiture ?lan dTaccFs la Dfense en voiture
"genda *alendrier des prochaines manifestations, quTelles soient des expos ou des forums dfensens
"vis dTattributions &sultats des derniFres "! marchs publics
*=I6 ?lans de chaque tour de la Dfense
*ontact $ormulaire de contact avec le service communication de lT4?"D # 4?OD
Defenscopie ?age de tlchargement de la version lectronique du magaEine culturel de la Dfense
Dtour ?age de tlchargement de la version lectronique de la lettre dTinformation de lT4?OD#4?"D
Documents officiels
6lchargement des fichiers sur lTensemble des documents officiels utiles en particulier pour la
rponses aux "!
4ntreprise ?age dTaccueil du site propre de ?aris 4ntreprises
4?"D ?rsentation des missions de lT4tablissement ?our lT"menagement de la Dfense)
4?OD ?rsentation des missions de lT4tablissement ?ublic de Oestion de la Dfense
4?OD#4?"D ; qui fait
quoi 3 Description des r.les respectifs de lT4?"D et de lT4?OD
4space *ulturel Informations sur les expositions de lT4space *ulturel de la Dfense
4space Info ?rsentation de lTespace de communication qui sTaccompagne dTun )use de la Dfense
4space Verts Description de lTensemble des espaces verts du site
IHM
J-Y Antoine 37
$orums Dfensens ?rsentation des forums dTchange organiss par lT4?OD#4?"D
Orande "rche Informations sur la visite de la Orande "rche de la Dfense
Ouide "udio 6lchargements de fichiers audioguide sur les principaux b^timents du site
Gistoire Gistoire de lTamnagement de la Dfense
Info 6rafic 4tat du trafic en rgion parisienne
'Tart la Dfense ?etit introductif la prsence dTbuvre dTarts sur tout le site
'iens utiles 'iens vers les sites Heb des partenaires de lT4?"D
'ouer des bureaux 'iens vers toutes les agences immobiliFres du site
)archs en cours Informations sur les appels dToffres ("!) de marchs publics en cours
=ouvelle signaltique ?rsentation de la nouvelle signaltique utilise la Dfense
=umros utiles "nnuaires des services de la Dfenses
!rganiser une confrence ?age dTaccueil vers le site du *=I6 (organisation dTexpositions, de confrences) ( site part
?ar0ings 'ocalisation et autres renseignements sur les par0ings couverts de la Dfense
?hotothFque 4nsemble de photographies sur la Dfense
?lan des buvre dT"rts 'ocalisation de toutes les buvres dTarts prsentes sur le site
?lan des tours ?lans de chaque tour de la Dfense
?lan des travaux 'ocalisation et description des travaux en cours sur la Dfense
?)& ?lan dTaccFs pour les personnes mobilits rduites
?resse 4nsemble des communiqus de presse de lT4?"D#4?OD
?rocdures dmatrialises 'ien vers la plate forme lectronique de rponse aux appels dToffres
?roets ?roets de construction sur la Eone Dfense
?ublications
?age de commande de toutes les publications sur la Dfense (plans, rapports, guides touristiques,
DVD)
&ecrutement 'iste des postes proposs au recrutement lT4?OD et lT4?"D
&unions *alendrier des prochaines runions des forums dfensens
/cultpures en plein air 'ocalisation de lTensemble des sculptures en plein air du parc
/ervice )archs ?ublics $ormulaire de contact vers le service des marchs publics
/ervices et *ommerces )oteur de recherche pour trouver un commerce sur place
/ondage &sultat du sondage sur les noms attribuer aux nouvelles tours
/uivi de travaux *alendrier dTavancement des travaux en cours sur la Dfense
VidothFque 4nsemble de vidos sur la Dfense
Visite Ouide ?lan interactif de la Dfense

IHM
J-Y Antoine 38

&nterfaces intgres )(mbedded interfaces*
Exercice 27 - Interfaces intgres et critres ergonomiques (examen
2008 ; objectifs 6.1. et 2.2.1.)
Les critres ergonomiques vues en cours sappliquent galement aux interfaces informatiques intgres
dans des dispositifs autres que des ordinateurs. Dans cet exercice, nous allons nous intresser une
calculatrice lectronique telle que celles utilises par les lycens. La figure page suivante prsente cette
calculatrice. Lcran nest pas rtro-clair et nest pas tactile. Le seul dispositif dentre est le clavier de
lappareil (pas dutilisation avec un stylet).



Discuter de lutilisabilit de linterface utilisateur ainsi ralise en fonction des critres ergonomiques
suivants :
a. principes ergonomiques de base en particulier en matire dorganisation
b. choix et implmentation du dispositif dentre
c. choix et implmentation du dispositif de sortie
d. choix des polices de caractres utilises
e. utilisation des couleurs
IHM
J-Y Antoine 39
+ispositifs d'entre
Exercice 28 - Keystroke model
A votre avis, quel est la mthode 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 ncessaire la touche de suppression (suppr), soit vous slectionnez l'ensemble du texte indsirable supprimer
avant d'appuyer (une fois) cette touche. Enfin, une fois le texte slectionn, vous pouvez slectionner l'item "supprimer"
du menu dition de la barre de menus.
1. En vous appuyant sur le modle Keystroke, estimez le temps ncessaire pour la suppression d'un texte de 3
caractres adjacents.
2. Faites de mme pour une suppression de 10 caractres adjacents.
3. Les rsultats obtenus sont-ils intuitifs ? Quels sont les limites de ces calculs ?
Exercice 29 - Evaluation exprimentale des paramtres de la loi de
Fitts
On considre quelques temps (en secondes) mesurs lors d'un exprimentation avec un dipositif particulier. Pour ce
dispositif, pouvez-vous dterminer (grossirement) les valeurs des constantes exprimentales C1 et C2 utilises 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 30 - Loi de Fitts et organisation de menus (adapt du cours
de M. Baudoin-Lafon)
On considre quelques temps (en secondes) donns 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 dsire comparer le temps moyen pour la slection d'une commande dans un menu hirarchique 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 hirarchique (menus -> menu1) mais dans laquelle les sous-menus sont trois fois plus long en
moyenne que les menus hirarchiques. Chaque item d'un sous-menu est spar du suivant par une distance de 0,5 cm.
1. Calculer le temps moyen de slection pour des tailles de menus non hirarchiques de respectivement 12 et 24
items. Conclusion?
2. On dsire maintenant comparer les rsultats 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 rsultat connu?
IHM
J-Y Antoine 40
(valuation
Exercice 31 - Stratgie dvaluation : des spcifications dutilisabilit leur caractrisation suivant
plusieurs dimensions (adapt de Stone et al., 2005)
!n considFre dans cet exercice la conception de deux sites HHH, le premier consacr une exposition temporaire dans
une galerie dart, le second au site dun muse quelconque. " chaque fois, le )"! (maKtre douvrage) a dfini, lors de la
rdaction des spcifications du site, un certain nombre de conditions qui devront Atre satisfaites en matiFre dutilisabilit.
1. "fin de dfinir votre stratgie dvaluation, pouveE(vous relier ces demandes aux dimensions dutilisabilit tudies en
cours ; efficience, efficacit, caractFre engageant, tolrance aux erreurs, apprenabilit.
'%osition 5em%oraire
,. 'e site doit inciter les personnes qui ne connaissent pas lartiste faisant lobet de cette exposition ne pas quitter
le site et explorer ce dernier. Il doit galement fournir des informations nouvelles pour les historiens dart d
experts de lartiste.
7. In des obectifs principaux du site doit Atre dencourager la dcouverte et donc lexploration aussi libre que
possible du site, mAme si on dcouvre pour la premiFre fois la galerie.
<. 'e site doit rpondre clairement et facilement aux questions que se posent les visiteurs sur lartiste et lexposition
(localisation, heures douvertures>)
1. "ucune information donne sur lartiste ne doit Atre errone, il en va de la rputation de la galerie auprFs des
acheteurs et des spcialistes.
:. 'a navigation doit mettre laccent plus sur lintrAt des buvres prsentes (qui doivent Atre rendues sur le site
avec une grande qualit de restitution) que sur la vitesse de tlchargement des pages. 6outefois, des mesures
doivent Atre prises pour viter le blocage de la navigation lors du tlchargement des images en haute dfinition.
3us!e
,. 'e muse est ouvert au grand public ; tout le monde doit pouvoir lexplorer sans avoir une exprience particuliFre
de la navigatioantoinen Heb.
7. 'a structure du site doit favoriser laccFs aux informations les plus importantes (expositions en cours, horaires
douvertures, tarifs, accFs etc.) en un minimum de navigation.
<. 'apparition dune page dTerreur du fait du site mAme doit Atre absolument proscrite.
1. 'e site doit donner un aperMu fidFle de ce que propose le muse aux personnes qui ne lont encore amais visit.
Il est essentiel que le site leur donne envie de venir le visiter.
:. 'e site doit pouvoir rpondre aux principales questions des visiteurs et laccFs ces informations doit Atre ais
trouver.
,. "u vu des ces spcifications, pouveE(vous hirarchiser les facteurs dutilisabilit tester lors de lvaluation 3
C. ?our chaque facteur dutilisabilit test, proposeE une mtrique quantitative dvaluation.
Exercice 32 - Mthodes d'valuation : systme d'information touristique (adapt de Preece, 1994)
'Toffice du tourisme de la ville de Vannes souhaite dvelopper une borne dTinformation touristique qui sera situe dans ses
locaux. *e s%stFme interactif autorise une seule modalit dTentre ; lTcran tactile. Ine spcification complFte du s%stFme
ainsi quTun premier protot%pe ont t labors, et lToffice dsirerait une valuation ergonomique du produit avant dTaller plus
loin dans le dveloppement du s%stFme. 'es qualits auxquelles doit rpondre ce s%stFme concernent avant tout lTaffichage
graphique (ic.nes, couleurs, s%mboles), la facilit dTaccFs lTinformation et la facilit dTutiliser les menus prsents sur
lTinterface lTaide de lTcran tactile. !n sTinterroge galement sur le t%pe dTinformations supplmentaires qui pourraient
intresser les utilisateurs. *ette valuation doit Atre ralise dans le mois venir, vous disposeE dTune personne a%ant une
bonne exprience en matiFre dTvaluation des interfaces ainsi que de matriel vido. ?ar ailleurs, les concepteurs du s%stFme
sont prAts modifier la structure et les aspects graphiques de lTinterface si ncessaire.
?ouveE(vous dterminer un ensemble de mthodes dTvaluation qui permettraient de rpondre ces besoins 3
Exercice 33 - Evaluation exprimentale : cas dcole
!n considFre un site de commerce lectronique dont une nouvelle version doit Atre conMue, dans lobectif dun
accroissement des ventes et du nombre de clients de ce site marchand. ?lus prcisment, ce nouveau site doit apporter des
rponses deux soucis principaux ;
IHM
J-Y Antoine 41
,. Il est important quun utilisateur qui a une ide d trFs claire de son achat (par exemple, rfrence prcise du produit)
puisse le commander le plus rapidement possible sur le site,
7. Il est important que le site guide efficacement un utilisateur qui a une ide encore floue sur lachat effectuer (par
exemple + e voudrais acheter un rfrigrateur mais e ne sais de quel t%pe - voire + quel cadeau e pourrais faire mes
parents pour leur anniversaire -), lefficacit signifiant avant tout quune recherche exploratoire sur le site se traduira par
un achat B
*ette petite dfinition des besoins tient lieu de cahier des charges pour la conception du nouveau site. 'a )"! tient
toutefois ce que ces obectifs soient valids exprimentalement (tude par tests en utilisation relle) lors de la recette du
nouveau site. Il vous est demand de dfinir lensemble de la stratgie dvaluation correspondante. " savoir ;
,. &trat!gie d"!#aluation X 2uelles sont la ou les populations cibles qui seront concernes 3 2uels sont les critFres
dutilisatibilit (norme I/! par exemple) qui seront vrifis 3 2uel protocole dvaluation prcis retenir 3 'e cas
chant, sur quelles mtriques baser cette vrification 3
7. $lan d"!#aluation X *omment seront recruts les utilisateurs 3 *omment et o[ se drouleront les sessions
dexprimentation ; dans le cadre dune valuation exprimentale, quelles seront les t^ches tudies, et les techniques de
recueil des donnes dobservation 3
<. $hase d"!#aluation X 4crire le ou les scripts dvaluation correspondant(s).
1. 1nal2se X *omment seront anal%ses et s%nthtises les observations 3