Université F. Rabelais de Tours UFR Sciences et Technologies Licence Informatique
Ergonomie des IHM
TRAVAUX DIRIGÉS
Enseignant
Jean-Yves ANTOINE
(Jean-Yves.Antoine AT univ-tours.fr)
IHM
Principes ergonomiques Exercice 1 -
Facteurs humains et qualité ergonomique des interfaces (objectif 2.2.1.)
Dans cet exercice, il vous est proposé des copies d’écrans (ou d’autres dispositifs électroniques) qui sont sensés illustrer une erreur ergonomique erg onomique ou au contraire une bonne prise en compte de principes ergonomiques généraux qui doivent doivent guider la conception d’interfaces interactives. interactives. Il vous est demander à chaque fois de commenter le cas d’étude 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 étudiés en cours. Facteur humain
Cause (principe ergonomique)
"pprenabilité $lexibilité &obustesse
observabilité, causalité#guidage, consistance consistance # cohérence, familiarité, familiarité, généricité adaptation, st%les d’utilisation prévention (observabilité, causalité, guidage), gestion des erreurs
1 — '’exemple cidessous à gauche est extrait des MacOS User Experience Guidelines , qui fournisent des exemples de bonnes et mauvaises conceptions conceptions dans le cadre du monde ac. *et exemple illustre la notion de badge badge (le petit rond rouge avec le chiffre + -) qui indique dans ce cas un événement ou une action à réaliser à la date indiquée sur l’icne du calendrier. !n retrouve ce t%pe de petit obet informatif également sur /0%pe, ou encore $aceboo0 comme l’indique l’image à droite qu i montre que 1 notifications sont en attente pour l’util isateur concerné. 2uel principe ergonomique est concerné ici 3 4stil bien géré 3
2 5 *ela fait bien longtemps que e n’utilise plus Internet 4xplorer pour surfer. 6outefois, si ce navigateur a perdu de sa superbe, on oublie qu’il représente encore entre 789 et 7:9 de part de marché mondial ; en décembre 78<, il restait ainsi le navigateur leader en "mérique du =ord et en *hine, par exemple. &ien ne semble toutefois freiner sa chute. 4n guise d’épitaphe, e vous livre une copie d’un message que la version : du navigateur m’avait adressée uste avant que e ne l’abandonne> 2uel principe ergonomique est directement concerné par ce popup 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 tramstrains pour Atre précis) à venir. 2ui atil de différent par rapport aux affichages de la /=*$ mais que l’on retrouve sur certains réseaux de transports en commun 3 4stce un bon point 3 2uel est le principe ergonomique qui est concerné 3
4 5 C’aime beaucoup le cas d’étude présenté à la page suivante, qui correspond au message d’information que vous adressait la 6esco an0 en mars 78< lorsque vous demandieE à changer le mode d’envoi de vos relevés de carte bancaire. 'e suet étant sensible, la banque a vraiment essa%é de bien préciser les eneux de chaque action réalisée sur l’interface. 4stce une réussite 3 "lleE, e vends la mFche, cette fenAtre a été classée par un site consacré à l’IG —2—
© J-Y Antoine
IHM
Principes ergonomiques Exercice 1 -
Facteurs humains et qualité ergonomique des interfaces (objectif 2.2.1.)
Dans cet exercice, il vous est proposé des copies d’écrans (ou d’autres dispositifs électroniques) qui sont sensés illustrer une erreur ergonomique erg onomique ou au contraire une bonne prise en compte de principes ergonomiques généraux qui doivent doivent guider la conception d’interfaces interactives. interactives. Il vous est demander à chaque fois de commenter le cas d’étude 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 étudiés en cours. Facteur humain
Cause (principe ergonomique)
"pprenabilité $lexibilité &obustesse
observabilité, causalité#guidage, consistance consistance # cohérence, familiarité, familiarité, généricité adaptation, st%les d’utilisation prévention (observabilité, causalité, guidage), gestion des erreurs
1 — '’exemple cidessous à gauche est extrait des MacOS User Experience Guidelines , qui fournisent des exemples de bonnes et mauvaises conceptions conceptions dans le cadre du monde ac. *et exemple illustre la notion de badge badge (le petit rond rouge avec le chiffre + -) qui indique dans ce cas un événement ou une action à réaliser à la date indiquée sur l’icne du calendrier. !n retrouve ce t%pe de petit obet informatif également sur /0%pe, ou encore $aceboo0 comme l’indique l’image à droite qu i montre que 1 notifications sont en attente pour l’util isateur concerné. 2uel principe ergonomique est concerné ici 3 4stil bien géré 3
2 5 *ela fait bien longtemps que e n’utilise plus Internet 4xplorer pour surfer. 6outefois, si ce navigateur a perdu de sa superbe, on oublie qu’il représente encore entre 789 et 7:9 de part de marché mondial ; en décembre 78<, il restait ainsi le navigateur leader en "mérique du =ord et en *hine, par exemple. &ien ne semble toutefois freiner sa chute. 4n guise d’épitaphe, e vous livre une copie d’un message que la version : du navigateur m’avait adressée uste avant que e ne l’abandonne> 2uel principe ergonomique est directement concerné par ce popup 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 tramstrains pour Atre précis) à venir. 2ui atil de différent par rapport aux affichages de la /=*$ mais que l’on retrouve sur certains réseaux de transports en commun 3 4stce un bon point 3 2uel est le principe ergonomique qui est concerné 3
4 5 C’aime beaucoup le cas d’étude présenté à la page suivante, qui correspond au message d’information que vous adressait la 6esco an0 en mars 78< lorsque vous demandieE à changer le mode d’envoi de vos relevés de carte bancaire. 'e suet étant sensible, la banque a vraiment essa%é de bien préciser les eneux de chaque action réalisée sur l’interface. 4stce une réussite 3 "lleE, e vends la mFche, cette fenAtre a été classée par un site consacré à l’IG —2—
© J-Y Antoine
IHM
comme faisant partie des pires erreurs ergonomiques de l’année 78<. ais au fait, quel est le principe ergonomique qui a été enfreint en premier lieu 3
5 5 *es copies d’écran ci dessous correspondent à la version électronique du magaEine Hired usqu’à la refonte en 78< du site, telle qu’est apparait sur un écran d’ordinateur, une tablette ou un ordiphone. n média d’information spécialisé dans l’informatique respectetil bien les recommandations ergonomiques. 2uel principe aie cherché à illustrer ici 3
6 5 4ncore un petit chouchou de votre serviteur, ici le problFme adressé est presque subtil. 2ue penseEvous du popup de confirmation qu’affiche le service d’abonnement lié à la liseuse =oo0 en cas de désinscription du service. 2uel principe ergonomique a retenu ici votre attention 3
—3—
© J-Y Antoine
IHM
7 5 *ette capture d’écran estcelle d’un s%stFme automatique de distribution de tic0ets de cinéma à /toc0holm. =on, le problFme n’est pas que les messages de guidage sont rédigés dans une langue quelque peu gutturale. " votre avis, quel est le principe ergonomique qui m’a conduit à retenir cette photographie 3
8 5 *et exemple commence a dater (788J) mais il est tiré d’un rapport de stage de aster 7 la derniFre année avant que qu e nous ne décidions d’introduire un enseignement d’ergonomie des interfaces. '’étudiant concerné devait développer un logiciel de configuration des ordinateurs pilotant les robots d’une 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 décidé de ne réaliser qu’un seul logiciel de configuration, les utilisateurs choisissant la bonne configuration suivant la machine concernée. *e choix se défendait, mais pas la solution ergonomique choisie. 2uel est le problFme 3 2uel est, voire quels sont les principes ergonomiques qui ne sont pas respectés 3
8 5 6ravaillant fréquemment sous 'ibre !ffice, e n’ai plus sur mon ordinateur qu’une version obsolFte de icrosoft Hord (!ffice 788< B). '’image de la page suivante nous montrer les icnes lanMant les fonctionnalités fonctionnalités de dessin dans le —4—
© J-Y Antoine
IHM
document Hord mAme. *omme ne l’indique pas l’infobulle, cliquer sur le rectangle permet de dessiner également des carrés. 2ue peuton faire également en cliquant sur l’icne représentant une ellipse à votre avis 3 ?our avoir tiré une conclusion aussi lumineuse, vous aveE dN supposer qu’un principe ergonomique particulier était bien respecté. 'equel 3 9 — Les deux captures d’écran ci-dessous correspondent à deux états successifs d’un formulaire de réservation sur le WWW de locations de vacances à Venise. Que s’est-il passé entre les deux images ? Visiblement, les auteurs du site ont voulu trop bien faire et ont mélangé nombre de recommandations ergonomiques. Avez-vous des commentaires à faire sur le guidage, l’observabilité et la gestion des « erreurs » sur cet exemple.
Exercice 2 -
Facteurs humains et qualité ergonomique des interfaces (objectif 2.2.1.)
1. Développé par une filiale d’"pple est disponible sous ac!/ et
HindoLs, $ilea0er ?ro est un /OD relationnel qui est né en PJ:, donc trFs peu de temps avant l’émergence des premiers /OD relationnels commerciaux (!racle ; PQP R I D7 ; PJ<). Il a connu en 78< sa
2. 2uel facteur de qualité ergonomique illustre cette fenAtre de paramétrage du driver d’une souris 3
—5—
© J-Y Antoine
IHM
3. *onsidéreE les deux exemples de fenAtres popup activées lors de la demande de sortie dTun logiciel (cf page suivante). 'aquelle des deux solutions proposées vous paraKtelle la plus appropriée 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 fréquemment à 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 réservation ferroviaire voyages-sncf.com propose deux modes d’interaction pour rechercher un traet en train.
/ur la gauche, un formulaire trFs classique permet de préciser la ville de départ puis celle d’arrivée. "lors que sur la gauche, une carte de $rance s’affiche, sur laquelle l’utilisateur peut (mo%ennant éventuellement des opérations de Eoom) faire un appui directement sur les lieux géographiques correspondant. DiscuteE des avantages et inconvénients pour un utilisateur de chacun des modes d’interaction (en tenant compte du dispositif choisi). " quel principe ergonomique général répond l’utilisation de ces deux modes d’interaction redondants 3
Exercice 3 -
Les principes ergonomiques généraux s'appliquent aussi au WWW (objectif 2.2.1.)
1. 'Timage cidessous montre la partie principale de la page dTaccueil dTun site HHH dédiée à lTétude de la biologie des champignons. 2uel principe ergonomique, mal géré à la base, les concepteurs du site ontils voulu respecter 3
—6—
© J-Y Antoine
IHM
2. !bserveE les deux formulaires de saisie cidessous, inspirés dTun site HHH réel. 'aquelle de ces deux versions vous sembletelle la plus ergonomique 3 " quel(s) principe(s) ergonomique(s) répondent ces améliorations 3
3. 'a capture dTécran (page suivante) est issue dTun usage réel du site de réservation de la /=*$. 'e U anvier 788J au soir, Tai cherché à réserver un traet Vannes W '%on pour le J avril 788J (demande résumée à gauche de lTécran). Voici le résultat de ma recherche. 2uTobserveEvous 3 ?ouveEvous deviner ce qui explique cet affichage 3 2uel recommandation ergonomique a, selon vous, été o%eusement foulée du pied par la /=*$ 3
Exercice 4 -
L’interaction ne se limite pas aux logiciels (objectif 2.2.2)
A) "vant l’arrivée des portables, les téléphones classiques (à touche ou à cadran) ne comportaient pas d’écran.
. &éfléchisseE à l’utilisation d’un tel combiné. DonneE au moins un critFre ergonomique qui n’était pas respecté par ce t%pe de combiné, et que l’utilisation d’un écran a pu corriger. 7. ?roposeE une solution pour remédier à ce problFme sans utilisation d’un écran.
—7—
© J-Y Antoine
IHM
B) 'a plupart des ergonomes travaillant pour les firmes automobiles prédisent que le volant de direction aura disparu de nos tableaux de bord dTici une vingtaine dTannée. 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 accélérations et freinages. *e t%pe de dispositif équipe déà les voitures adaptées à certains handicaps. &enault a déà présenté des véhicules dTexhibition sans volant.
. DiscuteE des avantages et inconvénients de ce nouveau dispositif de commande. 7. 4xpliqueE ce qui pourrait empAcher cette prédiction de se réaliser (hors contraintes économiques, bien sNr).
Exercice 5 -
Gestion de messages d'erreurs (objectif 2.2.3. & 3.2.1)
'es deux figures ciaprFs montrent lTaffichage dTun message dTerreur sous deux navigateurs (oEilla et !pera) lorsquTun site HHH nTest pas atteignable (le plus souvent pour cause d e connexion internet défaillante). *ritiqueE les solutions proposées 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
—8—
© J-Y Antoine
IHM
Exemple 4 – Google Chrome 31.0 (2014) - /ous *hrome l’information donnée à l’utilisateur se fait en deux temps. 6out d’abord, un message trFs sommaire apparait dans l’interface du navigateur (cf. page suivante). Il faut cliquer sur un contrle + ?lus - pour avoir une information plus détaillée.
*onsidéreE maintenant le message dTerreur cidessous, issu dTu ne application ac ... pas si ancienne que cela. ?ourrieEvous dire quels sont les points forts et les points faibles de cette gestion des erreurs 3
Exercice 6 -
Prévention 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 privilégié pour la prévention des erreurs. 6outefois, le temps perdu à abandonner le clavier pour aller cliquer sur ce bouton fait que de nombreux services de messagerie instantanée ont abandonné l’usage de ce dispositif de précaution. De mAme, la saisie au doigt sur écran tactile de —9—
© J-Y Antoine
IHM
taille limitée fait que les applications mobiles tentent également d’éviter le recours à ces boutons de sécurité. ?arfois, ces choix peuvent Atre ustifiés, dans d’autres cas, cette solution de facilité est nettement plus contestable. Dans cet exercice, nous allons étudier quelques cas relevés sur le blog sabilis ( http;##LLL.ergonomieinterface.com ). " chaque fois, il vous sera demandé de discuter des avantage et inconvénients de la solution choisie. Facebook X $aceboo0 ne propose aucun bouton Yenvo%erZ dans ses panneaux de communication instantanée et ses Eones de commentaire. Il force ainsi l’usage unique du clavier (touche Entrée ) pour envo%er un message ou un commentaire.
"ucun élément n’indique d’ailleurs qu’il s’agit du mo%en d’envo%er le texte saisi. Google Chrome X *ette disparition du bouton de validation peut également concerner les navigateurs euxmAme. Dans
Ooogle *hrome, le champ d’interrogation du moteur de recherche et d’adressage (là o[ vous rentreE les &' sont unifiés en un seul champ de saisie. 4n l’absence d’un bouton de validation, l’utilisateur peut ainsi lancer deux actions a priori différentes lorsqu’il valide ce champ par une Entrée clavier.
"fin de guider l’utilisateur entre les deux options en l’absence de bouton explicite (+ rechercher Heb -, + aller à - par exemple), Google hrome propose alors une aide à la saisie ; en plus de l’autocomplétion du champ en cours de saisie, une icône permet d’illustrer l’action qui va Atre exécutée selon la s%ntaxe du texte saisi ; une loupe pour une recherche, une page pour un accFs direct par &'. *et icne est en outre accompagné d’un texte de guidage à droite dans le cas d’une recherche. 'e navigateur peut en outre laisser le choix entre différents t%pes de recherche, comme le montre l’image 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 l’on soit sur le Heb ou sur le monde du mobile, l’entrée d’un code de
déverrouillage ou d’accFs fait de moins en moins l’obet d’une validation par bouton. ?our déverrouiller un i?ad, l’utilisateur doit entrer un code d’accFs dont le nombre de chiffres est défini a priori ; quatre (figure cidessous à gauche). DFs que l’on a saisi ces 1 chiffres, le lancement de la procédure d’authentification est automatique. /ur le site !oursorama.com , un abonné doit tout d’abord entrer son identifiant, puis un code d’accFs. "u bout de < erreurs de code, l’accFs au compte nécessite un déverrouillage qui ne sera possible qu’aprFs demande et vérification manuelle par la banque. Ici la philosophie est différente (figure cidessous à droite). 6out d’abord, l’entrée de l’identifiant se fait sans bouton de validation ; l’utilisateur doit utiliser la touche Entrée , une fois son identifiant (de taille variable suivant les utilisateurs) saisi. "pparait alors un clavier virtuel qui permet de rentrer le code d’accFs. 'e lancement de la procédure d’authentification n’est effectif qu’une fois sélection le bouton de validation en bas du clavier.
$aram!trage d"une a%%lication X 'e paramétrage de l’i?ad prend des formes différentes suivant le t%pe d’action que génFre un changement d’option. /ur la figure cidessous (à gauche), la sélection de l’option Lifi permet de connecter l’ iPad
sur le réseau en question. 'a tentative de connexion est immédiate une fois l’option sélectionnée ; le basculement sur un fond bleu trFs visible de l’option indique la recherche de connexion. /i celleci est possible, l’icne d’état correspondant changera finalement, aprFs retour sur fond blanc.
—
10
© J-Y Antoine
IHM
" l’opposé, l’option ode d"#cc$s n’est pas activable implicitement par sélection de l’option comme précédemment. "pple n’utilise pas de bouton de validation ici, mais demande à l’utilisateur de déplacer un interrupteur, ce qui lancera effectivement l’option requise. &au#ergarde sur un !diteur de te'te ( /auvegarder le contenu modifié d’un document est une action engageante. Microsoft Office , comme la suite %i&re Office , utilisent ainsi un boutonicne ou une option explicite de leur barre d’outil pour lancer cette action. " l’opposé, les outils bureautiques collaboratifs comme Google 'ocs se passent de cette validation explicite.
'’utilisateur peut aller voir dans le menu (ile de l’interface (figure cidessus à gauche), il ne trouvera pas d’option de sauvegarde. *elleci est en effet réalisée automatiquement à intervalles réguliers. *e que montre un feedbac0 d’action sur la droite de la barre d’outil ; soit le s%stFme nous informe qu’il est en train de sauvegarder les derniFres modifications, soit il nous informe qu’une telle action n’est pas nécessaire. n survol sur cette Eone nous informe que l’éditeur réalise automatiquement ces sauvegardes. n historique des révisions permet de revenir à un état antérieur du document. '’utilisateur n’a pas le choix de contrler luimAme la sauvegarde, seul l’enregistrement automatique étant disponible.
Exercice 7 -
Gestion des erreurs : rédaction des messages et codes couleur (objectifs 2.2.3)
*et exercice est un florilFge de mauvaise gestion d’erreurs que e dois au )nterface *all of (ame que vous pouveE consulter à l’&' suivante ; http;##homepage.mac.com#bradster#iarchitect#shame.htm. *e site truculent n’est plus mis à our depuis 7888, mais la plupart des erreurs qui ont été recueillies sont touours d’actualité. &econnaissons tout de mAme 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 ) X à #ouloir tro% bien *aire + &G,-
*et exemple est tiré d’une boKte de dialogue d’un /OD sous HindoLs dont l’obectif est de prévenir au mieux les erreurs. "u final, cro%eEvous que ce but est bien atteint 3 ?ourquoi 3
Cas d’utilisation 2 – les quiproquos d’ Easy CD Creator Easy ' reator est un des logiciels d’aide au gravage qui fut asseE répandu. *e qui ne le dispense pas d’évaluation
ergonomique> DiscuteE des deux messages cidessous, obtenus dans deux situations différentes en fin d’opération.
—
11
© J-Y Antoine
IHM
Cas d’utilisation 3 – AK-mail , logiciel tout risque ?
*’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 leMon de ses cours d’ergonomie. 2uelle recommandation ergonomique essaietil de respecter ici 3 2uel est le facteur d’utilisabilité qui risque d’Atre affecté par son choix de conception 3 "u passage, ne saurieEvous pas i maginer la raison (historique) qui a conduit à ce choix 3
!anipulation directe (adapté de A. Dix et al., 2004 – objectif 1.1.1.) 4n PJ7, en /hneiderman a défini différents critFres pour définir 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 .
Exercice 8 -
) 5 4n étudiant les critFres définis par /hneiderman, dire en quoi ce t%pe de logiciel répond au concept de manipulation directe, et par quels aspects il sTen éloigne.
—
12
© J-Y Antoine
IHM
"rganisation de l’interface Exercice 9 -
"rganisation générale de l'interface
) 5 Dans ses User Experience )nterface Guidelines , icrosoft recommande d’ouvrir les fenAtres d’information sur la progression d’une action en bas à droite de l’interface. /ur quelles données se base cette recommandation 3
2 5 =ormalement, on recommande de placer la barre d’outil ou de menu d’une application en haut de l’interface (Eone trFs visible et peu accessible) et réserver le bas de l’interface (Eon peu accessible et peu visible) comme barre d’état. *e n’est pas ce choix qu’a fait icrosoft pour son application de visionnage Photo ,ieer , puisque l’on retrouve des contrles importants en bas d’image. ?ouveEvous trouver une ustification à ce choix 3
3 !n propose, pour un logiciel grand public (éditeur de texte par exemple), le schéma général de lTaffichage ciaprFs.
Titre Zone des commandes (boutons)
Exit
Zone de travail
Zone d'afficha e des informations ou des messa es d'alertes ) 5 4noncer les points qui vous paraissent satisfaisants dans cette interface. CustifieE votre réponse. 2 5 4noncer les points qui au contraire ne vous pas paraissent satisfaisants. CustifieE votre réponse. 3 5 ?roposeE une autre organisation générale de lTaffichage pour répondre à ces problFmes.
Exercice 10 - Principes ergonomiques généraux (objectif 3.2.1) 1 — !n considFre l’interface d’un formulaire de saisie de données (sur un site HHH ou un /OD, par exemple), dans lesquels l’utilisateur doit saisir des informations concernant des personnes. 2uatre solutions sont proposées pour le design de cette Eone de saisie. *ritiqueE chacune de ces propositions ; quels sont leurs points forts et leurs faiblesses 3
—
13
© J-Y Antoine
a)
IHM
b) Nom Prénom Fonction Courrier Électronique
Nom Prénom Fonction Courrier Électronique
c)
d) Nom Prénom Fonction Email
Nom Prénom Fonction Courrier Électronique
(optionnel)
Exercice 11 - L’ergonomie en dehors de l'informatique : placement des contr#les (objectif : 3.2.1) . !bserveE les dessins cidessous, qui représentent différentes configurations possibles pour une plaque à 1 feux. ?ouveE vous classer ces configurations dTun point de vue ergonomique 3
2. 2ue penseEvous de l’interface de commande de ce lecteur DVD (voir figure page suivante) 3 *eci vous faitil penser à
une recommandation d’organisation d’interface étudiée en cours 3
Exercice 12 - Evaluation d'une IHM : éphéméride électronique(objectifs 2.2 ; 3.2) 4n astronomie, un éphéméride est une table qui indique la position de tous les astres à chaque moment (our, date, heure) donné et ce pour une position donnée. "vec lToutil informatique, ces tables austFres sont désormais à la portée du grand public. De nombreux logiciels ouant le rle dTéphémérides sont désormais commercialisés et permettent une visualisation directe du ciel à une date et une position donnée. !n propose ciaprFs lTinterface dTun logiciel dTéphéméride composé dTune seule fenAtre. Principes de fonctionnement
'e s%stFme affiche à lTécran une vue partielle du ciel suivant les informations fournies par lTutilisateur. ?our cela, celuici doit définir ;
les conditions dTo&servation ; il doit donner la date dTobservation (au format #mm#aaaa), lTheure O6 (et non pas locale, au format hh;mm), ainsi que la position (latitude et longitude) du lieu dTobservation. les paramFtres de visée (on nTaffiche quTune partie du ciel à lTécran) ; lTorientation se définit, comme sur les télescopes à monture équatoriale, en terme dTascension droite (h, mn, sec) et de déclinaison (degrés). !n doit également définir un facteur de grossissement (Eoom) dont dépend la largeur du champ de vision. *e facteur est un entier. —
14
© J-Y Antoine
IHM
ne fois que ces paramFtres sont définis, un clic sur le bouton ]afficher] permet de voir le ciel virtuel correspondant aux conditions dTobservation demandées. 'orsquTune information saisie nTest pas valide, aucune information ne sTaffiche immédiatement. *Test au moment du lancement de lTaffichage que le message ]?aramFtres de visualisation erronés veuilleE corriger] apparaKt dans la Eone prévue pour lTaffichage du ciel. 'es données rentrées saisies restent apparentes dans la Eone de saisie. n clic sur un obet affiché dans le ciel permet dTavoir différentes informations sur ce dernier ;
nom de lTobet céleste, position en ascension droite et déclinaison magnitude (intensité de lTéclat perMu) distance à la 6erre. *ette distance peut Atre exprimée en nité "stronomique (") ou en "nnées 'umiFres (') suivant un choix déterminé par lTutilisateur (boutons radio)
*e logiciel doit Atre utilisable aussi bien par des astronomes amateurs (connaisseurs du domaine) que par des novices. 5 $aites l’évaluation critique de cette interface, en vous appu%ant sur les principes de =orman, =ielsen, astien et /capin. 7 5 ?roposeE une autre interface pour répondre aux problFmes rencontrés.
Exercice 13 - $onception : aide % la saisie de données (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!=, présenteE deux stratégies dTorganisation de votre interface pour faciliter cette saisie, et discuteEen les avantages et les inconvénients a priori en regard des t^ches réalisables et des connaissances des utilisateurs.
—
15
© J-Y Antoine
IHM
&nterfaces W&!P uestions de cours
Exercice 14 - Signifiance des icônes (objectif 4.2.1) ). Dessiner un icne pour représenter chacune des options du panneau de configuration suivantes
?aramFtres d’affichage "out#suppression de programmes *onnections réseau Date et heure !ptions d’accessibilité ?aramFtres son ?aramFtres s%stFmes
"out#suppresion de matériel "limentation et économie d’énergie *omptes utilisateurs Imprimantes ?arefeu # options de sécurité ?aramFtres souris ?olices de caractFres
" chaque fois, on précisera dira quel principe étudier en cours (ressemblance, s%mbolique, analogie>) a été retenu pour réaliser ce graphisme. 2. 4changeE vos dessins avec votre voisin. /a facilité à reconnaKtre les icones estelle cohérente avec la hiérarchie des principes graphiques étudiée 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 d’une petite supérette. *eluici permet de gérer distinctement les ventes et les commandes du magasin, ainsi que d’assurer un suivi des stoc0s. ?our 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 chaKne de magasins concernée. Deux propositions sont envisageables pour organiser les menus du programme ;
EDITER Ventes
IMPRIMER
ENVOYER
VENTES Editer
Commandes
Imprimer
Stocks
Envoyer
COMMANDES
STOCKS
) 5 4n considérant les critFres ergonomiques de astien et /capin, quelle organisation vous paraKt la plus appropriée 3 2 5 2uelle est la logique qui a présidé à chacune de ces deux organisations 3 *onclusion.
—
16
© J-Y Antoine
IHM
(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 présenter différentes copies d’écran révélant un problFme de conception ergonomique donné. " chaque fois, il vous est demandé d’expliquer quel est le problFme que risque de rencontrer l’utilisateur, et de le relier le problFme de conception sousacent à 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 l’impression sous différents s%stFmes d’exploitation à interface graphique. *ompareE les points forts et les points faibles de ces différentes solutions.
a. Microsoft Windows XP
b. Apple Mac OS X
c. Linux (distribution Fedora 8)
—
17
© J-Y Antoine
IHM
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 G6' ou de messagerie pour évaluer la qualité de leur interface en matiFre de choix de police de caractFre. =ous avons considéré les logiciels suivants; 1maa 5 *e gratuiciel permet lTédition H_/IH_O de fichiers G6'. Dans la (vieille) version d’"ma%a figurée ici, modifier la police de caractFre dTune partie de texte revient à sélectionner des boutons radios dans une fenAtre popup ;
oilla hunderbird 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 comboliste 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 affichées correspondent aux plus fréquentes (présentation statique; choix défini lors de la conception). 'es autres sont données par ordre alphabétique.
,loc otes 5 'e loc =otes est un accessoire de icrosoft HindoLs qui permet simplement lTédition de fichiers "/*II. " ce titre, lTédition de documents aux st%les complexes ne répond 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 (paramétrage) du logiciel qui sera conservée à la fermeture et sera réutilisée pour lTaffichage de tout document ultérieur. Dans le loc =otes, modifier la police de caractFre dTaffichage se fait suivant un menu de sélection spécifique (boite de dialogue) se présente comme suit ;
—
18
© J-Y Antoine
IHM
Word — /ous lTéditeur icrsoft Hord (!ffice HindoLs J), la définition de la police de caractFres se fait soit par un menu contextuel réduit qui s’ouvre prFs de la Eone de texte à modifier (à gauche), soit depuis une boite de dialogue plus complFte attachée au ruban (à droite). 'e menu contextuel offre un rendu de la police, une information sur les polices !pen 6%pe. ?ar ailleurs, il présente en premier lieu des polices de thFme, puis les polices utilisées récemment et enfin une liste statique ordonnée alphabétiquement de polices. *ette liste prend presque toute la hauteur lar geur de l’écran.
'e sousmenu sTaffiche sous la forme dTune boite de dialogue comporte lui plusieurs signets o[ ont peut sélectionner (entre autres) sa police dans une comboliste. 'es polices sont affichées de maniFre statique, dans l’ordre alphabétique. n aperMu, visible sous tous les signets, s%nthétise toutes les options paramétrables dans la boite de dialogue. n message en bas de la fenAtre précise quel t%pe de police (!pen 6rue 6%pe ou, par exemple ici, ?olice de thFme) est utilisé et quelles sont les propriétés 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 réaliser un logiciel de traitement de texte d’images 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.
) 5 !n demande de grouper ces fonctions sous différents sousmenus dont vous définireE le nombre et les titres. DéfinisseE ensuite lTorganisation de vos fonctions dans chaque sousmenu (vous pouveE également définir des sous menus sous ces sousmenus). 2 5 2uel(s) principe(s) aveEvous retenu pour lTorganisation des items dans les menus 3 *e principe estil identique dans chaque menu 3 *onclusion 3 3 5 *ombien aveEvous défini dTitems dans votre barre de menu 3 2uel le nombre mo%en dTitems dans chacun de vos sousmenus 3 "veEvous défini une arborescence de profondeur supérieure à deux 3 /i oui, quelle est la profondeur de votre menu 3 *es valeurs sontelles 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 demandeElui de répartir les différentes fonctions dans chaque sousmenu ainsi défini. *ompareE sa catégorisation à celle que vous avieE prévu. DiscuteE des différences rencontrées ; vous incitentelles à r eprendre vos regroupements 3 —
19
© J-Y Antoine
IHM
Même exercice : on se propose de réaliser un traitement d’images qui autorise les fonctions suivantes: Aide, Aide contextuelle, Ajout Texte, Ajuster l’image à la fenêtre, Annuler, Antiparasites, Aucune Sélection, Augmenter le contraste, Balance des couleurs, Conseil du jour, Copier, Coller, Coller comme nouvelle image, Colorier sélection, Couper, Créer image par capture d’écran, Créer image à partir d’un scanner, Déplacement, Désaturer, Détection de contours, Dupliquer Image, Effacer contenu image, Effet soleil levant, Effet toile impressionniste, Effet mosaïque, Enregistrer, Enregistrer sous, Fermer image, Flou gaussien, Flou cinétique, Gomme, Historique d’Annulation, Imprimer, Inverser sélection, 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, Préférences, Quitter, Rétablir, Retourner, Renforcer la netteté, Rotation droite, Rotation gauche, Sélectionner Tout, Sélection par couleur, Sélection rectangulaire, Sélection à main levée, Supprimer les yeux rouges, Taille de l’impression, Taille de l’image, Zoom avant, Zoom arrière
Exercice 19 - Signifiance des icônes (objectif 4.2.1.) !n désire réaliser lTinterface dTun logiciel de création vidéo. *e s%stFme 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. !n doit pouvoir également gérer les transitions entre deux séquences (fondus enchaKnés par exemple), soustitrer une séquence ou encore aouter des effets spéciaux. 'Tensemble du montage vidéo est sauvegardé dans un fichier de proet. "u total, lTensemble 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.
) 5 Définir un icne 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 lTénoncé). 2 5 ontreE à votre voisin les icnes que vous aveE défini. "rrivetil à retrouver la signification de chacun dTeux 3 2uelle est la caractéristique des icnes qui posent problFme3 3 5 !rganiseE vos icnes par groupes de signification. 'eur identification estelle 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 d’application et présentant néanmoins des défauts d’utilisabilité. *es erreurs sont dues à une utilisation à mauvais escient des obets de base des interfaces HI? (menus, boutons etc..) ; choisir le bon t%pe d’obet, mais également l’utiliser en respectant les critFres ergonomiques vus en cours n’est en effet pas si évident que cela. Cas d"utilisation ) X $o7er,uilder
Dans la version considérée ici, le logiciel Poer!uilder fait appel à des menus trFs graphiques. !n donne cidessous l’évolution de l’interface suivant les actions successives de l’utilisateur. ?ouveEvous lister les problFmes ergonomiques rencontrés. *ertains relFvent de recommandations trFs spécifiques, mais dans d’autres cas, il s’agit de principes ergonomiques trFs généraux qu’il vous est d emandé d’identifier.
Cas d’utilisation 2 – Webform —
20
© J-Y Antoine
IHM
+e&form était un petit gratuiciel disponible initialement sous HindoLs P:. '’image cidessous montre un exemple de boite de
dialogue proposé à l’utilisateur. 'e rendu de cette boite donne un aperMu de l’évolution de la charte de couleurs adoptée par HindoLs depuis sa version P: usqu’au nouveau HindoLs /even. ais mis à part ce cté suranné, quel reproche pourrieE vous faire à ce Lidget d%namique 3
Cas d’utilisation 3 – Page de téléchargement d’un logiciel
'a page affichée cidessous permet de récupérer 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 d’une 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 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 ?
—
21
© J-Y Antoine
IHM
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 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
Office Windows 8
—
22
© J-Y Antoine
IHM
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 ?
—
23
© J-Y Antoine
IHM
&nterfaces WWW Exercice 22 - Quelques pages d'accueil problématiques (objectif 5.2.4 mais aussi 2.2.1, 5.2.1 et 5.2.3.) Cas d"usage ). 'a figure ciaprFs 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 ;
—
24
© J-Y Antoine
IHM
?our évoluer trFs peu en 781, vers l’interface (partielle) suivante ;
Cas d"usage 2. 'a figure page suivante correspond à la page dTaccueil dTun site marchand proposant à chacun la création, lThébergement et le référencement dTannuaires HHH. *ette page dTaccueil a été mise à our cette année par un étudiant de aster 7 lors de son stage. ?ouveEvous me dire quelles sont les recommandations quTil nTa pas suivi à cette occasion. !n cherchera là encore à relier toute remarque à des critFres ergonomiques étudiés en c
—
25
© J-Y Antoine
IHM
Cas d"usage 3. 1ccenture ( !n considFre la page dTaccueil du site de la société #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 général nTest pas respecté de ce point de vue 3 "urieEvous dTautres critiques à faire 3
4t voici la version franMaise du mAme site, en 781 ;
—
26
© J-Y Antoine
IHM
Cas d"usage 4. Cit Grou% ( !n considFre maintenant le site itiGroup, dans sa version 788J. 2uelle question va se poser le primoutilisateur à son arrivée sur la page 3 2uel est le problFme de conception rencontré 3 2uel critFre ergonomique général en est affecté 3
'a version 788 de ce site atelle amélioré la situation 3
—
27
© J-Y Antoine
IHM
?our son 788S anniversaire, *I6I Oroup a renouvelé l’aspect de son site en 787 (principe conservé en 781)
'es carrés affichés sous le 6oLer ridge permettent, lors de leur survol, l’accFs à de nouveaux sousmenus (cf image ci dessous). Il en est de mAme pour le petit icne ` sur la droite, mais cette fois il vous faudra cl iquer.
'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 l’utilisateur ; bleu foncé pour le menu supérieur, liens soulignés pour le menu inférieur.
2ue penseEvous de cette nouvelle organisation de la page d’accueil 3 2.
&u%er / ( '’image cidessous présente l’ancien site (788J) de la chaKne de supermarché . 'orsqu’on sélectionne + es —
28
© J-Y Antoine
IHM
courses - dans la Eone de menu de gauche, on sousmenu se développe (cf. image précédente) qui laisse le choix entre quatre options (autres magasins , bonnes affaires, points onus, bons de réduction). 'a bande horiEontale rouge en haut de l’interface sert également de barre de menu.
).
$age d"accueil X *e site respectetil les recommandations ergonomiques en matiFre de page d’accueil HHH. /i non, %atil des raisons qui peuvent ustifier le choix des concepteurs.
2.
$age de domaine X /i on sélectionne l’option +ons de réduction- dans le menu précédent, la page d’accueil est remplacée par la page de domaine suivante. 2ue penseEvous de cette gestion de l’interaction 3
'a version 787, touours en place en 781, de ce site atelle correctement résolu les problFmes évoqués 3 Voici quelques exemples de pages Heb collectées sous ce site. De nouveaux problFmes se sontils glissés dans cette nouvelle version. #ccueil X /ur la page d’accueil, la barre horiEontale bleue supérieure permet d’accéder aux souspages du site par un
simple clic. 'a forme des éléments de ce menu change lors d’un survol souris. 'a barre verticale présentée plus bas change l’affichage de la vidéo présentée dans le cadre qu’elle introduit (ici ; vidéo + 'a sélection onus de novembre -. *ette vidéo change dFs le survol d’un élément de ce menu.
—
29
© J-Y Antoine
IHM
Page artes-U X !n retrouve la mAme Eone de menu horiEontale que sur la page d’accueil (en haut de page). /ur la gauche
apparaKt une Eone de menu spécifique à cette page.
Page onseils /U X !n retrouve la mAme Eone de menu horiEontale que sur la page d’accueil (en haut de page). Ici, un
second menu est également présent, sous forme d’onglets colorés positionnés dans un cadre spécifique.
—
30
© J-Y Antoine
IHM
Exercice 23 - Bétisier 2014 des erreurs sur site WWW ?etit florilFge des erreurs ergonomiques relevées sur les sites HHH francophones au début de l’année 781> Cas d"!tude ) X la /=*$ remporte la palme de la conception la moins acceptable pour cette erreur qui n’est pas spécifique au Heb mais à des recommandations ergonomiques générales. /aureEvous la détecter 3
Cas d"!tude 2 X *heE "maEon, nous sommes en présence d’une erreur spécifique au Heb de gravité trFs modérée, mais tout de mAme, il s’agit d’une erreur qui est tellement répétée dans tous les traités d’ergonomie Heb qu’on s’étonne de la trouver sur un site aussi important.
—
31
© J-Y Antoine
IHM
Cas d"!tude 3 X Dart% n’aurait sans doute pas dN signer un contrat de confiance avec le concepteur de son site marchand. ?armi les multiples errements de conception que présente 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, l’affaire est bien gérée malgré le menu principal à hauteur de logo. /aurieEvous expliquer pourquoi 3
Cas d"!tude 5 X ?roblFme trFs mineur pour cette page interne au site du ournal '’4quipe. Vous aureE donc peutAtre du mal à le détecter. Il est toutefois révélateur des soucis qui peuvent survenir lorsqu’on s’en remet à un moteur automatique pour générer automatiquement du contenu. —
32
© J-Y Antoine
IHM
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 n’en vois pas le bénéfice), il est plus circonspect dans le cas de ?hotoHeb. "veEvous trouvé ce point commun 3
—
33
© J-Y Antoine
IHM
Exercice 24 - Gestion de zones de navigation: onglets et combi-listes(exam 2008 – objectif 5.2.4) n 28, 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 idée précise d’achat ou vague, pour un expert connaissant bien le site ou un novice etc>
Alapage
Amazon
FNAC
n 2)2, "lapage a malheureusement eté l’éponge face à la concurrence. 'es sites restants ontils gagné au change 3
FNAC
1ma4on X 'e site amaEon a lui abandonné les onglets qu’il fut le premier à promouvoir. 4taitce une bonne idée 3 —
34
© J-Y Antoine
IHM
?our vous aider dans votre réflexion, avieEvous découvert le minimenu + ?arcourir les boutiques - 3
Exercice 25 - Structuration de site Web par tri par carte : mairie de Blois /i l’organisation d’une page Heb a une influence nette sur son utilisabilité, la structuration des différentes pages Heb, leur regroupement en rubriques est autant essentielle. Dans cet exercice, nous vous proposons de regrouper de maniFre cohérence les différentes rubriques existant à ce our sur le site Leb de la ville de lois à l’aide du tri par carte. *haque ligne du tableau cidessous correspond à une page du site, classés par ordre alphabétique. " l’aide de la méthode du tri par carte, regroupeE ces pages en rubriques, sachant que vous Ates libres du niveau de l’arbre hiérarchique de navigation à définir. "ctualités "rtisanat et *ommerce "nimaux en ville "ssociations /énoirs lois ?ass alades D oum ibliothFque *arnaval à lois *entre /ociaux *inémas *h^teau &o%al *ollFges et '%cées Déplacement et stationnement 4cole 4conomie 4mploi 4nseignements artistiques 4nvironnement 4spaces Verts et Cardins $Ate de la usique Ouichet nique Oastronomie Gabitat Gistoire
'iste des commerces &Fglementation pour les animaux en ville Informations à destination des retraités $ormule de réduction pour les touristes
obilité dans la ville ; transports en communs, Eones de par0ing, train> *arte scolaire primaire Informations sur l’attractivité économique du territoire "ctions pour l’emploi, liens vers ?ole 4mploi, mission sociale> *onservatoire de musique etc> 4nsemble des actions de la ville en fonction de l’environnement ?rogramme de la fAte de la musique ?résentation du lieu d’accueil commun des services éducatifs ?age sur la rénovation des faMades, le logement social, les éco d’énergie
—
35
© J-Y Antoine
IHM
Internet, obile et Hifi Ceunesse Cournées du patrimoine 'ieux sportifs 'udothFque aisons de quartier aison de la agie archés =ouveaux habitants ?ratiquer un sport ?etite 4nfance ?ersonnages célFbres ?ropreté et déchets ?roet 4ducatif 'ocal &endeEvous de l’histoire &estauration /colaire /anté /port et école 6arifs 6ravaux rbanisme /alons congrFs Venir à lois 'a Ville en images Ville d’"rt et d’Gistoire Vie étudiante
?oints Hifi disponibles pour tout le monde 'istes des actions, lieux pour les ados anifestation organisées dans le cadre de ces ournées O%mnases, piscines >
?résentation de la manifestation d’accueil des nouveaux habitants 'iste des clubs sportifs Informations sur les crFches etc> Oestion de la collecte des déchets ?résentation des actions réunissant les acteurs locaux de l’enseignement primaire $estival lié à l’histoire *antines Infos sur les actions de la ville en matiFre de santé "ide financiFres au familles, informations tarifaires sur les services de la ville ?rogramme des travaux dans la ville Orands proets urbanistiques à venir ?rogrammes des salons
?résentation générale de lois, ville patrimoniale
Exercice 26 - Structuration du site Web de l’EPAD : Sarkozy, les profs d’IHM lui disent merci ! 4n 788 fin d’année 788P, on causait beaucoup de la tentative de Cean /ar0oE% de suivre les traces de son président de ?apa en montant à l’assaut de l’4tablissement ?our l’"ménagement de la Défense (4?"D), premier strapontin vers la prise de contrle du *onseil Oénéral des Gautsde/eine. 'a Défense est en fait gérée par deux structures, l’4?"D qui s’occupe plus du développement de ce quartier d’affaire et l’4?OD (4tablissement ?ublic pour la Oestion de la Défense) qui gFre au quotidien le site. 'es deux structures font site HHH commun, ce qui donne un site asseE touffu répondant à des besoins différents et s’intéressant à des interlocuteurs variés allant de l’homme d’affaire au touriste aponais. "u total, le premier niveau d’exploration du site nous retourne déà une cinquantaine de pages ; la taille idéale pour travailler la structuration d’un site à l’aide de la méthode du tri par carte. *onsidéreE donc les pages décrites cidessous et organiseE les en différentes rubriques qui se retrouveront comme domaines d’entrée sur le menu principal du site. *ompareE ensuite votre travail avec celui effectué par les concepteurs de l’4?"O#4?OD ; leurs choix ontils été avisés 3 Ce me demande si le Hebmaster ne serait pas un eune de 7< ans n’a%ant réussi à obtenir sa '7 informatique> "ccFs piéton
?lan dTaccFs à la dalle piétonne de la Défense
"ccFs transports
?lan dTaccFs à la Défense en &4& et étro
"ccFs voiture
?lan dTaccFs à la Défense en voiture
"genda
*alendrier des prochaines manifestations, quTelles soient des expos ou des forums défenséens
"vis dTattributions
&ésultats des derniFres "! à marchés publics
*=I6
?lans de chaque tour de la Défense
*ontact
$ormulaire de contact avec le service communication de lT4?"D # 4?OD
Defenscopie
?age de téléchargement de la version électronique du magaEine culturel de la Défense
Détour Documents officiels
?age de téléchargement de la version électronique de la lettre dTinformation de lT4?OD#4?"D 6éléchargement des fichiers sur lTensemble des documents officiels utiles en particulier pour la réponses aux "!
4ntreprise
?age dTaccueil du site propre de ?aris 4ntreprises
4?"D
?résentation des missions de lT4tablissement ?our lT"menagement de la Défense)
4?OD 4?OD#4?"D ; qui fait quoi 3
?résentation des missions de lT4tablissement ?ublic de Oestion de la Défense Description des rles respectifs de lT4?"D et de lT4?OD
4space *ulturel
Informations sur les expositions de lT4space *ulturel de la Défense
4space Info
?résentation de lTespace de communication qui sTaccompagne dTun usée de la Défense
4space Verts
Description de lTensemble des espaces verts du site
—
36
© J-Y Antoine
IHM
$orums Défenséens
?résentation des forums dTéchange organisés par lT4?OD#4?"D
Orande "rche
Informations sur la visite de la Orande "rche de la Défense
Ouide "udio
6éléchargements de fichiers audioguide sur les principaux b^timents du site
Gistoire
Gistoire de lTaménagement de la Défense
Info 6rafic
4tat du trafic en région parisienne
'Tart à la Défense
?etit introductif à la présence dTuvre 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
archés en cours
Informations sur les appels dToffres ("!) de marchés publics en cours
=ouvelle signalétique
?résentation de la nouvelle signalétique utilisée à la Défense
=uméros utiles
"nnuaires des services de la Défenses
!rganiser une conférence
?age dTaccueil vers le site du *=I6 (organisation dTexpositions, de conférences) site à part
?ar0ings
'ocalisation et autres renseignements sur les par0ings couverts de la Défense
?hotothFque
4nsemble de photographies sur la Défense
?lan des uvre dT"rts
'ocalisation de toutes les uvres dTarts présentes sur le site
?lan des tours
?lans de chaque tour de la Défense
?lan des travaux
'ocalisation et description des travaux en cours sur la Défense
?&
?lan dTaccFs pour les personnes à mobilités réduites
?resse
4nsemble des communiqués de presse de lT4?"D#4?OD
?rocédures dématérialisées
'ien vers la plate forme électronique de réponse aux appels dToffres
?roets ?ublications
?roets de construction sur la Eone Défense ?age de commande de toutes les publications sur la Défense (plans, rapports, guides touristiques, DVD)
&ecrutement
'iste des postes proposés au recrutement à lT4?OD et à lT4?"D
&éunions
*alendrier des prochaines réunions des forums défenséens
/cultpures en plein air
'ocalisation de lTensemble des sculptures en plein air du parc
/ervice archés ?ublics
$ormulaire de contact vers le service des marchés 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 Défense
VidéothFque
4nsemble de vidéos sur la Défense
Visite Ouidée
?lan interactif de la Défense
—
37
© J-Y Antoine
IHM
&nterfaces intégrées )(mbedded interfaces* Exercice 27 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. b. c. d. e.
principes ergonomiques de base en particulier en matière d’organisation choix et implémentation du dispositif d’entrée choix et implémentation du dispositif de sortie choix des polices de caractères utilisées utilisation des couleurs
—
38
© J-Y Antoine
IHM
+ispositifs d'entrée Exercice 28 -
Keystroke model
A votre avis, quel est la méthode la plus rapide pour effacer une partie de texte sous un éditeur standard. Trois techniques sont a priori envisageables : soit vous vous placez à la fin du texte à supprimer et vous appuyez autant de fois que nécessaire la touche de suppression ( suppr), soit vous sélectionnez l'ensemble du texte indésirable à supprimer avant d'appuyer (une fois) cette touche. Enfin, une fois le texte sélectionné, vous pouvez sélectionner l'item "supprimer" du menu édition de la barr e de menus. 1.
En vous appuyant sur le modèle Keystroke, estimez le temps nécessaire pour la suppression d'un texte de 3 caractères adjacents.
2.
Faites de même pour une suppression de 10 caractères adjacents.
3.
Les résultats obtenus sont-ils intuitifs ? Quels sont les limites de ces calculs ?
Exercice 29 Fitts
Evaluation expérimentale des paramètres de la loi de
On considère quelques temps (en secondes) mesurés lors d'un expérimentation avec un dipositif particulier. Pour ce dispositif, pouvez-vous déterminer (grossièrement) les valeurs des constantes expérimentales C1 et C2 utilisées de la loi de Fitts. d \ D 0.10 0.50 1.00
1.00 0.31 0.13 0.07
D 1 1 d 0,1 0,5 2D/d 20 4 log2(2D/2) 4,32 2
5.00 0.45 0.30 0.22
1 1 2 1
10.00 0.56 0.38 0.32
5 5 5 0,1 0,5 1 100 20 10 6,64 4,32 3,32
10 0,1 200 7,64
10 10 0,5 1 40 20 5,32 4,32
Exercice 30 Loi de Fitts et organisation de menus(adapté du cours de M. Baudoin-Lafon) On considère quelques temps (en secondes) donnés par la Loi de Fitts pour un dispositif donné: d \ D 0.10 0.50 1.00
1.00 0.46 0.30 0.23
2.00 0.53 0.37 0.30
3.00 0.57 0.41 0.34
4.00 0.60 0.44 0.37
6.00 0.64 0.48 0.41
On désire comparer le temps moyen pour la sélection d'une commande dans un menu hiérarchique à deux niveaux (barre de menus -> menu1 -> menu2). Le temps pour effectuer un clic de la souris est de 0.1s. Comparer ce temps avec une configuration sans menu hiérarchique (menus -> menu1) mais dans laquelle les sous-menus sont trois fois plus long en moyenne que les menus hiérarchiques. Chaque item d'un sous-menu est séparé du suivant par une distance de 0,5 cm. 1.
Calculer le temps moyen de sélection pour des tailles de menus non hiérarchiques de respectivement 12 et 24 items. Conclusion?
2.
On désire maintenant comparer les résultats obtenus pour des menus de 24 items avec une solution à trois niveaux pour laquelle les sous-menus sont de taille six fois moindre. Retrouve-t-on un résultat connu?
—
39
© J-Y Antoine
IHM
(valuation Exercice 31 - Stratégie d’évaluation : des spécifications d’utilisabilité à leur caractérisation 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 d’art, le second au site d’un musée quelconque. " chaque fois, le "! (maKtre d’ouvrage) a défini, lors de la rédaction des spécifications du site, un certai n nombre de conditions qui devront Atre satisfaites en matiFre d’utilisabilité. 1.
"fin de définir votre stratégie d’évaluation, pouveEvous relier ces demandes aux dimensions d’utilisabilité étudiées en cours ; efficience, efficacité, caractFre engageant, tolérance aux er reurs, apprenabilité. '%osition em%oraire
.
'e site doit inciter les personnes qui ne connaissent pas l’artiste faisant l’obet 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éà experts de l’artiste.
7.
n des obectifs principaux du site doit Atre d’encourager la découverte et donc l’exploration aussi libre que possible du site, mAme si on découvre pour la premiFre fois la galerie.
<.
'e site doit répondre clairement et facilement aux questions que se posent les visiteurs sur l’artiste et l’exposition (localisation, heures d’ouvertures>)
1.
"ucune information donnée sur l’artiste ne doit Atre erronée, il en va de la réputation de la galerie auprFs des acheteurs et des spécialistes.
:.
'a navigation doit mettre l’accent plus sur l’intérAt des uvres présentées (qui doivent Atre rendues sur le site avec une grande qualité de restitution) que sur la vitesse de téléchargement des pages. 6outefois, des mesures doivent Atre prises pour éviter le blocage de la navigation lors du téléchargement des images en haute définition.
us!e
.
'e musée est ouvert au grand public ; tout le monde doit pouvoir l’explorer sans avoir une expérience particuliFre de la navigatioantoinen Heb.
7.
'a structure du site doit favoriser l’accFs aux informations les plus importantes (expositions en cours, horaires d’ouvertures, tarifs, accFs etc.) en un minimum de navigation.
<.
'’apparition d’une page dTerreur du fait du site mAme doit Atre absolument proscrite.
1.
'e site doit donner un aperMu fidFle de ce que propose le musée aux personnes qui ne l’ont encore amais visité. Il est essentiel que le site leur donne envie de venir le visiter.
:.
'e site doit pouvoir répondre aux principales questions des visiteurs et l’accFs à ces informations doit Atre aisé à trouver.
,.
"u vu des ces spécifications, pouveEvous hiérarchiser les facteurs d’utilisabilité à tester lors de l’évaluation 3
C.
?our chaque facteur d’utilisabilité testé, proposeE une métrique quantitative d’évaluation.
Exercice 32 - Méthodes d'évaluation : système d'information touristique (adapté de Preece, 1994) 'Toffice du tourisme de la ville de Vannes souhaite développer une borne dTinformation touristique qui sera située dans ses locaux. *e s%stFme interactif autorise une seule modalité dTentrée ; lTécran tactile. ne spécification complFte du s%stFme ainsi quTun premier protot%pe ont été él aborés, et lToffice désirerait une évaluation ergonomique du produit avant dTaller plus loin dans le développement du s%stFme. 'es qualités auxquelles doit répondre ce s%stFme concernent avant tout lTaffichage graphique (icnes, couleurs, s%mboles), la facilité dTaccFs à lTinformation et la facilité dTutiliser les menus présents sur lTinterface à lTaide de lTécran tactile. !n sTinterroge également sur le t%pe dTinformations supplémentaires qui pourraient intéresser les utilisateurs. *ette évaluation doit Atre réalisée dans le mois à venir, vous disposeE dTune personne a%ant une bonne expérience en matiFre dTévaluation des interfaces ainsi que de matériel vidéo. ?ar ailleurs, les concepteurs du s%stFme sont prAts à modifier la structure et les aspects graphiques de lTinterface si nécessaire. ?ouveEvous déterminer un ensemble de méthodes dTévaluation qui permettraient de répondre à ces besoins 3
Exercice 33 - Evaluation expérimentale : cas d’école !n considFre un site de commerce électronique dont une nouvelle version doit Atre conMue, dans l’obectif d’un accroissement des ventes et du nombre de clients de ce site marchand. ?lus précisément, ce nouveau site doit apporter des réponses à deux soucis principaux ;
—
40
© J-Y Antoine
