LOG2420   LOG2420, Analyse et conception d'interfaces utilisateur
Hiver 2020

Travaux Pratiques

LOG2420 - TP

[Mise à jour de l'énoncé : 2019.11.08 13h48]

Les changements seront indiqués par ces formats au texte :

  • remplacé
  • nouveau

Les TP de ce trimestre porte sur la conception d'une application pour évaluer des scénarios de conséquences de variation de l'offre sur différentes variables. Cette application s'inspire du concours de topcoder.com, Price Elasticity Tool Design Challenge. Une version Excel de cette application de calcul d'élasticité a été rendue disponible et vous pouvez la télécharger de Google Drive pour obtenir une idée du fonctionnement général. Le concours fournit aussi des "user stories" qui sont utiles à consulter.

Les TP sont au nombre de 4 et leur pondération est fournie dans le plan de cours. La description de chaque TP est fournie dans ce qui suit.

Le travail se fait par équipes de 2 étudiants pour TP 1 et 2, et 4 étudiants pour les TP3 et TP4. Consultez le document Équipes LOG2420 pour trouver vos coéquipiers et créer les équipes.

L'ordre de présentation des TP est chronologique et commence donc par le TP2.

TP1, conception d'une maquette d'interface (reporté du 6 au 13 octobre)

Le TP1 porte sur le volet ergonomique. Il s'agit de concevoir une maquette d'interface pour l'analyse de scénarios de changement de prix et de produits. Vous pouvez vous inspirer des exigences générales décrites dans Price Elasticity Tool Design Challenge, mais il existe plusieurs autres sources, dont certaines sont citées plus loin. Il faut que l'interface facilite l'analyse de scénarios de changement de prix de différents produits chez les compétiteurs et chez l'entreprise "hôte" (celle qui soumet au concours).

Comme le TP1 porte sur la conception, il y a une bonne marge de flexibilité à ce qui peut être réalisé. Mais il faut demeurer dans ce qui serait possible d'implémenter en quelques jours et, surtout, il doit pouvoir se prêter au TP3 où une implémentation partielle est à réaliser.

Un scénario d'utilitisation composé de 2 à 4 tâches doit être défini et expliqué à travers une vidéo, un peu à l'image d'un tutoriel et en prenant un exemple précis. Chaque tâche peut durer de 2 à 5 minutes et la vidéo doit durer entre 10 et 15 minutes.

La conception doit se faire avec l'outil https://www.axure.com/ et la maquette doit être présentée sous la forme d'un scénario d'utilisation.

Des maquettes faites avec d'autres applications, comme Balsamiq, figma, marvel, etc., ou même directement en HTML, seront aussi acceptées. Cependant, seul le code d'Axure peut être remis pour inspecter l'interface et si une autre application est utilisé il faudra remettre des images d'écrans afin que le correcteur puisse voir en détail les maquettes.

Quelques exemples de liens utiles :

Barème

  • La maquette d'interface est claire et donne une idée précise de l'interactivité. Elle couvre les principales exigences utilisateurs. (28 pts.)
  • Les heuristiques de conception conviviale d'interface sont respectées. (8 pts.)
  • Les choix de conception sont étayés par des justifications ergonomiques, des tests, des inspections cognitives ou par toutes explications qui permettent de mieux comprendre ce qui a été retenu et ce qui ne l'a pas été. (6 pts.)
  • Le guide de style de JavaScript est respecté et le code suit les bonnes pratiques en génie logiciel en termes de modularité et performance (4 pts.)

Remise

La remise doit se faire sur le site Moodle. Suivez les instructions suivantes pour la remise.

  • Un fichier readme.md (format markdown) doit contenir :les membres de l'équipe avec matricule et les, s'il y a lieu, instructions particulière pour le correcteur et un lien vers la vidéo.
  • Si la maquette est réalisée avec Axure, remettre le code. Autrement, remettre des images ou captures d'écrans, ou encore un lien vers la maquette (noter que certaines applications permettent de visualiser les maquettes en mode infonuagique).
  • Remettre une archive zip contenant tous les fichiers.

TP2, développement d'une maquette web (20 octobre)

Le TP2 porte sur le volet développement et consiste à répliquer en HTML et CSS une maquette de l'application d'élasticité de prix. La figure 1 du document "user stories" est répliquée en HTML et fournit un exemple visuel de l'interface, dont le comportement doit se conformer à la vidéo ci-contre. De plus, lorsqu'un item est choisi, l'affichage du contenu "output" doit se mettre à jour selon ce qui est retourné par un appel HTTP, notamment une nouvelle image. Le TD se divise en trois étapes qui correspondent respectivement à trois séances de laboratoire. Elles sont décrites plus en détails ci-dessous.
  1. Première séance.
    • Répliquer le visuel de l'interface en partant du squelette HTML fourni et dont la mise en forme générale est inspirée de W3C Layout.
  2. Deuxième séance.
    • Ajouter la fonctionnalité de simulation d'un scénario. Dès qu'un changement de variable d'entrée est fait, mettez à jour l'image des données de "output". Utilisez les images fig3.png et fig4.png pour simuler une mise à jour de "output". Ajouter la fonctionnalité de la navigation qui permet de basculer entre "input" et "output". Cette image peut être stockée d'un fichier local.
  3. Troisième séance.
    • Modifiez votre code afin d'utiliser une structure de données JSON pour générer les entrées de "input le tableau "output". Il faut donc créer la structure HTML à insérer dans le DOM à partir de ces données.
    • Données JSON à utiliser. Le tableau produit devrait avoir la structure de l'image ci-contre. Pour les besoins de cet affichage, nous ignorerons les autres données affichées dans l'application Excel et dans la vidéo ci-dessus. (mise à jour: 13 septembre)
    • Cette structure doit être stockée dans le répertoire JSON et provenir d'une requête fetch Utilisez le code serveur.js à cette fin. La requête doit référer au nom du fichier dans le répertoire JSON, par exemple, http://localhost:8080/JSON/output.json (attention à la casse sur Mac et Linux). Le répertoire JSON doit être sous ce répertoire relatif à celui d'où le serveur est démarré. Le serveur utilise la librairie Express qu'il faut installer.
    Points bonus :
    • Utilisation de addEventListener (1 pt.). La gestion des événements par l'attribut onclick est répétitive et une amélioration serait d'utiliser une boucle pour assigner une fonction de gestion d'événements à travers addEventListener plutôt qu'avec onclick.
    • Récupération de l'image par fetch (1 pt.). Plutôt que de récupérer l'image avec l'attribut src de l'élément img, utilisez un appel au serveur.
      [mise à jour 2019.11.14 : ] Une fois l'output créé à partir du fichier output.json, il faut alterner entre le tableau de la fig4.png et celui de output.json.

Barème

  • Les commentaires sont complets et pertinents (2 pts.)
  • L'interface se comporte conformément à la vidéo (8 pts.)
  • Le code gère les données JSON conformément à l'énoncé de la troisième séance (6 pts.)
  • Le guide de style de JavaScript est respecté et le code suit les bonnes pratiques en génie logiciel en termes de modularité et performance (4 pts.)

Remise

La remise doit se faire sur le site Moodle. Suivez les instructions suivantes pour la remise.

La procédure générale pour le correcteur devrait consister à démarrer le serveur et à ouvrir la page comme un fichier HTML ordinaire. Le code doit fonctionner dans une version récente de Firefox (2019).

  • Un fichier readme.md (format markdown) doit contenir : les membres de l'équipe avec matricule et les, s'il y a lieu, instructions particulière pour le correcteur.
  • Les fichiers tp2.html, tp2.css et tp2.js doivent respectivement contenir le code HTML, CS et JavaScript.
  • Les fichiers images et JSON doivent être inclus.
  • Remettre une archive zip contenant tous les fichiers.

TP3, développement d'un prototype web (17 novembre)

Le troisième TP consiste à développer un prototype de l'interface conçue au TP1. Il est possible que seul un sous-ensemble des fonctionnalités soit à implémenter si l'interface conçue s'avère trop complexe à implémenter. Le prototype doit comporter suffisamment de fonctionnalités pour permettre d'effectuer des tests d'utilisabilité.

Exigences générales

Comme chaque équipe a la discrétion d'implémenter l'interface choisie et même d'y intégrer des améliorations, les exigences sont de nature génériques.

  • HTML
    • Utilisation appropriée des éléments pour créer une mise en fome ("layout")
  • CSS
    • Utilisation des classes appropriée
    • Au moins un élément plus avancé de CSS parmi : "responsive", "float" ou "grid"
  • JavaScript
    • Le guide de style de JavaScript est respecté et le code suit les bonnes pratiques en génie logiciel en termes de modularité et performance

TP4, tests utilisateurs (1er décembre)

Le dernier TP porte sur les tests d'utilisabilité. Deux utilisateurs devront effectuer une ou deux tâches (les mêmes pour tous) avec le prototype du TP3 et être filmés.

Le livrable est un rapport contenant :

  • Participants (profil général)
  • Tâches demandées (telles que communiqués aux participants)
  • La liste de questions pré et post essais (en rapport avec les claims)
  • Les résultats des essais: décrire les turbulences/obstacles rencontrés ainsi que les commentaires réalisés par les utilisateurs pendant les essais et les modifications possibles pour éliminer les sources de problèmes et de commentaires négatifs. Suggestion: regrouper les problèmes par tâches et ordre d'importance. Pour faciliter la compréhension ajouter à votre rapport des images de votre interface telle qu'utilisée dans les essais.
  • Conclusions: Décrire les forces et les faiblesses ergonomiques identifiées sur votre interface Web. Faire une réflexion sur l'activité réalisée et sur comment les résultats pourront impacter sur la conception de votre système - (1/2 page). Présentez dans un tableau les problèmes et solutions possibles ainsi que les suggestions à prendre en compte (id problème/solution, localisation, description)
  • Lien vers la vidéo des tests réalisés.