logo Université de Lyon - Lyon 1

LifIHM - Interactions Homme-Machine en Licence informatique de l'Université Lyon 1

Stéphanie Jean-Daubias et Fabien Duchateau

Cette UE aborde des concepts d'interface humain-machine, d'interaction humain-machine et d'ergonomie.
L'enseignement (Organisation de l'UE) associe cours en amphi, activités en équipe sous forme de TD et mise en situation en TP sous forme classique ou ludique.
La forme des activités est parfois atypique : l'ouverture d'esprit est fortement recommandée !

Supports de cours - sujets de TD et TP (à distance, mais examen en présentiel le 7 mai)


Semaine 1
Cours 0 Organisation de l'UE - en direct 💻
Cours 1 Introduction à l'IHM - support PDF - vidéo 🎬

↓ À faire : visionner la playlist conception
↓ À faire : apprendre les 3 listes OPALE de codes IHM1 IHM2 IHM3
Semaine 2
Cours 2 Conception des IHM - support PDFen direct 💻
TD1 conception

↓ À faire : visionner la playlist prog d'interfaces
Semaine 3
Cours 3 Programmation pour l'IHM - interfaces - support PDFen direct 💻
TP1 projet programmation pour l'IHM

↓ À faire : visionner la playlist prog d'interactions
Semaine 4
Cours 4 Programmation pour l'IHM - interactions - support PDFen direct 💻
TP2 projet programmation pour l'IHM

↓ À faire : visionner la playlist concepts d'ergonomie

Semaine 5
Cours 5 Ergonomie - théories générales - support PDF - vidéo 🎬
TP3 évaluation ergonomique d'une application : théories générales - collectif (JADE en présentiel - plan B à distance)
↓ À faire : apprendre la liste OPALE de code ERG5

↓ À faire : jouer sur userinyerface.com, noter le temps sur Tomuss
↓ À faire : visionner la playlist composants d'IHM
Semaine 6
Cours 6 Ergonomie - éléments d'IHM - support PDF - vidéo 🎬
TP4 évaluation ergonomique d'une application : guides de style (rapport) - collectif

↓ À faire : visionner la playlist critères ergonomiques

Semaine 7
Cours 7 Ergonomie - critères généraux - support PDF - vidéo 🎬
TP5 évaluation ergonomique d'une application : critères généraux (rapport) - collectif (JADE en présentiel - plan B à distance)

↓ À faire : visionner la playlist critères ergonomiques Web
Semaine 8
Cours 8 Ergonomie - spécificités du web - support PDF - en direct 💻
TP6 évaluation ergonomique d'une application web (rapport) - collectif

↓ À faire : visionner la playlist critères ergonomiques mobile
Semaine 9
Cours 9 Ergonomie - spécificités du mobile - support PDF - vidéo 🎬
TP7 évaluation ergonomique d'une application mobile - collectif (JADE en présentiel - plan B à distance)

↓ À faire : visionner la playlist accessibilité numérique

Semaine 10
Cours 10 Ergonomie - spécificités liées au handicap - support PDF - vidéo 🎬
TP8 finalisation du TP-projet : prise en compte de l'ergonomie, en particulier du handicap - collectif

Semaine 11
TD2 combinaison de crières (JADE) + vidéo pédagogique
TP9 évaluation ergonomique croisée des TP-projets (fin du projet)
Contrôle Continu Terminal
en présentiel

Informations


Aides techniques

Consignes
rendu de TP et TD
vidéos

Exemples d'examens
sujet 2012 (pdf)
sujet 2013 (pdf)
sujet 2014 (pdf)
sujet 2017 (pdf)
sujet 2018 (pdf)
sujet 2019 (pdf)
sujet 2020 (pdf)

Playlists de révision
conception
prog d'interfaces
prog d'interactions
concepts d'ergonomie
composants d'IHM
critères ergonomique généraux
critères spécifiques au Web
critères spécifiques au mobile
accessibilité numérique

Remarques sur la notation
haut

TD1 conception


Par équipe de 2, vous allez concevoir une application ludique de quiz. Cette application devra permettre à un enseignant de créer des quiz et à des apprenants (enfants, élèves, étudiants ou adultes) de s'entraîner sur les quiz créés. Les quiz devront être aussi originaux et ludiques que possible. Support : fiche TD1 (pdf - docx)
L'équipe devra rendre :
  • au plus tard dimanche 7 février à 21h : la fiche au format PDF sur Tomuss.
  • au plus tard dimanche 21 février 21h : une vidéo de démonstration de l'application, respectant les consignes concernant les vidéos. La vidéo devra bien mettre en valeur les différentes fonctionnalités de l'application, en montrant la maquette réalisée.
Vidéos de démonstration des semestres précédents : 2012-2016 - 2016-2017 automne printemps - 2017-2018 automne printemps - 2018-2019 automne printemps - 2019-2020 automne printemps - 2020-2021 automne printemps - 2021-2022 automne printemps - 

haut


Projet programmation pour l'IHM


Sujet 
  • Un site web pour gérer différentes ressources : vous réaliserez une application permettant de gérer une liste de quiz (identifiant du quiz, nom, type de quiz, description, niveau de difficulté, date de création, nom de l'auteur).

Consignes
  • Plusieurs solutions d'implémentation sont possibles, choisissez-en une en tenant compte de vos préférences et de l'ergonomie.
  • Vous utiliserez Bootstrap pour la mise en page et mise en forme :
    • La page aura un en-tête, un pied de page et un menu.
    • Les éléments HTML utiliseront les styles Bootstrap prédéfinis disponibles.
  • Quelques données initiales doivent être fournies sur la page pour permettre les tests.
  • Les modifications de données (par exemple ajout, modification, suppression) ne seront pas obligatoirement persistantes (c'est-à-dire que la page web est remise dans son état initial après rechargement de la page). Vous utiliserez des fonctions JavaScript du DOM pour le document et pour les éléments pour programmer ces opérations.
  • Vous mettrez en place les principes suivants :
    • Repli d'un élément (afficher / masquer) en utilisant la fonction "collapse" de Bootstrap (pensez à inclure en plus de la bibliothèque bootstrap.js, jquery.js)
    • Auto-complétion des informations de contact (pour tester vous devrez activer la gestion de profils de votre navigateur)
    • Gestion des erreurs (prévention, validité, message d'erreurs, etc.)
    • Messages d'alerte éphémères (confirmation d'ajout et de suppression par exemple)
    • Bulles d'aide
    • Adaptation de votre site aux différents dispositifs ("responsive design") : pour tester, vous pouvez utiliser votre smartphone ou la "vue adaptative" disponible dans les outils de développement des navigateurs.
  • Si vous le souhaitez, vous pouvez partir de la base fournie : base locale (avec bibliothèques) ou base online (un seul fichier html).
  • Après chaque cours d'ergonomie, vous effectuerez une évaluation ergonomique de votre site selon les aspects vus en cours et corrigerez les erreurs ergonomiques détectées.
  • Le projet est à rendre à l'issue des TP2 et TP7, en respectant scrupuleusement les consignes. Il est en outre conseillé de le déposer après chaque séance de TP.

Fonctionnalités

  • Affichage des ressources déjà renseignées (sous forme d'un tableau ou d'objets média).
  • Ajout d'une ressource via un formulaire, par exemple en utilisant les méthodes createElement() et element.appendChild().
  • Suppression d'une ressource, par exemple en utilisant la méthode element.removeChild().
  • Modification d'une ressource, par exemple en utilisant la méthode element.innerHTML().
  • Recherche d'un mot-clé dans les ressources.

haut


TP d'évaluation ergonomique


Dans ces TP, vous allez effectuer l'évaluation ergonomique d'une application jouet ou d'un site Web réel en faisant appel aux différents aspects étudiés en cours (celui qui précède immédiatement le TP). Vous rédigerez soigneusement un rapport d'évaluation ergonomique de 2 pages qui sera rendu à l'issue du TP en respectant scrupuleusement les consignes :
  1. La première page détaillera 5 erreurs différentes de l'application jouet
    • testez et évaluez le logiciel donné
    • rédigez un rapport d'évaluation ergonomique pour 5 erreurs que vous choisirez les plus intéressantes et variées possibles, correspondant obligatoirement au cours qui précède immédiatement le TP
  2. La seconde page listera les 3 plus grosses erreurs ergonomiques relevant de ce même cours présentes sur l'application de votre projet.
Les erreurs peuvent porter sur un même élément d'interface, mais elles doivent concerner des concepts ergonomiques différents. En rédigeant le rapport d'évaluation ergonomique, vous devez être précis et convaincants : vous cherchez à inciter le concepteur à effectuer les modifications que vous suggérez.

Rapports
  • Modèles de rapport : pdf - docx
  • Le rapport doit être rédigé de façon claire, explicite, mais concise (4 à 5 lignes par erreur suffisent).
  • Le rapport doit décrire une seule erreur par ligne, chaque erreur doit être suffisamment différente des autres (le concept doit être différent, mais la localisation peut être la même).
  • Précisez bien le concept concerné dans la colonne de gauche du modèle : il faut qu'on puisse identifier la diapositive correspondante dans le cours.
  • Répondez bien à toutes les questions posées dans l'en-tête de la colonne de droite. Mettez en gras les mots-clés qui répondent à chaque question.
  • Faites plusieurs relectures au sein du binôme en faisant comme si vous deviez noter votre rapport : est-ce qu'on comprend bien l'erreur, est-ce qu'on voit bien que vous avez compris le concept d'ergonomie associé, est-ce que la présentation, l'expression et l'orthographe sont correctes ?

TP3 (plan B uniquement)

  • Vous allez évaluer cette application jouet du point de vue des théories ergonomiques vues au cours 5.
  • Vous chercherez le plus d'erreurs ergonomiques possibles, puis vous rédigerez votre rapport pour 5 de ces erreurs.
  • Une fois votre rapport déposé sur Tomuss, sélectionnez votre(vos) "meilleure(s) erreur(s)" pour enrichir le TP collectif sur le wiki.

TP4

  • Vous allez évaluer cette application jouet du point de vue des guides de styles des différents éléments d'une interface vus au cours 6.
  • Vous chercherez le plus d'erreurs ergonomiques possibles, puis vous rédigerez votre rapport pour 5 de ces erreurs.
  • Une fois votre rapport déposé sur Tomuss, sélectionnez votre(vos) "meilleure(s) erreur(s)" pour enrichir le TP collectif sur le wiki.
    Attention à utiliser les termes adaptés pour décrire les composants concernés.

TP5 (plan B uniquement)

  • Vous allez évaluer la même application jouet que pour le TP précédent, cette fois du point de vue des critères ergonomiques vus au cours 7.
  • Vous chercherez le plus d'erreurs ergonomiques possibles, puis vous rédigerez votre rapport pour 5 de ces erreurs.
    Vous expliquerez en outre les conséquences de chaque erreur ergonomique à l'aide des critères de Meinadier.

TP6

  • Vous allez évaluer le site Web velobook, uniquement les pages : page principale - version 3.0 - essai
          Attention, nous vous faisons évaluer les pages d'un vrai site web, respectez-le :
          - afin de ne pas surcharger leurs serveurs, n'ouvrez pas trop de pages en parallèle, évitez de recharger les pages
          - ne validez jamais les formulaires que vous testez, ne créez jamais de compte sur le site, n'envoyez jamais de messages aux webmasters ou sur les forums.
  • Vous chercherez 5 erreurs concernant les aspects spécifiques au web vus au cours 8.

TP7 (plan B uniquement)

  • Vous allez évaluer la version mobile de la partie "Démarches" du site web de Villeurbanne : vous pouvez la tester directement sur votre smartphone, via la "vue adaptative" des outils de développement de votre navigateur, ou éventuellement étudier les captures d'écran proposées.
  • Vous chercherez le plus d'erreurs ergonomiques possibles relevant des critères ergonomiques spécifiques au mobile vus au cours 9 (EMERAUDE principalement, éventuellement complétés par les bonnes pratiques du W3C), puis vous rédigerez votre rapport pour 10 de ces erreurs (ne rédigez de façon détaillée que les 5 premières erreurs).
  • En l'absence de partie 2 pour ce TP, vous avez 2 pages pour faire la partie 1.

TP9

  • Vous allez évaluer ergonomiquement le projet de l'étudiant auquel vous êtes associé (à télécharger sur Tomuss).
  • Attention, cette évaluation est particulière : vous n'évaluez pas un logiciel jouet ou le travail d'inconnus, mais un travail fait par vos collègues et qui leur est destiné. Soyez objectifs, mais particulièrement respectueux et constructifs dans vos évaluations.
    Par ailleurs, il s'agit d'une séance préparatoire à l'examen, une petite touche de pédagogie serait un plus appréciable pour le rédacteur et le destinataire :-)
  • Relevez le plus d'erreurs ergonomiques possible, en prenant en compte tous les cours d'ergonomie (cours 5 à 10).
  • Rédigez un rapport d'évaluation ergonomique (de 4 pages maximum, tout compris) listant toutes les erreurs que vous avez trouvées, en détaillant dans la rédaction uniquement les 3 erreurs les plus intéressantes selon vous. Dans vos explications de ces 3 erreurs, vous mettrez en évidence le rôle de plusieurs concepts (au moins 2, mais 3 ou 4 si vous êtes très forts ;-) issus de cours différents, soit qui conduisent à la même conclusion, soit qui s'opposent, dans ce cas, prenez bien soin de proposer une solution adaptée à l'ensemble des critères concernés (cf. diapo 46 du cours 7).
  • Appuyez votre rapport sur des captures d'écran de l'application sur lesquelles vous ajoutez les n° des erreurs, bien positionnées (cf. aide technique).
  • Vous pouvez également ajouter des remarques concernant les fonctionnalités (manquantes, buggées…)
  • Modèles de rapport (spécifique à ce TP) : pdf - docx 

haut


TD2 réalisation d'une vidéo pédagogique


Afin d'approfondir une des notions étudiées dans ce cours, réalisez une vidéo pédagogique de 1 à 2 minutes expliquant le concept qui vous est attribué sur Tomuss. Rendez cette vidéo sur Tomuss à la date indiquée, en respectant les consignes concernant les vidéos. Pour guider votre réflexion, complétez cette fiche de description (non contractuelle par rapport à la version finale de la vidéo) : pdf - docx.
Vidéos pédagogiques des semestres précédents : méthodes de conception - programmation d'interfaces et d'interactions - composants de l'IHM - concepts d'ergonomie - critères ergonomiques généraux, spécifiques au Web, spécifiques au mobile - accessibilité numérique -

haut


Bonus


  • Trouvez des fautes ou erreurs dans les cours, signalez-les avec la correction aux enseignants et gagnez un bonbon ;-)
  • Proposez une illustration humoristique, pertinente, politiquement correcte, adaptée à une partie très spécifique d'un cours de l'UE.
  • Effectuez l'évaluation ergonomique d'un logiciel ou site web réel ci-dessous (noté uniquement si annoncé par mail par SJD)
Effectuez l'évaluation ergonomique et rédigez un rapport précis (respectant le modèle du TP évaluation ergonomique d'un logiciel jouet) pour le site web indiqué (>>>). Remarque : ces évaluations peuvent également servir de préparation à l'examen.
Application à évaluer Parties à privilégier pour l'évaluation
>>> applimobile.univ-lyon1.fr - application mobile uniquement
graines-et-plantes.com - page échanges de graines et plantes
sosinfo.univ-lyon1.fr - page d'accueil
- page de création d'un ticket
- fenêtre jaillissante après validation d'un ticket
elipse.univ-lyon1.fr/ - page de demande convention de stage
tomuss.univ-lyon1.fr - version mobile côté étudiant

haut


Consignes générales pour le rendu des TP/TD


Tout travail ne respectant pas toutes les consignes ne sera pas corrigé et se verra attribuer la note définitive de 0/20.

  • Comment rendre le travail ?
  • Pour chaque travail demandé, vous devez rendre un fichier unique :
    • un fichier pdf dans le cas où seul un rapport est demandé,
    • une archive zip contenant l'ensemble des fichiers demandés dans les autres cas.
  • La production devra contenir de façon visible les noms et numéros d'étudiant (8 chiffres) des membres du binôme/équipe (dans le rapport, à l'interface du logiciel).
  • Les rapports devront respecter le modèle donné et le nombre de pages maximum imposé (pas de page supplémentaire, même vide). Modèle de rapport de TP de d'IHM : pdf - docx 
  • Les fichiers devront être nommés intelligemment : TP3rapport.pdf ou TPprojet.zip par exemple.
  • Les applications créées devront être utilisables de manière autonome (ne pas nécessiter d'installation spécifique). Pour les sites web, mettez le fichier index.html à la racine de votre archive.
  • Quand rendre le travail ?
    • Les TP sont à rendre immédiatement à l'issue de la séance. Les vidéos sont généralement à rendre à J+10 au plus tard à 21h. 
  • Où rendre le travail ?
    • Les travaux sont à rendre exclusivement sur Tomuss.
  • Qui rend le travail ?
    • Un seul dépôt par binôme/équipe (informez les membres de votre binôme/équipe quand vous avez déposé le TP : ils peuvent vérifier sur Tomuss que le rendu est conforme).
  • Mon TP a-t-il bien été reçu ?
    • Si le TP déposé apparaît sur Tomuss : tout va bien, il est également visible par les enseignants.
  • Grand concours
    • Un Carambar aux étudiants qui obtiennent 20/20 à un TP et une place au tableau d'honneur pour les TP exceptionnels !
    • Un bonbon pour les petits + du quotidien...

haut


Consignes et conseils


  • Conseils pour préparer la vidéo
  • Commencez par scénariser votre vidéo. Notamment commencez par une introduction et terminez par une conclusion (attention à ne pas faire une fin trop abrupte).
  • L'image doit être de qualité suffisante pour qu'on puisse comprendre les interfaces montrées.
  • Préférez les commentaires audio aux commentaires textuels, mais évitez les remarques inutiles ("quand on clique sur le menu, on voit le contenu du menu").
  • Le son doit être audible. Le texte doit être préparé à l'avance. Articulez bien, ne parlez pas trop vite. Le niveau sonore doit être le même pendant toute la vidéo.
  • Vous pouvez appuyer la présentation du logiciel avec un curseur mobile, mais attention à limiter les mouvements qui peuvent vite gêner la visualisation.
  • N'hésitez pas à être originaux, mais restez politiquement corrects !
  • Attention au respect du droit d'auteur pour les musiques additionnelles (et les extraits de vidéo).
  • Attention à l'orthographe dans les textes de vidéo, dans vos interfaces et dans les descriptifs !
  • Format
    • Format : les vidéos doivent être lisibles avec VLC et compatibles avec YouTube.
    • Diffusion : elles seront diffusées sur la chaine YouTube du Département Informatique.
    • Durée maximale : 2 min 0 sec.
    • Taille maximale : 75 Mo (ou taille spécifiée sur Tomuss).
    • Nom du fichier : x_NomApplication/ConceptEtudié.extension, où x est l'identifiant de votre équipe ou votre nom si vous travaillez seul (par exemple pour le groupe S, S_AppliTop.avi ou S_affordance.avi)
    • Description : la vidéo doit être complétée par un texte descriptif (500 caractères max. espaces compris) qui sera ajouté à YouTube pour aider à choisir et comprendre les vidéos (S_description.txt). En lisant ce texte, on doit comprendre de quoi il va s'agir, quelle est l'intention humoristique. Terminez par une liste des références nécessaires à la compréhension (par exemple un film ou un YouTubeur).
    • Auteurs : il ne vous est pas imposé d'indiquer vos noms dans la vidéo et il est préférable de ne pas indiquer vos n° d'étudiants.
  • Outils
  • Améliorations éventuelles
    • Sur TOMUSS, en plus de la note de la vidéo, il peut y avoir les indications "Amélioration vidéo" et "Vidéo améliorée dépôt".
    • Si la valeur associée est "Non concerné", votre équipe n'est pas concernée par ces indications.
    • Si vous avez reçu un mail explicatif, votre équipe est concernée par ces indications. En effet, pour certaines vidéos, bonnes mais pouvant facilement être améliorées afin de devenir meilleures, nous vous proposons parfois de faire une seconde version qui donnera lieu à une évaluation complémentaire.

haut


Aides techniques


  • Création d'un fichier PDF Pour générer le pdf que vous déposerez sur Tomuss, plusieurs techniques sont possibles à partir de votre traitement de texte :
    • sous Word enregistrer-sous en choisissant le format pdf ou sous LibreOffice exporter au format pdf : il y aura autant de pages dans le PDF que dans le doc
      • pour enlever les éventuelles pages surnuméraires : dans les options de l'enregistrement du pdf, précisez le numéro des pages que vous souhaitez intégrer
    • imprimer en choisissant Microsoft print to pdf
      • pour enlever les éventuelles pages surnuméraires : dans les paramètres d'impression, précisez le numéro des pages que vous souhaitez intégrer
  • Captures d'écran
    • Pour faire une capture de l'ensemble de l'écran : touche "imprime écran" (ou "print screen"), puis commande "coller" dans un éditeur d'images ou un traitement de texte. Pour faire une capture de la fenêtre active uniquement : touches "alt" + "imprime écran". Vous pouvez aussi utiliser l'outil Capture de Windows et ses options.
    • Si c'est demandé, mettez dans votre rapport une capture par écran étudié (ne multipliez pas et ne découpez pas les écrans). Vous pouvez réduire la taille des écrans : l'important est de bien situer les erreurs avec leur n°, dans la plupart des cas nous connaissons les applications, nous n'avons pas besoin d'en voir les détails. Si certaines erreurs ne sont pas (ou difficilement) visibles à l'écran, ne cherchez pas à en faire une capture : expliquez seulement l'erreur dans le rapport.
  • Programmation 
    • Nous vous proposons deux modules interactifs à faire en autonomie dès le début du semestre pour découvrir la programmation avec Bootstrap de manière ludique : téléchargez chaque archive (premiers pas avec Bootstrap - programmation d'événements) ; décompressez-la ; lancez index.html dans Firefox (n'utilisez pas d'autres navigateurs)... et laissez-vous guider !
    • Base de page web Bootstrap : base locale (avec bibliothèques) ou base online (un seul fichier html).

  • Tranfert de fichiers volumineux
    • Si vous avez besoin de transférer des fichiers volumineux en dehors de Tomuss (ce qui devrait être exceptionnel), utilisez le service https://filesender.renater.fr/ avec une connexion Université Claude Bernard Lyon 1.