Final de LOG2420 Interfaces utilisateurs, Questions de ...cours.polymtl.ca/MDesmarais/log2420/20191/Seances/final-nosol.pdf · prenant soin de les nommer et de les expliquer. Vous

Final de LOG2420 Interfaces utilisateurs, Questions derevision pour final 2008-2018

Enseignants : Michel Desmarais

2008-2018

— Le questionnaire comporte 109 questions et 82 pages.

Recueil de questions, LOG2420 Interfaces utilisateurs — Final — Questions de revision pourfinal 2008-2018

Question Points Question Points Question Points Question Points Question Points

1 0 23 4 45 2 67 13 89 8

2 0 24 4 46 5 68 4 90 5

3 0 25 8 47 0 69 3 91 4

4 0 26 3 48 0 70 5 92 4

5 0 27 5 49 31{2 71 9 93 3

6 0 28 0 50 2 72 4 94 4

7 6 29 7 51 2 73 4 95 4

8 2 30 41{2 52 41{2 74 3 96 7

9 7 31 3 53 4 75 8 97 2

10 0 32 3 54 2 76 10 98 2

11 3 33 11{2 55 2 77 7 99 5

12 2 34 2 56 51{2 78 4 100 10

13 2 35 4 57 21{2 79 5 101 5

14 2 36 5 58 11{2 80 4 102 3

15 3 37 3 59 3 81 13 103 2

16 2 38 4 60 2 82 10 104 4

17 1 39 2 61 2 83 8 105 3

18 2 40 2 62 6 84 3 106 4

19 1 41 1 63 4 85 5 107 3

20 2 42 4 64 3 86 8 108 3

21 6 43 3 65 2 87 6 109 6

22 2 44 2 66 2 88 6 Total: 4111{2

Page 1 de 82


1. Expliquez les differences entre l’architecture des deux systemes de fenetrage MS Windows(modele processeur unique) et X Window (modele client-serveur) en vous referant au gra-phique de couches ci-dessous.

Expliquez notamment :quel module ou librairie represente une couche dans chaque systeme respectif ; lesdifferences et les impacts de chaque architecture en termes de portabilite, performance,flexibilite, etc.

2. Vrai ou Faux? Expliquez votre reponse au besoin.

1. Selon le systeme de fenetrage utilise, lorsqu’une fenetre est obscurcie par une autre, puisqu’elle revient en surface, le reaffichage de la partie obscurcie peut se faire par la fonctionredraw/repaint, ou encore, etre pris en charge par le gestionnaire de fenetres.

2. La hierarchie de classes et la hierarchie d’instances dependent toutes deux de la boıte aoutils utilisee, mais sont independantes du gestionnaire de fenetres.

3. L’instruction de format CSS suivante :td .emphase { margin-left :1in ; text-weight :bold ;}

s’appliquera uniquement aux balises HTML qui ont la propriete class="emphase" etqui sont imbriquees entre les balises ătdą et ă/tdą

3. Decrivez 2 metriques objectives et 2 metriques subjectives pouvant etre utilisees pour des testsd’utilisabilite et specifiez precisement comment les mesurer.

4. Vous concevez une interface pour le controle a distance du systeme de domotique developpepar votre entreprise. Vous devez analyser le profil de vos usagers par un questionnaire quevous allez transmettre a 500 d’entre eux. Le sondage doit se limiter a 4 questions. Il faut doncchoisir les plus pertinentes. Formulez correctement ces 4 questions et justifiez leur importance.

5. Vous avez a definir deux taches pour un test d’utilisabilite concernant l’application de do-motique realisee pour votre TP. Decrivez votre demarche pour choisir les plus importantes etenoncez ces deux taches.

6. Les deux graphiques suivants schematisent la conception centree-systeme et la conceptioncentree utilisateur. Expliquez, en vos propres termes et selon votre perspective des enjeux de laconception d’interfaces interactives, la difference entre les deux approches et les implicationsqui en decoulent.

Page 2 de 82


7. Nous avons vu au cours que les langages de definition d’interface permettent de realiser unetelecommande universelle capable de controler des appareils aussi diversifies qu’une chaınestereo, un magnetoscope ou un four micro-onde, sans meme connaıtre les specifications four-nies par le fabricant.(a) [2 points] Decrivez les composants logiciels que l’appareil et la telecommande doivent

respectivement implementer pour realiser cette telecommande avec un langage dedefinition d’interface comme XUL (1/2 a 1 page max.).

(b) [2 points] L’architecture X Window pourrait-elle aussi etre une alternative viable pourla telecommande universelle ? Si oui, comment serait-elle implantee ? Justifiez votrereponse. (1/2 a 1 page)

(c) [2 points] Finalement, pourrait-on penser a implanter une architecture web pour realiserla meme fonctionnalite ? Si oui, comment serait-elle implantee ? Justifiez votre reponse.(1/2 a 1 page)

8. [2 points] Les sites qui effectuent des recommandations personnalisees aux utilisateurs,comme Amazon.com, se basent sur des indicateurs de profil d’interet (collaborative filtering).Decrivez une des techniques de ce type en expliquant le fonctionnement general des l’algo-rithmes bases sur le calcul de distance. (1/2 a 1 page max.)

9. Vous avez eu l’occasion de vous familiariser avec le site www.mangermontreal.com.Quelques ecrans du site sont reproduits a l’annexe B. Referez-vous a ce site pour repondreaux questions qui suivent.(a) [5 points] Identifiez cinq problemes de conception d’interface, un pour chaque sujet sui-

vant :

1. langage visuel ;

2. charge cognitive ;

3. heuristique de Tognazzini ou de Bastien et Scapin ;

4. solution de conception (dans le sens de design solutions de ISO 13407) ;

5. definition des exigences utilisateurs (ex. exigence mal definie ou non satisfaite).

Precisez, selon le cas, la regle, l’heuristique ou le principe en cause pour les problemesidentifies. Si vous relevez un probleme qui n’est pas apparent a partir des captures d’ecran,prenez soin de bien l’expliquer.La correction tiendra compte de la gravite du probleme, prenez donc aussi soin d’identifierles problemes qui vous semblent les plus importants.

Page 3 de 82


(b) [2 points] Definissez deux taches a effectuer pour un test d’utilisabilite du sitewww.mangermontreal.com. Justifiez pourquoi vous considerez ces deux taches ap-propriees.

10. Vous etes au service d’un grand cabinet d’avocats, d’environ 80 employes, dont pres de lamotie est composee d’avocats, et responsable des technologies de l’information. La directiona decide d’investir dans un nouveau systeme de gestion des dossiers clients et hesite entre deuxfournisseurs qui offrent des solutions specialisees pour les bureaux d’avocats. Ces solutions nenecessitent toutes deux que quelques adaptations aux besoins specifiques du cabinet.Vous croyez que le choix de la solution retenue doit absolument inclure le facteur utilisabilitedans l’evaluation. Justifiez pourquoi en redigeant un memo d’un paragraphe que vous trans-mettrez a la direction.

Annexe B, captures d’ecrans de www.mangermontreal.com

capture 1 : 1ere page capture 2 : accueil

capture 3 : apres GO capture 4 : menu ambiance

Page 4 de 82


capture 5 : Voir le menu (visible dans capture 3)du resto Lemeac

capture 6 : apres clique sur du menu

Page 5 de 82


Details de capture 2

Details de capture 3Page 6 de 82


11. Les pages d’accueil futur etudiant et etudiant actuel du site web de la Polytechnique sontreproduites en annexe.(a) [1 point] La page futur etudiant est beaucoup moins chargee que la page etudiant actuel.

Fournissez deux facteurs ergonomiques qui peuvent justifier cette difference.(b) [2 points] Identifiez 2 heuristiques de conception dans l’une ou l’autre de ces pages en

prenant soin de les nommer et de les expliquer. Vous pouvez vous inspirer des heuristiquesde Nielsen, de Bastien et Scapin, ou de Tognazzini. Ne reprenez pas les arguments dupoint precedent.

12. [2 points] Bien que souvent indispensables, les ergonomes considerent que les entrevues avecles utilisateurs sont generalement insuffisantes pour etablir les besoins utilisateur. Donnezdeux raisons qui justifient ce point de vue et deux exemples d’activites qui fournissent uncomplement aux entrevues et comblent ces insuffisances.

13. [2 points] Definissez une tache pour l’application que vous avez choisie pour votre TP1 etTP2, soit l’application d’achat ou de vente de livre Coopoly, ou l’application de classificationde photos pour un album. Presumez qu’elle serait realisee par cinq sujets (utilisateurs) lorsd’un test d’utilisabilite. Enoncez la tache de facon a ce qu’elle puisse etre presentee ou lue aun sujet qui participe au test. De plus, definissez deux criteres que vous utiliserez pour evaluerl’utilisabilite a partir de cette tache.

14. [2 points] Trois tests utilisateur sont realises sur un prototype d’interface. Le premier releve20 erreurs d’utilisabilite, le second en releve 15 autres, dont 10 nouvelles et 5 autres similairesau premier, puis finalement le troisieme test releve aussi 20 erreurs, dont les 5 memes erreurscommunes aux deux tests precedents, 5 autres communes avec le premier seulement et 4 autrescommunes avec le second seulement. Estimez le nombre de problemes encore presents. L’es-timation peut se baser sur un calcul approximatif, mais le calcul doit se baser sur l’applicationde la theorie.

15. Vous etes responsable du projet de developpement d’une application de reservation de salles al’Ecole Polytechnique. Les reservations sont faites par des employes de l’Ecole et on prevoitqu’une vingtaine d’employes l’utiliseront. L’acces a l’application de l’exterieur de l’Ecolen’est pas une priorite pour l’instant, bien qu’on puisse l’envisager dans le moyen terme.A titre de responsable, vous devez recommander l’une ou l’autre des options suivantes :(1) developper l’interface de l’application pour rouler en mode “client Web” dans un fure-teur et avec un serveur Web en Intranet qui aura acces a la base de donnees des salles, ou(2) developper plutot une application comme un programme independant, comportant une in-terface graphique construite a partir d’une boıte a outils, qui communiquera directement avecla base de donnees.Ecrivez deux textes, d’une demi-page chacun, qui exposent vos arguments pour que l’applica-tion soit ecrite :(a) [1 1{2 point] en mode “client Web” ;(b) [1 1{2 point] en mode application independante avec boıte a outils.

Au besoin, prenez soin de specifier vos hypotheses aux arguments avances.16. [2 points] Lorsqu’une fenetre est obscurcie par une autre, partiellement ou en entier, puis

qu’elle occupe a nouveau la position du dessus, la partie obscurcie doit alors etre reaffichee

Page 7 de 82


correctement. Fournissez deux solutions a ce probleme, connues et utilisees par des systemede fenetrage, et specifiez, pour chacune, si le traitement est la responsabilite du gestionnairede fenetres ou celle de l’application.

Annexe A — Pages d’accueil du site de la Poly

Accueil futur etudiant

Page 8 de 82


Accueil etudiant actuel

Page 9 de 82


17. [1 point] Le protocole HTTP est qualifie de “sans etat” (stateless). Il ne permet donc pas degarder l’etat de l’interaction avec l’utilisateur. Decrivez deux mecanismes pour que l’etat del’interaction soit conserve entre les echanges HTTP.

18. [2 points] La figure qui suit illustre une application qui peut s’adapter aux proprietes del’ecran d’affichage, dont l’un est une fenetre WIMP (ecrans 1 et 2) et l’autre pourrait etreun affichage de telephone cellulaire (ecrans 3 et 4). Les ecrans 1 et 3 rapportent des vueslegerement differentes des ecrans 2 et 4 en fonction du profil utilisateur.

Il existe plusieurs approches pour realiser ces adaptations de facon modulaire tout en reduisantla complexite du code. Decrivez-en une en prenant soin de justifier votre choix. Expliquezles avantages de la solution proposee et decrivez son fonctionnement general. Enoncez voshypotheses s’il y a lieu, a savoir si vous presumez une architecture client-serveur web, X-Window, etc. (1/2 page).

19. [1 point] Les sites Web comme amazon.ca offrent des recommandations de livre ou de mu-sique personnalisees. Expliquez leur fonctionnement et decrivez les algorithmes impliques.

20. [2 points] La telecommande basee sur une approche comme UIML permet un degre d’uni-versalite bien plus grand que les telecommandes dites universelles en fonction aujourd’hui.Expliquez le fonctionnement d’une telecommande basee sur l’approche UIML et quels sontses avantages. (1 page max.)

21. L’image qui suit affiche un ecran d’un editeur HTML pour creer une page formulaire. L’utilisa-teur peut choisir une image et la lier a des pages predefinies, ou a une page arbitraire (specificpage) pouvant etre specifiee par un nom de fichier (file name). Chaque image peut prove-nir d’un repertoire quelconque, ou d’un repertoire “galerie” (Gallery) contenant des iconesusuelles. Un clic sur le bouton “Browse...” amenera une fenetre de dialogue pour selectionnerun fichier dans le repertoire courant, tout comme un clic sur le bouton “Gallery...” mais, cette

Page 10 de 82


fois, le repertoire sera l’emplacement des icones predefinies.

(a) [21{2 points] Identifiez une faiblesse de la fenetre de dialogue pour chacune des 5 heuris-tiques de Bastien et Scapin suivantes :

1. guidage : groupement/distinction par localisation ;2. charge de travail : actions minimales ;3. charge de travail : densite informationnelle ;4. homogeneite/coherence ;5. gestion des erreurs : prevenir les erreurs.

Si vous jugez qu’une faiblesse s’applique a deux heuristiques, vous pouvez la repeter enprenant soin de preciser en quoi elle s’applique pour chaque heuristique.

(b) [31{2 points] Dessinez une fenetre de dialogue qui comporte les memes fonctionnalitesque l’originale, mais qui ameliore l’ergonomie, en particulier les problemes que vousaurez identifies dans la question precedente. De plus, expliquez comment votre versionrevisee de la fenetre constitue une amelioration ou, du moins, un exemple de chacun des5 heuristiques enoncees a la question precedente.

22. [2 points] Le schema suivant illustre la notion de conception centree sur l’utilisateur par rap-port a la conception centree sur l’application. Expliquez cette conception, notamment quellessont les consequences pour la definition et la validation des exigences et le processus dedeveloppement en general (1/2 page).

23. [4 points] Il existe plusieurs ensembles d’heuristiques pour la conception d’interfaceselaborees par differents auteurs. Il est frequent que ces ensembles d’heuristiques se recoupent

Page 11 de 82


et que les heuristiques aient des liens entre elles. C’est certainement le cas entre les heuris-tiques de Tognazzini et celles de Bastien et Scapin qui sont reproduites dans tableau qui suit.Faites ressortir les liens entre les quatre heuristiques suivantes, extraites de la liste de Tognaz-zini, et celles de Bastien et Scapin. En d’autres termes, expliquez ces quatre heuristiques enreferant a celles de Bastien et Scapin qui s’averent pertinentes. Si l’heuristique vous sembleunique a Tognazzini, faites-en la mention et expliquez-la.

1. Anticipation

2. Autonomie

3. Interfaces explorables

4. Metaphores

Tognazzini Bastien et Scapin

— Anticipation— Autonomie— Daltonisme et perception des

couleurs— Consistance— Valeurs de defaut— Efficience de l’utilisateur— Interfaces explorables— Lois de Fitts— Objets de l’interface utilisateur— Reduction de la latence— Facilite d’apprentissage

— Compromis (limit tradeoffs)— Metaphores— Protection du travail de l’utilisateur— Lisibilite— Suivi de l’etat (track state)— Interfaces visibles

— Guidage— Incitation— Groupement/distinction entre items

— Groupement/distinction parlocalisation

— Groupement/distinction par format— Feedback immediat— Lisibilite

— Charge de travail— Brievete

— Concision— Actions minimales

— Densite informationnelle— Controle explicite

— Actions explicites— Controle utilisateur

— Adaptabilite— Flexibilite— Prise en compte de l’experience utilisateur

— Gestion des erreurs— Protection contre les erreurs— Correction des erreurs

— Homogeneite/coherence— Signifiance des codes et denominations— Compatibilite

24. [4 points] Une scierie qui produit du bois d’oeuvre (planches, colombage, etc.) decide d’in-vestir dans le developpement de deux logiciels.Le premier est un logiciel de calcul de la coupe optimale d’un tronc d’arbre brut afin demaximiser les profits. La sortie de ce logiciel consiste en une specification des operationsmecaniques d’un robot qui automatise entierement la coupe de planches. L’entree du logi-ciel consiste en une representation 3D du tronc apres avoir passe celui-ci au travers d’un

Page 12 de 82


numeriseur (scanner 3D). La conception de ce logiciel doit rencontrer des exigences d’op-timisation des profits. Pour chaque tronc, le logiciel doit maximiser les profits en fonction ala fois du temps necessaire au decoupage et du prix de vente des pieces de bois, qui differeselon les dimensions et le marche. Il s’agit d’un probleme d’optimisation complexe et la so-lution optimale ne peut etre assuree. On vise cependant etre plus performant que la methodetraditionnelle avec un operateur humain et une machine qui fait la coupe du bois. L’interfaceutilisateur consiste essentiellement a mettre quotidiennement a jour les prix du marche pourles differentes dimensions et a activer le demarrage et l’arret du robot. Les operations du robotlui-meme sont automatisees et utilisent un langage existant pour la specification des operationsde controle.Le second logiciel est une application pour la vente de lots de bois d’oeuvre. Cette applications’adresse a la fois aux contracteurs qui achetent directement sur le Web et aux agents quitravaillent au telephone et au comptoir des ventes. Le logiciel permet de consulter les produitsdisponibles, les prix et autres informations necessaires. On envisage aussi fournir une formede personnalisation car les clients reviennent frequemment prendre leurs commandes, souventplusieurs fois par semaine.Vous etes l’analyste responsable des deux projets et avez a definir un processus dedeveloppement pour chacun. Selon les caracteristiques de chaque projet, notamment en cequi a trait aux differentes exigences utilisateur, identifiez les activites et les caracteristiquesqui devraient differer entre les processus propres a chaque projet. Decrivez en particulier lesactivites que vous proposeriez pour le projet d’application de vente. (maximum de 11

2page)

25.

Les deux TP du trimestre portaient autour d’une application pour la prise decommandes au restaurant Modernic. Or, il y a du nouveau chez Modernic. Enplus de l’appareil iW-Rainbow-G4 (ci-contre) qui roule Linux (ou WindowsCE) et comporte un ecran de resolution 320x240, les serveurs ont maintenantaussi acces, pour pres de la moitie des tables, a un ecran tactile de 1920x1200.Ce moniteur est en fait connecte a un PC Linux et sert normalement a ladiffusion video, mais la machine est connectee a travers TCP/IP ce qui luipermet d’etre aussi utilisee pour la prise de commandes.Le developpement de l’interface de la prise de commandes doit doncdorenavant se faire pour les deux appareils, le iW-Rainbow-G4 et le PC Li-nux avec l’ecran 1920x1200. Dans le cas du iW-Rainbow-G4, on compteadopter un concept favorisant la saisie d’items du menu par numeros avec leclavier, alors que pour le grand ecran, le concept consisterait plutot a afficherun grand nombre de choix et la selection des items se ferait par un clic sur unitem (tactile ou avec souris).Repondez aux questions suivants dans ce contexte. Completez votre reponsepar des hypotheses si l’information du contexte n’est pas suffisante pourrepondre adequatement.

(a) [2 points] Expliquez, selon vous, lequel des deux concepts proposes, soit le concept desaisie par le clavier pour le Rainbow ou celui de saisie par clic pour le grand ecran, est leplus approprie en vous referant aux heuristiques pertinentes . En d’autres termes, justifiezpourquoi on choisirait des approches d’interaction differentes entre les deux appareils,

Page 13 de 82


quels sont les facteurs dont il faut tenir compte et vers quels types de solution il fauts’orienter pour chaque interface.

(b) [6 points] Plusieurs choix d’implementation des deux interfaces s’offrent. Pour chacundes choix suivants, decrivez (1) comment les deux interfaces pourraient etre implantees(quels programmes roulent du cote serveur comme client, quelle architecture et quelprotocole sont utilises) (2) les avantages et inconvenients que l’on peut anticiper et (3)dans quelle mesure l’approche envisagee est recommandable pour le contexte donne. Lesquatre choix d’implementation sont :

1. VNC2. WIMP avec Swing3. Web, JavaScript et XSL4. XUL

Limitez votre reponse a 1/2 page maximum par choix.26. [3 points] Repondez aux questions suivantes par vrai ou faux en justifiant au besoin.

(a) La fonction “d’iconisation” d’une fenetre fait disparaıtre celle-ci du bureau et elle peutalors etre recuperee dans la barre des fenetres (avec Windows comme avec Linux). Cettefonction est prise en charge par le systeme de fenetrage de base (voir l’architecture dessystemes de fenetrage—reproduite ci-dessous).

(b) L’algorithme d’assignation d’un evenement a un composant est base sur l’arbre des objetsd’interface, notamment l’arbre des instances des composants.

27. Vous etes responsable de la conception du menu iPad pour une chaıne de restaurants. Le iPadest un appareil a ecran tactile de 9,7 pouces (1024 par 768 pixels) dont les composants d’in-terface sont tres semblables a ceux du iPhone. L’application permettra aux clients de prendrela commande directement de leur table, avec ou sans l’aide d’un serveur.(a) [2 points] Nous sommes a l’etape de la definition des exigences. En un courriel de dix a

quinze lignes, decrivez les etapes que vous desirez entreprendre pour les huit premieressemaines afin de definir les exigences d’utilisation de l’application. Le courriel s’adressea votre gestionnaire de projet. Votre plan doit lui donner confiance que vous savez ce qu’ilfaut faire pour que l’interface de l’application soit adequate.

Page 14 de 82


(b) [2 points] Presumons qu’un prototype de l’interface est realise suite a la conception.Decrivez deux taches aux fins de tests d’utilisabilite. Votre description devrait etreadequate pour qu’un individu qui participe a un test d’utilisabilite comprenne les ins-tructions. Precisez le contexte et les documents qui devraient etre fournis au participant.Indiquez les facteurs qui determinent le choix des taches.

(c) [1 point] Definissez les objectifs d’utilisabilite associes a ces taches et les metriques quivous permettront de valider l’atteinte des objectifs.

28. Repondez par vrai ou faux aux questions suivantes. Justifiez au besoin.

(a) Les travaux de L. Bass et ses collegues ont demontre que, par l’utilisation de certainspatrons d’architecture, il est possible de decoupler encore davantage la logique de l’ap-plication des considerations ergonomiques de l’interface utilisateur.

29. Consultez l’interface de l’application “Pdfsam” dont vous trouverez des captures d’ecrans al’annexe B. Cette application permet de manipuler des pages dans des fichiers PDF, soit endivisant un fichier par page ou par groupes de pages (split), soit en combinant des fichiersPDF, entier ou par segments de pages, en un seul fichier (Merge/Extract). Repondez aux ques-tions suivantes en vous referant a l’annexe. Fournissez des exemples ou des reponses qui serapportent uniquement aux ecrans de l’annexe.(a) [2 points] Pour l’ecran (a), suggerez un amelioration qui se rapporte a chacune des heu-

ristiques suivantes. Ne repetez pas une meme amelioration pour plusieurs heuristiques.(a) Guidage par incitation (0,5 pt)

(b) Gestion des erreurs (0,5 pt)

(c) Compatibilite (1 pt)

(b) [21{2 points] Pour l’ecran (b), suggerez une amelioration qui se rapporte a chacune desheuristiques suivantes. Ne repetez pas une meme amelioration pour plusieurs heuris-tiques, notamment s’il s’agit d’une amelioration mentionnee a la question precedenteet qui s’applique aussi a l’ecran (b).(a) Guidage par incitation (0,5 pt)

(b) Guidage par la localisation (1 pt)

(c) Compatibilite ou coherence (1 pt)

(c) [21{2 points] Vous etes responsable de la qualite pour l’application Pdfsam et on vousdemande des instructions pour effectuer les tests d’utilisabilite. Determinez brievementce que l’equipe de test devra effectuer et ce que l’on vise a obtenir de ces tests, et specifiezce que le rapport de test d’utilisabilite devra contenir. De plus, a titre d’exemple a suivre,definissez deux taches pour ces tests. Prenez soin de prendre des taches pertinentes.

30. Consultez l’interface de l’application “Pdfsam” dont vous trouverez des captures d’ecrans al’annexe A et quelques explications sur son fonctionnement. Cette application permet de ma-nipuler des pages dans des fichiers PDF, soit en divisant un fichier par page ou par groupes depages (split, sous “Plugins” dans le cadre de gauche), soit en combinant des fichiers PDF, en-tier ou par segments de pages, en un seul fichier (Merge/Extract). Ignorez la fonction AlternateMix et la barre d’outils (les remarques a leur sujet seront ignorees pour la correction).

Page 15 de 82


Repondez aux questions suivantes en vous referant a l’annexe A. Fournissez des exemples oudes reponses qui se rapportent uniquement aux ecrans de l’annexe A. L’annexe B fournit unrappel des heuristiques de Bastien et Scapin.(a) [2 points] Pour l’ecran (a), suggerez un amelioration qui se rapporte a chacune des heu-

ristiques suivantes. Ne repetez pas une meme amelioration pour plusieurs heuristiques.

(a) Guidage par incitation (0,5 pt)

(b) Gestion des erreurs (0,5 pt)

(c) Compatibilite (1 pt)

(b) [21{2 points] Pour l’ecran (b), suggerez une amelioration qui se rapporte a chacune desheuristiques suivantes. Ne repetez pas une meme amelioration pour plusieurs heuris-tiques, notamment s’il s’agit d’une amelioration mentionnee a la question precedente etqui s’applique aussi a l’ecran (b).

(a) Guidage par incitation (0,5 pt)

(b) Guidage par la localisation (1 pt)

(c) Compatibilite ou coherence (1 pt)

Page 16 de 82


Annexe A — Captures d’ecran de l’application Pdfsam

Pdfsam permet de combiner ou de segmenter des fichiers PDF. L’application demarre en af-fichant l’ecran ci-dessous, a la difference que le tableau est vide a l’ouverture. On utilise lebouton Add pour ajouter les fichiers PDF que l’on veut combiner. Pour l’exemple ci-dessous,7 fichiers nommes out0001.pdf a out0007.pdf ont ete ajoutes deux fois, de sorte quela serie de fichiers 1 a 7 est repetee. Il est possible de manipuler l’ordre avec Move Up etMove Down, de meme que d’enlever des fichiers. Le bouton Clear vide le tableau. Le fichiercontenant la suite de fichiers PDF du tableau sera ecrit dans le repertoire a specifier dans Des-tination output file en bas. Le bouton Run execute la combinaison des PDF et l’ecriture dufichier combine. Les options d’ecriture permettent de specifier si l’on permet d’ecraser les fi-chiers existants, si l’on desire compresser les fichiers et elles permettent de specifier la versionde PDF a utiliser. Dans la section Merge options, on specifie si l’on desire que la fonctionnalitepour formulaires de PDF soit reproduite si les fichiers sources l’incluent (autrement le PDFsera produit sans cette fonctionnalite).

Page 17 de 82


Ecran (a)L’ecran ci-dessous correspond a l’option de segmentation d’un fichier PDF, Split (voir dansle cadre a gauche). Un seul fichier peut etre selectionne (un message d’erreur apparaıt si ontente d’en ajouter plus d’un). L’application creera une serie de fichiers numerotes selon lasegmentation desiree, avec comme prefixe le nom qui est indique dans le cadre Output optionsau bas de l’ecran. Les fichiers seront ecrits dans le repertoire specifie par Destination folder.La barre de progression au bas de l’ecran indique l’etat du processus de segmentation apresavoir appuye sur Run.

Ecran (b)

31. Nous avons vu au cours que les langages de definition d’interface permettent de realiser unetelecommande universelle capable de controler des appareils aussi diversifies qu’une chaınestereo, un magnetoscope ou un four micro-ondes, sans meme connaıtre les specifications four-nies par le fabricant.(a) [11{2 points] L’architecture X Window pourrait-elle aussi etre une alternative viable pour

la telecommande universelle ? Comment serait-elle implantee et quels seraient les avan-

Page 18 de 82


tages et inconvenients ? (1/3 page)

(b) [11{2 points] Finalement, pourrait-on penser a implanter une architecture web pourrealiser la meme fonctionnalite ? Comment serait-elle implantee et quels seraient les avan-tages et inconvenients ? (1/3 page)

32. Le service a la clientele d’Hydro-Quebec doit refaire son systeme de gestion des dossiersclients. Ce systeme est utilise par les agents qui recoivent les appels telephoniques des clientsconcernant les questions de facturations, changements d’adresse, etc. Il permet d’acceder atoute l’information qu’Hydro-Quebec possede sur le client.(a) [11{2 points] L’entreprise doit decider du budget a allouer aux developpements de son

interface. Quels sont les parametres (c’est-a-dire les variables) a tenir compte pour l’etaped’analyse cout-benefice de l’utilisabilite (usability cost-benefit analysis) tel que prescritdans Maguire (2001)? Donnez les grandes lignes du calcul qu’on peut envisager.

(b) [11{2 points] Lors d’une reunion pour definir les exigences utilisateurs du projet, deux opi-nions ont emerge. La premiere opinion preconise un ensemble de raccourcis et un accesa des fonctions de recherche dans le dossier client et meme dans la documentation desregles d’affaires de l’entreprise. La motivation pour ces fonctions est qu’il est importantque les agents soient efficaces et que ces fonctions, meme si elles sont plus complexes aapprendre et a utiliser, augmentraient leur productivite.La deuxieme opinion preconise au contraire une interface simple et depouillee de fonc-tions complexes. L’argument principal derriere cette opinion est que ces fonctions en-combrent l’interface et imposent une charge cognitive supplementaire pour lire/decoder,comprendre et choisir les fonctions avancees, alors que les taches peuvent etre effectueespar fonctions simples. Meme si les fonctions avancees sont plus efficaces, il n’est pasacquis qu’elles seront utilisees a cause de la charge cognitive qu’elles imposent.Quel argument devrait-on retenir pour orienter la conception de l’interface? Justifiez votrereponse et precisez s’il y a lieu comment vous pourriez trancher la question.

33. [11{2 points] L’article de Nielsen (How to Conduct a Heuristic Evaluation, lecture demandeepour la seance portant sur les evaluations d’interfaces) rapporte que le nombre de problemesd’utilisabilite, P , trouves lors de seances d’evaluations par des experts suit la formule sui-vante :

P “ Np1´ p1´ lqiq

Que representent les parametresN , l et i? Utilisez vos connaissances de l’evolution du nombrede nouveaux problemes trouves par chaque evaluateur pour vous aider a identifier les pa-rametres.

34. L’article de Jakob Nielsen (How to conduct a heuristic evaluation) rapporte des resultatsd’evaluation heuristique. Il contient un graphique d’evaluation heuristique par des experts.Le texte explicatif de ce graphique se lit comme suit :

Cette illustration affiche les problemes que chaque evaluateur a identifies atravers l’evaluation heuristique d’un systeme bancaire. Chaque ligne representel’evaluation d’un des 19 evaluateurs a chacun des 16 problemes d’utilisabilite. Uncarre noir indique que l’evaluateur de la ligne a identifie le probleme de la colonne

Page 19 de 82


correspondante. Les lignes sont triees de sorte que les evaluateurs les plus efficacessont en bas et ceux les moins efficaces sont en haut. Les colonnes sont aussi trieesde sorte que les problemes les plus faciles sont a la droite et les plus difficiles sonta la gauche.

(a) [2 points] L’article de Nielsen soutient que le nombre de nouveaux problemes qu’un ex-pert trouvera suit une loi precise. Si la variable i represente le ieme expert (donc pi´1q ex-perts ont trouve des problemes au prealable), alors le nombre de nouveaux problemestrouves par cet expert est fourni par la formule :

ProblemesTrouvespiq “ Np1´ p1´ lqiq

Que representent les variables N et l ?

35. [4 points] Repondez par vrai ou faux aux questions suivantes. Justifiez au besoin.

(a) Les travaux de Nielsen et Landauer demontrent que l’evaluation heuristique par un expertpermet de trouver le meme nombre de problemes d’interface qu’environ cinq (5) testsutilisateurs.

(b) Dans l’architecture MVC, lorsqu’un changement d’etat survient au modele, le controleura la responsabilite d’avertir la vue qu’un changement est survenu, mais la vue a la res-ponsabilite d’effectuer une requete au modele pour connaıtre son etat.

(c) Pour une application qui utilise une boıte a outils pour le developpement de l’interface,la hierarchie de classes et la hierarchie d’instances dependent toutes deux de la boıte aoutils utilisee, mais sont independantes du gestionnaire de fenetres.

(d) L’instruction de format CSS suivante :td .emphase { margin-left :1in ; text-weight :bold ;}

s’appliquera uniquement aux balises HTML qui ont la propriete class=emphase et quisont imbriquees entre les balises ătdą et ă/tdą

(e) La mise a jour d’une partie de fenetre qui a ete obstruee par une autre et qui doit etrereaffichee peut etre prise en charge soit par l’application elle-meme, soit par le gestion-naire de fenetres.

(f) La technologie AJAX permet de reduire la latence pour une interface web en evitant lechargement d’une nouvelle page web.

(g) La definition des taches s’effectue avant celle des cas d’utilisation car elles ne presumentpas d’une conception alors que c’est le cas pour les cas d’utilisation.

36. Vous etes analyste de la section cablodistribution pour la firme Videotron. L’arrivee sur lemarche de concurrents qui offrent des contenus sur Internet directement pose un defi de taille etil est imperatif pour l’entreprise d’offrir une nouvelle plate-forme de diffusion de contenu quisera a la hauteur de la concurrence. La firme passera donc au mode de diffusion numerique descontenus televisuels. Vous etes responsable du developpement de la nouvelle console. Les ser-vices televisuels numeriques seront tres differents des contenus cablodiffuses actuels puisque

Page 20 de 82


les clients pourront avoir acces aux videos accessibles de l’Internet, telecharger des films of-ferts par Videotron, et certainement plusieurs autres fonctionnalites qui ne sont presentementpas anticipees compte tenu de la nouveaute du produit.Comme responsable du developpement, vous devez planifier les activites et etapes de cedeveloppement. Vous adopterez evidemment un cycle de developpement centre utilisateur afinde maximiser les chances de concevoir un produit qui rencontre les besoins utilisateurs.(a) [2 points] Votre choix s’arrete sur le cycle

ISO 13407 dont le schema general estillustre ci-contre :

(1) Planification duprocessus centré-utilisateur

(2) Comprendre et spécifierle contexte d'utilisation

(3) Spécifier lesexigences utilisateurset organisationnelles

(4) Concevoir dessolutions de conception

(5) Évaluer les solutionspar rapport aux exigences

Exigences satisfaites?

Nommez et decrivez chacune des cinq (5) etapes de ce cycle (une etape par boıte dans lafigure ci-haut).

(b) [3 points] Nommez et decrivez les trois (3) activites les plus prioritaires que vous utili-serez dans ce cycle en prenant soin de preciser pourquoi elles sont prioritaires.

37. Referez-vous au code de l’annexe pour repondre aux questions suivantes.(a) [11{2 points] Decrivez le texte qui s’affichera a la console depuis le moment du demarrage

et suite a un clique sur le bouton MonBouton. Notez les commentaires 1, 2, et 3 quiindiquent les trois instructions d’affichage a la console.

(b) [11{2 points] Indiquez sur quel fil d’execution sera effectuee chacune des instructions d’af-fichage 1, 2 et 3, suite au demarrage et suite a un clique sur le bouton MonBouton. Si uneligne est executee plusieurs fois, specifiez le fil d’execution a chaque fois.

38. Une partie de l’application LibreOffice Writer est reproduite ci-dessous.

(a) [3 points] Nommez et expliquez 3 principes de perception visuelle qui sont appliquesdans sa conception pour en ameliorer l’utilisabilite. Pour chaque principe que vous

Page 21 de 82


avez identifie, donnez un exemple de son application dans l’interface de LibreOfficeWriter.

(b) [1 point] Expliquez comment les principes de perception visuelle qui sont appliques dansl’interface affichee permettent de soutenir les heuristiques de guidage et de charge detravail de Bastien et Scapin. La liste des heuristiques de Bastien et Scapin est reproduitea l’annexe .

39. [2 points] L’architecture basee sur les langages XML et XSL, et sur l’engin XSLT est parti-culierement bien adaptee pour la creation d’interfaces a des donnees structurees comme cellesd’une base de donnees. Expliquez le fonctionnement de cette architecture et quelles sont sesavantages. Expliquez aussi pourquoi l’architecture est adaptee pour l’interaction utilisateuravec une base de donnees, par exemple.

40. Vous etes responsable d’un projet dont le client est une entreprise qui effectue du soutien tech-nique au telephone, notamment pour la gestion de reseaux informatiques et la configurationde postes de travail. Les agents qui travaillent au telephone doivent regler des problemes dontla complexite varie. Certains sont regles en quelques minutes, d’autres necessitent plusieursechanges telephoniques et peuvent prendre plusieurs dizaines de minutes.(a) [1 point] L’equipe est composee de 50 agents qui traitent en moyenne 2500 appels par

semaine (donc environ 10 appels par personne par jour). Le client croit qu’il peut traiterdavantage d’appels si l’interface de l’application que les agents utilisent est amelioree.Definissez les bases d’une analyse cout-benefice pour le client qui lui dira s’il est rentablede faire cette refonte de l’interface. Faites des hypotheses sur la situation au besoin.

(b) [1 point] Le client dit qu’il ne veut pas de contrat sur la base de nouvelles fonctionnalitesmais plutot base sur les principes de l’utilisabilite. Decrivez votre comprehension d’unetelle demande et un exemple de clause qu’un tel contrat pourrait comporter. Inspirez-vous des principes de definition d’exigences d’utilisabilite et du schema ou l’utilisateurest partie integrante du systeme tel que vu au premier cours.

41. [1 point] Consultez le code d’une page HTML ci-dessous. Quel sera le texte qui s’afficheradans le fureteur apres le chargement de la page?

<html><body><h1>Une page Web</h1><p id="par1">Un paragraphe.</p><script type="text/javascript">document.getElementById("par1").innerHTML="Un texte.";</script></body></html>

42. [4 points] Repondez par vrai ou faux aux questions suivantes et justifiez au besoin votrereponse.

(a) Le premier systeme de fenetrage graphique est celui de SmallTalk.

(b) Le protocole HTTP definit un concept de session utilisateur qui doit etre conservee atravers les variables dites “cachees”.

Page 22 de 82


(c) Supposons une classe monModele. Ce serait un bris du patron MVC si l’on incluait unevariable locale a cette classe qui contient une reference a la vue, ou aux vues actives dece modele.

(d) En X Window, le rafraıchissement (repaint) d’une partie de fenetre suite a une occlusionest pris en charge par le serveur d’ecran (X server).

(e) Pour qu’un traitement dans actionPerformed puisse etre interrompu, il est essentielqu’il soit execute sur un autre fil que le fil des evenements.

43. La figure ci-dessus est une capture d’ecran du site web polymtl.ca. Identifiez les elementsd’interfaces qui soutiennent les heuristiques de Bastien et Scapin suivants. Expliquez en quoices elements permettent ce soutien. Referez-vous a l’annexe pour un rappel de ces heuris-

Page 23 de 82


tiques.(a) [1 point] Guidage.

(b) [1 point] Compatibilite.

(c) [1 point] Charge de travail.

44. [2 points] Les interfaces de recommandations fonctionnent sur la base de matrices quirepresentent les “votes” des utilisateurs pour des items quelconques (musique, films, etc.).Ces votes expriment les preferences des utilisateurs.Decrivez deux methodes pour effectuer des recommandations a un utilisateur sur la base deses propres votes (preferences).

45. Le projet de ce trimestre consistait a concevoir une telecommande pour controler une consolede television par cable. Vous devez concevoir un test d’utilisabilite pour la conception pro-posee.(a) [1 point] Redigez les instructions a suivre par un participant a ce test pour une tache

donnee. Choisissez une tache qui devrait durer de quelques secondes a 3–4 minutes aumaximum.

(b) [1 point] Definissez les mesures a prendre pour ce test.

46. Referez-vous au code de l’annexe pour repondre aux questions suivantes. Ce code est repartien quatre fichiers (demo.html, demo.css, demo.js et demo.json). Il utilise la librai-rie jQuery que vous avez utilisee pour l’exercice d’implementation d’une fonction d’auto-completion. Repondez aux questions suivantes en presumant que tous les fichiers du code sontcorrectement charges par un fureteur web.(a) [11{2 points] Reproduisez la page qui s’affiche initialement lorsque demo.html est

charge.

(b) [11{2 points] Decrivez le comportement des boutons “id1” et “id2” (leur affichage et leresultat des evenements geres).

(c) [2 points] Le code de demo.js contient cinq (5) lignes de commentaires a completer(lignes 44, 48, 55, 57 et 60). Ecrivez ces commentaires qui doivent decrire ce que font lesinstructions de la fonction qui suit ou la fonction de la ligne correspondante.

47. Parmi les enonces ci-dessous, certains sont faux ou comportent un, ou des elements qui sontincorrects. Identifiez ces enonces et precisez en quoi ils sont faux/incorrects :

(a) Dans une application, l’assignation d’un evenement a un composant repose sur lahierarchie des instances de classes d’objets d’interfaces. Un evenement est assigne ala racine de la hierarchie, qui determine lequel des noeuds du niveau inferieur couvre laposition de l’evenement, et ainsi de suite recursivement. La notion de focus permet dedecider si un noeud devrait etre assigne a l’evenement dans le cas ou plusieurs noeudscouvrent la meme position.

(b) Le modele d’affichage VNC repose sur une architecture client-serveur ou les echangescomportent des evenements de bas niveau qui se produisent du cote client (par ex. bou-tons de souris enfonce en position (x,y)) et des instructions de dessin ou de manipulationde matrice de points (bitmaps) du serveur vers le client.

Page 24 de 82


(c) Le processus de developpement centre-utilisateur ISO13407 porte specifiquement sur laphase de definition des exigences. Il comporte les 5 etapes suivantes : (1) planification duprocessus, (2) comprendre et specifier le contexte d’utilisation, (3) specifier les exigencesutilisateurs et organisationnelles, (4) concevoir des solutions de conception et (5) evaluerles solutions par rapport aux exigences. Ces exigences s’expriment notamment en termesde taches a effectuer et en termes d’objectifs d’utilisabilite.

(d) Bass et ses collegues ont developpe 26 patrons d’utilisabilite qui, comme le patronModele-Vue-Controleur (MVC), permettent de decoupler davantage la conception del’interface de l’architecture interne de l’application (le “modele” en MVC). Le patrond’annulation est un exemple de ces patrons qui comporte un module “ecouteur” (liste-ner), un module “controleur” et un module “collaborateurs”.

(e) Le langage XUL permet de definir des applications. La partie fonctionnelle est definieen JavaScript et la partie interface utilisateur est definie dans un langage XML. Cettepartie interface est concue pour etre traitee par XSLT, qui transforme cette specificationd’interface pour differentes plateformes, comme en HTML pour un fureteur Web. Lapartie rendu est geree par une specification CSS.

(f) Le protocole HTTP ne comporte pas de mecanisme pour gerer une session utilisateur.Il incombe au serveur Web et au fureteur de conserver un jeton (token) qui refere a unesession unique et qu’ils doivent echanger a chaque requete. Ce jeton peut etre conservedans un “temoin” (cookie), dans une variable dite cachee en HTML, ou encore dans unevariable visible dans la requete elle-meme.

(g) La conception centree-utilisateur ne preconise pas de faire participer l’utilisateur au pro-cessus de conception lui-meme. L’utilisateur n’a pas l’expertise de conception d’interfaceet de developpement logiciel necessaires a une contribution valable. Cependant, l’uti-lisateur sera consulte lors de la phase de definition des exigences et implique a traversdifferentes evaluations d’interface.

48.

Page 25 de 82


La figure ci-contre illustre unprobleme qui peut survenir avecun systeme de fenetrage. Uneapplication ne repond plus et lesfenetres qui se superposent sur lafenetre de cette applicationlaissent des traces de leursdeplacements.Expliquez comment le problemesurvient et comment cephenomene deroutant pourl’utilisateur peut etre contourne.Referez-vous a l’architecture dessystemes de fenetrage pour votrereponse.

Annexe — Application jQuery

Code HTML : demo.html

8 <!DOCTYPE html>9 <html xmlns="http://www.w3.org/1999/xhtml">

10 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">11 <head>12 <title class="id1">Titre ID1</title>13 <title class="id2">Titre ID2</title>14 <link href="demo.css" rel="stylesheet" />15 </head>16 <body>17 <div class="container">18 <h1 class="id1">Texte 1 ID1</h1>19 <h1 class="id2">Texte 1 ID2</h1>20 <div>21 <input type="text" name="input1" id="input1"/>22 </div>23 <div id="div1"></div>24

25 <p>26 <button id="id1" class="id1">Bouton 1</button>27 <button id="id2" class="id2">Bouton 2</button>28 </p>29

30 </div>31 <script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>32 <script type="text/javascript" src="demo.js"></script>33

Page 26 de 82


34 </body>35 </html>

Code CSS : demo.css

36 body { font-family: sans-serif; font-size: 14px;37 line-height: 1.6em; margin: 0; padding: 0; }38 .container { width: 800px; margin: 0 auto; }39

40 .id2 { display: none; }

Page 27 de 82


Code JavaScript : demo.js

41 jQuery(function () {42 ’use strict’;43

44 // ***Commentaire 1, que fait l’appel ajax()?45 jQuery.ajax({46 url: ’demo.json’,47 dataType: ’json’,48 }).done(function (data) { // ***Commentaire 2, que fait ".done()"?49 var div1 = jQuery(’#div1’);50 // La variable pays est une liste associative qui contient51 // les donnees de demo.json. Par exemple, ’CA’ est la cle52 // dont la valeur est ’Canada’ dans cette liste.53 var pays = data;54

55 // ***Commentaire 3, que fait ".change()"?56 jQuery("#input1").change(function(){57 // ***Commentaire 4, que fait div.html()?58 div1.html(’Pays: ’ + ’ ’ + pays[jQuery("#input1").val()]);59 });60 // ***Commentaire 5, que fait ".click()"61 jQuery("#id1").click(function(){62 jQuery(".id1").hide();63 jQuery(".id2").show();64 });65

66 jQuery("#id2").click(function(){67 jQuery(".id1").hide();68 jQuery(".id2").show();69 });70 });71 });

Code JSON : demo.json

72 {73 "AD": "Andorra",74 // Autres pays75 "CA": "Canada",76 // ...77 "ZZ": "Unknown or Invalid Region"78 }

49. L’annexe affiche une page HTML dont le code est fourni a l’annexe . Repondez aux questionssuivantes en y referant.(a) [11{2 points] Dessinez la structure du DOM (Document Object Model) de la page. N’in-

cluez pas le contenu (texte et attributs HTML), seulement la structure des noeuds. Lorsquedisponible, utilisez l’attribut unique “id” pour nommer les balises.

(b) [1 point] La page comporte deux elements dynamiques qui reagissent chacun a une ac-tion de l’utilisateur. Decrivez ces deux actions et leur effet respectif.

(c) [1 point] Sachant que l’instruction color change la couleur du texte, supposons quej’ajoute les instructions suivantes a la page HTML :

<style>h2 { color: blue; }

Page 28 de 82


h3 p { color: green; }</style>

Quel sera l’effet de ces instructions sur la page?

50. [2 points] Le code ci-dessous fait appel a la librairie JQuery que vous avez utilisee pourle TD3. Supposez une utilisation valide de ce code. Expliquez chaque instruction et ce quele code effectue de maniere generale. Quand sera-t-il execute ? Quel sera l’effet sur la pageHTML affichee?

$("#label1").click(function () {$(".label2").show();$(".label3").hide();

});

51. Les approches dites de “filtres collaboratifs” permettent de realiser des interfaces de recom-mandations. Elles fonctionnent sur la base d’une matrice, Vmˆn, qui representent les “votes”des utilisateurs pour des items ou des produits quelconques (musique, films, etc.). Ces votesexpriment les preferences des utilisateurs.(a) [1 point] La methode de factorisation de matrice decompose la matrice de votes Vmˆn

en le produit de deux matrices : Vmˆn “ Amˆk Bkˆn. Decrivez ce que chacune de cesmatrices de decomposition represente.

(b) [1 point] La methode utilisateur-utilisateur consiste plutot a trouver des utilisateurs rap-proches de celui pour lequel on desire effectuer les recommandations. Supposons qu’oncherche a estimer le vote de l’utilisateur m a l’item n, le calcul repose sur cette equation :

umn “ um ` κk

ÿ

i

wipuin ´ uiq

ou κ “ 1{přk

i |wi|q. Expliquez l’equation en decrivant chaque terme et en decrivant enmots simples ce que le calcul effectue.

52. [41{2 points] Parmi les enonces ci-dessous, certains sont faux ou comportent un, ou deselements qui sont incorrects. Identifiez ces enonces et precisez en quoi ils sont faux/incor-rects :

(a) Le gestionnaire de fenetres est responsable, entre autres, de la disposition des fenetres surun ecran et des operations d’iconifier et de restaurer une fenetre. Il peut aussi prendre encharge le rafraıchissement des fenetres obscurcies. S’il ne prend pas le rafraıchissementen charge, alors il transmettra a l’application un evenement et l’application aura la res-ponsabilite de redessiner la partie de sa fenetre affectee.

(b) On peut classifier les architectures de systemes de fenetrage selon qu’ils sont client-serveur ou non. X-window et VNC sont deux exemples d’architectures client-serveur.L’utilisateur interagit avec le client et les evenements de bas niveau sont transmis auserveur graphique. Des operations simples de dessins et de manipulation de pixels sontensuite retransmises au client pour refleter l’etat du modele represente par l’applicationqui roule du cote du serveur.

Page 29 de 82


(c) L’architecture web peut, elle aussi, etre consideree comme client-serveur. Toutefois, lesevenements ne sont pas retransmis au serveur comme les architectures X-window et VNC.Ils sont plutot geres localement par le client, qui represente ici le fureteur web.

(d) Le protocole HTTP est qualifie de “sans etat” (stateless). En consequence, il ne peut gererles sessions utilisateur puisque les echanges impliquent alors une “memoire” de l’autre.Les requetes du type XMLHttpRequest (Ajax) permettent de contourner ce probleme.Elles utilisent le mecanisme de temoin (cookie) pour deposer une structure XML du cotedu fureteur et ainsi conserver l’information reliee a une session.

(e) La conception centree-utilisateur ne preconise pas de faire participer l’utilisateur au pro-cessus de conception lui-meme. L’utilisateur n’a pas l’expertise de conception d’interfaceet de developpement logiciel necessaires a une contribution valable. Cependant, l’uti-lisateur sera consulte lors de la phase de definition des exigences et implique a traversdifferentes evaluations d’interface.

(f) Les taches utilisateurs sont definies a partir des cas d’utilisation. Les exigences d’utilisa-bilite sont, quant a elles, definies a partir des taches. Les taches doivent etre suffisammentprecises pour permettre de definir des exigences d’utilisabilite verifiables. Ces exigencespeuvent varier d’un profil d’utilisateur a l’autre.

53.

Nous avons vu au coursl’interface affichee ci-contre,nommee Bumptop. Elle presenteun nouveau type d’interface debureau de travail 3D(3D desktop). Bumptop

En general, les opinions sur l’efficacite de cette interface sont partagees. Certains disentqu’il s’agit d’une metaphore poussee trop loin, d’autres croient au contraire que c’estrevolutionnaire.(a) [2 points] Dans un premier temps, faites une analyse heuristique de l’interface de Bump-

top en vous basant sur les principes de conception et d’evaluation vues au cours.(approx. 1/2 page)

(b) [2 points] Dans un second temps, decrivez comment on pourrait determiner de faconobjective les forces et faiblesses de cette interface. Reposez-vous sur les principesd’evaluation d’interfaces vu au cours. Prenez soin de preciser les limites de votre ana-lyse et de l’evaluation que vous proposez. (approx. 1/2 page)

Page 30 de 82


54. [2 points] Ben Binaire est un programmeur experimente. Il a developpe toutes sortes de lo-giciels, des pilotes de controleurs numeriques a des interfaces Swing. Il a sa propre doctrinequant a la conception logicielle qui se resume ainsi :

Le premier principe du developpement, c’est qu’avant de commencer a coder,les exigences doivent etre figees dans le ciment ! Autrement, c’est le chaos ! Codersans avoir exige du client qu’il fixe les exigences, c’est s’engager a fond le train versun debordement du budget et de l’echeancier de projet. Ce principe est vrai aussibien pour un pilote de controle des portes du metro, comme pour une “app” surune tablette Android ou iPad. C’est un principe universel ! C’est pourquoi quandle client se pointe avec des changements, je sors le cahier des charges* ! Neuf foissur dix, il doit admettre que l’on respecte les exigences. Comme ca, je peux livrer atemps et respecter le budget !*[le cahier des charges decrit les exigences]

Donnez votre avis sur la doctrine de Ben a la lumiere des principes de developpement centre-utilisateur vus au cours.

55. L’annexe illustre deux fenetres pour le furetage a travers le systeme de fichiers. Elles ont lameme dimension en pixels. Celle du haut est le fureteur Nautilus et celle du bas est le dialogued’ouverture d’un fichier dans LibreOffice. Elles proviennent de la derniere version de UbuntuLes deux fenetres ont des fonctionnalites identiques a quelques differences pres.Parmi les differences, la fenetre LibreOffice (bas) a l’option “read-only” pour ouvrir un fichieren mode lecture seulement. Elle a aussi un bouton pour choisir des versions de documents (nes’applique pas ici, c’est pourquoi l’option est grisee) et un bouton pour connaıtre les typesd’extensions, “file type”. Il affiche ceci lorsqu’on le clique :

La fenetre Nautilus (haut) a des fleches en haut a gauche pour naviguer dans l’historique etquelques autres boutons en haut a droite, dont la recherche d’un fichier et d’autres boutons quenous ignorerons ici.(a) [1 point] Une difference notable entre les deux fenetres est leur panneau de navigation

dans les repertoires de fichiers (situe a gauche de la fenetre). Identifiez les points quiselon vous font une difference au plan ergonomique et qui favorisent un ou l’autre despanneaux.

Page 31 de 82


(b) [1 point] Bien qu’aucune des deux fenetres ne comporte d’erreurs importantes deconception, identifiez l’amelioration qui vous semble la plus critique entre l’une ou al’autre d’entre elles.

Page 32 de 82


Annexe — Page HTML et code de la page

Page 33 de 82


Annexe — Code de la page HTML de l’annexe

79 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"80 "http://www.w3.org/TR/html4/loose.dtd">81 <HTML>82 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">83 <HEAD>84

85 <TITLE>Structure DOM</TITLE>86 <script src="jquery-1.10.2.min.js"></script> @\label{jquery}@87 <script>88 /* la variable "nodes" sera associee a l’objet "window" et89 * accessible par : window.nodes90 */91 var nodes = document.evaluate("//h2", document, @\label{docEval}@92 null, XPathResult.ANY_TYPE, null);93 function boutonUn() {94 var reponse = "";95 var n = window.nodes.iterateNext();96 while(n) {97 reponse = reponse + n.textContent + "\n";98 n = window.nodes.iterateNext();99 }

100 alert(reponse);101 }102

103 /* @\label{log} Ligne \ref{log}@ */104

105 /* La fonction ready() sera invoquee lorsque le DOM sera entierement charge @\label{avReady}@*/106 $( document ).ready(function () {107 $("#divUn")108 .empty()109 .append("<h3>Titre niveau trois</h3>")110 })111 </script>112 <style>113 #divUn {color:red;} @\label{styleUn}@114 p .code {color:blue;} @\label{styleDeux}@115 </style>116 </HEAD>117 <BODY>118

119 <h1>Structure d’un document HTML</h1>120

121 <p>Une structure DOM (Document Object Model) est associee a122 un document HTML.</p>123

124 <h2>Niveau des titres</h2>125

126 <p>Les balises H1 a H4 indiquent des titres et elles127 comportent quatre niveaux.</p>128

129 <h2>Format et CSS</h2>130

131 <p>Les caracteristiques de format de texte, de paragraphes,132 et de balises d’une page HTML sont controlable par le code CSS.133 Quelques exemples sont fournis ci-dessous</p>134

135 <h3><code>text-decoration</code></h3>136

137 <p>Le texte peut etre en138 format <span style="text-decoration:line-through">raye</span>139 ou <span style="text-decoration:underline">souligne</span>, par exemple.140 Ce sont des parametres de la propriete <code>text-decoration</code></p>141

Page 34 de 82


142 <h3><code>font-weight</code></h3>143

144 <p>Le texte en caractere gras est un parametre de la propriete145 <code>font-weight</code></p>146

147 <button id="boutonUn" type="button"> @\label{boutonUn}@148 Cliquer ici!149 </button>150

151 <div id="divUn">Texte de "divUn"</div>152

153 </BODY>154 </HTML>

Page 35 de 82


Annexe — Fureteurs de fichiers sous Ubuntu 13.10

Fureteur Nautilus

Dialogue d’ouverture d’un fichier avec LibreOffice

56. L’annexe contient le code d’une page HTML creee par l’apprenti programmeur web, DenisCodeurre. Repondez aux questions suivantes en vous y referant. Ce code contient des instruc-tions HTML, CSS et JavaScript syntaxiquement valides. Il fait appel a la librairie JQuery etaux fonctions disponibles dans JavaScript. Les commentaires qu’on y retrouve servent d’in-formation de rappel.(a) [1 point] Denis a insere les commentaires suivants aux lignes indiquees. Certains sont

justes, d’autres pas. Identifiez et corrigez les erreurs et inexactitudes qui s’y trouvent.

Ligne 164 : le fichier jquery-1.10.2.min.js contient la librairie jQuery et doit setrouver sous le meme repertoire que la page courante.

Page 36 de 82


Ligne 169 : document est un objet XML qui possede la methode evaluate. Cettemethode invoque une requete XPath qui en l’occurrence est “//h2”. Le resultat serale contenu (textContent) de toutes les balises H2 sous le noeud document, peuimporte le niveau.

Ligne 191 : le texte sous la balise dont l’identificateur est “divUn” s’affichera dans lacouleur rouge.

Ligne 192 : les balises code a l’interieur de balises p (paragraphe) afficheront le texteen bleu.

(b) [1 point] Dessinez la structure du DOM (Document Object Model) de la page apres quele DOM soit charge et que la fonction ready() soit invoquee. Identifiez les balises parleur type et le numero de la ligne ou ils apparaissent.

(c) [1 point] Sur quel objet s’applique respectivement les trois methodes ready(),empty() et append() (voir ligne 183 et suivantes) ?

(d) [1 point] Denis s’attendait a ce que le texte des balises h2 s’affiche dans une fenetrede dialogue (alert()) lorsque l’utilisateur clique sur le bouton “Cliquer ici !”, mais cane fonctionne pas. Quelle correction doit-il effectuer a la ligne 225 pour que le code secomporte comme il s’attend?

(e) [11{2 points] Denis a apporte la bonne correction a la ligne 225, mais ca ne fonctionnetoujours pas. Rien ne s’affiche. Pourquoi ?

57. Les approches dites de “filtres collaboratifs” permettent de realiser des interfaces de recom-mandations. Elles fonctionnent sur la base d’une matrice, Vmˆn, qui representent les “votes”aux n items par les m utilisateurs. Ces items sont des produits quelconques (musique, films,etc.). Ces votes expriment les preferences des utilisateurs.(a) [1 point] La methode la plus simple de filtres collaboratifs utilisateur-utilisateur consiste

a trouver des utilisateurs rapproches de celui pour lequel on desire effectuer les recom-mandations. Supposons qu’on cherche a estimer le vote de l’utilisateur m a l’item n, lecalcul repose sur cette equation :

umn “ um ` κk

ÿ

i

wipuin ´ uiq

ou κ “ 1{přk

i |wi|q.Decrivez chacune des variables suivantes de l’equation :wi, um, ui et uin.

(b) [11{2 points] Bien que simple, cette approche souffre de deux lacunes principales.Decrivez une de ces lacunes. Puis, decrivez et expliquez un moyen qui permet de contour-ner le probleme que vous avez identifie.

Page 37 de 82


58. [11{2 points]

Les images ci-dessus illustrent la telecommande du service Fibe de Bell et l’interface du“Guide” qui affiche l’horaire tele. La navigation se fait par les fleches de la telecommandepour se deplacer vers le haut ou vers le bas. Cette interface n’integre pas de fonctions derecommandations, mais elle offre l’opportunite d’en integrer.Decrivez comment une approche de recommandations et de modelisation des interets d’unutilisateur pourrait s’appliquer en relevant les points suivants :

— Quelle technique preconisez-vous pour determiner les emissions les plus pertinentes pourl’utilisateur ?

— Pourquoi cette technique plutot qu’une autre?— Quelles informations sont utilisees ?

59. L’equipe de developpement chez Bell doit effectuer un test d’utilisabilite pour l’application deguide illustree a la question 58 (dans sa version actuelle, sans fonction de recommandation).Le protocole defini pour ces tests (c.-a-d. les instructions a l’equipe responsable, en quelquesorte) comporte l’extrait suivant concernant les taches que les utilisateurs doivent effectuer :

Taches : demander a l’utilisateur d’effectuer les taches suivantes :(a) “Ouvrez l’appareil avec la telecommande”(b) “Affichez le GUIDE avec la telecommande”(c) “Affichez le canal RDI (numero 111) en utilisant le guide et le clavier numerique de

la telecommande”(d) “Une fois sur le canal RDI, allez au canal 122 (Radio-Canada) et trouvez l’emission

qui joue a 15h00. Cette fois, utilisez les fleches de la telecommande pour naviguerdans le titre”.

(e) “Maintenant, vous allez enregister une emission avec la fonction Record de latelecommande. Appuyez sur le bouton et suivez les instructions a l’ecran.”

Page 38 de 82


r la liste des taches se continue... s

(a) [1 point] Sur quelle base devrait-on definir la liste des taches pour les tests d’utilisabilite ?Quels devraient etre les profils des utilisateurs ?

(b) [1 point] Les tests devraient etre realises avec combien d’utilisateurs? Commentpourrais-je avoir une idee generale a savoir si j’ai identifie la majorite des problemesd’utilisation?

(c) [1 point] Les taches ne sont pas toutes definies selon les regles de l’art. Suggerez desameliorations a celles qui vous semblent problematiques.

60. [2 points] Parmi les enonces ci-dessous, certains sont faux ou comportent un, ou des elementsqui sont incorrects. Identifiez ces enonces et precisez en quoi ils sont faux/incorrects :

(a) La technologie Ajax permet d’obtenir un meilleur niveau d’interactivite pour des applica-tions Web du fait qu’elle effectue une requete de type XML plutot qu’une requete HTTP.Les requetes HTTP necessitent un reaffichage complet de la page dans le fureteur alorsqu’une requete Ajax permet au serveur de “pousser” (push) l’information au fureteur.

(b) La difference principale entre un processus centre utilisateur comme la norme ISO 13407et un processus de developpement logiciel general est que le premier prescrit un cycled’iteration autour des exigences utilisateurs et un ensemble d’activites specifiques a ladefinition de ces exigences et a la collecte des informations necessaires a leur definition.

(c) L’architecture X-window est du type client-serveur, mais contrairement au web, l’uti-lisateur interagit avec le serveur plutot qu’avec le client. Puis, le serveur X-windowrepresente la vue dans une architecture MVC, alors que le client represente plutot lemodele.

(d) Les taches utilisateurs sont definies a partir des cas d’utilisation. Les exigences d’utilisa-bilite sont, quant a elles, definies a partir des taches. Les taches doivent etre suffisammentprecises pour permettre de definir des exigences d’utilisabilite verifiables. Ces exigencespeuvent varier d’un profil d’utilisateur a l’autre.

61. Bell developpait depuis plusieurs mois une technologie de recommandations afin de personna-liser la grille horaire de leur service de tele sur Fibe (illustree a la question 58). Ils ont eu ventde la formation a Polytechnique portant sur ce type de technologie et sur la conception d’in-terface. Ils savent donc que vous etes “l’homme de la situation”. Vous devez dans un premiertemps leur soumettre un plan de developpement. Ils connaissent l’importance de la conceptionde l’interface pour le succes de leur produit et ce plan doit donc etre defini avec l’objectif quel’interface repondra aux besoins des utilisateurs et aux attentes de grande convivialite.(a) [1 point] Quelles informations prealables a la definition des exigences utilisateurs allez

vous chercher a obtenir et par quels moyens? Limitez votre reponse a 10 lignes.

(b) [1 point] Definissez en 10 lignes les grands principes de developpement que vous al-lez appliquer pour vous assurer que l’interface sera a la hauteur des attentes. Vousdevez convaincre la direction de Bell que vous connaissez les enjeux importants dudeveloppement d’interfaces.

Page 39 de 82


Annexe — Une page HTML avec JavaScript

157 <!DOCTYPE HTML PUBLIC ” ´ / /W3C / / DTD HTML 4 . 0 1 T r a n s i t i o n a l / / EN”158 ” h t t p : / / www. w3 . org / TR / html4 / l o o s e . d t d ”>159 <HTML>160 <META HTTP EQUIV=” Conten t´Type ” CONTENT=” t e x t / h tml ; c h a r s e t =UTF´8”>161 <HEAD>162

163 <TITLE>S t r u c t u r e DOM< / TITLE>164 <s c r i p t s r c =” j q u e r y ´1 . 1 0 . 2 . min . j s ”>< / s c r i p t>165 <s c r i p t>166 /∗ l a v a r i a b l e ” nodes ” s e r a a s s o c i e e a l ’ o b j e t ” window ” e t167 ∗ a c c e s s i b l e p a r : window . nodes168 ∗ /169 v a r nodes = document . e v a l u a t e ( ” / / h2 ” , document ,170 n u l l , X P a t h R e s u l t . ANY TYPE , n u l l ) ;171 f u n c t i o n boutonUn ( ) {172 v a r r e p o n s e = ” ” ;173 v a r n = window . nodes . i t e r a t e N e x t ( ) ;174 w h i l e ( n ) {175 r e p o n s e = r e p o n s e + n . t e x t C o n t e n t + ”\n ” ;176 n = window . nodes . i t e r a t e N e x t ( ) ;177 }178 a l e r t ( r e p o n s e ) ;179 }180

181 /∗ Ligne 181 ∗ /182

183 /∗ La f o n c t i o n r e a d y ( ) s e r a i n v o q u e e l o r s q u e l e DOM s e r a e n t i e r e m e n t c h a r g e ∗ /184 $ ( document ) . r e a d y ( f u n c t i o n ( ) {185 $ ( ” # divUn ” )186 . empty ( )187 . append ( ”<h3>T i t r e n i v e a u t r o i s </h3>” )188 } )189 < / s c r i p t>190 < s t y l e>191 # divUn { c o l o r : r e d ;}192 p . code { c o l o r : b l u e ;}193 < / s t y l e>194 < /HEAD>195 <BODY>196

197 <h1>S t r u c t u r e d ’ un document HTML< / h1>198

199 <p>Une s t r u c t u r e DOM ( Document O b j e c t Model ) e s t a s s o c i e e a200 un document HTML.< / p>201

202 <h2>Niveau des t i t r e s< / h2>203

204 <p>Les b a l i s e s H1 a H4 i n d i q u e n t des t i t r e s e t e l l e s205 c o m p o r t e n t q u a t r e n i v e a u x .< / p>206

Page 40 de 82


207 <h2>Format e t CSS< / h2>208

209 <p>Les c a r a c t e r i s t i q u e s de f o r m a t de t e x t e , de p a r a g r a p h e s ,210 e t de b a l i s e s d ’ une page HTML s o n t c o n t r o l a b l e p a r l e code CSS .211 Quelques exemples s o n t f o u r n i s c i´d e s s o u s< / p>212

213 <h3><code> t e x t´d e c o r a t i o n< / code>< / h3>214

215 <p>Le t e x t e p e u t e t r e en216 f o r m a t <span s t y l e =” t e x t´d e c o r a t i o n : l i n e´t h r o u g h ”>r a y e< / span>217 ou <span s t y l e =” t e x t´d e c o r a t i o n : u n d e r l i n e ”>s o u l i g n e< / span> , p a r exemple .218 Ce s o n t des p a r a m e t r e s de l a p r o p r i e t e <code> t e x t´d e c o r a t i o n< / code>< / p>219

220 <h3><code>f o n t´we ig h t< / code>< / h3>221

222 <p>Le t e x t e en c a r a c t e r e g r a s e s t un p a r a m e t r e de l a p r o p r i e t e223 <code>f o n t´we ig h t< / code>< / p>224

225 <button id =” boutonUn ” type =” b u t t o n ”>226 C l i q u e r i c i !227 < / button>228

229 <div id =” divUn ”>Tex te de ” divUn ”< / div>230

231 < /BODY>232 < /HTML>

62. Les enonces suivants decrivent un concept. Certains definissent le concept avec profondeuret justesse, d’autres pas. Identifiez les erreurs ou faiblesses dans les enonces et apportez lesnuances qui s’imposent, ou reformulez-les correctement.(a) [2 points] Architectures de systemes de fenetrage client-serveur. On peut classifier

les architectures de systemes de fenetrage selon qu’ils sont client-serveur ou non. X-window et le web sont deux exemples d’architectures client-serveur qui separent la vue(client) du modele (serveur). L’utilisateur interagit avec le client et les evenements de basniveau sont transmis du client au serveur graphique. Cette separation permet a la vue et auserveur de communiquer par reseau. L’architecture Windows de Microsoft, au contraire,ne suit pas le modele client-serveur et le coeur de l’application et son interface doiventnecessairement rouler sur la meme machine, a moins de faire appel a un mecanisme pourgerer la communication entre une interface et le coeur de l’application sur un reseau.Toutefois, contrairement a X-window, l’architecture web repose sur protocole HTTP quine peut gerer les sessions utilisateur puisque les echanges impliquent alors une “memoire”de l’autre. Les requetes du type XMLHttpRequest (Ajax) permettent de contourner ceprobleme. Elles utilisent le mecanisme de temoin (cookie) pour deposer une structureXML du cote du fureteur et ainsi conserver l’information reliee a une session.

(b) [1 point] Interfaces de recommandations et facteurs latents. Les recommandationsd’items comme les livres et la musique, ou meme d’individus a d’autres individus, sontparfois faites sur la base de ce que l’on nomme des facteurs latents. Ces facteurs sont desvariables permettant la prediction de preferences d’un utilisateur.

Page 41 de 82


On obtient une representation en facteurs latents par la decomposition d’une matrice de“votes” d’utilisateurs a des items. Lorsque cette matrice est decomposee en deux matrices,la premiere represente les preferences des utilisateurs a ces facteurs latents, et la seconderepresente l’appartenance des items a ces memes facteurs.

(c) [1 point] Heuristiques de conception et heuristiques d’evaluation. Les heuristiquesd’evaluation sont essentiellement les memes que les heuristiques de conception, a l’ex-ception que des objectifs d’utilisabilite sont assignes aux heuristiques d’evaluation poureffectuer des tests d’utilisabilite, alors que de tels objectifs ne s’appliquent pas pour laconception ou l’on a pas encore recours aux tests d’utilisabilite (du moins pas avantd’avoir un prototype fonctionnel). On utilise plutot des maquettes de l’interface etdes techniques comme l’inspection cognitive avec les heuristiques pour identifier lesproblemes d’utilisabilite lors de la conception.

(d) [1 point] Processus centre utilisateur et nombre d’iterations. Le processus centre uti-lisateur comporte cinq etapes : (1) la planification, (2) l’analyse du contexte d’utilisation,(3) la definition des exigences, (4) la conception et (5) l’evaluation. Ces etapes formentune boucle. Si l’evaluation n’est pas satisfaisante, on recommence le cycle. Le nombred’iterations ne peut donc pas etre determine a l’avance. C’est essentiellement l’activited’analyse couts-benefices, exigee a l’etape (1) du processus, qui permet de fixer des ba-lises au nombre d’iterations.

(e) [1 point] Guidage et charge cognitive. Le guidage et la charge cognitive sont des heu-ristiques interreliees, car elles sont souvent en concurrence l’une avec l’autre. Le fait deguider oblige l’utilisateur a lire des informations et impose du coup une charge cognitive.Il faut donc trouver le juste equilibre entre le guidage et la charge cognitive. La solutionreside generalement a ne guider que lorsque c’est vraiment necessaire.

63.

Le TD3 de ce trimestre consistait a implementerune application JavaScript pour afficherl’emplacement d’une ville avec le service webde cartographie fourni par Google maps.L’application utilise l’auto-completion deJQuery.L’annexe contient le code d’une page qui vise asatisfaire les exigences de ce TD. L’interface ace code est affichee ci-contre.

(a) [2 points] Le code devrait permettre de basculer entre l’affichage anglais et francais, maisil y a un probleme. Identifiez-le et preciser ce qui doit etre fait. Vous n’avez pas a ecrirele code mais decrivez les grande lignes des modifications a apporter.

Page 42 de 82


(b) [2 points] L’affichage du composant pour l’agrandissement (le glissoir pour le ’zoom’)permet de changer l’echelle de la carte, mais il ne se synchronise pas lorsque l’utilisateurchange l’agrandissement a partir de la carte : un changement d’echelle a partir de laroulette de la souris ne se reflete pas sur la position du curseur du glissoir.Un approche inspiree de l’architecture modele-vue-controleur (MVC) offrirait une solu-tion elegante a ce probleme et qu’ainsi la synchronisation se fasse dans les deux sens entrele glissoir et la carte. Definissez les bases de cette solution en prenant soin de specifier :

— quels composants representent un modele, une vue ou un controleur ?

— comment seraient geres les evenements de modification du zoom dans l’architecture?

Cette solution peut etre realisee avec Google Maps et JavaScript. Vous n’avez pas aspecifier le code reel qui doit etre implemente. Seuls les principes et mecanismes dela solution doivent etre clairement precises. La realite est plus complexe que le MVC debase, mais demontrez que vous comprenez ce modele et comment les grands principess’appliquent ici.

64. Le baladeur Sanyo a ete pris comme exemple de produit qui comporte de nombreux problemesd’interface et ne satisfait pas les exigences utilisateurs. Une photo accompagnee d’un schemades controles de l’interface sont affiches ci-dessous.

./20163/Final/Images/Images/sanyo.pdf

(a) [11{2 points] Quels sont ces problemes d’exigences?

(b) [11{2 points] Une inspection cognitive de l’interface aurait permis de trouver plusieursdes problemes souleves au cours avec le baladeur. Demontrez que vous connaissez lesprincipes de l’inspection cognitive et comment elle permet l’identification de problemesd’utilisabilite a travers cet exemple. (max. 1/2 page)

Page 43 de 82


65.

Nous avons vu au cours que l’editeur Emacs et letraitement de texte LATEX demeurent des logicielstres utilises. Pourtant, leur apprentissage est longet ardu, car chacun comporte des centaines decommandes a apprendre et ils imposent une fortecharge cognitive pour les apprentis.

(a) [1 point] Decrivez un facteur qui peut motiver l’utilisation de ces applications par la per-suasion ou la motivation?

(b) [1 point] Decrivez un moyen potentiel d’ameliorer la motivation a utiliser ces applica-tions en changeant l’inteface.

66. [2 points] Une partie de l’application LibreOffice Writer est reproduite ci-dessous.

Nommez et expliquez 2 principes de perception visuelle qui sont appliques dans sa concep-tion pour en ameliorer l’utilisabilite. Pour chaque principe que vous avez identifie, donnez unexemple de son application dans l’interface de LibreOffice Writer.

Page 44 de 82


Annexe — Code de l’application du TD3

Fichier td3.html

1 <!DOCTYPE html>2 <html>3 <head>4 <meta c h a r s e t =” u t f 8 ”>5 <meta h t t pé q u i v =” Conten t´Type ” c o n t e n t =” t e x t / h tml ; c h a r s e t = u t f ´8”>6 < l i n k hre f =” s t y l e s . c s s ” r e l =” s t y l e s h e e t ” type =” t e x t / c s s ”>7 <s c r i p t s r c =” h t t p : / / code . j q u e r y . com / j q u e r y ´1 . 1 1 . 1 . min . j s ”>< / s c r i p t>8 < l i n k hre f =” h t t p : / / code . j q u e r y . com / u i / 1 . 1 1 . 1 / themes / smoo thness / j q u e r yú i . c s s ”9 r e l =” s t y l e s h e e t ”>

10 <s c r i p t s r c =” h t t p : / / code . j q u e r y . com / u i / 1 . 1 1 . 1 / j q u e r yú i . j s ”>< / s c r i p t>11 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” h t t p s : / / maps . g o o g l e a p i s . com / maps / a p i / j s ? key = . . . ”>12 < / s c r i p t>13

14 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”map . j s ”>< / s c r i p t>15 < / head>16

17 <body>18 <div id =” f r a n c a i s ”> <!´ d e v r a i t e t r e des ’ c l a s s ’ ´ >19 <h1 id =”FT”>C a r t e des v i l l e s du Quebec< / h1>20 <p id =” p r o p o s i t i o n ”> S a i s i r l e nom de l a v i l l e du Quebec< / p>21 < / div>22

23 <div id =” e n g l i s h ”>24 <h1 id =”ET”>Map of Quebec c i t i e s< / h1>25 <p id =” p r o p o s i t i o n ”> E n t e r t h e name of t h e c i t y < / p>26 < / div>27

28 <form>29 <input id =” s e a r c h B a r ” type =” t e x t ” name=”name”>30 < / form>31 <br>32

33 <div id =” b o u t o n s ”>34 <button id =” b o u t o n F r a n c a i s ”>F r a n c a i s< / button>35 <button id =” b o u t o n A n g l a i s ”>E n g l i s h< / button><br><br>36 < / div>37

38 Zoom : <div id =” s l i d e r ”>< / div>39

40 <div id =” mapImage ”>< / div>41 < / body>42 < / html>

Page 45 de 82


Fichier map.js

43 $ ( document ) . r e a d y ( f u n c t i o n ( ) {44

45 var a r r a y = [ ]46 var marker = new go og l e . maps . Marker ({map : n u l l } ) ;47

48 $ ( ” # e n g l i s h ” ) . h i d e ( ) ;49

50 $ . getJSON ( ” v i l l e s . j s o n ” , f u n c t i o n ( d a t a ){51

52 $ . each ( da t a , f u n c t i o n ( v i l l e , v a l u e ){53 a r r a y . push ( v i l l e , v a l u e ) ;54

55 $ ( ” # s e a r c h B a r ” ) . a u t o c o m p l e t e ({56 s o u r c e : a r r a y ,57 s e l e c t : f u n c t i o n ( even t , u i ){58 var myLatLng = new go og l e . maps . LatLng (59 d a t a [ u i . i t em . v a l u e ] . l a t , d a t a [ u i . i t em . v a l u e ] . l o n )60 map . s e t C e n t e r ( myLatLng )61 marker . setMap ( n u l l )62 marker = new go og l e . maps . Marker ({63 p o s i t i o n : myLatLng ,64 map : map ,65 t i t l e : u i . i t em . v a l u e66 } ) ;67 }68 } )69 } ) ;70 } ) ;71

72 var map = new go og l e . maps . Map( document . g e tE lemen tById ( ’ mapImage ’ ) , {73 c e n t e r : { l a t : 4 5 . 5 , l n g : ´73.55} ,74 zoom : 7 ,75 } ) ;76

77 f u n c t i o n s e t Z o o m S l i d e r ( x )78 {79 map . setZoom ( x ) ;80 }81

82 $ ( f u n c t i o n ( ) { / / Code c r e a t i o n d ’ un g l i s s o i r83 $ ( ” # s l i d e r ” ) . s l i d e r ({ / / A s s o c i a t i o n du g l i s s o i r a e l e m e n t ” i d = s l i d e r ”84 r a n g e : ” min ” ,85 min : 0 , max : 22 ,86 v a l u e : map . getZoom ( ) ,87 s l i d e : f u n c t i o n ( even t , u i ) { / / F o n c t i o n de r a p p e l s u i t e a ev enement88 s e t Z o o m S l i d e r ( u i . v a l u e ) ; / / de d e p l a c e m e n t du c u r s e u r du g l i s s o i r89 }90 } )91 } ) ;92 } ) ;

Page 46 de 82


Fichier styles.css

93 html , body {94 h e i g h t : 100%95 }96

97 body {98 f o n t´f a m i l y : sans´s e r i f ;99 f o n t´s i z e : 14 px ;

100 margin´t o p : ´17px ;101 }102

103

104 h1 {105 f o n t´we ig h t : bo ld ;106 f o n t´s i z e : 20 px ;107

108 padding´t o p : 20 px ;109 margin´bot tom : 20 px ;110 }111

112 /∗ French t i t l e e t E n g l i s h t i t l e , pour l e b o r d e r bot tom ∗ /113 #FT{ wid th : 320 px ;}114 #ET{ wid th : 252 px ;}115

116

117 b u t t o n {118 wid th : 100 px ;119 h e i g h t : 40 px ;120 f o n t´s i z e : 20 px ;121 }122

123 b u t t o n : hove r {124 backgroundć o l o r : #D4E0EF ;125 }126

127 # b o u t o n s {128 d i s p l a y : i n l i n e ´b l o c k ;129 }130

131 # b o u t o n F r a n c a i s {132 margin´r i g h t : ´12px ;133 f o n t´s i z e : 14 px ;134 }135 # b o u t o n A n g l a i s {136 margin´ l e f t : 40 px ;137 f o n t´s i z e : 14 px ;138 }139

140 i n p u t {141 wid th : 300 px ;142 h e i g h t : 30 px ;

Page 47 de 82


143

144 f o n t´s i z e : 14 px ;145 box´s i z i n g : bo rde r´box ;146 ´moz´box´s i z i n g : bo rde r´box ;147 ´webki t´box´s i z i n g : bo rde r´box ;148

149 d i s p l a y : i n l i n e ´b l o c k ;150 }151

152 i n p u t : focus , i n p u t : hove r { b o r d e r : 3px s o l i d rgba ( 1 3 2 , 2 3 2 , 1 5 9 , 0 . 4 )}153

154 # r e s u l t F r , # r e s u l t E n {155 f o n t´s i z e : 14 px ;156 d i s p l a y : i n l i n e ;157 c o l o r : rgb ( 3 2 , 3 2 , 0 ) ;158 }159

160 # r e s u l t E , # r e s u l t F {161 f o n t´s i z e : 14 px ;162 d i s p l a y : i n l i n e ;163 c o l o r : rgb ( 3 2 , 3 2 , 0 ) ;164 }165

166 #mapImage{167 wid th : 100%;168 h e i g h t : 68%;169 }170

171 # Sl idF , # S l i d E {172 margin´t o p : 2px ;173 c o l o r : rgb ( 3 2 , 3 2 , 0 ) ;174 f o n t´s i z e : 12 px ;175 }176

177 # s l i d e r {178 wid th : 285 px ;179 margin : a u t o ;180 }

Page 48 de 82


67.

L’annexe contient le code HTML(fichier rpncalc.html) et JavaScript(fichier rpncalc.js) d’un calculateurRPN similaire a celui du TD1, maissans la partie des exercices. La captured’ecran ci-contre illustre le resultatdans un fureteur. Le code fonctionnecorrectement. Repondez aux questionssuivantes en vous y referant.(a) [2 points] Decrivez une solution pour que le texte de tous les boutons soit de couleur

bleue. De plus, les chiffres doivent etre en caracteres gras (mais seulement les chiffres).Assurez-vous d’utiliser l’approche la plus appropriee.

(b) [2 points] Les calculatrices RPN peuvent avoir deux modeles de fonctionnement, desorte que la sequence :2 <enter> 3 <enter> +

peut donner la valeur 6 ou la valeur 5 selon la version. Quelle est la version del’annexe? Attention : une mauvaise reponse entraıne une penalite de (´1) point.

(c) [3 points] Vous desirez afficher un texte d’aide pour la notation RPN et testez une solu-tion qui consiste a ajouter les lignes suivantes la ou le texte d’aide apparaıtra, a la toutefin de la page, juste avant la balise </body> :

<p id =” a f f i c h e r A i d e ”>A f f i c h e r a i d e< / p><div id =” a i d e ”>< / div>

Puis, juste apres l’instruction de la ligne 9 :

<s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” r p n c a l c . j s ” l a n g u a g e =” J a v a S c r i p t ”>< / s c r i p t>

vous ajoutez le code JavaScript ci-dessous :

<s c r i p t >$ ( ” # a f f i c h e r A i d e ” ) . mouseover ( f u n c t i o n ( ) {

$ ( ” # a i d e ” ) . h tml ( ” Le t e x t e d ’ a i d e . . . ” ) ;} )</ s c r i p t >

Le comportement auquel on devrait s’attendre est que le texte d’aide s’affiche des quela souris passe au-dessus du paragraphe intitule “Afficher aide”. Mais voila rien ne seproduit. Pourtant, les fonctions sont les bonnes et la syntaxe valide. Expliquez le problemeet comment le solutionner.

(d) [3 points] Les boutons sont actuellement relies au code JavaScript par l’attribut onclickdes balises HTML. Decrivez une solution alternative qui ne fait pas appel a cet attribut

Page 49 de 82


et qui reduirait la maintenance en centralisant la fonctionnalite, idealement autour d’uneseule fonction. Assurez-vous que la solution soit la plus simple possible et bien expliquee,de preference en ecrivant le code, ou en pseudo-code si le code precis vous echappe.

(e) [3 points] Precicez si l’enonce suivant est entierement juste, ou si au contraire il contientdes erreurs ou inexactitudes, auquel cas vous devez les decrire et reformuler correctementl’enonce ou les parties de l’enonce qui sont erronees ou inexactes.

Le calculateur RPN se conforme a l’architecture MVC. La vue estrepresentee par les quatre registres (la pile), le controleur par les boutons, etle modele par le code du fichier rpncalc.js qui contient la logique de l’appli-cation. Le modele recoit du controleur les evenements qui modifient son etat. Ilavertit la vue des changements d’etat a la pile et la vue met a jour les registresaffiches pour les rendre conformes au modele.

68. [4 points]

Les trois fenetres ci-dessus illustrent les mecanismes d’adaptation d’un document HTML a lataille de la fenetre. Decrivez une technique qui permet de realiser cette adaptation. Referez-vous a l’exemple des fenetres ci-dessus pour expliquer comment la technique est appliquee.(5–10 lignes)

69. [3 points] Il peut arriver qu’une interface fige et ne reponde plus a des evenements de la sourispendant un moment, par exemple lorsque l’application est en attente d’une reponse du reseau,ou lorsqu’un traitement est long. Expliquez comment solutionner ce probleme.

Page 50 de 82


70. [5 points] Plusieurs grandes compagnies de telecommunications offrent maintenant un accesaux grandes chaines de telediffusion a travers le protocole TCP/IP. Elles peuvent donc garderla trace detaillee des emissions ecoutees dans un domicile. Du coup, elles peuvent utiliserces donnees pour etablir des profils d’ecoute et effectuer des recommandations personnaliseesd’emissions.Les techniques reposent sur des donnees que l’on nomme souvent la matrice de votes. Il s’agitd’une matrice ou les lignes peuvent representer les utilisateurs et les colonnes representent lesitems, en l’occurrence les emissions.Decrivez la technique de decomposition de cette matrice en le produit de deux autres matrices(factorisation de matrices).

— Que representent les dimensions des deux matrices qui resultent de la factorisation?

— Quels sont les avantages de cette approche sur l’approche qui consiste a trouver desemissions similaires directement de la matrice de votes?

— Comment un vote est-il estime avec cette approche?

71. Certains des enonces suivants sont justes, eclairants et precis, d’autres pas. Identifiez lesenonces ou les segments d’enonces qui sont faibles, ou meme faux, et reformulez-les correcte-ment. Votre reformulation peut simplement consister a modifier quelques mots, ou a preciserle texte, ou encore a le reformuler completement, sans toutefois depasser plus de deux fois lalongueur du texte original.(a) [2 points] DOM. Le Document Object Model est une structure de donnees en arbre

qui represente le contenu HTML d’une page web. On peut y acceder dans le langageJavaScript a partir de l’objet document. Cet objet est en fait une reference au noeudracine de l’arbre DOM. Les changements a l’affichage d’une page web a travers Ja-vaScript peuvent ainsi s’effectuer en modifiant le DOM et en appelant la methodeonreadystate() de document afin de mettre l’affichage du DOM a jour. L’utilisa-tion de la librairie jQuery facilite l’acces aux elements du DOM et automatise la mise ajour.

(b) [2 points] Evaluations d’interfaces. Il existe deux principales approches a l’evaluationd’interface. La premiere est basee sur des experts qui analysent la qualite d’une inter-face en fonction de criteres ergonomiques et d’heuristiques. La seconde consiste a effec-tuer une inspection cognitive en demandant a des individus qui n’ont pas d’experienceavec l’interface d’effectuer une tache. Differentes mesures comme le temps et le taux dereussite permettent d’evaluer l’interface de maniere quantitative.

(c) [3 points] XUL et interfaces dites “declaratives”. Une interface est dite declarativelorsqu’elle utilise un langage pour specifier les composants et les elements graphiquesqui la definissent. L’avantage principal de cette approche est de faciliter l’implantationd’une architecture client-serveur qui roule dans un environnement reseau comme dansun environnement local de facon totalement transparente (l’utilisateur n’y voit aucunedifference). XUL est un exemple d’un tel langage qui suit la syntaxe XML et repose sur lelangage JavaScript pour implementer la logique de l’application. L’approche declarativepossede aussi l’avantage de faciliter la creation d’interfaces multi-plates-formes. Une foisle serveur implemente sur une nouvelle plate-forme, toute application dont l’interface est

Page 51 de 82


ecrite dans le langage descriptif supporte par le serveur peut afficher cette interface surcette plate-forme.

(d) [2 points] Gestionnaire de fenetres. Le gestionnaire de fenetres est responsable du pla-cement des fenetres sur l’ecran, de leur iconisation et de leur “decoration” (la bordurequi entoure une fenetre). Il est aussi responsable des bordures de l’ecran d’ou les applica-tions peuvent etre demarrees et leurs fenetres recuperees. Le gestionnaire de fenetres estaussi l’entite qui decide quelle fenetre a le “focus”. En X Window l’interaction entre lesapplications et le gestionnaire se fait a travers le protocole X11.

Page 52 de 82


Annexe — Code du calculateur

Fichier rpncalc.html

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">2 <html><head><title>Calculateur RPN</title>3 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>4 <style type="text/css">5 input.btn {color:#000000;width:9ex;vertical-align:middle;font-weight:normal;}6 input.bigbtn {color:#000000;width:18ex;vertical-align:middle;font-weight:normal;}7 </style>8

9 <script type="text/javascript" src="calc.js" language="JavaScript"></script>10

11 </head>12 <body>13 <h1>Calculateur RPN</h1>14

15 <center>16 <form name="rpncal">17 <table summary="calculator" bgcolor="#cccccc" border="4" cellpadding="0" cellspacing="1">18 <tbody><tr>19 <td colspan="4" align="center"><font color="#0000aa">Calculateur RPN</font></td>20 </tr>21

22 <tr>23 <td colspan="4">Registre 4:<input name="regist4" value="0" size="21" readonly="readonly"> </td>24 </tr>25 <tr>26 <td colspan="4">Registre 3:<input name="regist3" value="0" size="21" readonly="readonly"> </td>27 </tr>28 <tr>29 <td colspan="4">Registre 2:<input name="regist2" value="0" size="21" readonly="readonly"> </td>30 </tr>31 <tr>32 <td colspan="4" bgcolor="#aaaabb">Registre 1:<input name="regist1" value="0" size="21"> </td>33 </tr>34

35 <tr>36 <td><input class="btn" value=" 7 " onclick="addChar(this.form, ’7’)" type="button"> </td>37 <td><input class="btn" value=" 8 " onclick="addChar(this.form, ’8’)" type="button"> </td>38 <td><input class="btn" value=" 9 " onclick="addChar(this.form, ’9’)" type="button"> </td>39 <td><input class="btn" value=" / " onclick="compute(’divide’, this.form)" type="button"> </td>40 </tr>41 <tr>42 <td><input class="btn" value=" 4 " onclick="addChar(this.form, ’4’)" type="button"> </td>43 <td><input class="btn" value=" 5 " onclick="addChar(this.form, ’5’)" type="button"> </td>44 <td><input class="btn" value=" 6 " onclick="addChar(this.form, ’6’)" type="button"> </td>45 <td><input class="btn" value=" * " onclick="compute(’multiply’, this.form)" type="button"> </td>46

47 </tr>48 <tr>49 <td><input class="btn" value=" 1 " onclick="addChar(this.form, ’1’)" type="button"> </td>50 <td><input class="btn" value=" 2 " onclick="addChar(this.form, ’2’)" type="button"> </td>51 <td><input class="btn" value=" 3 " onclick="addChar(this.form, ’3’)" type="button"> </td>52 <td><input class="btn" value=" - " onclick="compute(’subtract’, this.form)" type="button"> </td>53

54 </tr>55 <tr>56 <td><input class="btn" value=" 0 " onclick="addChar(this.form, ’0’)" type="button"> </td>57 <td> </td>58 <td><input class="btn" value=" . " onclick="addChar(this.form, ’.’)" type="button"> </td>59 <td><input class="btn" value=" + " onclick="compute(’add’, this.form)" type="button"> </td>60 </tr>61 <tr>

Page 53 de 82


62 <td><input class="btn" value=" C " onclick="cx(this.form)" type="button"> </td>63 <td> </td>64

65 <td colspan="2"><input class="bigbtn" value=" Enter " name=" enter "66 onclick="enterx(this.form)" type="button"> </td>67 </tr>68 </tbody></table>69 </form>70 </center>71


Fichier rpncalc.js

1 var computed = true;2 var enterpressed = false;3 var RPNstack=new Array(4);4 var lastxvalue=0;5

6 RPNstack[3] = RPNstack[2] = RPNstack[1] = RPNstack[0] = 0;7

8 function pushStack(f)9 {

10 f.regist4.value = f.regist3.value;11 f.regist3.value = f.regist2.value;12 f.regist2.value = f.regist1.value;13 }14 function popStack(f)15 {16 f.regist2.value = f.regist3.value;17 f.regist3.value = f.regist4.value;18 }19 function fillRPNstack(f)20 {21 RPNstack[3]=f.regist4.value;22 RPNstack[2]=f.regist3.value;23 RPNstack[1]=f.regist2.value;24 RPNstack[0]=f.regist1.value;25 lastxvalue=f.regist1.value;26 }27 function enterx(f)28 {29 fillRPNstack(f);30 pushStack(f);31 enterpressed = true;32 computed = false;33 }34 // ’C’ pour "Clear"35 function cx(f)36 {37 fillRPNstack(f);38 f.regist1.value = 0 ;39 computed = false;40 }41 function addChar(f, character)42 {43 var tmpvar;44 if (computed || enterpressed) {45 fillRPNstack(f);46 }

Page 54 de 82


47 if(computed) {48 pushStack(f);49 f.regist1.value = "";50 computed = false;51 }52 if(enterpressed) {53 f.regist1.value = "";54 computed = false;55 enterpressed = false;56 }57 tmpvar=f.regist1.value;58 // Vrai si la chaıne de caracteres f.regist1.value contient un nombre59 if(tmpvar.match(/ˆ[0-9\.\-]+$/)){60 f.regist1.value += character;61 } else {62 f.regist1.value = character;63 }64 }65 function compute(op, f)66 {67 fillRPNstack(f);68 switch(op) {69 case "add":70 f.regist1.value = parseFloat(f.regist2.value) + parseFloat(f.regist1.value);71 break;72 case "subtract":73 f.regist1.value = parseFloat(f.regist2.value) - parseFloat(f.regist1.value);74 break;75 case "multiply":76 f.regist1.value = parseFloat(f.regist2.value) * parseFloat(f.regist1.value);77 break;78 case "divide":79 f.regist1.value = parseFloat(f.regist2.value) / parseFloat(f.regist1.value);80 break;81 }82 computed = true;83 popStack(f);84 }

72. La fenetre de dialogue ci-dessous est tiree d’une application tres connue pour la gestion d’unebase de donnees. L’utilisateur vient de saisir l’information pour creer une nouvelle relation etcette fenetre de dialogue s’affiche (une relation est la structure de donnees principale des basesde donnees dites relationnelles). Cette fenetre comporte differents problemes.

(a) [2 points] Identifiez deux de ces problemes en les qualifiant selon les heuristiques deBastien et Scapin (voir le rappel des heuristiques a l’annexe ).

(b) [2 points] Redessinez cette fenetre pour en ameliorer l’ergonomie.

Page 55 de 82


73. [4 points]

La capture d’ecran ci-contre est celle d’undialogue pour le tri des lignes d’un tableau selondifferentes colonnes (Part ID, Description, ...).Les options Primary, Second et Third permettentde specifier l’ordre de priorite du tri. Chaquecolonne represente un bouton pressoir (un seulchoix actif a la fois). Presumez deux boutonsadditionels : “Annuler” et “Trier”.Identifiez quatre problemes d’utilisabilite enprenant soin de specifier l’heuristique de Bastienet Scapin en jeu (voir Annexe ). Finalement,redessinez l’ecran de dialogue qui corrige cesproblemes.

74. [3 points] Une difficulte avec les tests d’utilisabilite est d’evaluer l’utilisabilite a long terme,car on ne peut en pratique effectuer des tests qui s’echelonnent sur des jours et encore moinssur des mois. Pourtant, il est relativement frequent d’avoir des applications dont l’utilisations’echelonne sur des mois et meme des annees. Indiquez a quelle(s) heuristique(s) cette diffi-culte se rapporte et donnez un exemple du type de difficulte en question. Finalement, donnezdes pistes de solution a ce probleme.

75. Certains des enonces suivants peuvent etre entierement ou partiellement justes, eclairants etprecis, d’autres pas. Identifiez les enonces ou les segments d’enonces qui sont faibles, oumeme faux, et reformulez-les correctement. Votre reformulation peut simplement consister amodifier quelques mots, ou a preciser le texte, ou encore a le reformuler completement, sanstoutefois depasser plus de deux fois la longueur du texte original.(a) [2 points] L’architecture X-Window est du type client-serveur, tout comme le sont les

interfaces web. Cependant, au contraire du web, le serveur peut generer des evenementssuite aux actions de l’utilisateur. Ces evenements seront recus par le client et les rou-tines associees seront executees. Des instructions, comme le redessinement de parties defenetre, pourront alors etre retransmises au serveur. Avec cette architecture et en faisantune analogie avec le MVC, il est plus juste d’associer le modele au serveur et la vueau client, alors que dans l’architecture Web le modele serait plutot associe a la structureDOM qui reside sur le fureteur que l’on refere souvent par le client du serveur HTTP.

(b) [2 points] Les applications developpees avec la technologie XUL sont qualifiees dedeclaratives, dans le sens ou elles decrivent les composants de l’interface et les structuresde mise en forme dans un langage dedie et de maniere independante du code associe auxevenements. Au contraire, les approches non declaratives, comme le web avec JavaScriptet Java avec la libraire Swing, integrent les instructions de creation de composants et demise en forme generale dans le code lui-meme. Les approches declaratives ont l’avan-tage d’etre plus flexibles, alors que les approches non declaratives se pretent mieux al’adaptation a differentes plateformes.

(c) [2 points] Les quatre graphiques ci-dessous illustrent les problemes trouves (un problemepar colonne) par differents evaluateurs (un evaluateur par ligne). Ils comportent tous120 instances de problemes trouves. Les lignes et les colonnes sont ordonnees selon le

Page 56 de 82


nombre de problemes qu’ils/elles comportent. Il y a 16 problemes et 19 evaluateurs. Cesgraphiques sont du meme type que ceux de l’article de Nielsen sur les evaluations heu-ristiques, mais comportent des resultats differents. rJusqu’ici le texte ne comporte aucuneinexactitude et n’est fourni qu’a titre informatif s

Éva

luat

eurs

Problèmesd'utilisabilité

faci

le

diffi

cile

moinsefficace

plusefficace

(1)

Éva

luat

eurs


faci

le

diffi

cile

moinsefficace

plusefficace

(2)

Éva

luat

eurs


faci

le

diffi

cile

moinsefficace

plusefficace

(3)

Éva

luat

eurs


faci

le

diffi

cile

moinsefficace

plusefficace

(4)

Le cas du graphique (1) indique une convergence rapide et l’on peut conclure que la majo-rite des problemes seront trouves rapidement. A l’autre extreme, le graphique (4) indiqueau contraire qu’il n’y a pas de convergence et qu’un plus grand nombre d’evaluateursseront necessaires pour identifier la majorite des problemes. Dans la realite, c’est le gra-phique (3) que l’on rencontre le plus souvent et Nielsen recommande de trois a cinqevaluateurs pour identifier la majorite des problemes. Le nombre de nouveaux problemestrouves pour chaque evaluateur suit une loi exponentielle qui a la forme

fpiq “ Np1´ p1´ pqiq

ou i est le numero de l’evaluateur, p est une constante et N est le nombre total deproblemes.

(d) [2 points] Les filtres collaboratifs permettent d’effectuer des recommandations aux utili-sateurs sur la base d’une matrice contenant des votes d’utilisateurs a des items. Une desapproches consiste a recommander des items similaires a un item pour lequel l’utilisateura exprime un interet. La correlation ou le cosinus entre les vecteurs items sert de me-sure de similarite. Une autre approche consiste a regrouper les utilisateurs en categories(facteurs latents) par une technique de factorisation de la matrice de votes (SVD, parexemple), et a identifier les items dont les votes sont les plus eleves par categorie (parle vote moyen, par exemple). Si un utilisateur n’a pas vote pour un de ces items, on luirecommandera.

76. L’annexe contient le code d’une page HTML et le resultat de son affichage. Repondez auxquestions suivantes en vous y referant.(a) [3 points] Decrivez le resultat que l’on obtiendra en cliquant sur chacun des trois boutons.

(b) [3 points] Modifiez le code afin d’ajouter un bouton qui change la couleur de fond desquatre paragraphes dont l’attribut id est respectivement item1 a item4. Demontrez quevous connaissez la maniere dont cette tache peut etre effectuee en JavaScript. L’utilisa-tion du nom precis des fonctions/methodes/attributs JavaScript n’est pas obligatoire, mais

Page 57 de 82


assurez-vous que la solution proposee fait appel aux bonnes pratiques et aux notions vuesau cours.

(c) [4 points] La page affiche actuellement un seul menu et il est affiche en per-manence. Vous desirez en fait avoir plusieurs menus et, en plus, qu’ils soientderoulants plutot que statiques comme celui affiche dans l’annexe, a l’ins-tar des deux figures ci-dessous. Decrivez comment modifier le code pour ob-tenir le resultat voulu en utilisant JavaScript. Vous n’avez pas ici a ecrirede code, simplement a expliquer en detail ce qui doit etre fait et comment.

77. L’annexe contient le code et l’affichage d’un exercice vu au cours. Il s’agit d’une applicationAngularJS qui affiche le nombre de caracteres restants a mesure que l’utilisateur entre descaracteres dans la zone de texte (textarea). Ce nombre est fixe a 100.(a) [5 points] Commentez les lignes suivantes du code : 9, 12, 18, ainsi que toutes les lignes

du script qui commence a la ligne 24. Vos commentaires doivent fournir des explicationssur le role des instructions par rapport a AngularJS.

(b) [2 points] Des que l’utilisateur commence a saisir du texte, le nombre de caracteres s’af-fiche comme desire et comme c’est affiche dans la figure de l’annexe. Cependant, auchargement, voici l’affichage :

Expliquez le probleme d’affichage au moment du chargement et decrivez les changementsnecessaires pour que l’affichage au chargement soit la valeur maximale, 100. Vous n’avezqu’a decrire la logique, pas les directives JavaScript ou AngularJS particulieres. A titred’indice, voici ce qui s’affiche sur la console JavaScript du fureteur :TypeError: Cannot read property ’length’ of undefined

at l.$scope.remaining (ng-text-area-fixed.html:29)at angular.min.js:198at Object.<anonymous> (angular.min.js:107)at l.$digest (angular.min.js:123)at l.$apply (angular.min.js:126)at angular.min.js:17at Object.e [as invoke] (angular.min.js:36)at d (angular.min.js:17)at tc (angular.min.js:18)

78. [4 points] Decrivez deux approches permettant de creer des interfaces multi-plateformes etdonnez pour chacune les avantages et inconvenients (1/2 page).

Page 58 de 82


Annexe — Code et affichage d’une page HTML

Code

1 <!DOCTYPE html>2 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">3 <html>4 <head>5 <script>6 function menu(elem, type) {7 var liElem =document.getElementsByTagName(elem)8 for(var i = 0; i < liElem.length; i++) {9 liElem[i].style.cssFloat=type;

10 }11 }12 </script>13 <style>14 ul {15 list-style-type:none; margin:0; padding:0;16 }17 li {18 border:solid 1px;19 width:100px; margin:0; padding:0;20 }21 a {22 display:block; background-color:#dddddd;23 }24 #boutons {25 background-color:#ddffff;26 }27

28 </style>29 </head>30

31 <body>32

33 <ul>34 <li><a href="#item1">Item 1</a></li>35 <li><a href="#item2">Item 2</a></li>36 <li><a href="#item3">Item 3</a></li>37 <li><a href="#item4">Item 4</a></li>38 </ul>39

40 <div id="boutons">41

42 <p>Quelques boutons</p>43

44 <button type="button" onclick="menu(’li’, ’left’)">Un</button>45 <button type="button" onclick="menu(’li’, ’right’)">Deux</button>46 <button type="button" onclick="menu(’li’, ’none’)">Trois</button>47

48 </div>49

50 <p id="item1">Paragraphe item 1.</p>51 <p id="item2">Paragraphe item 2.</p>52 <p id="item3">Paragraphe item 3.</p>53 <p id="item4">Paragraphe item 4.</p>54

55

56 </body>

Page 59 de 82


Affichage

Page 60 de 82


Annexe — Code d’affichage d’un formulaire

Code1 <!DOCTYPE html>2 <html>3 <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">4 </script>5

6

7 <body>8

9 <div ng-app="myApp" class="container" ng-controller="TextAreaWithLimitCtrl"> (**)10

11 <div class="row">12 <textarea ng-model="message">{{message}}</textarea> (**)13

14 <button ng-click="send()">Envoyer</button>15 <button ng-click="clear()">Effacer</button>16

17

18 <p> Caracteres restants: {{remaining()}}</p> (**)19

20 </div>21

22 </body>23

24 <script> (**)25 var MAX_LEN = 100;(**)26 var app = angular.module(’myApp’, []);27 app.controller("TextAreaWithLimitCtrl", function($scope) {28 $scope.remaining = function () {29 return MAX_LEN - $scope.message.length;30 }31 });32 </script>33

34 </html>

Affichage

79. Voici une matrice de votes :

Item1 2 3 4

U1 4 2 ? 2U2 4 3 1 1U3 1 2 4 4U4 5 2 1 1

(a) [3 points] Decrivez l’approche utilisateur-utilisateur pour predire le vote a l’item 3.Expliquez-en les principes generaux. Vous n’avez pas a calculer la valeur, mais plutota demontrer le calcul qui doit etre effectue. (10 lignes).

Page 61 de 82


(b) [2 points] La moyenne des votes de U1 est de p4 ` 2 ` 2q{3 “ 8{3. Selon l’approcheutilisateur-utilisateur, le vote predit pour l’utilisateur a l’item 3 sera-t-il au-dessus ou endessous de cette moyenne? La reponse a cette question s’obtient sans calculs.

80. [4 points] Regle generale, les matrices de votes sont creuses (peu de votes par utilisateur pourun grand nombre d’items).Comment une approche par facteurs latents pourrait-elle offrir une solution au probleme?Expliquez son fonctionnement en 15 lignes environ.

81. L’annexe contient un extrait d’une conversation entre un client d’une entreprise telephoniqueet un systeme de reconnaissance vocale dont le role est d’aiguiller le client vers le service quirepondra a son besoin. Nous avons vu cet exemple en classe.Repondez aux questions suivantes en vous y referant.Volet utilisabilite.(a) [5 points] Ce type d’interface est particulier, car il repose uniquement sur des echanges

verbaux. Cependant, la tendance pour ce type d’interface est a la hausse avec les systemescomme Siri, Cortana et Google Now. Ecrivez un texte de 15 lignes concernant les en-jeux ergonomiques de ce type d’interfaces. Quelles sont leurs forces? Leurs faiblesses?Quelles heuristiques habituelles de conception s’appliquent, ou ne s’appliquent pas (voirannexe )?

Volet developpement centre utilisateur.(b) [5 points] Nous avons vu que certains principes de developpement centre utilisateur s’ap-

pliquent pour l’elaboration d’un contrat entre un developpeur logiciel et un client de latechnologie developpee. Imaginons que vous representez le client et que vous desirezqu’une partie de la remuneration du developpeur soit basee sur le gain de productivite,qui peut se mesurer par exemple en nombre d’appels traites par jour et par agent (un appeletant souvent ultimement traite par un agent humain une fois passe la phase d’aiguillage).Decrivez, en environ 15 lignes, un plan de developpement qui saura le convaincre que leresultat sera un succes du point de vue centre utilisateur.

(c) [3 points] Elaborez les bases du calcul a la base du contrat envisageable entre le clientet le developpeur en vous basant sur les principes et concepts du developpement centreutilisateur.

82. Certains des enonces suivants peuvent etre entierement ou partiellement justes, eclairants etprecis, d’autres pas. Identifiez les enonces ou les segments d’enonces qui sont faibles, oumeme faux, et reformulez-les correctement. Votre reformulation peut simplement consister amodifier quelques mots, ou a preciser le texte, ou encore a le reformuler completement.(b) [2 points] Dans l’environnement d’un fureteur web, une fonction JavaScript peut etre

directement associee a une balise HTML avec une declaration d’un attribut corres-pondant a un type d’evenement, par exemple : <div onclick=’’(function(e)

alert(’message quelconque’))()’’ </div>.

(c) [2 points] Lorsqu’un clic de souris survient sur un element d’une page web, le fureteurdetermine a partir de sa position (x,y) les elements qui recoupent cette position. La fonc-tion de rappel de chaque evenement est alors appelee.

Page 62 de 82


(d) [2 points] L’architecture X Window est client-serveur. Le serveur X est l’application aveclaquelle l’utilisateur interagit et le client est l’application qui roule sur la meme machineou sur une machine distante. Les evenements qui surviennent sur le serveur, par exemplesuite a un clique de souris par l’utilisateur, sont transmis a l’application cliente. Cesevenements comportent une position (x,y) et bon nombre d’autres parametres propresa chaque type d’evenement. Il incombe a l’application et non au systeme de fenetrageX Window de determiner a quel composant l’evenement doit etre associe et d’executer lafonction de rappel correspondante.

(e) [2 points] Les avantages d’une approche declarative a la conception d’interfaces par rap-port a une approche imperative (integree au code) sont nombreux. L’approche permetnotamment de separer la vue du controleur, ce qui s’avere souvent difficile dans uneapproche imperative. Elle facilite la conception d’interfaces multi-plateformes. Elle faci-lite l’adaptation de l’interface a differents facteurs comme la taille de l’ecran et le typed’evenements geres (par ex. interactions gestuelles).

(f) [2 points] JQuery se distingue de AngularJS du fait que cette librairie permet de redefinirdes balises HTML ou d’en definir de nouvelles. En effet, JQuery integre un processusqui “compile” l’arbre DOM et redefinit certaines balises, non definies en HTML, en desbalises HTML standard et genere du code JavaScript pour l’implementation de fonction-nalites avancees comme des liens bi-directionnels entre deux composants : si l’un change,l’autre change automatiquement.

83. L’annexe contient le code des quatre fichiers fournis pour le TD2 dont l’objectif est d’ap-prendre l’usage du worker HTML. Supposons que le code du fichier index.html (entre lesbalises body) est complete avec ces instructions :

1 <body>2 <div class="a">3 <div class="b">4 <textarea id="texte" placeholder="Texte a saisir">5 </textarea>6 </div>7 <div class ="c">8 <div class="progress">9 <div class="progress-bar progress-bar-striped active"

10 id="progressBar"> (**)11 <div id="progression"></div>12 <div id="pourcentage"></div>13 </div>14 </div>15 <div class="boutons">16 <button type="button" id="bouton1">Compter</button>17 <button type="button" id="bouton2">Annuler</button>18 </div>19 <div class = "compteur">20 <div id="nbDeJetons">0</div>Jetons (**)21 </div>22 </div>23 </div>24 </body>

(a) [4 points] Le programmeur Denis Codeurre commence deja a ecrire quelques lignes pourle “code a implementer” qui serait a inserer a la ligne 6 du fichier worker.js :

1 compteur.compterJetons(e.data);

Page 63 de 82


2 while(compteur.getProgress() < 100) {3 compteur.compterJetons(e.data).next().value;4 document.getElementById("nbDeJetons").innerHTML =5 compteur.getJetons();6 document.getElementById("progressBar").innerHTML =7 compteur.getProgress();8 }

Les elements identifies par nbDeJetons et progressBar sont respectivement auxlignes 20 et 10 du code ajoute pour index.html ci-dessus.Mais ce code ne peut pas fonctionner. Expliquez pourquoi ?

(b) [4 points]Supposons que le fichier CSS utilise fixe la hauteur de l’element texte (textarea) a500 pixels. Dans une fenetre large, ceci s’affiche correctement comme on le voit dansl’image de gauche ci-dessous. Par contre, pour une fenetre moins large, l’affichage insereles boutons en bas comme on le voit dans l’image de droite ci-dessous. Ce n’est pasl’ideal, surtout si la fenetre etait moins haute et que l’on ne voit plus les boutons.

Suggerez une solution a ce probleme qui permet de reduire la taille de l’element textelorsque la hauteur de la fenetre est sous un seuil donne. Votre solution doit donner unresultat semblable a la figure ci-dessous. Elle doit etre claire et explicite, mais vous n’avezpas a ecrire le code specifique, uniquement a fournir les principes et mecanismes en jeu.

Page 64 de 82


Annexe , echange telephonique avec l’application Emilie

Emilie dit : Le client repond :1 Bonjour, je m’appelle Emilie. Je suis votre representante de services

informatises.Dites-moi dans vos propres mots la raison de votre appel et je vousassisterai.N’hesitez surtout pas a m’interrompre, ou a me demander de l’aide en touttemps. Pour entendre la liste des options, dites “quels sont les choix”.Alors, comment puis-je vous aider ?

Quels sont meschoix?

2 Alors, voici des exemples de ce que vous pouvez dire :— modifier mes services telephoniques— information sur les produits— demenagements— installation— la reparation et le soutien technique

Reparation et soutientechnique

3 Afin d’acheminer votre appel au bon endroit, je voudrais savoir pour lequeldes services suivants vous appelez?

— Service telephonique Bell— Bell Mobilite— Internet Sympatico— ou Express Vue

Donc, lequel desirez-vous?

Servicestelephoniques

4 Veuillez patentier pendant que j’accede a votre dossier. . . Tres bien. Lareparation et le soutien technique. Vous nous avez deja avise d’unprobleme sur votre ligne telephonique. Il y a une demande de reparation ensuspens. Veuillez dire “entendre le statut” pour connaıtre le statut de votrecommande.

Entendre le statut

5 Afin de vous fournir un statut adequat face a votre demande, l’assistanced’un representant est requise.

— Pour parler a un representant, appuyez sur le 0.— Pour repeter ce message, appuyez sur l’etoile.— Pour revenir au menu precedent, appuyez sur le 7— Pour retourner au menu principal, appuyez sur le 8

On va essayer lemenu principal : 8

6 Beep. Vous avez rejoint Emilie, votre representente de servicesinformatises. Vous n’avez qu’a me dire ce que vous desirez

Merci Emilie, ce seratout. . . au revoir.

Page 65 de 82


Annexe , code fourni pour le TD2

./20163/Final/index.html

1 <!DOCTYPE html>2 <html>3 <head>4 <link rel="stylesheet" type="text/css" href="bootstrap.min.css">5 <link rel="stylesheet" type="text/css" href="bootstrap.min.js">6 <script type="text/javascript" src="jquery-2.1.4.min.js"></script>7 <script type="text/javascript" src="main.js"></script>8 </head>9 <body>

10 11 </body>12 </html>

./20163/Final/compteurJetons.js

1 function CompteurJetons() {2

3 var compte = 0;4 var totalWords = 0;5 var pourcent = 0;6

7 this.getJetons = function () {8 return compte * totalWords;9 }

10

11 this.getProgress = function () {12 return pourcent;13 }14

15 this.compterJetons = function * (str) {16 totalWords = str.split(’ ’).length;17 while(compte < totalWords) {18 for(i=0;i<10000000;i++){}19 ++compte;20 pourcent = Math.round(compte*100/totalWords);21 yield this.getProgress();22 }23 }24 }

./20163/Final/main.js

1 $(function() {2

3 // Code a implementer4

5 });

./20163/Final/worker.js

Page 66 de 82


1 self.importScripts("CompteurJetons.js");2 var compteur = new CompteurJetons();3

4 self.addEventListener(’message’, function(e) {5

6 // Code a implementer7

8 }, false);

Page 67 de 82


84. [3 points] Ecrivez un texte d’environ 1/2 page qui resume ce qu’est le langage visuel etdecrivez quels en sont les grands principes. Expliquez en quoi ces principes sont importantspour la conception d’interface. Finalement expliquez en quoi le langage visuel est relie a cer-tains principes de Bastien et Scapin (annexe ).

85. [5 points] Vous avez decide de valider l’utilisabilite de l’application que vous avez realiseepour le TP1 du trimestre. Quel serait votre strategie ? Decrivez, d’une part, ce que vous avezfait ou auriez pu faire durant le trimestre, lors de l’elaboration de votre maquette. Puis, en sup-posant que vous alliez de l’avant pour developper l’application et que votre echeancier pourterminer le projet est d’environ 6 a 12 mois, decrivez les etapes pour evaluer l’utilisabilite.Quelles seraient les activites reliees a ces evaluations? Fournissez les details de ces activitesen precisant les intervenants et la methode d’evaluation. Elaborez votre reponse jusqu’a ap-proximativement 1/2 page.

86. L’annexe contient le code d’un fichier HTML et d’un fichier CSS associe. Repondez aux ques-tions ci-dessous en vous y referant. Notez que l’attribut elem.className represente le nomde la classe (par ex. : d1 pour la premiere div) et que la fonction alert affiche une fenetrepop-up a l’ecran.(a) [2 points] Dessinez la page en specifiant le nom des blocs et les couleurs.

(b) [5 points] En cliquant sur la region en rouge (red), un dialogue d’alerte affiche “d2”. Ex-pliquez comment se realise la gestion de l’evenement correspondant a ce clic. Comment lefureteur determine-t-il les balises et les fonctions JavaScript impliquees, et quelles sont-elles ? Decrivez precisement la sequence d’etapes qui se produit sur le fil d’executiondes evenements. Dans un premier temps, referez aux principes generaux de gestiond’evenements dans une interface, et ensuite aux notions specifiques a un environnementde fureteur web. (approx. 1/2 page)

(c) [1 point] Decrivez et expliquez le resultat apres que l’on ferme la fenetre de dialogue quiaffiche “d2”.

87. [6 points] Belle inc. desire implanter un systeme de recommandations d’emissions detelevision pour son service Fibe. Decrivez trois approches pour realiser un tel systeme.Specifiez les avantages et limites de chaque approche par rapport aux autres. (approx. 1 page)

88. [6 points] Voici quatre approches de developpement d’interfaces utilisateurs :

(a) Environnement Windows et .NET de Microsoft

(b) Environnement X-Window et Qt (Qt est une librairie C++ disponible sous Windows, OSX et Linux)

(c) XUL (vu en classe)

(d) Web (HTML et JavaScript)

Qualifiez ces quatre approches selon les caracteristiques suivantes :

(a) Declarative ou imperative/procedurale

(b) Client-serveur ou non

(c) Adaptation multi-plateforme ou non (Windows, Mac, Linux, IOS, Android, etc.)

Page 68 de 82


(d) Adaptation aux caracteristiques de l’environnement de rendu (taille de la fenetre/ecran,type d’interaction—souris, tactile, mouvements—)

Justifiez brievement votre reponse en un paragraphe. Notez que pour (c) et (d), toutes lesapproches sont adaptables aux plateformes et a l’environnement, et que la justification doitpreciser comment et dans quelle mesure l’approche facilite l’adaptation.

89. Certains des enonces suivants peuvent etre entierement ou partiellement justes, eclairants etprecis, et d’autres pas. Identifiez les enonces ou les segments d’enonces qui sont faibles, oumeme faux, et reformulez-les correctement. Votre reformulation peut simplement consister amodifier quelques mots, a preciser le texte, ou enfin a le reformuler completement, en mainte-nant toutefois la longueur semblable a celle du texte original, ou a limiter l’information ajouteea ce qui est essentiel a la comprehension.(a) [2 points] La charge cognitive imposee par une interface est souvent difficile a evaluer.

Pour s’y prendre, l’approche centree utilisateur preconise des tests utilisateur avec aumoins 5 individus. On mesure le temps moyen pour effectuer des taches et le nombred’erreurs. On aura aussi recours a un questionnaire a la fin du test.

(b) [2 points] Les exigences utilisateurs incluent les exigences fonctionnelles d’une appli-cation interactive qui se retrouve dans l’interface. On inclut aussi les profils des utilisa-teurs anticipes, a savoir leur experience avec l’application, avec les ordinateurs en generalet avec le domaine d’application, qui sont des facteurs qui influencent grandement laconception de l’interface.Les exigences d’utilisabilite portent, quant a elles, uniquement sur des facteurs d’utilisa-bilite. On peut par exemple referer au temps moyen d’execution d’une tache avec l’in-terface. Pour operationnaliser cette exigence, on referera a un temps moyen d’executionpour un echantillon de n utilisateurs avec un profil de competences donne, tel que mesurepar x tests utilisateur. Les exigences d’utilisabilite se definissent en general par rapport ades taches que l’on peut effectuer avec l’application.

(c) [2 points] AngularJS se distingue de JQuery du fait que cette libraire permet de redefinirdes balises HTML. En effet, AngularJS comporte un compilateur qui “compile” l’arbreDOM et redefinit certaines balises hors du HTML en des balises HTML standards etgenere du code JavaScript pour l’implementation de fonctionnalites avancees comme desliens bi-directionnels entre deux composants : si l’un change, l’autre change automati-quement.

(d) [2 points] Les workers en HTML permettent une execution en parallele de code JavaS-cript. C’est une technique couramment utilisee pour eviter de “geler” l’interface. Plutotque d’executer le code directement dans le fil d’execution des evenements, le worker creeun nouveau fil d’execution pour ce code.Par exemple, le code ci-dessous associe une fonction a bouton1 qui, suite a un clic desouris, insere, apres un delai de 60 000 millisecondes, la date dans le paragraphe dontl’ID est ”date”. [n.b. on n’exige pas d’apprendre par coeur la syntaxe ou les noms defonctions, donc ne presumer aucune erreur de ce type]

1 dateDansUneMinute = function() {2 alarmeT = Date.now() + 60000; // 60 secondes apres maintenant

Page 69 de 82


3 while(alarmT > Date().now()) {}; // boucle durant 60 secondes4 // Date() retourne la date actuelle sous forme de "string"5 document.getElementById("date").innerHTML = Date();6 }7 document.getElementById("bouton1").addEventListerner(’click’,8 dateDansUneMinute);

Lorsqu’executee de cette facon, la fonction DateDansUneMinute gelera l’interface du-rant 60 secondes. Pour eviter cet effet indesirable, il faut plutot executer la fonction dansun worker, par exemple en remplacant l’expression commencant a la ligne 7 par :

1 workerDansUneMinute = function() {2 w = new Worker(dateDansUneMinute);3 % Par inadvertance, DansUneMinute etait utilise plutot que dateDansUneMinute4 w.run();5 };6 document.getElementById("bouton1").addEventListerner(’click’,7 workerDansUneMinute);

Page 70 de 82


Annexe

Fichier html

1 <!DOCTYPE HTML>2 <html>3 <body>4 <link type="text/css" rel="stylesheet" href="3div.css">5

6 <div class="d1" onclick="highlight(this)">17 <div class="d2" onclick="highlight(this)">28 <div class="d3" onclick="highlight(this)">39 </div>

10 </div>11 </div>12

13 <script>14 function highlight(elem) {15 alert(elem.className)16 }17 </script>18 </body>19 </html>

Fichier 3div.css

20 .d121 {22 background-color:lightblue;23 width:200px;24 height:200px;25 }26 .d227 {28 background-color:red;29 width:100px;30 height:100px;31 }32 .d333 {34 background-color:lightgreen;35 width:50px;36 height:50px;37 }

90. Nous avons vu, a la premiere seance de cours, l’interface de deux produits, celle du iPod etcelle du baladeur Sanyo. Alors que l’interface du iPod a ete un grand succes, celle du baladeurcomportait des failles majeures. Repondez aux questions suivantes par rapport a ces deuxinterfaces.(a) [1 point] En un court paragraphe, decrivez les plus grandes qualites de l’interface du iPod

et justifiez votre reponse en faisant appel aux notions vues au cours.(b) [2 points] Resumez, en un paragraphe de 10–15 lignes, les deux plus importants

problemes de l’interface du Sanyo. Justifiez pourquoi ces problemes sont importants(c) [2 points] Nous pouvons presumer que le processus de conception du Sanyo a ete en

defaut. Decrivez les deux plus importantes activites qui auraient pu eviter ces erreurs.Justifiez votre reponse.

Page 71 de 82


91. L’annexe contient une version modifiee du code du Compteur en Java que nous avonsvu en classe pour illustrer l’architecture MVM de meme que pour presenter une approcheprocedurale au developpement d’interfaces. Repondez aux questions suivantes en fonction dece code.(a) [2 points] Le tableau ci-dessous illustre les roles des differents modules dans l’architec-

ture MVC. Placez les roles aux bons endroits.Modules du MVC Roles

(a) Modele

(b) Vue

(c) Controleur

(a) Avertit la vue de changements(b) Demande mise a jour du modele(c) Encapsule l’etat de l’application(d) Etablit la correspondance des actions

utilisateur a la mise a jour du modele(e) Expose la fonctionnalite de l’application(f) Rendu du modele(g) Repond aux requetes d’etat(h) Selectionne la vue

(b) [1 point] L’appel a la fonction createAndShowGUI (ligne ??) se fait a partir du fild’execution des evenements comme la pratique le preconise. Expliquez pourquoi.

(c) [1 point] Le code de l’annexe ne respecte pas les principes du MVC. Identifiez le prin-cipe en jeu, l’impact de ne pas le respecter et comment modifier le code pour qu’il soitconforme au MVC.

92. Referez-vous au code qui compose une page Web ci-dessous pour repondre aux questions quisuivent.

1 <input type="button" value=’bouton 1’>2 <div id=’res’>Evenements : </div>

HTML

3 var unBouton = document.getElementsByTagName(’input’)[0];4 var res = document.getElementById(’res’);5

6 unBouton.onclick = function() { (* *)7 res.innerHTML += ’ bouton’;8 }9

10 document.body.onclick = function() { (* *)11 res.innerHTML += ’ body’;12 }

JavaScript

(a) [1 point] Les deux fonctions definies aux lignes 6 et 10 sont executees suite a un clicdu bouton “bouton 1”. Decrivez la modification faite au contenu de l’arbre DOM qui seproduit et l’affichage qui y correspond.

(b) [1 point] Dans quel ordre les fonctions sont-elles appelees suite a ce clic (referez auxlignes correspondantes) ?

Page 72 de 82


(c) [2 points] Supposons que je desire inverser l’ordre. Comment puis-je m’y prendre?Ecrivez le code correspondant ou expliquez les changements a defaut de vous souvenirdes noms de fonctions correspondantes.

93. Referez-vous au code ci-dessous pour repondre aux questions qui suivent. Les instruction aecrire ne doivent avoir d’autres effets que ceux prescrits.

1 <div id="div1" class="niv0">2 <h1 id="h.1" class="niv1">Titre 1</h1>3 <p id="p1">Premier paragraphe</p>4 <div id="div2">5 <h2 id="h.1.1" class="niv2">Titre 1.1</h2>6 <p id="p2">Second paragraphe</p>7 <h2 id="h.1.2" class="niv2">Titre 1.2</h2>8 <p id="p3">Troisieme paragraphe</p>9 </div>

10 <h1 id="h.2" class="niv1">Titre 2</h1>11 <p id="p4">Quatrieme paragraphe</p>12 </div>

(a) [1 point] Ecrivez le CSS pour que tous les titres de niveau 2 (h2) soient de couleur bleue.

(b) [1 point] Ecrivez le CSS pour que les paragraphes p2 et p3 soient de couleur bleue, sanstoutefois utiliser les identifiants de ces paragraphes.

(c) [1 point] Quel sera l’effet de l’instruction CSS.niv2 .niv1 { color:blue; }en supposant qu’aucune autre instruction CSS ne soit presente.

94. Le code ci-dessous affiche la partie <body> d’une page avec la librairie Bootstrap. Repondezaux questions suivantes en vous y referant.

1 <body>2

3 <div class="jumbotron text-center">4 <h1>Exemple Bootstrap</h1>5 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>6 </div>7

8 <div class="container">9 <div class="row">

10 <div class="col-sm-4">11 <h3>Titre 1</h3>12 <p>Lorem ipsum dolor sit amet, ...</p>13 <p>Ut enim ad minim veniam, ...</p>14 </div>15 <div class="col-sm-4">16 <h3>Titre 2</h3>17 <p>Lorem ipsum dolor sit amet, ...</p>18 <p>Ut enim ad minim veniam, ...</p>19 </div>20 <div class="col-sm-4">21 <h3>Titre 3</h3>22 <p>Lorem ipsum dolor sit amet, ...</p>23 <p>Ut enim ad minim veniam, ...</p>24 </div>25 </div>26 </div>27


Page 73 de 82


(a) [1 point] Que signifie chacun des trois composants de la classe col-sm-4 (col, smet 4) ?

(b) [3 points] Les pages HTML avec Bootstrap sont qualifiees de responsive (adaptatif). Ex-pliquez ce que ceci signifie pour une page HTML et quels sont les elements et principesde HTML qui sont en jeu. Limitez votre reponse a 10–15 lignes.

95. [4 points] La figure ci-dessous contient une capture d’ecran d’un site de financement de larecherche pour etudiants et chercheurs.Presumons que l’utilisateur est un professeur qui doit remplir un formulaire pour l’approbationdu financement d’un stage MITACS realise en entreprise, dont une partie du financement vientdu Quebec et une autre de l’entreprise. Identifiez quelles sont les principales sources de chargecognitive pour cette tache, et specifiez par quels moyens nous pourrions nous y prendre pourameliorer la charge cognitive. Ces moyens peuvent etre des activites a entreprendre, ou desidees pour la refonte de l’interface. Laissez aller votre imagination !

96. Certains des enonces suivants peuvent etre entierement ou partiellement justes, eclairants etprecis, et d’autres pas. Identifiez les enonces ou les segments d’enonces qui sont faibles, oumeme faux, et reformulez-les correctement. Votre reformulation peut simplement consister amodifier quelques mots, a preciser le texte, ou enfin a le reformuler completement, en mainte-nant toutefois la longueur semblable a celle du texte original, ou a limiter l’information ajouteea ce qui est essentiel a la comprehension.(a) [1 point] Une analyse de la tragedie de Tchernobyl a demontre que le systeme n’avait

pas failli, mais c’est plutot les operateurs du systeme qui ont failli reagir a temps pourempecher le desastre. Cette tragedie nous apprend qu’il est preferable de faire des tests

Page 74 de 82


utilisateurs plus tot dans le processus de developpement afin de detecter les lacunes del’interface, bien avant que l’application soit en operation.

(b) [2 points] Il existe de nombreuses facons d’adapter les interfaces aux caracteristiquesde la plate-forme et a d’autres facteurs comme la taille de la fenetre de l’application.L’approche dite procedurale consiste a implementer un serveur graphique sur chaqueplate-forme. L’interface de l’application peut alors etre affichee sur n’importe laquelledes plate-formes qui roulent le serveur. L’approche dite declarative consiste a creer uneversion des composants propres a chaque plate-forme. Au moment de l’execution de l’ap-plication, la version des composants correspondant a la plate-forme est alors chargee, sansnecessiter de reimplementer le code.

(c) [2 points] Les patrons d’utilisabilite demontrent qu’il est utopique de croire qu’on peutentierement decoupler l’interface de la logique et de l’architecture de l’application. Il fautau contraire etudier chaque patron d’utilisabilite et decider si l’exigence d’utilisabilites’applique. Le cas echeant, il est alors necessaire de prevoir implementer les mecanismesproposes pour gerer correctement ces exigences. C’est le cas, par exemple, des patronspour l’aggregation de donnees et de commandes, de meme que pour la gestion des actionsd’annulation (undo).

(d) [2 points] Les tests d’utilisabilite sont complementaires aux tests heuristiques. Ilsconsistent a demander a des utilisateurs potentiels de faire l’experience de l’applicationpour une periode qui peut varier d’une heure a quelques heures, puis a recueillir les dif-ficultes qu’ils ont rencontres, soit par l’observation, soit par un questionnaire a la fin del’experience. Le nombre de participants peut varier selon la complexite de l’application,mais le nombre de nouveaux problemes rencontres diminue avec le nombre de partici-pants, de sorte qu’il est preferable d’iterer avec un petit nombre de participants a la foisplutot que de faire moins de tests avec un plus grand nombre. Le chiffre de 5 participantsest evoque par Nielsen et Landauer.

97. [2 points] Les principes de conception et d’evaluation des interfaces WIMP (Windows, Icons,Mouse, Pointing device) sont-ils differents des interfaces Web? Exprimez et justifiez votre avisen 10 lignes environ.

98. L’illustration ci-dessous represente l’architecture generique d’un systeme de fenetrage.Repondez aux questions suivantes en vous y referant.

(a) [1 point] Laquelle des couches est responsable de :

Page 75 de 82


(a) l’agencement et de la superposition des fenetres ?(b) determiner a quel composant (bouton, barre de progression, etc.) assigner un

evenement?(b) [1 point] Dans l’environnement X-Window, a quoi correspond le systeme de fenetrage

de base?99. La figure ci-dessous represente une facon de structurer l’information utilisee pour effectuer des

recommandations en fonction des interets des utilisateurs, a l’instar des suggestions de videode Youtube ou des films sur Netflix. Repondez aux questions suivantes en vous y referant.

Itemsðñ

AttributsitemsÑ

individusÓ

1©¨ ¨ ¨¨ ¨ ¨¨

¨ ¨ ¨¨

¨ ¨ ¨¨

Individus õ

2©¨ ¨ ¨¨ ¨ ¨¨

¨ ¨ ¨¨

¨ ¨ ¨¨

3©¨ ¨ ¨¨ ¨ ¨¨

¨ ¨ ¨¨

¨ ¨ ¨¨

(a) [3 points] Que represente chacune des trois matrices 1©, 2© et 3©. Donnez un exemple dutype d’information pouvant se retrouver dans chacune d’elle.

(b) [2 points] Decrivez un algorithme de recommandation de votre choix (reponse entre 10–15 lignes).

100. Le code ci-dessous contient la partie <body> d’une page HTML.1 <body>2 <form>3 Nominateur : <input type="text" id="n1" /><br>4 Denominateur: <input type="text" id="n2" /><br>5 </form>6 <p>Resultat division :7 <span id="divResult"></span>8 </p>9 <button>Calculer</button>(* *)

10 </body>

L’affichage correspond a cette image une fois que l’utilisateur a saisi les nombres 3 et 10 :

Page 76 de 82


Repondez aux questions suivantes en vous referant au code ci-dessus. Notez que la correctionn’exige pas d’ecrire le nom precis des instructions JavaScript, mais le code doit clairementreferer a des instructions existantes dans le langage. Ajoutez des commentaires pour besoin declarification.(a) [5 points] Ecrivez le code JavaScript pour que le resultat de la division (0.3) s’affiche

dans la balise avec l’attribut id="divResult" lorsqu’on appui sur le bouton “Calculer”

(b) [5 points] Remplacons maintenant l’element <button>...</button> (ligne 9) par cecode :

<div class="progress"><div id="divProg" class="progress-bar" role="progressbar"

aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><span>50</span>%

</div></div>

Le resultat devra alors s’afficher ainsi :

Le code utilise la librairie Bootstrap pour implementer la barre de progression et c’estl’attribut aria-valuenow qui fixe le progres affiche en “remplissant” la barre.Comme il n’y a plus de bouton pour activer le calcul, c’est par l’entree de caracteres dansun ou l’autre des champs “Nominateur” ou “Denominateur” que l’activation du calculdoit se faire automatiquement. Ecrivez le code JavaScript afin que le calcul se fasse desqu’un caractere est saisi, peu importe dans lequel des deux champs la saisie se fait.Le code doit implementer le patron observateur-observe et utiliser les instructions sui-vantes, ou observeClass, observateurResultClass, observateurProgClasssont des classes JavaScript :var observe = new observeClass("n1", "n2");var v1 = new observateurResultClass(document.getElementById("divResult"), observe);var v2 = new observateurProgClass(document.getElementById("divProg"), observe);observe.addObs(v1);observe.addObs(v2);

101. Analysez la page Moodle ci-dessous selon les heuristiques de Bastien et Scapin pour

Page 77 de 82


repondre aux questions qui suivent plus loin.

(a) [3 points] Identifiez dans la page Moodle une caracteristique qui reflete une applicationreussie de chacune des heuristiques de Bastien et Scapin suivantes :(a) Guidage(b) Charge de travail(c) Adaptabilite

(b) [2 points] Identifiez l’element qui vous semble le plus problematique de l’interface Moo-dle et reliez-le aux heuristiques de Bastien et Scapin. Suggerez un correctif. Vous pouvezreferer a un contexte qui deborde la page ci-dessus et faire des hypotheses au besoin, au-quel cas prenez soin de bien expliquer le probleme pour que le correcteur puisse evaluercorrectement la reponse.

Page 78 de 82


102. [3 points] Expliquez la difference entre une conception centree systeme et une concep-tion centree utilisateur. Quelles sont les implications de ces differences sur le processus dedeveloppement et sur les exigences? (10–15 lignes)

103. [2 points] Decrivez deux exemples de patrons d’utilisabilite qui demontrent qu’on ne peutentierement decoupler la conception de l’interface et les exigences utilisateurs qui s’y rat-tachent, de l’architecture globale de l’application elle-meme.

104. Belle Inc. vous mandate pour developper un systeme de recommandations pour son servicede tele sur Internet. Repondez aux questions suivantes dans ce contexte. Pour chacune desdeux approches suivantes, decrivez l’information utilisee et les calculs :(a) [2 points] decrivez une approche dite “collaborative” ;

(b) [2 points] decrivez une approche dite “contenu”.

105. [3 points] Decrivez les points communs entre un websocket et un appel XMLHttpRequest, etexpliquez en quoi ils different ? (10 lignes).

106. Les captures d’ecrans ci-dessous sont celles d’une application permettant de reviser les no-tions de mathematiques prealables a commencer un baccalaureat en genie.(a) [2 points] Identifiez deux elements d’interfaces qui sont des criteres bien appliques d’in-

terfaces dites persuasives et motivantes.

(b) [2 points] Suggerez deux ameliorations a l’interface selon les criteres de persuasion.

Page 79 de 82


107. [3 points] Les trois captures d’ecran suivantes demontrent les possibilites d’adapter l’affi-chage d’une page HTML selon la taille de l’ecran. Le contenu des trois affichages est automa-tiquement change selon la taille de la fenetre (grand/moyen/petit).

Page 80 de 82


Ecran grand

Ecran moyen Ecran petitExpliquez par quels mecanismes les resultats suivants sont obtenus :

— Un changement de mise en forme survient selon la largeur de la page.

— L’alignement de certains elements passe de horizontal a vertical.

— Les elements “Navigation” et “Contenu secondaire” sont parfois affiches, parfois non.

Page 81 de 82


108. [3 points]

Parmi les protocoles HTTP, XMLHttpRequest, WebSockets et X11, indiquez a quel(s)protocole(s) s’appliquent les trois enonces ci-dessous.Repondez en cochant les cases qui s’appliquent dans un tableau comme celui-ci :

(a) (b) (c) (d)123

Num. Enonce (a)HTTP

(b)XM

LHttpReq

uest

(c)W

ebSoc

kets

(d)X11

1 Sans etat (aucune memoire entre les echanges)Ü Ü Ü Ü

2 Echanges d’instructions graphiques enprovenance du client et d’evenementsd’interactions utilisateur en provenance duserveur

Ü Ü Ü Ü

3 Bidirectionnel (permet d’initier des echangesd’un cote ou l’autre de la connection)

Ü Ü Ü Ü

109. Certains des enonces suivants peuvent etre entierement ou partiellement justes, ouentierement incorrects. Corrigez les enonces ou les segments d’enonces qui contiennent desinexactitudes ou qui sont faux. Votre reponse peut consister a modifier quelques mots ou areformuler l’enonce completement, ou encore a expliquer ce qui est incorrect. L’important estque le correcteur puisse juger de votre niveau de comprehension du sujet traite.(a) [2 points] La fonction setTimeout() de JavaScript est un mecanisme permettant de

fixer un delai pour l’execution de la fonction fournie en argument. Le principe dumecanisme est de mettre la fonction sur le fil des evenements avec un attribut correspon-dant au delai. Le fil d’execution fera une pause correspondant a ce delai puis executera lafonction.

(b) [2 points] L’architecture X-Window est basee sur une approche declarative. Dans le cadrede cette architecture, l’interface d’une application peut etre portee sur differentes plate-formes, comme Linux, Windows et Mac OS X, par exemple, en implementant un in-terpreteur sur chacune de ces plateforme. Le principe est similaire a l’approche Web oul’on retrouve un fureteur sur chaque plateforme qui interprete le code JavaScript et HTMLqui roule sur chacune de ces plateformes. C’est aussi par ce principe qu’on peut porterune application XUL sur differentes plateformes : il faut implementer un interpreteur dulangage XUL et de JavaScript pour chaque plateforme.

(c) [2 points] Le mecanisme d’assignation d’un evenement a un element en HTML et Ja-vaScript est semblable a celui des systemes de fenetrage en general, dans le sens ou ilse base sur une hierarchie d’objets d’interface. Il consiste a traverser l’arbre DOM endescendant a partir de la racine de l’arbre et a determiner si un element est vise parl’evenement (par sa position et par le focus). Si une fonction de rappel correspondant autype d’evenement y est attachee, alors elle est mise sur le fil d’execution des evenements.Si plusieurs elements sont vises par un evenement et possedent une fonction de rappel quicorrespond au type d’evenement, le comportement par defaut est que seule la premierefonction sera assignee pour execution. Il est possible de changer ce comportement par

Page 82 de 82


defaut a condition d’associer la fonction de rappel dans le code JavaScript plutot qu’atravers un attribut HTML (par ex. <p onclick="function(){...}">).

Page 83 de 82

Documents

Final de LOG2420 Interfaces utilisateurs, Questions de ...cours.polymtl.ca/MDesmarais/log2420/20191/Seances/final-nosol.pdf · prenant soin de les nommer et de les expliquer. Vous