Interfaces Homme Machine

Descriptif du cours

Après un rappel des principes ergonomiques, ce cours s’intéresse essentiellement aux aspects architectures logicielles des interfaces Homme-machine et principalement au paradigme Modèle Vue Contrôleur de conception d'IHM tel que MVC, PAC, ARCH qui permettent de séparer clairement les données, leur présentation et la gestion des événements. Dans une seconde partie sont présentées les principales technologies permettant la construction d'IHM web, mobile ou plus classiques.

Objectifs et compétences visées

  • Sensibiliser les étudiants à l’importance des IHM
  • Former les étudiants aux techniques de conception d’IHM
  • Maîtriser le processus de conception logiciel d’une IHM
  • Connaître et maîtriser les concepts d’ergonomie pour les IHM
  • Savoir appréhender une technologie pour la conception d’IHM
  • Savoir mettre en œuvre une technologie en respectant une démarche de développement logiciel adaptée

Organisation du cours

  • 24h – 3 ECTS
  • Le cours à lieu le vendredi de 13H00 à 16H15 en salle B2O2

Plan du cours

Références bibliographiques

  • Ergonomie du logiciel et design web : Le manuel des interfaces utilisateur, J-F. Nogier, Dunod, 2005
  • Interfaces Homme-Ordinateur : conception et réalisation, J. Coutaz, Dunod 1990
  • Human-Computer Interaction, A. Dix, J. Finlay, G. Abowd & R. Beale, Prentice Hall, 1998
  • Analyse et conception de l'IHM, Interaction pour les systèmes d'information, C. Kolski, Hermès, 2001

Évaluation et modalités de contrôle des connaissances

Important

L'évaluation de ce cours s'appuiera sur 2 notes:
- L'exposé d'une technologie utilisée pour la conception d'IHM;
- La mise en œuvre d'une IHM s'appuyant sur cette technologie.

Cette année, vous devrez choisir une technologie parmi un éventail d'options, bien que cette liste ne soit pas exhaustive et que certaines technologies, comme Angular, aient déjà été abordées dans d'autres cours. Parmi les technologies que vous pouvez sélectionner figurent React, NativeScript, et Native, ainsi que Meteor, IONIC, et Flutter. Vous pouvez également opter pour Kotlin, Angular NativeScript, Vue.js, ou .NET Maui. D'autres choix incluent Ember.js, Remix Run, Next.js, Laravel, et Materialized. Quasar, Kendo UI, Xamarin, et Svelt sont aussi disponibles, tout comme des options mobiles comme Swift, Cordova, Android Natif, et iOS Natif. Des alternatives comme Clank, Knacss et bien d'autres sont aussi à considérer selon vos préférences et les besoins de votre projet.

Le travail à réaliser est à effectuer en binôme ou à défaut en trinôme sur tout le semestre. Choisissez donc bien votre partenaire. Il est important d'indiquer que l'évaluation reste individuelle. Dans le cas de forte disparité dans un groupe, l'enseignant responsable se réserve le droit d'attribuer des notes différentes au sein des étudiants d'un même groupe.

L'exposé d'une technologie

Vous devrez présenter pendant 1h00 une technologie utilisée pour la conception d'IHM. La technologie présentée devra être celle utilisée dans le cadre de votre projet IHM. Votre exposé aura lieu pendant une séance du cours devant vos camarades. En particulier, vous devrez présenter :

  • La cible applicative de la technologie choisie (mobile, web, etc.);
  • Les technologies concurrentes avec avantages et inconvénients;
  • Les acteurs du marché;
  • Les outils associés à la technologie;
  • Les principales références bibliographiques associées;
  • Les bases de la technologie :
  • Au travers d'un exemple de type Helloworld tiré de votre projet IHM qui servira de base à la rédaction d'un tutoriel en ligne accessible à tous vos camarades;
  • Les logiciels et librairies à installer.

Les transparents de votre exposé devront être déposés sur la page personnelle du wiki du cours. La note obtenue tiendra compte notamment :

  • Du respect des consignes (temps, prévoir 30-40 transparents, contenu, pertinence, etc.);
  • Du caractère pédagogique de votre présentation (votre exposé se doit être une introduction à la technologie).

Le projet

Le projet consistera à développer l'IHM d'un réseau social professionnel en binôme ou à défaut en trinôme. Vous pourrez vous inspirer par exemple de LinkedIn, Viadeo, etc. Les séances de TD/TP seront dédiées à la réalisation du projet. À chaque séance, vous devrez présenter votre travail à l'enseignant responsable qui effectuera le suivi de votre projet : travail en cours, objectifs de la semaine, objectifs de la semaine dernière non atteints et pourquoi, etc. Il convient donc de travailler régulièrement.

Le projet devra respecter la méthode de conception présentée en cours. Il vous sera demandé de fournir les documents suivants :

  • Le cahier des charges donnant une description des fonctionnalités souhaitées de l'application (3 à 6 pages);
  • Les scénarios d'utilisation entre 5 et 10;
  • Le modèle de l'utilisateur cible de l'application (2 à 3 pages);
  • Le modèle de tâches;
  • Le modèle d'interface abstraite ou prototype papier;
  • Le prototypage ou l'interface concrète.

La note obtenue au projet tiendra compte de :

  • De l'appréciation de l'enseignant responsable pendant les séances de TD;
  • De la qualité des documents produits;
  • Du respect des consignes, e.g., date de rendu, etc.;
  • Du prototype d'interface final produit.

Tous les documents ainsi que l'archive (zip) de votre projet devront être envoyés par mail à l'enseignant.

Remarque

Tous les livrables (cahier des charges, modèle des tâches, modèle abstrait et prototype devront être déposés sur le bitbucket). Il vous sera possible de modifier les livrables après la date de rendu sauf le dernier en S12.

Calendrier du projet et date des livrables

Semaine Livrables
S1 Envoi par mail de la composition de votre groupe (noms et prénoms) et de la liste ordonnée par préférences des 16 technologies
S2 Cahier des charges technique + scénarios d'utilisation + modèle utilisateur
S3 Modèle de tâches de l'interface
S4 Modèle de tâches de l'interface
S5 Modèle abstrait de l'interface éventuellement scénarisé
S6 Modèle abstrait de l'interface
S12 Prototype d'interface

Remarque

Tous les livrables devront être déposés sur le bitbucket. Vous pouvez modifier les livrables après la date de rendu sauf le dernier en S12.