Universit F.

Rabelais de Tours
UFR Sciences et Technologies Master Informatique

Ergonomie des IHM

TRAVAUX DIRIGES

Enseignant

Jean-Yves ANTOINE

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

IHM

Principes ergonomiques gnraux

Exercice 1 Facteurs humains et qualit ergonomique des interfaces (exam 2005 ; objectif 2.2.1.)

1. Quel principe ergonomique, tudi en cours, est non respect par laffichage derreur prsent droite ?

2. Dans FileMaker Pro, comme dans biens dautres logiciels interactifs, les options non utilisables un moment donn sont affiches en gris lgers dans les menus. Quel problme prsente visiblement lutilisation des menus FileMaker Pro ? Quel principe ergonomique est visiblement non respect dans laffichage prsent droite ?

3. Contrairement aux diteurs de textes complets, WordPad comme le bloc notes Windows ne peuvent grer plusieurs documents en mme temps. Sous WordPad, lutilisateur vient de commencer la rdaction dun nouveau document. En essayant douvrir un autre document existant pour en copier un extrait dans le texte en court de rdaction, il obtient le message affich sur la boite de dialogue droite. Pourquoi ce comportement pose-t-il problme ? Quel qualit ou principe ergonomique nest pas respect ici ? Proposez une autre stratgie pour grer ce problme.

J-Y Antoine

IHM

4. Quel facteur de qualit ergonomique illustre cette fentre de paramtrage du driver dune souris ?

5. Considrez ces deux exemples de fentres pop-up actives lors de la demande de sortie d'un logiciel. Laquelle des deux solutions proposes vous parat-elle la plus approprie d'un point de vue ergonomique ? Quel est le principe ergonomique qui n'est pas respect en priorit ici ? A votre avis, quelle situation conduira le plus frquemment une erreur dans le cas de l'interface mal conue ?

Exercice 2 -

Quand Microsoft est pris en faute (objectif 2.2.1)

Dans cet exercice, on considre diffrentes boites de dialogue, ou copies d'interface issues de logiciels dvelopps par la socit Microsoft. Ces affichages prsentent quelques dfauts ergonomiques. Pour chaque exemple, expliquer ce qui pose problme, quel problme ergonomique est rencontr et proposer une solution pour amliorer l'interface. 1 On commence tout d'abord par un exemple clbre, qui correspond au menu de la barre des tches slectionner pour arrter son ordinateur ou changer de compte utilisateur. Cette aberration ergonomique avait mme l'objet d'une blague de la part du prsident de General Motors qui essayait d'imaginer ce que serait la conduite d'une de ses automobiles si elles taient conues comme les ordinateurs tournant sous XP Aprs avoir prcis quel est le problme rencontr et y en avoir propos une solution, expliquez pourquoi cette faute de conception n'est dsormais plus vraiment problmatique. 2 Eteindre son ordinateur semble tre une action problmatique pour les concepteurs informatiques. Dans les premires gnrations de Mac OS, pour jecter la disquette (les Mac ne disposant pas de bouton sur la face avant de l'ordinateur), il fallait en effet jeter l'icne reprsentant le disque dur dans la poubelle. Expliquez en quoi la solution envisage par Apple posait encore plus de problme que celle rencontre sous Windows. Quels sont les principes 3 J-Y Antoine

IHM

ergonomiques qui sont enfreints ici ? 3 La boite de dialogue donne page suivante s'affiche lors de la rinstallation d'un lment de la suite Office Professional pour Windows XP. Quels sont vos commentaires ?

4 Lorsqu'on intgre un nouveau dessin (Insertion / Image / Nouveau dessin) dans un document Word, une zone de dessin apparat directement dans le texte l'endroit de l'insertion : L'utilisateur peut redimensionner directement cette zone de dessin en saisissant les poignes visibles sur les cts. Une fois la taille recherch choisie, l'utilisateur dessine directement (sans appel un diteur d'image) dans cette zone l'aide la barre de dessin qui est prsente en bas de l'interface Word.

Une fois le dessin termin, un simple clic en dehors de la zone de dessin permet de continuer le travail d'dition. Si on veut agrandir aprs-coup la zone de dessin, une slection sur celui-ci affiche nouveau les poignes que l'on peut tirer. Par contre, pour rduire le dessin dans sa globalit (et non pas lui garder sa taille dans une zone plus grande, il faut aller (clic droit) dans les proprits de l'objet ("format de la zone de dessin") et dterminer un rapport de rduction / agrandissement dans l'onglet taille :

J-Y Antoine

IHM

Aprs slection du rapport de rduction (ou d'agrandissement dsir), un appui sur le bouton "OK" permet une mise jour de l'affichage avec le dessin redimensionn. Quels sont les points forts et les points faibles de l'ensemble de l'IHM propose pour intgrer raliser des dessins dans Word ? Justifiez votre rponse. Exercice 3 Les principes ergonomiques gnraux s'appliquent aussi au WWW (objectif 2.2.1.)

1. L'image ci-dessous montre la partie principale de la page d'accueil d'un site WWW ddie l'tude de la biologie des champignons. A quel principe ergonomique, trs mal gr la base, les concepteurs du site ont-ils tent de remdier ?

2.

Observez les deux formulaires de saisie ci-dessous, inspirs d'un site WWW rel. Laquelle de ces deux versions vous semble-t-elle la plus ergonomique ? A quel(s) principe(s) ergonomique(s) rpondent ces amliorations ?

3. La capture d'cran (page suivante) est issue d'un usage rel du site de rservation de la SNCF. Le 6 janvier 2008 au soir, j'ai cherch rserver un trajet Vannes -> Lyon pour le 8 avril 2008 (demande rsume gauche de l'cran). Voici le rsultat de ma recherche. Qu'observez-vous ? Pouvez-vous deviner ce qui explique cet affichage ? Quel recommandation ergonomique a, selon vous, t joyeusement foule du pied par la SNCF ?

J-Y Antoine

IHM

Exercice 4 -

Linteraction ne se limite pas aux logiciels (examens 2005 et 2006 ; objectif 2.2.2)

2005 : Avant larrive des portables, les tlphones classiques ( touche ou cadran) ne comportaient pas dcran. 1. Rflchissez lutilisation dun tel combin. Donnez au moins un critre ergonomique qui ntait pas respect par ce type de combin, et que lutilisation dun cran a pu corriger. 2. Proposez une solution pour remdier ce problme sans utilisation dun cran. 2006 : La plupart des ergonomes travaillant pour les firmes automobiles prdisent que le volant de direction aura disparu de nos tableaux de bord d'ici une vingtaine d'anne. Il sera remplac par un joystick quivalent aux commandes des avions. Dans une voiture, les mouvements vers la droite et la gauche du joystick greront la direction, tandis que les mouvements en avant et en arrire piloteront les acclrations et freinages. Ce type de dispositif quipe dj les voitures adaptes certains handicaps. Renault a dj prsent des vhicules d'exhibition sans volant. 1. Discutez des avantages et inconvnients de ce nouveau dispositif de commande. 2. Expliquez ce qui pourrait empcher cette prdiction de se raliser (hors contraintes conomiques, bien sr). Exercice 5 Lutilisatibili concerne l'informatique comme d'autres domaines (objectif 2.2.2.)

Votre serviteur loue Blois un petit appartement assez vtuste dans lequel les boutons associs sa plaque de cuisson ont t effacs par le temps. Rsultat des courses, je ne sais jamais quel bouton correspond quelle plaque lectrique... 1. Observez les dessins ci-dessous, qui reprsentent diffrentes configurations possibles pour une plaque 4 feux. Pouvez-vous classer ces configurations d'un point de vue ergonomique ?

2. Pourriez-vous imaginer une situation analogue dans le cas de la ralisation d'un logiciel interactif ? Exercice 6 Manipulation directe (adapt de A. Dix et al., 2004 objectif 1.1.1.) En 1982, Ben Shneiderman a dfini diffrents critres pour dfinir le concept de manipulation directe qui venait juste de rencontrer un succs (d'estime seulement cette date) avec la sortie de l'Apple Lisa et du Xerox Star. Dans cet exercice, on considre un diteur graphique de texte de type Microsoft Word ou Star Office. 1 En tudiant les critres dfinis par Shneiderman, dire en quoi cet type de logiciel rpond au concept de manipulation directe, et par quels aspects il s'en loigne. 6 J-Y Antoine

IHM

Exercice 7 -

Gestion de messages d'erreurs (objectif 3.2.2.)

Les deux figures ci-aprs montrent l'affichage d'un message d'erreur sous deux navigateurs (respectivement Mozilla et Opera) lorsqu'un site WWW n'est pas atteignable (le plus souvent pour cause de connexion internet dfaillante). Critiquez les solutions proposes par ces deux navigateurs en reliant vos remarques des critres ergonomiques vus en cours.

Exemple 1 Mozilla

Exemple 2 Opera

Considrez maintenant le message d'erreur ci-dessous, issu d'une application Mac ... pas si ancienne que cela. Pourriez-vous dire quels sont les points forts et les points faibles de cette gestion des erreurs ?

Exercice 8 -

Design gnral de l'affichage (inspir du cours d'ergonomie du CNAM ; objectif 3.2.1.)

On propose, pour un logiciel grand public (diteur de texte par exemple), le schma gnral de l'affichage ci-aprs.

Titre
Zone des commandes (boutons)

Zone de travail

Exit

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

J-Y Antoine

IHM

1 Enoncer les points qui vous paraissent satisfaisants dans cette interface. Justifiez votre rponse. 2 Enoncer les points qui au contraire ne vous pas paraissent satisfaisants. Justifiez votre rponse. 3 Proposez une autre organisation gnrale de l'affichage pour rpondre ces problmes. Exercice 9 Disposition gnrale de linterface : quelques exemples (objectif 3.2.1)

Cas dutilisation 1 MIDI Orchestrator MIDI Orchestrator est un petit logiciel de lecture de fichier MIDI. A priori, cette interface na rien de particulier. On se rend toutefois compte que la zone suprieure (o est crit MIDI Orchestrator untitled sur la figure ci-dessous) sert de barre dinformation changeant suivant ltat du systme. Cette zone est effectivement une des plus visible de linterface. Pourquoi ce choix de conception est-il problmatique ? Cas dutilisation 2 IBM Aptiva Communicator Center Que pensez-vous de lorganisation de cette interface de configuration de tlcopieur dvelopp par IBM ?

Exercice 10 -

Gestion des erreurs : rdaction des messages et codes couleur (objectifs 3.2.1/3.2.2)

Cet exercice est un florilge de mauvaise gestion derreurs que je dois au Interface Hall of Fame que vous pouvez consulter lURL suivante : http://homepage.mac.com/bradster/iarchitect/shame.htm. Ce site truculent nest plus mis jour depuis 2000, mais la plupart des erreurs qui ont t recueillies sont toujours dactualit. Reconnaissons tout de mme 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 dutilisation 1 Microsoft Outlook Microsoft est plutt dou pour la gestion des erreurs. Les personnes mal intentionnes diront que cest parce que leurs logiciels sont tout sauf fiables, en oubliant que la gestion des erreurs participe de la robustesse dun logiciel. Mais en tous cas, sur le logiciel de messagerie Outlook (version 2000), les dveloppeurs furent mal inspirs. Quel sont les problmes poss par ce message derreur :

Cas dutilisation 2 vouloir trop bien faire : SGBD Cet exemple est tir dune bote de dialogue dun SGBD sous Windows dont lobjectif est de prvenir au mieux les erreurs. Au final, croyez-vous que ce but est bien atteint ? Pourquoi ?

Cas dutilisation 3 les quiproquos dEasy CD Creator Sil est moins connu que les outils de la suite Nero, Easy CD Creator est un des logiciels daide au gravage les plus rpandus. Ce qui ne le dispense pas dvaluation ergonomique Considrez les deux messages ci-dessous, obtenus dans deux situations diffrentes en fin dopration. Avez-vous des commentaires faire ?

J-Y Antoine

IHM

Cas dutilisation 4 Quand Internet Explorer cause ma grand-mre. Lorsque nous surfons avec son navigateur, Microsoft est soucieux de notre confidentialit, et il le prouve avec cette bote de dialogue. La firme de Bill Gates naurait-elle pourtant pas oubli une recommandation essentielle en termes de messages derreur dans cette version ?

Cas dutilisation 5 CuteFTP CuteFTP est un des utilitaires graphiques de gestion de transferts FTP les plus rpandus. On retrouve sur ce pop-up dune de ses anciennes versions une des erreurs de conception les plus frquentes en matire de gestion des erreurs. Erreur frquente car, avouons-le, assez insidieuse. Saurez-vous la dtecter ?

Cas dutilisation 6 Langue au chat ? Remercions Microsoft pour cette boite de dialogue que je classerais dans mon podium personnel des messages derreurs les plus problmatiques. Ce message risque fortement de perturber lutilisateur, pourquoi ? Au minimum, que proposeriez-vous pour le sortir dembarras ici ? Quel est la recommandation qui na pas t respecte avant tout ?

Cas dutilisation 7 AK-mail, logiciel tout risque ? Cest 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 leon de ses cours dergonomie. Quelle recommandation ergonomique essaie-t-il de respecter ici ? Quel est le facteur dutilisabilit qui risque dtre affect par son choix de conception ? Au passage, ne sauriez-vous pas imaginer la raison (historique) qui a conduit ce choix ?

J-Y Antoine

IHM

Exercice 11 -

Evaluation d'une IHM : phmride lectronique (objectifs 2.2 ; 3.2)

En astronomie, un phmride est une table qui indique la position de tous les astres chaque moment (jour, date, heure) donn et ce pour une position donne. Avec l'outil informatique, ces tables austres sont dsormais la porte du grand public. De nombreux logiciels jouant le rle d'phmrides sont dsormais commercialiss et permettent une visualisation directe du ciel une date et une position donne. On propose ci-aprs l'interface d'un logiciel d'phmride compos d'une seule fentre. Principes de fonctionnement Le systme affiche l'cran une vue partielle du ciel suivant les informations fournies par l'utilisateur. Pour cela, celui-ci doit dfinir : les conditions d'observation : il doit donner la date d'observation (au format jj/mm/aaaa), l'heure GMT (et non pas locale, au format hh:mm), ainsi que la position (latitude et longitude) du lieu d'observation. les paramtres de vise (on n'affiche qu'une partie du ciel l'cran) : l'orientation se dfinit, comme sur les tlescopes monture quatoriale, en terme d'ascension droite (h, mn, sec) et de dclinaison (degrs). On doit galement dfinir un facteur de grossissement (zoom) dont dpendra la largeur du champ de vision. Le facteur de grossissement est un entier.

Une fois que ces paramtres sont dfinis, un clic sur le bouton "afficher" permet de voir le ciel virtuel correspondant aux conditions d'observation demandes. Lorsqu'une information saisie n'est pas valide, aucune information ne s'affiche immdiatement. C'est au moment du lancement de l'affichage que le message "Paramtres de visualisation errons veuillez corriger" apparat dans la zone prvue pour l'affichage du ciel. Les donnes rentres saisies restent apparentes dans la zone de saisie. Un clic sur un objet affich dans le ciel permet d'avoir diffrentes informations sur ce dernier : nom de l'objet cleste, position en ascension droite et dclinaison magnitude (intensit de l'clat peru) distance la Terre. Cette distance peut tre exprime en Unit Astronomique (UA) ou en Annes Lumires (UL) suivant un choix dtermin par l'utilisateur (boutons radio)

Ce logiciel doit tre utilisable aussi bien par des astronomes amateurs (connaisseurs du domaine) que par des novices. 1 Faites lvaluation critique de cette interface, en vous appuyant sur les principes de Norman, Nielsen, Bastien et Scapin. 2 Proposez une autre interface pour rpondre aux problmes rencontrs.

10

J-Y Antoine

IHM

Exercice 12 -

Formats daffichage (adapt de Nogier 1995, pp. 57-58 objectif 3.2.1)

On considre linterface dune base de donnes, ou bien encore un formulaire de saisie de donnes sur un site WWW, dans lesquels lutilisateur doit saisir des informations concernant son nom, son prnom, sa fonction et son adresse lectronique. Quatre solutions sont proposes pour le design de cette zone de saisie: a) Nom Prnom Fonction Courrier Electronique Nom Prnom Fonction Courrier Electronique b) Nom Prnom Fonction Courrier Electronique Nom Prnom Fonction Email

c)

d)

(optionnel)

Critiquez chacune de ces propositions : quels sont leurs points forts et leurs points faibles ? Exercice 13 Conception : aide la saisie de donnes (contrle 2006 objectifs 2.2.2 et 4.2.2)

Pour une application interactive quelconque, les utilisateurs doivent remplir dans un formulaire une information concernant leur pays d'origine. Sachant qu'il existe plus de 200 pays reconnus par l'ONU, prsentez deux stratgies d'organisation de votre interface pour faciliter cette saisie, et discutez-en les avantages et les inconvnients a priori en regard des tches ralisables et des connaissances des utilisateurs. Exercice 14 Etude de l'ergonomie de l'interface d'un logiciel interactif (objectifs 2.2 ; 3.2 et 4.2)

Dans ce problme, on vous prsente deux articles qui dcrivent l'interface utilisateur du systme Sibylle d'aide la communication pour personnes handicapes dveloppe au sein du laboratoire d'informatique de l'Universit de Tours. Le second article prsente, pour vous aider dans cet exercice, la nouvelle interface telle que modifie suite un stage de Master Recherche ralise l'Universit de Bretagne Sud. Le premier article prsente la version originelle de cette interface, telle qu'elle a t dfinie en 2006 par un stagiaire de Master Recherche de l'Universit de Tours. Il vous est demand de caractriser les faiblesses ergonomiques de la premire interface, en l'analysant directement ou ventuellement en vous aidant de la nouvelle interface (qui a rpondu certains problmes mais pas tous). A chaque fois : on dcrira le problme ergonomique relev en expliquant en quoi il gnra l'utilisateur on caractrisation la recommandation ergonomique (suivant une des typologies vues en cours) qui est en cause on expliquera quel facteur d'utilisabilit sera affect par ce problme on donnera une solution au problme (ou on dira comment la nouvelle version de l'interface a rsolu le problme. Article 1 Ancienne version du logiciel Sibylle : Considrations ergonomiques et adaptation aux besoins des utilisateurs

1. Introduction Les communicateurs, ou systmes de communication palliative (AAC pour Alternative and Augmentative Communication en anglais) ont pour objectif de restaurer les capacits de communication de personnes souffrant dun handicap moteur trs svre (Infirmits Motrices Crbrales, Sclroses Latrales Amyotrophiques, syndrome denfermement,) se traduisant par une ttraplgie ou une athtose accompagne dune perte de lusage de la parole. La communication est alors prive de son support oral habituel, de mme que les capacits trs limites de contrle physique de lenvironnement par la personne handicape empchent toute saisie directe de message sur un clavier dordinateur. 11 J-Y Antoine

IHM

Ces systmes reposent sur lcriture de phrases laide dun clavier virtuel affich lcran. Dans le cadre de clavier dfilement linaire, un curseur se dplace caractre par caractre, le long du clavier. Lintervention de la personne handicape se limite la dsignation des symboles lorsque le curseur est sur la touche ou le caractre dsir. Cette slection est ralise laide dun dispositif physique qui remplace le priphrique dentre de lordinateur. Cette interface matrielle dpend des capacits motrices de lutilisateur. Il peut sagir dun joystick, dune commande oculaire, dune commande par souffle, dun simple bouton poussoir, etc. Une caractristique importante est le degr de libert quelle permet pour manipuler lordinateur. Le plus souvent, le patient na plus que la possibilit de raliser lquivalent dun simple clic (commande de lenvironnement de type tout ou rien ). Une fois le message saisi, il peut tre vocalis par lintermdiaire dune synthse de parole artificielle (text-to-speech synthesis). Le problme majeur des systmes de communication assiste est la lenteur de la composition des messages. La tche de saisie est gnralement longue (1 5 mots par minute en moyenne) et fatigante pour les sujets. Pour acclrer la saisie, deux approches complmentaires sont envisageables. La premire vise optimiser la slection sur le clavier simul en faisant en sorte que le curseur dfilant arrive au plus vite sur le caractre recherch. La seconde consiste limiter le nombre de saisies en prdisant les mots qui peuvent survenir la suite de ceux qui ont dj t saisis. (...) 2. Les claviers simuls Appel aussi clavier l'cran ou clavier logiciel, le clavier virtuel est un outil logiciel qui permet l'accs l'criture sur ordinateur et remplace toutes les fonctionnalits d'un clavier standard. La slection des touches se fait par plusieurs modes de pointages qui varient selon les facults motrices et de contrle de l'utilisateur. Aujourdhui, les claviers virtuels sont de plus en plus adapts l'handicap de l'utilisateur. Il existe une diversit de types de claviers virtuels. Les diffrences portent surtout (..) sur leur mode de pointage (...) Le mode dinteraction avec un clavier virtuel est troitement li au degr de libert offert par linterface matrielle. Pour lutilisateur qui ne peut pas manipuler directement le pointeur de la souris, la slection des symboles ne peut tre ralise que par un systme de dfilement automatique du curseur. Le curseur met en surbrillance successivement les touches une une. Lorsque le curseur dsigne la lettre dsire, lutilisateur na plus qu valider. Ce mode de saisie est excessivement lent. Pour cela, la solution actuellement adopte par plusieurs claviers logiciels est le dfilement ligne / colonne . La slection se fait alors en deux temps: slection de la ligne o se trouve la lettre puis slection de la lettre dans la ligne. (...) Dans le systme Sibylle, nous avons essay de dpasser les performances du dfilement ligne/colonne l'aide d'un dfilement linaire dynamique. L'ide est la suivante : aprs chaque saisie d'une lettre, on va reconfigurer le clavier pour afficher en premier (dans l'ordre de dfilement) les caractres les plus probables, compte tenu de ceux qui viennent d'tre dj saisis. En dpit de ces performances, la saisie reste toujours lente et pnible. C'est pourquoi nous essayons galement d'viter des saisies l'utilisateur, par prdiction de mots. L'ide tant ici de complter automatiquement un dbut de mot pour viter la saisie de ses dernires lettres. Certains systmes envisagent cette aide sous forme de compltion directe partir du mot le plus probable. D'autres comme Sibylle prfrent laisser l'utilisateur choisir dans une liste de mots (de 5 7 mots les plus probables pour le systme Sibylle). 4. L'interface du systme Sibylle Le clavier virtuel de Sibylle offre un ensemble de fonctionnalits permettant de saisir, le plus souvent par un mode de dfilement linaire, des caractres soit dans un diteur intgr, coupl une synthse vocale, soit dans une autre application MS-Windows. Dans cette partie, nous prsentons l'interface de la version 2.7.2 de Sibylle actuellement installe au CMRRF de Kerpape. Linterface est compose dune zone ddition (figure 1, h) et de plusieurs sous-claviers. Ces derniers regroupent les fonctionnalits par contexte d'utilisation (sous-clavier de commandes (figure 1, a), sousclavier de lettres (figure 1, c), sous-clavier des chiffres (figure 1, d), de dplacement (figure 1, b) et la liste des mots prdits (figure 1, e). Ces regroupements permettent de minimiser le nombre de touches balayer lors de la saisie. Cette disposition est modifiable par lutilisateur. En effet, il peut modifier la place et la dimension de chaque sous-clavier selon ses prfrences et ses besoins. Certaines touches frquemment utilises sont volontairement dupliques dans plusieurs sous-claviers (comme cest le cas de certaines touches du clavier standard). Cette redondance permet dviter le dplacement d'un sous-clavier l'autre.

12

J-Y Antoine

IHM

4.1

Le sous-clavier de commandes

Il sagit du sous-clavier principal qui comporte les commandes standards pour ouvrir, enregistrer, retourner la ligne, effacer le dernier caractre saisi, etc. Il contient aussi les commandes pour le contrle du systme dexploitation (touche daccs au menu dmarrer de Windows) et autres applications laide des commandes (Alt, Tabb). Lutilisateur peut choisir de faire prononcer la phrase saisie laide de la synthse vocale en cliquant sur lune des deux touches, pour couter toute une phrase ou bien le dernier mot saisi. La navigation entre les diffrents sous-claviers est ralise en slectionnant des touches spciales (figure 1, f) de basculement de clavier (dites aussi touches de saut de clavier ) situes dans le sous-clavier de commandes et galement dans les autres sous-claviers.

(e) (f) (a)

(c) (h)

(d) (g) (b)

Figure 1 : Linterface de Sibylle (version 2.7.2).

4.2

Le sous-clavier de lettres

Afin de permettre une large adaptation, il est possible de choisir entre trois types dorganisation pour le sousclavier des lettres dans Sibylle, le clavier alphabtique (clavier par dfaut), le clavier frquentiel (ESAIN) et le clavier dynamique dont lorganisation des touches change chaque saisie de lettres en fonction des rsultats de la prdiction. Quelque soit le type dorganisation, le sous-clavier des lettres comprend les lettres accentues et non accentues et les caractres de ponctuation. Pour le clavier dynamique, les touches des lettres apparaissent dune faon dynamique dans la partie suprieure du sous-clavier. Alors que les caractres de ponctuation sont toujours statiques et situs dans la partie basse du sous-clavier. Une touche de saut (figure 1, g) permet daccder rapidement aux caractres de ponctuation, cette touche est situe en haut droite dans le sous-clavier de lettres. Les caractres majuscules sont accessibles par des touches de changement de mode : mode majuscule (ABC) ou caractre suivant en majuscule (Abc) du sous-clavier de commandes. 4.3 Le sous-clavier de chiffres

Le sous-clavier de chiffres correspond au pav numrique dun clavier standard. Lutilisateur peut y accder partir du sous-clavier de commandes. Il contient une touche de retour ce dernier. 4.4 Le sous-clavier de dplacement

Les commandes de dplacement sont indispensables non seulement pour naviguer au sein dun diteur de texte mais aussi pour se dplacer dans une arborescence de rpertoires ou dans une page Web. Le sousclavier dplacement comprend les touches de dplacement gauche, droite, haut et bas, la touche Tab, la touche dbut et la touche fin.

13

J-Y Antoine

IHM

4.5

Le sous-clavier liste des mots prdits

Une liste de cinq mots prdits dispose verticalement gauche du sous-clavier des lettres est accessible partir de ce dernier. Une touche de saut de claviers permet de revenir au clavier de lettres. 4.6 Modes dinteraction

Sibylle permet lutilisateur de slectionner une touche selon trois modes. Le mode souris est destin aux personnes pouvant encore contrler une souris ou un joystick. Les modes dfilement linaire (clavier de lettres dynamique) et ligne/colonne (clavier de lettres statiques) sont destins pour les personnes ne pouvant faire quun simple clic. Il est possible de rgler la vitesse de dfilement. Ce paramtre personnalisable qui contrle le temps durant lequel le curseur reste sur une touche est trs important pour la personne handicape. Cela lui permet de prendre le temps pour dcider son choix de touche et de raliser son clic avant que le curseur qui se dfile ne passe la touche suivante. Il est galement important de proposer un feedback visuel continu sous forme dun curseur glissant sur la touche courante pour permettre lutilisateur danticiper le passage la touche suivante. Ce feedback peut tre inactiv par lutilisateur. 4.7 Le clic long

En pratique, si la prdiction linguistique permet de rduire le temps de saisie et la fatigue qui en rsulte, la composition dun document textuel reste pnible du fait du recours de trop nombreux sauts de claviers (mise en majuscule, caractre spcial, correction, etc.). Pour les personnes qui peuvent matriser suffisamment leur clic en terme de dure, nous avons implment un clic long de dures et de fonctions paramtrables. Le clic long consiste appuyer de faon prolonge sur une touche quelconque jusquau changement de la couleur de sa bordure. Laction associe au clic long est alors ralise par le systme, elle peut correspondre par exemple au retour la premire touche du sous-clavier des lettres ou leffacement du dernier caractre saisi ou encore au passage en majuscule. Lactivation de loption clic long permet de minimiser un certain nombre de dfilement selon laction qui lui correspond. En termes de feedback, un changement de couleur du curseur indique lutilisateur quil ralise un clic long. Article 2 Nouvelle version du logiciel 2. Prsentation gnrale du systme SIBYLLE Avant de prsenter en dtail le moteur de prdiction de mots que nous avons ralis, il est utile de prsenter le fonctionnement du systme SIBYLLE tel quil apparait un utilisateur. La figure 3 (page suivante) prsente linterface utilisateur tenant lieu de clavier virtuel. Bien quutilisable avec une souris, SIBYLLE sadresse en premier lieu des personnes lourdement handicapes qui ne peuvent actionner quun simple contacteur. Dans ce cas, il est utilisable en dfilement linaire ou ligne-colonne. SIBYLLE existe en versions franaise, allemande et anglaise. Linterface de lapplication regroupe plusieurs sous-claviers qui permettent respectivement de slectionner des caractres, des nombres, des mots mais aussi des messages pr-enregistrs pour une communication durgence lie le plus souvent aux besoins vitaux de lutilisateur. Des touches de saut de clavier permettent de naviguer dun sous-clavier un autre suivant les besoins de la saisie. La figure 3 permet de distinguer les diffrents sous-claviers de linterface : le clavier de lettres, au centre, est utilis pour composer les messages caractre par caractre. Il ne comprend que des caractres alphabtiques avec leurs diacritiques, ainsi que lespace comme marque de fin de mot. Les caractres de ponctuation sont situs dans un clavier part. Cette organisation, que lon retrouve sur les claviers physiques classiques, est dicte par le caractre dynamique du sousclavier lorsquon se trouve en mode de dfilement linaire. Dans ce cas, la disposition des lettres est actualise aprs chaque saisie, afin de prsenter en priorit les lettres les plus probables compte tenu des caractres dj saisis. Un module de prdiction bas sur un pentagramme de lettres (Schadle et al. 2002) permet ainsi de prsenter la lettre attendue dans les trois premires positions en moyenne (2,7 pour le franais, 3,0 pour lallemand). Cette prdiction est par contre beaucoup plus friable si elle concernait les caractres de ponctuation. la liste de mots, sur la gauche de linterface, correspond aux prdictions lexicales donnes par SIBYLLE en fonction du message dj compos. Lorsque lutilisateur slectionne un de ces mots, le message est alors automatiquement complt, vitant ainsi la saisie des caractres correspondants.

14

J-Y Antoine

IHM

Figure 3. Interface utilisateur du systme SIBYLLE (version franaise 3.1) la barre horizontale de touches fonctions, en haut de linterface, permet le pilotage complet de lordinateur. Les versions antrieures du systme SIBYLLE ne comprenaient quun diteur de texte intgr. Le systme mule dsormais intgralement le clavier physique de lordinateur et est donc utilisable pour piloter toute application Windows. Ce permet lutilisateur dutiliser Sibylle pour crire des textes mais galement des courriers lectroniques, communiquer loral (synthse de parole) avec son entourage, naviguer sur la Toile, etc Afin de faciliter ce pilotage intgrale de lordinateur, ce sous-clavier prsente des touches de fonction ralisant des actions aussi diverses que la sauvegarde dun ficher, lappel la synthse de parole ou encore lappel du menu Dmarrer de Windows. comme sur un clavier ordinaire (Num-lock), le pav numrique prsente plusieurs modes dutilisation qui saffichent alternativement la demande. Il sert saisir des chiffres mais permet galement tre linsertion de signes de ponctuation. Enfin, un dernier mode associe chaque touche du sous-clavier la composition immdiate de messages prdfinis. Ces messages peuvent tre composs par lutilisateur luimme (cf. figure 3). On notera que linterface utilisateur est largement paramtrable pour rpondre au mieux aux besoins de lutilisateur. Ce dernier peut ainsi choisir son mode de slection (souris, ligne-colonne, linaire), la vitesse de dfilement du curseur, les dures minimales et maximales autorises pour un appui. Ces derniers paramtres sont essentiels pour distinguer les appuis volontaires des actions non matrises. De mme, SIBYLLE distingue des clics longs et trs longs quil est possible dassocier des actions prdfinies (effacement, mise en majuscule, aller en dbut de clavier...), ceci pour des utilisateurs qui arrivent contrler leur geste. La configuration de ces actions peut-tre trs fine, puisque lutilisateur a la possibilit de donner une smantique diffrente ces clics suivant le sous-clavier o se trouve le curseur.

Figure 4. Curseur avec barre

glissante de temporisation

Enfin, les personnes handicapes ont souvent du mal anticiper les sauts du curseur dune touche lautre. Lutilisateur slectionne ainsi frquemment la touche qui prcde ou qui suit celle recherch. Afin de rduire la frquence de ces erreurs trs pnalisantes, nous avons ajout une barre de temporisation qui glisse doucement du haut au bas du curseur lors de chaque saut (figure 4). Ce feedback dynamique permet lutilisateur de paramtrer temporellement ses actions. Nos exprimentations au centre de rducation de Kerpape (Mutualit du Morbihan) montrent quil permet une baisse significative des erreurs de slection.

15

J-Y Antoine

IHM

Interfaces WIMP
Exercice 15 Organisation d'items dans des menus (adapt de A. Dix et al., 2004 ; objectif 4.2.2)
fermer fichier, dessiner ligne changer police de caractres, droite, changer

On se propose de raliser un logiciel de dessin qui autorise les fonctions suivantes :

Nouveau dessin, ouverture fichier dessin, dessiner cercle, insrer texte dans objet, alignement texte, dupliquer, supprimer.

1 Dfinir une structure de menu pour grouper ces fonctions sous diffrents sous-menus dont vous dfinirez les titres. 2 Donnez votre voisin le titre des items que vous avez retenus pour votre barre principale de menu et demandez-lui de rpartir les diffrentes fonctions dans chaque sous-menu ainsi dfini. Comparez sa catgorisation celle que vous aviez prvue. Discutez des diffrences rencontres : vous incitent-elles reprendre vos regroupements ? Mme exercice mais plus complexe: on se propose de raliser un diteur de texte 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.

1 On demande de grouper ces fonctions sous diffrents sous-menus dont vous dfinirez le nombre et les titres. Dfinissez ensuite l'organisation de vos fonctions dans chaque sous-menu (vous pouvez galement dfinir des sous-menus sous ces sous-menus). 2 Quel(s) principe(s) avez-vous retenu pour l'organisation des items dans les menus ? Ce principe est-il identique dans chaque menu ? Conclusion ? 3 Combien avez-vous dfini d'items dans votre barre de menu ? Quel le nombre moyen d'items dans chacun de vos sous-menus ? Avez-vous dfini une arborescence de profondeur suprieure deux ? Si oui, quelle est la profondeur de votre menu ? Ces valeurs sont-elles compatibles avec les recommandations vues en cours ? 4 Donnez votre voisin le titre des items que vous avez retenus pour votre barre principale de menu et demandez-lui de rpartir les diffrentes fonctions dans chaque sous-menu ainsi dfini. Comparez sa catgorisation celle que vous aviez prvu. Discutez des diffrences rencontres : vous incitent-elles reprendre vos regroupements ? Exercice 16 Menus et respect des principes ergonomiques de base (objectifs 2.2.1, 4.2.2 et 4.2.4)

Dans ce problme, nous allons vous prsenter diffrentes copies dcran rvlant un problme de conception ergonomique donn. A chaque fois, il vous est demand dexpliquer quel est le problme que risque de rencontrer lutilisateur, et de le relier le problme de conception sous-jacent un critre ou principe ergonomique tudi en cours. 1. Pilote dimpression sur diffrents GUI On considre cette fois les boites de dialogue qui apparaissent lors de limpression sous diffrents systmes dexploitation interface graphique. Comparez les points forts et les points faibles de ces diffrentes solutions. a. Microsoft Windows XP

16

J-Y Antoine

IHM

b. Apple Mac OS X

c. Linux (distribution Fedora 8)

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 HTML ou de messagerie pour valuer la qualit de leur interface en matire de choix de police de caractre. Nous avons considr les logiciels suivants: Amaya Ce gratuiciel permet l'dition WYSIWYG de fichiers HTML. Dans Amaya, modifier la police de caractre d'une partie de texte revient slectionner les sous-menus Style puis Character Style dans la barre de menu. Un raccourci clavier (Ctrl i - Ctrl f) est disponible pour accder ce sous-menu qui se prsente comme ci-dessous:

Mozilla Thunderbird Il s'agit d'un logiciel gratuit de messagerie propos dans la suite Mozilla. Sous Thunderbird, la dfinition de la police de caractres se fait : soit par la slection des sous-menus Format puis Police de caractres dans la barre de menus, 17 J-Y Antoine

IHM

soit par slection dans une zone (lie une combo-liste) d'une barre de style toujours prsente l'cran. Quand elle n'est pas slectionne, cette zone affiche le 1er item de la liste (Largeur variable, cf. plus loin).

Quel que soit l'option suivie, la slection d'une de ces deux zones lance l'affichage d'une combo-liste qui utilise tout l'espace vertical disponible et est lie la zone de clic (fentre non repositionnable). En haut de la liste s'affichent deux options d'espacement (Largeur fixe et Largeur variable) puis les polices de caractres. Les trois premires polices affiches correspondent aux plus frquentes (prsentation statique: choix dfini lors de la conception). Les autres sont donnes par ordre alphabtique.

Bloc Notes Le Bloc Notes est un accessoire de Microsoft Windows XP qui permet simplement l'dition de fichiers ASCII. A ce titre, l'dition de documents aux styles complexes ne rpond pas au cahier des charges de cet utilitaire. Les actions sur les polices de caractres ne concernent ainsi pas le document dit: il ne s'agit que d'une option d'affichage (paramtrage) du logiciel qui sera conserve la fermeture et sera rutilise pour l'affichage de tout document ultrieur. Dans le Bloc Notes, modifier la police de caractre d'affichage revient slectionner les sous-menus Format puis Police dans la barre de menu. Un raccourci clavier (combinaison Alt O-P) est disponible pour accder ce sousmenu. Il s'active et est prsent l'cran (lettres O et P soulignes) sur appui de la touche Alt. Le menu de choix de la police (boite de dialogue) se prsente alors comme suit:

18

J-Y Antoine

IHM

On remarquera que le type de police (True Type par exemple) est reprsent par un icne. Un aperu est galement propos en bas de la bote de dialogue.

Word Sous l'diteur Micrsoft Word de la suite Office XP, la dfinition de la police de caractres se fait : soit par la slection des sous-menus
Format puis Police dans la barre de

menus. Ces sous-menus sont directement invocables par le raccourci Alt-T-O (combinaison toujours affiche l'cran: caractres souligns). Le sous-menu s'affiche sous la forme d'une boite de dialogue comportant plusieurs signets o ont peut slectionner (entre autres) sa police dans une combo-liste. Un aperu, visible sous tous les signets, synthtise toutes les options paramtrables dans la boite de dialogue. Un message en bas de la fentre prcise quel type de police (True Type par exemple) est utilis et quelles sont lesproprits de ce type de police (impression et affichage identique ou non).

Les polices sont prsentes de manire statique par ordre alphabtique, le curseur se positionnant 19 J-Y Antoine

IHM

automatiquement l'ouverture sur la police de caractre courante. La fentre est par ailleurs repositionnable. soit directement par slection dans une zone (lie une combo-liste) d'une barre d'outils prsente l'cran. Quand elle n'est pas slectionne, cette zone affiche la police correspondant au texte courant (o se trouve le curseur).

Le sous-menu qui s'affiche (cf. page suivante) est ici spcifique au choix de la police de caractres. Il correspond une liste combo attache (non repositionnable) la zone de saisie. La taille de la liste est fixe statiquement 12 items. L'organisation de la liste est par contre contextuelle : s'affichent en premier les 10 dernires polices styles utilises, puis l'ensemble des polices classes par ordre alphabtique. Lorsqu'on parcourt la liste avec l'ascenseur ou les touches up and down, les items contextuels sont galement concerns : c'est dire que le scroll ne se limite pas aux deux items initialement en bas de liste, mais qu'au contraire, l'ensemble des items se dplacent. L'aperu correspondant la police utilise est rendu directement dans le nom de celle-ci. Par ailleurs, le type de police (True Type par exemple) est figur dans la liste l'aide d'un icne.

PowerPoint Logiciel de prsentation de la suite Office XP, PowerPoint permet galement une gestion avance des styles de texte. Une fois un objet texte slectionn, la modification de la police de caractres se droule d'une manire analogue celle de Word, quelques exceptions prs : dans le cas d'une slection par la barre de menus, la boite de dialogue qui s'affiche ne propose pas d'aperu.

dans le cas d'une slection par la barre d'outils, le nombre de polices affiches est limit 9 items dont 6 contextuels.

Exercice 18 -

Organisation de menus et utilisibilit (inspir de Nogier, 2005 ; objectif 4.2.2. et 2.2.1.)

Dans cet exercice, on considre un systme de gestion dune petite suprette. Celui-ci permet de grer distinctement les ventes et les commandes du magasin, ainsi que dassurer un suivi des stocks. Pour 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 chane de magasins concerne. Deux propositions sont envisageables pour organiser les menus du programme : 20 J-Y Antoine

IHM

EDITER Ventes Commandes Stocks

IMPRIMER

ENVOYER

VENTES Editer Imprimer Envoyer

COMMANDES

STOCKS

1 En considrant les critres ergonomiques de Bastien et Scapin, quelle organisation vous parat la plus approprie ? 2 Quelle est la logique qui a prsid chacune de ces deux organisations ? Conclusion. Exercice 19 Signifiance des icnes (objectif 4.2.1.)

On dsire raliser l'interface d'un logiciel de cration vido. Ce systme doit pouvoir rcuprer des squences vidos existantes (importation) ou filmes en direct (enregistrer) puis en assurer le montage bouts bouts. On doit pouvoir galement grer les transitions entre deux squences (fondus enchans par exemple), sous-titrer une squence ou encore ajouter des effets spciaux. L'ensemble du montage vido est sauvegard dans un fichier de projet. Au total, l'ensemble 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. 1 Dfinir un icne pour chacune de ces fonctions en prenant garde les disposer n'importe o sur votre feuille (ne pas les disposer la suite dans le mme ordre que l'nonc). 2 Montrez votre voisin les icnes que vous avez dfini. Arrive-t-il retrouver la signification de chacun d'eux ? Quelle est la caractristique des icnes qui posent problme? 3 Organisez vos icnes par groupes de signification. Leur identification est-elle plus facile ? Exercice 20 Signifiance des icnes (objectif 4.2.1)

On considre la capture dcran ci-dessous, qui reprsente le panneau de configuration Windows XP dun ordinateur :

1. Pour chacun de ces icnes, donner la rgle (ressemblance, analogie, symbole, etc..) qui a prsid sa cration. 2. Discuter de la facilit didentification du sens de ces icnes, en la mettant en regard de sa rgle de construction : retrouve-t-on la hirarchie vue en cours ?

21

J-Y Antoine

IHM

Exercice 21 - Comment utiliser mauvais escient les objets WIMP (menus, boutons) (objectifs 4.2.2 et 4.2.4) Tout au cours de cet exercice, nous allons tudier des logiciels interactifs WIMP trs connus dans leur domaine dapplication et prsentant nanmoins des dfauts dutilisabilit. Ces erreurs sont dues une utilisation mauvais escient des objets de base des interfaces WIMP (menus, boutons etc..) : choisir le bon type dobjet, mais galement lutiliser en respectant les critres ergonomiques vus en cours nest en effet pas si vident que cela. Cas dutilisation 1 PowerBuilder Dans la version considre ici, le logiciel PowerBuilder fait appel des menus trs graphiques. On donne ci-dessous lvolution de linterface suivant les actions successives de lutilisateur. Pouvez-vous lister les problmes ergonomiques rencontrs. Certains relvent de recommandations trs spcifiques, mais dans dautres cas, il sagit de principes ergonomiques trs gnraux quil vous est demand didentifier.

Cas dutilisation 2 Microsoft Word 97 Word semble tre le logiciel roi en termes de flexibilit : en effet, il est mme possible de transformer, par un simple clic sur sa partie gauche suivi dun dplacement, la barre doutils horizontale en une superbe barre verticale. Quel pourrait-tre selon vous lintrt dune telle fonctionnalit ? Quen pensez-vous dun point de vue ergonomique ?

Cas dutilisation 3 Webform Webform tait un petit gratuiciel disponible initialement sous Windows 95. Limage ci-dessous montre un exemple de boite de dialogue propos lutilisateur. Le rendu de cette boite donne un aperu de lvolution de la charte de couleurs adopte par Windows depuis sa version 95 jusquau nouveau Vista. Mais mis part ce ct surann, quel reproche pourriez-vous faire ce widget dynamique ?

22

J-Y Antoine

IHM

Cas dutilisation 4 Formulaire denregistrement Les formulaires nexistent pas que sous les applications WWW. Quel(s) problme(s) ergonomique(s) pose le formulaire ci-dessous, dont le design est trs inspir par les recommandations que lon trouve sur les plateformes Linux ?

Cas dutilisation 5 Microsoft Exchange Microsoft na pas toujours accord la prminence aux tudes de son laboratoire dutilisabilit. Considrons par exemple le logiciel de messagerie Exchange, qui a prcd Outlook sous Windows. La boite de dialogue (extrait dune version datant de la fin des annes 90) ci-dessous tait active lorsquon voulait rechercher un message archiv dans sa messagerie :

Dans un premier temps, on choisissait la bote aux lettres considrer en cliquant sur le bouton Folder (ici, Inbox, dont le choix a t valid, ainsi que lindiqu le rendu gris de la zone de saisie). Ensuite, on dterminait ses critres de recherche en remplissant loisir les champs de saisie en regard des items considrer (From, Sent To). Plusieurs critres pouvaient tre considrs en parallle pour une mme recherche. Enfin, un appui sur un item Filter (non prsent ici) lanait la recherche. Quels problmes ergonomiques montrent ici que les ingnieurs de Microsoft ne maitrisaient pas encore parfaitement les concepts WIMP prs de 15 ans aprs leur dveloppement grand public par Apple ? Exercice 22 Les onglets, un type de menus particulier (objectifs 4.2.2 et 2.2.1.)

Les menus onglets constituent certainement le type de menus dont les concepteurs de logiciel 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 ?

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 23 J-Y Antoine

IHM

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

24

J-Y Antoine

IHM

Exercice 23 -

Signifiance des icnes : un exemple Web (inspir de Nogier 2005 ; objectif 4.2.1)

La capture dcran ci-dessous montre lancienne page daccueil de lESME Sudria, une petite cole dingnieur prive. Le graphisme, assez sympathique, fait appel des icnes dont le moins quon puisse dire est quils sont peu explicites. Scan Nogier intgrer 1 Cherchez trouver une signification chacun des icnes, en sachant que vous avez comme seule information que vous tes sur le site dune cole dingnieur. Comparez ensuite vos propositions avec celles de votre voisin. Conclusion ? 2 Sensible, peut-tre, aux critiques qua fait Jean-Franois Nogier dans son ouvrage, le site de lcole propose dsormais la nouvelle interface WWW donne page suivante. Que pensez-vous des icnes utiliss ? La leon a-telle entendue ?

3 En troisime anne, cette cole propose un cours dergonomie et IHM. Au vu de ce site WWW, vous pouvez une petite conclusion sur la pertinence du travail de la Commission des Titres dIngnieur et sur la qualit de nombre des formations dlivrant dsormais le titre dingnieur en France.

25

J-Y Antoine

IHM

Interfaces WWW
Exercice 24 IHM et Web (examen 2005 objectif 5.2.3) 1. Que pensez-vous de la gestion de menus de ce site WWW ? Reliez vos critiques des recommandations ergonomiques tudis en cours.

2. On prsente ci-dessous la page daccueil du site WWW officiel de la ville de Beaugency. Quel problme rencontre lutilisateur en arrivant sur ce site ? Quel principe ergonomique nest visiblement pas respect ?

Exercice 25 -

Critiques d'interface Web (examen 2006 objectifs 2.2.1, 5.2.1 et 5.2.3.)

1. La figure ci-aprs correspond la page d'accueil du site de renseignements Pages Jaunes . Critiquez cette page WWW en reliant vos remarques des critres ergonomiques vus en cours. 26 J-Y Antoine

IHM

2. La figure page suivante correspond la page d'accueil d'un site marchand proposant chacun la cration, l'hbergement et le rfrencement d'annuaires WWW (de type Yahoo !). Cette page d'accueil a t mise jour cette anne par un tudiant de Master 2 lors de son stage. Pouvez-vous me dire quelles sont les recommandations qu'il n'a pas suivi cette occasion. On cherchera l encore relier toute remarque des critres ergonomiques tudis en cours.

27

J-Y Antoine

IHM

3. La plupart des grandes gares SNCF sont dsormais quipes de hotspots WiFi qui permet tout un chacun de se connecter sur le rseau avec son ordinateur portable personnel. Ce service, gr par les oprateurs de tlphonie prsents sur le territoire franais, est payant. Lorsqu'il arrive dans une gare quipe et qu'il ouvre un navigateur sur son ordinateur, un utilisateur lamba se trouve automatiquement redirig vers la page d'accueil ci-dessous :

Outre le service payant d'accs intgral Internet, sur la gauche, ces hotspots proposent nanmoins deux services gratuits : iDTGV, qui permet de rserver en ligne un billet de TGV sur certaines relations, et l'agence en ligne voyages-sncf.com. Cette agence en ligne, qui fait partie des 5 sites francophones les plus parcourus, permet aussi bien d'acheter un billet de train que d'avion, de louer une voiture ou rserver une chambre d'htel. Un utilisateur qui n'a pas choisi de prendre une connexion payante peut ainsi accder cette agence en ligne en cliquant sur l'icne correspondante. Il se retrouve sur une page d'accueil identique celle de voyages-sncf.com :

28

J-Y Antoine

IHM

Tous les boutons de ce simili-service WWW sont accessibles : la figure ci-dessous montre ainsi qu'il est possible de renseigner une demande de vol comme sur le service WWW standard :

Cependant, les oprateurs de tlphonie qui supportent le cot de ces hotspots ont veill au grain lors de leur ngociation avec la SNCF et ont impos que le maximum de services soient payants. En effet, si je clique sur le bouton recherche aprs avoir dfini un vol sans avoir choisi une connexion payante, je me retrouve sans autre forme de procs sur la page d'accueil du hotspot vue prcdemment (en fait, seules les informations sur les trains sont accessibles dans cette rplique de l'agence en ligne...). Pouvez-vous expliquer ce qui a motiv ergonomiquement le choix de cette stratgie d'interaction ? Quelles sont les inconvnients de tels choix ? Justifiez vos rponses en les mettant en relation avec des critres ergonomiques vus en cours. Exercice 26 Quelques pages d'accueil problmatiques (objectif 5.2.4)

On considre la page d'accueil du site de la socit Accenture. Selon vous, quel est l'activit de cette entreprise? A votre avis, quelles sont les zones qui sont cliquables sur cette page d'accueil ? Quelle critre ergonomique gnral n'est pas respect de ce point de vue ? Auriez-vous d'autres critiques faire ?

29

J-Y Antoine

IHM

On considre maintenant le site CitiGroup. Quelle question va se poser le primo-utilisateur son arrive sur la page ? Quel est le problme de conception rencontr ? Quel critre ergonomique gnral en est affect ?

Limage ci-dessous prsente lancien site de la chane de supermarch U. Lorsquon slectionne Mes courses dans la zone de menu de gauche, on sous-menu se dveloppe (cf. image prcdente) qui laisse le choix entre quatre options (autres magasins U, bonnes affaires, points Bonus, bons de rduction). La bande horizontale rouge en haut de linterface sert galement de barre de menu.

1. Page daccueil Ce site respecte-t-il les recommandations ergonomiques en matire de page daccueil WWW. Si non, y-a-t-il des raisons qui peuvent justifier le choix des concepteurs. 2. Page de domaine Si on slectionne loption Bons de rduction dans le menu prcdent, la page daccueil est remplace par la page de domaine suivante. Que pensez-vous de cette gestion de linteraction ?

30

J-Y Antoine

IHM

Exercice 27 -

Gestion de zones de navigation: onglets et combi-listes (exam 2008 objectif 5.2.4)

Comparez la gestion des zones de navigation des trois sites marchands ci-dessous. Quel est celui qui a la meilleure utilisabilit entre terme daccs rapide une ouvrage donn. Alapage

Amazon

FNAC

31

J-Y Antoine

IHM

Interfaces intgres (Embedded interfaces)

Exercice 28 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 32 J-Y Antoine

IHM

d. choix des polices de caractres utilises e. utilisation des couleurs

Dispositifs d'entre
Exercice 29 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. 2. 3. En vous appuyant sur le modle Keystroke, estimez le temps ncessaire pour la suppression d'un texte de 3 caractres adjacents. Faites de mme pour une suppression de 10 caractres adjacents. Les rsultats obtenus sont-ils intuitifs ? Quels sont les limites de ces calculs ? Evaluation exprimentale des paramtres de la loi de Fitts

Exercice 30 -

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 0.10 0.50 1.00 1.00 0.31 0.13 0.07 5.00 0.45 0.30 0.22 1 1 2 1 10.00 0.56 0.38 0.32

D 1 1 d 0,1 0,5 2D/d 20 4 log2(2D/2) 4,32 2

5 5 5 10 10 10 0,1 0,5 1 0,1 0,5 1 10 200 40 20 100 20 6,64 4,32 3,32 7,64 5,32 4,32

Exercice 31 -

Loi de Fitts et organisation de menus (adapt du cours de M. Baudoin-Lafon)

On considre quelques temps (en secondes) donns 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 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. 2. Calculer le temps moyen de slection pour des tailles de menus non hirarchiques de respectivement 12 et 24 items. Conclusion? 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?

33

J-Y Antoine

IHM

Evaluation
Exercice 32 - Stratgie dvaluation : des spcifications dutilisabilit leur caractrisation suivant plusieurs dimensions (adapt de Stone et al., 2005) On considre dans cet exercice la conception de deux sites WWW, le premier consacr une exposition temporaire dans une galerie dart, le second au site dun muse quelconque. A chaque fois, le MAO (matre douvrage) a dfini, leur de la rdaction des spcifications du site, un certain nombre de conditions qui devront tre satisfaites en matires dutilisabilit. A. Afin de dfinir votre stratgie dvaluation, pouvez-vous relier ces demandes aux dimensions dutilisabilit tudies en cours : efficience, efficacit, caractre engageant, tolrance aux erreurs, apprenabilit. Exposition Temporaire 1. Le site doit inciter les personnes qui ne connaissent pas lartiste faisant lobjet de cette exposition ne pas quitter le site et explorer ce dernier. Il doit galement fournir des informations nouvelles pour les historiens dart dj experts de lartiste. Un des objectifs principaux du site doit tre dencourager la dcouverte et donc lexploration aussi libre que possible du site, mme si on dcouvre pour la premire fois la galerie. Le site doit rpondre clairement et facilement aux questions que se posent les visiteurs sur lartiste et lexposition (localisation, heures douvertures) Aucune information donne sur lartiste ne doit tre errone, il en va de la rputation de la galerie auprs des acheteurs et des spcialistes. La navigation doit mettre laccent plus sur lintrt des uvres prsentes (qui doivent tre rendues sur le site avec une grande qualit de restitution) que sur la vitesse de tlchargement des pages. Toutefois, des mesures doivent tre prises pour viter le blocage de la navigation lors du tlchargement des images en haute dfinition.

2. 3. 4. 5.

Muse 1. 2. 3. 4. 5. B. C. Le muse est ouvert au grand public : tout le monde doit pouvoir lexplorer sans avoir une exprience particulire de la navigation Web. La structure du site doit favoriser laccs aux informations les plus importantes (expositions en cours, horaires douvertures, tarifs, accs etc.) en un minimum de navigation. Lapparition dune page d'erreur du fait du site mme doit tre absolument proscrite. Le site doit donner un aperu fidle de ce que propose le muse aux personnes qui ne lont encore jamais visit. Il est essentiel que le site leur donne envie de venir le visiter. Le site doit pouvoir rpondre aux principales questions des visiteurs et laccs ces informations doit tre ais trouver.

Au vu des ces spcifications, pouvez-vous hirarchiser les facteurs dutilisabilit tester lors de lvaluation ? Pour chaque facteur dutilisabilit test, proposez une mtrique quantitative dvaluation. Mthodes d'valuation : systme d'information touristique (adapt de Preece, 1994)

Exercice 33 -

L'office du tourisme de la ville de Vannes souhaite dvelopper une borne d'information touristique qui sera situe dans ces locaux. Ce systme interactif autorise une seule modalit d'entre : l'cran tactile. Une spcification complte du systme ainsi qu'un premier prototype ont t labors, et l'office dsirerait une valuation ergonomique du produit avant d'aller plus loin dans le dveloppement du systme. Les qualits auxquelles doit rpondre ce systme concernant avant tout l'affichage graphique (icnes, couleurs, symboles), la facilit d'accs l'information et la facilit d'utiliser les menus prsents sur l'interface l'aide de l'cran tactile. On s'interroge galement sur le type d'informations supplmentaires qui pourraient intresser les utilisateurs. Cette valuation doit tre ralise dans le mois venir, vous disposez d'une personne ayant une bonne exprience en matire d'valuation des interfaces ainsi que de matriel vido. Par ailleurs, les concepteurs du systme sont prts modifier la structure et les aspects graphiques de l'interface si ncessaire. 1. Pouvez-vous dterminer un ensemble de mthodes d'valuation qui permettraient de rpondre ces besoins ? Justifiez vos rponses.

34

J-Y Antoine

IHM

Exercice 34 -

Evaluation exprimentale : cas dcole

On considre un site de commerce lectronique dont une nouvelle version doit tre conue, dans lobjectif dun accroissement des ventes et du nombre de clients de ce site marchand. Plus prcisment, ce nouveau site doit apporter des rponses deux soucis principaux : 1. 2. Il est important quun utilisateur qui a une ide dj trs claire de son achat (par exemple, rfrence prcise du produit) puisse le commander le plus rapidement possible sur le site, Il est important que le site guide efficacement un utilisateur qui a une ide encore floue sur lachat effectuer (par exemple je voudrais acheter un rfrigrateur mais je ne sais de quel type voire quel cadeau je pourrais faire mes parents pour leur anniversaire ), lefficacit signifiant avant tout quune recherche exploratoire sur le site se traduira par un achat !

Cette petite dfinition des besoins tient lieu de cahier des charges pour la conception du nouveau site. La MAO tient toutefois ce que ces objectifs 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. A savoir : 1. Stratgie dvaluation Quelles sont la ou les populations cibles qui seront concernes ? Quels sont les critres dutilisatibilit (norme ISO par exemple) qui seront vrifis ? Quel protocole dvaluation prcis retenir ? Le cas chant, sur quelles mtriques baser cette vrification ? Plan dvaluation Comment seront recruts les utilisateurs ? Comment et o se drouleront les sessions dexprimentation : dans le cadre dune valuation exprimentale, quelles seront les tches tudies, et les techniques de recueil des donnes dobservation ? Phase dvaluation Ecrire le ou les scripts dvaluation correspondant(s). Analyse Comment seront analyses et synthtises les observations ?

2.

3. 4.

35

J-Y Antoine