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.

1. Sensibiliser les étudiants à l’importance des IHM
2. Former les étudiants aux techniques de conception d’IHM
3. Maîtriser le processus de conception logiciel d’une IHM
4. Connaître et maîtriser les concepts d’ergonomie pour les IHM
5. Savoir appréhender une technologie pour la conception d’IHM
6. Savoir mettre en oeuvre une technologie en respectant une démarche de développement logiciel adaptée

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

• Partie I : Introduction et rappels sur les IHM
  • Cours n°1: Enjeux des IHM et rappels historiques
  • Cours n°2: Rappels d'ergonomie
• Partie II : Principes de conception des IHM
  • Cours n°3: Les grands principes de conception
  • Cours n°4: IHM et architectures logicielles
• Partie III : Techniques de conception d'IHM
  • Cours n°6: Noe Gravand, Raphaël Janson: Native React,Git
  • Cours n°7: Thomas Foret, Mohamed Tara Maata : React, TP REACT, Git
  • Cours n°8: Séance projet - 14/11
  • Cours n°9: Lingyun Zhuang, Lou-Evan Rouby, Gwendoline Delestre: Materialize css Git
  • Cours n°10: Mélanie Pierre, Arthur Cariou-Braun : Vue.JS, TP Vue.JS, Git
  • Cours n°11: Antoine Poussier, Josue Sobeyran: Vue.Js + GASP Librairies TP, Git
  • Cours n°12: Roihmatoun Houmadi, Helena Fernandes Santos, Rohimi Ackiah: Angular, TP Angular, Git

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

Cette année vous devrez choisir parmi les technologies suivantes (la liste n'est pas exhaustive et sauf angular étudié par ailleurs):

• React, NativeScript, Native
• Meteor
• IONIC
• Flutter
• kotlin
• Angular NativeScript
• Vue.js
• .Net Maui
• Ember.js
• Remix Run
• Next Js
• Laravel
• Materialized
• Quasar
• Kendo UI
• Xamarin
• svelt
• swift
• Cordova
• Android Natif
• IOS Natif
• Clank
• Knacss
• etc.

Le travail à réaliser est à effectuer en binôme ou à défaut en trinôme sur tout le semestre. Choississez 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.

Vous devrer 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 le 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 servoira de base à la rédaction d'un tutorial en ligne est 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 consistera a 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és à la réalisation du projet. À chaque séance vos devrez présenter votre travail à l'enseignant responsable qui effectuera le suivi de votre projet: travaille 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:

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

La note obtenue au projet tiendra compte de:

1. De l'appréciation de l'enseignant responsable pendant les séances de TD;
2. De la qualité des documents produits;
3. Du respect des consignes, e.g., date de rendu, etc.;
4. 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.