logo Université de Lyon - Lyon 1

LifIHM - Interactions Homme-Machine en Licence informatique

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 (présentiel)

Semaine 1
Cours 0 Organisation de l'UE
Cours 1 Introduction à l'IHM - support PDF 

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

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

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

↓ À faire : visionner la playlist concepts d'ergonomie
↓ À faire : visionner la vidéo de présentation du jeu d'apprentissage de l'ergonomie JADE
Semaine 5
Cours 5 Ergonomie - théories générales - support PDF 
TP3 évaluation ergonomique d'une application : théories générales : JADE - (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
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
TP5  évaluation ergonomique d'une application : critères généraux : JADE (plan B à distance)
↓ À faire : visionner la playlist critères ergonomiques Web
Semaine 8
Cours 8 Ergonomie - spécificités du web - support PDF 
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
TP7 évaluation ergonomique d'une application mobile : JADE (plan B à distance)

↓ À faire : visionner la playlist accessibilité numérique
Semaine 10
Cours 10 Ergonomie - spécificités liées au handicap - support PDF
TP8 maquettage : enrichissement d'une application, prise en compte du handicap

Semaine 11
TD2 combinaison de critères (JADE)
TP9 vidéo pédagogique
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 5, vous allez concevoir une application pour créer du lien entre étudiants sur votre campus.
Modèles de fiche : fiche TD1 (pdf - docx)
L'équipe devra rendre :
  • à l'issue de la séance de TD : la fiche (à l'enseignant).
  • au plus tard le 28 septembre à 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

TP programmation pour l'IHM

En binôme, vous allez améliorer un site Web "jouet" de gestion de paniers de fruits et légumes :
  • téléchargez l'archive
  • décompressez-la
  • ouvrez le fichier index.html (décompressé !) dans un navigateur
  • suivez les consignes : elles sont accessibles à partir du point d'interrogation en haut à droite de la page

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). 
  • testez et évaluez le logiciel donné, en repérant le plus d'erreurs possibles,
  • choisissez 6 erreurs
    • correspondant obligatoirement au cours qui précède immédiatement le TP
    • les plus intéressantes et variées possibles : les erreurs peuvent porter sur un même élément d'interface, mais elles doivent concerner des concepts ergonomiques différents ; chaque erreur doit être bien différente des autres
  • rédigez ensuite un rapport d'évaluation ergonomique de 2 pages
    • respectez le modèle de rapport : pdf - docx
    • ne parlez que d'un problème à la fois
    • complétez soigneusement les différentes sections, sans oublier le nom précis du concept
    • mettez en gras les mots-clés qui répondent à chaque question
    • soyez rigoureux : rédigez de façon claire, explicite, mais concise (4 à 5 lignes pour une erreur suffisent).
    • soyez convaincants : vous cherchez à inciter le concepteur à effectuer les modifications que vous suggérez !
  • relisez-vous soigneusement au sein du binôme en faisant comme si vous deviez noter votre rapport :
    • est-ce que le concept de la colonne de gauche du rapport est bien identifiable (peut-on retrouver la diapositive correspondante dans le cours) ?
    • est-ce qu'on identifie bien le problème, l'élément d'interface est concerné ?
    • est-ce qu'on voit bien que vous avez compris le concept d'ergonomie associé ?
    • est-ce qu'on comprend bien le risque pour l'utilisateur si le problème n'est pas corrigé ?
    • est-ce qu'on comprend bien la solution proposée, est-elle bien adaptée ?
    • est-ce que la présentation, l'expression et l'orthographe sont correctes ?
  • rendez-le à l'issue du TP en respectant scrupuleusement les consignes

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 6 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 6 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 cette application jouet 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 6 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 OnVaSortir - Lyon, uniquement les pages : page principale - page groupes
    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 6 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 EMERAUDE spécifiques au mobile vus au cours 9, puis vous rédigerez votre rapport pour 6 de ces erreurs.

haut

TP8 maquettage

En binôme, vous allez concevoir des maquettes pour imaginer comment compléter le site Web "jouet" de gestion de paniers de fruits et légumes (cf. TP programmation pour l'IHM) :
  • à l'aide de l'outil de maquettage de votre choix (cf. conseils d'outils de maquettage) :
    • ajoutez la gestion de l'ajout de paniers par le producteurs de fruits et légumes (type de panier, composition, description, photo, etc.)
    • prévoyez le comportement du site Web en cas d'erreurs (notamment erreur de saisie ou champs laissés vides)
    • intégrez les écrans créés (au moins 2) à votre rapport
    • vous pouvez ajouter, avec votre traitement de texte, des bulles de texte pour expliquer le fonctionnement de votre outil
  • prenez soin de proposer des solutions ergonomiques et compatibles avec les outils d'accessibilité (cf. cours 10)
    • vos propositions intégreront au moins 3 solutions particulièrement adaptées à la prise en compte du handicap
    • ces solutions seront si c'est pertinent visibles sur les écrans intégrés dans le rapport
    • elles seront expliquées dans le rapport
  • le rapport de 3 pages respectera le modèle (pdf - docx) et sera rendu au format pdf
  • petit + : votre rapport pourra lui-même être compatible avec les outils d'accessibilité
  • remarque : c'est une bonne idée de "réfléchir sur papier" avant de vous lancer sur ordi...
haut

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

Afin d'approfondir une des notions étudiées dans ce cours, réalisez, par équipe de 4 ou 5, une vidéo pédagogique de 1 à 2 minutes expliquant le concept choisi sur Tomuss.

L'équipe devra rendre :
  • à l'issue de la séance de TD : la fiche de description pour guider votre réflexion (non contractuelle par rapport à la version finale de la vidéo) : pdf - docx
  • à la date indiquée (12/12/2021 21h) : une vidéo respectant les consignes concernant les vidéos.
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
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). 
  • Les fichiers devront être nommés intelligemment : TP3rapport.pdf ou TPprog.zip par exemple.
  • Les applications créées devront être utilisables de manière autonome (ne pas nécessiter d'installation spécifique).
  • 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 membre du binôme / de l'équipe
    • Informez vos équipiers quand vous avez fait le dépôt : ils peuvent vérifier sur Tomuss que le rendu est conforme
  • Mon TP a-t-il bien été reçu ?
    • Si le fichier déposé apparaît sur votre bilan 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 pour les vidéos

  • 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 (par exemple pour le groupe 42, 42_AppliTop.avi ou 42_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 (42_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.