LifIHM - Interactions Homme-Machine en Licence informatique

logo Université de Lyon - Lyon 1

Enseignants : Stéphanie Jean-Daubias, Fabien Duchateau et Pierre Yang

Présentation : 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 !

Planning, contenu et supports

Cours 0 : Organisation de l'UE - support PDF

Cours 1 : Introduction à l'IHM - support PDF

À faire avant le cours

Cours 2 : Conception des IHM - support PDF

TD 1 : Conception en équipe

Par équipe de 4, vous allez concevoir une application pour tout savoir et tout trouver au sujet de la BU de Lyon 1.

L'équipe devra rendre :

  • à l'enseignant à l'issue de la séance de TD : la fiche (PDF - docx).
  • sur Tomuss au plus tard le 2 mars à 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

À faire avant le cours

Cours 3 : Maquettage interface et interaction - support PDF

TP 1 : Maquettage

Vous allez créer une maquette interactive avec Quant-UX.

Le plus intéressant (plan A) est que vous fassiez la maquette du TD1, mais vous pouvez préférer vous entraîner sur un exemple (plan B).
La suite du sujet est rédigée de façon détaillée pour vous guider pour le plan B, mais vous pouvez très bien adapter les consignes pour les appliquer à la maquette du TD1... ce qui vous demandera toutefois un certain nombre d'adaptations... dont vous êtes tout à fait capables !

Commencez par découvrir le modèle à reproduire. Pour cela, vous allez utiliser les outils disponibles en bas à droite de l'écran : vous pouvez zoomer 🔍 sur les différents écrans, afficher les liens entre écrans / et surtout tester la maquette (bouton ▶ Simulate dans la barre d'outils du haut). Dans le menu, seule la pizza est disponible dans la maquette.

  1. Commencez par créer un compte sur Quant-UX.
  2. ⚠ Attention, au moins 5 minutes avant la fin de la séance de TP, passez à la question 14 !
  3. Vous allez maintenant créer votre propre maquette. Dans Quant-UX, l'onglet My Prototypes liste vos maquettes.
    Vous allez en créer une nouvelle avec le bouton ➕ Create new prototype.
  4. Vous allez lui attribuer un nom, choisir la taille de l'écran (bureau pour une application pour ordinateur), puis créer et positionner votre premier écran vide (Create empty screen).
  5. En cliquant sur un écran, vous pouvez le copier, le dupliquer ou le supprimer grâce aux outils disponibles en haut de l'écran. Vous pouvez aussi accéder aux propriétés de l'écran dans la zone qui s'affiche à droite. Vous pouvez :
    • lui attribuer un nom pertinent
    • modifier sa nature en le définissant comme start screen (ce sera l'écran de départ de votre maquette) ; comme segment (par exemple pour faire une boîte de dialogue) ou comme overlay (le contenu de l'écran s'affichera sur l'écran appelant)
    • ajouter une image de fond (photos du modèle).
  6. Vous allez maintenant ajouter différents composants (🧩Widgets dans la barre d'outils de gauche, le modèle utilise des composants de la catégorie OpenUI, parfois complétée par Lightning, pour les groupes de cases à cocher et de boutons radio notamment) pour compléter votre écran.
    Quant-UX en propose plusieurs types (le modèle du TP utilise principalement OpenUI) :
    • WireFrame pour un effet maquette faite à la main
    • Material pour des maquettes Android et iOS pour des maquettes iPhone
    • Lightning, OpenUI et Bootstrap pour des maquettes Web
    • pour compléter, charts propose des graphiques et icons liste de nombreuses icônes que vous pouvez filtrer grâce au mode de recherche
    Pour votre écran principal, vous aurez besoin d'ajouter :
    • un panneau gris (Panel) qui représentera le menu (les propriétés des composants sont modifiables dans la zone de droite)
    • une étiquette "Menu" de taille de police 32 et de couleur blanche.
  7. Votre deuxième écran sera dédié au texte du menu déroulant :
    • vous devez créer un second écran (💻Screens à gauche), le nommer et choisir le type adapté, avant de créer son contenu
    • le menu est constitué d'une boîte (◽ Rectangle à gauche)
    • vous pouvez copier l'étiquette de Menu du premier écran vers le second
    • pour créer les items de menu, créez le premier item (un label), puis pour multiplier les items et gérer leur espacement utilisez les outils de clonage et de redimensionnement/distribution.
  8. Votre troisième écran sera dédié à la personnalisation de la pizza. Dans un premier temps ajoutez seulement quelques composants :
    • le menu copié depuis la page principale
    • les boutons Valider (de type Accept button) et Annuler (de type Passive button).
  9. Le quatrième écran proposera une synthèse de la commande. Dans un premier temps ajoutez seulement un bouton de retour vers la page d'accueil.
  10. Vous allez maintenant pouvoir commencer à rendre votre maquette interactive. Pour cela vous allez passer de la vue Design à la vue Protoype de Quant-UX.
    • si besoin, vous pouvez dézoomer (CRTL -) et déplacer le canevas (↔ ↕ )
    • vérifiez que vous êtes bien en mode ➚ édition
    • le menu de la page principale doit pointer vers le menu déroulant développé : sélectionnez l'étiquette Menu de l'écran principal et ajoutez-lui une ➕ Add action : un 🔗 lien vers l'écran du menu déroulant
    • dans l'écran de menu, l'item Pizza du menu doit pointer vers l'écran de personnalisation de la pizza
    • dans l'écran de personnalisation, le bouton Valider doit pointer vers l'écran de synthèse et le bouton Annuler est une action de type ← retour
    • dans l'écran de synthèse, le bouton pointe vers l'écran d'accueil
    • vérifiez vos interactions avec le bouton ▶ Simulate (barre d'outils du haut).
  11. Enrichissez maintenant l'écran de personnalisation avec deux panneaux :
    • choisissez les composants adaptés, ajustez leurs propriétés et leurs options, en cas de besoin, pour gagner du temps, copiez le style d'un composant vers un autre
    • pensez à grouper les éléments fonctionnant ensemble, et à vous aider des outils d'alignements (en haut de la zone de droite)
    • rendez obligatoires certains choix : activez la propriété Required pour les composants concernés dans la zone Data de la vue Prototype ; puis spécifiez que la validation n'est possible que si tous ces champs sont valides (No validationAll fields valid)
    • forcez la mise à zéro des différents champs lors du réaffichage de l'écran (forget state)
    • testez le résultat, vous ferez plus tard de même avec les autres données.
  12. Vous allez maintenant compléter l'écran de synthèse en liant les champs de saisie de l'écran de personnalisation (écran 1) avec les champs d'affichage de l'écran de synthèse (écran 2). Quand ce sera fait, les choix faits par l'utilisateur sur l'écran 1 seront automatiquement retranscrits sur l'écran 2. Pour cela :
    • complétez tout d'abord l'écran de synthèse en choisissant les composants adaptés (panel, label, textBox), créez notamment une étiquette pour afficher la date choisie par l'utilisateur
    • créez une variable qui contiendra la date : dans les propriétés de l'étiquette date de l'écran 1, dans les Data, sélectionnez Add data binding, choisissez un nom pour votre variable, créez-la (Create) avant de la sélectionner
    • dans l'écran 2, configurez le lien avec votre variable de date : sélectionnez l'étiquette qui devra contenir la date, créez le lien avec les données (Add data binding), puis sélectionnez votre variable de date
    • testez le résultat, vous ferez plus tard de même avec les autres données.
  13. Vous allez maintenant utiliser un élément logique pour proposer deux comportements différents.
    Commencez par tester de nouveau le modèle : une fois sans code promo, un fois en ajoutant le code promo 42. Constatez la différence de comportement avant de la reproduire dans votre TP. Pour cela :
    • commencez par dupliquer l'écran de synthèse
    • adaptez la copie pour en faire l'écran de synthèse pour geeks, en particulier, nommez le champ de saisie du code promo
    • ajoutez maintenant un connecteur logique OR (◇ Create logic element), il sera associé en entrée au bouton Valider, et en sortie aux deux versions des pages de synthèse
    • reliez le bouton Valider au connecteur grâce à la poignée visible à droite du bouton une fois sélectionné
    • reliez également le connecteur aux deux versions de l'écran de synthèse
    • configurez maintenant une Action : créez une règle pour le lien vers l'écran de synthèse pour geeks (➕ Add rule) de type Widget, qui teste si le composant contenant le code promo a pour valeur 42
    • l'autre lien n'est pas associé à une règle : l'utilisateur sera aiguillé vers la synthèse normale dans tous les cas où la règle précédente n'est pas respectée.
  14. Avant la fin de la séance de TP, exportez votre projet dans une archive zip que vous déposerez sur Tomuss.
  15. Vous pourrez continuer d'améliorer et de tester votre maquette jusqu'à la prochaine séance de TP : reproduisez l'aspect et les différents comportements du modèle du TP.

Complément : programmation pour l'IHM

Pour aller plus loin, vous pouvez vous essayer en autonomie à la programmation pour l'IHM :

  • Programmation d'interfaces : support de cours PDF - playlist de vidéos
  • Programmation d'interactions : support de cours PDF - playlist de vidéos
  • TP programmation pour l'IHM : vous allez améliorer un site Web 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, puis suivez les consignes : elles sont accessibles à partir du point d'interrogation en haut à droite de la page

À faire avant le cours

Cours 4 : Évaluation des IHM, tests utilisateurs - support PDF

TP 2 : Tests utilisateurs

Afin d'évaluer la maquette faite lors du TP précédent, vous allez mettre en place différents tests à effectuer auprès d'utilisateurs.

  1. Vous allez commencer par un bref test de perception. Pour cela, vous allez créer puis diffuser un questionnaire en ligne avec l'outil de votre choix, par exemple Google Form.
    • Commencez par choisir l'écran qui fera l'objet du test : il doit être adapté à ce type de test.
    • Créez le questionnaire (➕ en bas à droite) et attribuez-lui un titre pertinent du point de vue de l'utilisateur.
    • La première "question" consistera à afficher l'écran à évaluer : ajoutez-le sous la forme d'une image (menu vertical à droite). Utilisez le titre pour indiquer la consigne à vos futurs testeurs.
    • Pour que l'écran ne soit plus visible lorsque l'utilisateur répondra aux questions, vous allez ajouter une section ; après la première section, on doit passer à la section suivante.
    • Dans la seconde section, créez les différentes questions à poser à vos utilisateurs (4 doivent suffire) : choisissez des types de questions adaptés, combinez questions ouvertes et questions fermées, formulez soigneusement les questions, choisissez des échelles adaptées parmi les échelles validées scientifiquement.
    • Testez bien votre questionnaire (mode aperçu dans le menu du haut).
    • Terminez en diffusant votre questionnaire à vos testeurs : 5 de vos collègues de la salle de TP. N'utilisez pas l'envoi par mail intégré, mais communiquez vous-même le lien aux testeurs : soit par mail, soit en générant un QR code (par exemple avec Unitag, n'hésitez pas à améliorer sa qualité en jouant sur l'allure, la couleur et la redondance) que vos voisins pourront flasher sur votre écran.
    • Pendant que vos testeurs évaluent votre maquette, effectuez également leurs tests.
    • Il ne vous reste plus qu'à analyser les résultats. Consultez vos résultats dans l'onglet Réponses. Par exemple, quels sont les éléments de votre interface que les utilisateurs ont retenus ? Est-ce que vous vous attendiez à ce résultat ?
    • Pour garder une trace de ces résultats, téléchargez le fichier csv détaillant toutes les réponses obtenues et enregistrez dans un fichier PDF la synthèse proposée par l'outil en ligne (Imprimer dans le menu tout en haut, puis de nouveau Imprimer en choisissant bien Enregistrer au format PDF dans les options d'impression).
  2. Vous allez maintenant mettre en place un test A/B en retravaillant votre maquette avec Quant-UX.
    • Commencez par choisir l'écran concerné et créer les variantes.
    • Pour la maquette de pizza, créez une version alternative de l'écran de personnalisation de la pizza, par exemple avec tous les choix dans un même bloc vertical. Évidemment, vous utiliserez l'outil de duplication d'écran pour gagner du temps.
    • Prenez le temps de bien positionner vos différents écrans pour vous y retrouver facilement par la suite.
      Idéalement, une première colonne avec l'écran d'accueil puis le menu déroulé, une deuxième colonne avec les deux écrans de personnalisation de la pizza et une troisième colonne avec les deux variantes de l'écran de synthèse.
    • Ajoutez un nouvel élément logique OR entre l'élément Pizza du menu déroulant et les deux écrans de personnalisation de la pizza. Il ne vous reste plus qu'à indiquer que le choix entre les alternatives se fera lors du test A/B.
      Attention, vous devez être dans la vue Prototype pour créer les liens, mais dans la vue Design pour l'exploiter sous forme de test A/B.
    • Vous pouvez maintenant tester le résultat (▶ Simulate) : en lançant plusieurs fois la simulation, vous tomberez parfois sur une version de l'écran de personnalisation, parfois sur l'autre.
    • Vous êtes maintenant prêts à diffuser votre test A/B.
      Pour cela, vous devez afficher l'écran de gestion de la maquette (Back to prototypes dans le menu principal) : copiez, puis diffusez le lien le test (bouton Share) comme lors du test précédent.
    • Pendant que vos testeurs évaluent votre maquette, effectuez également leurs tests.
    • Il ne vous reste plus qu'à analyser les résultats de votre test.
      Consultez vos résultats : l'onglet Test liste les tests effectués (il est même possible de rejouer les tests) ; le tableau de bord (Dashboard) synthétise les résultats ; l'onglet Heat map donne un aperçu des parcours des testeurs sur les différents écrans et permet d'accéder aux détails (bouton Open analytic canvas). Explorez les différentes possibilités qui s'offrent à vous.
    • Quel est le temps moyen que passent vos utilisateurs sur la page de personnalisation avant de cliquer sur le bouton Valider dans les 2 versions testées ?
  3. Vous allez également faire un test utilisateur classique, en observant un individu utiliser votre maquette.
    • Commencez par construire le scénario d'usage du test.
    • Préparez votre grille d'évaluation (plutôt sur papier, car votre ordinateur sera mobilisé pour votre utilisateur).
    • Faites passer le test à l'un de vos voisins de TP qui travaille au même rythme que vous (et faites le sien). Prenez des notes soigneusement à l'aide de votre grille. Attention à ne pas trop intervenir dans l'activité de votre utilisateur.
    • Interprétez les résultats.
  4. Vous allez maintenant rédiger un rapport synthétisant les résultats de vos différents tests.
    • Pour chacun des tests, présentez brièvement l'objectif du test,
    • décrivez le test,
    • montrez les résultats obtenus,
    • puis formulez vos conclusions.
    • Déposez ce rapport sur Tomuss.
  5. Pour terminer, vous améliorez votre maquette en fonction des conclusions tirées de ces différents tests.

À faire avant le cours

Cours 5 : Ergonomie - théories générales - support PDF

TP 3 : Évaluation ergonomique d'une application : théories générales

Séance avec JADE (Jeu d'Apprentissage De l'Ergonomie) sans ordi dans une salle de TD.

  • Prenez connaissance du logiciel et du concept imposés pour la fiche.
  • Jouez avec JADE vert anis (vous avez le droit de vous amuser ;-) !
  • En fin de partie, complétez la fiche "Retour après la séance", ainsi que le questionnaire.
  • Enfin, un membre de chaque équipe reporte le contenu de sa fiche sur le Wiki du TP sur Claroline Connect, immédiatement ou au plus tard à 21h le jour même.

À faire avant le cours

Cours 6 : Ergonomie - éléments d'une IHM - support PDF

TP 4 : Évaluation ergonomique d'une application : guides de style

Vous allez effectuer l'évaluation ergonomique d'une application-jouet (c'est-à-dire une application conçue spécifiquement pour les besoins pédagogiques du TP) et rédiger un rapport.

  • Vous ferez l'évaluation du point de vue des guides de styles des différents éléments d'une interface vus dans le cours de cette semaine.
  • Commencez par télécharger, décompresser et exécuter l'application-jouet.
  • Testez soigneusement l'application.
  • Vous chercherez dans un premier temps le plus d'erreurs ergonomiques possible, puis vous choisirez 5 de ces erreurs.
  • Rédigez ensuite un rapport d'évaluation ergonomique de 2 pages respectant les consignes concernant les rapports
  • Déposez votre rapport sur Tomuss avant la fin de la séance.
  • Enfin, avant de partir, sélectionnez votre "meilleure erreur" pour enrichir le TP collectif sur le wiki.

À faire avant le cours

Cours 7 : Ergonomie - critères généraux - support PDF

TP 5 : Évaluation ergonomique d'une application : critères généraux

Séance avec JADE (Jeu d'Apprentissage De l'Ergonomie) sans ordi dans une salle de TD.

  • Jouez avec JADE orange (vous avez le droit de vous amuser ;-) !
  • Uniquement pour ceux qui ont choisi cette modalité d'évaluation :
    • Rédigez et rendez sur Tomuss un rapport d'évaluation ergonomique complet (pas de limite au nombre d'erreurs, vous pouvez éventuellement mettre en avant des points positifs) et réaliste
    • Concernant le logiciel avec lequel vous avez joué (culture ou sports)
    • Concentrez-vous sur les critères ergonomiques du cours de cette semaine, mais vous pouvez également exploiter les concepts des cours précédents.
    • Il est conseillé de prendre des notes pendant le TP...
    • Travail individuel
    • Rapport de maximum 6 pages à rendre sur Tomuss au format PDF au plus tard le 31 mars à 21h.
      Le format est libre, mais la rédaction doit être soigneuse, respecter la structuration P3RS (cours précédent diapo 34).
      La mise en page doit être rigoureuse, suivre les consignes disponibles à la fin du cours précédent (à partir de la diapo 36).
      Vous devrez en particulier vous poser la question de la structuration du rapport (liste d'erreur "plate" ou rapport structuré ?).
      Les solutions pourront ne pas être proposées à chaque erreur, mais globalement pour une zone de l'écran donnée.

À faire avant le cours

Cours 8 : Ergonomie - spécificités du web - support PDF

TP 6 : Évaluation ergonomique d'un site Web

Vous allez effectuer l'évaluation ergonomique et rédiger un rapport d'un "vrai" site Web.

  • Vous ferez l'évaluation du point de vue des critères spécifiques au Web vus dans le cours de cette semaine.
  • Commencez par découvrir et tester soigneusement le site Web de l'AML.
  • 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 pas de compte sur le site, n'envoyez jamais de messages aux webmasters ou sur les forums.
  • Vous chercherez dans un premier temps le plus d'erreurs ergonomiques possible, puis vous choisirez 5 de ces erreurs.
  • Rédigez ensuite un rapport d'évaluation ergonomique de 2 pages respectant les consignes concernant les rapports
  • Déposez votre rapport sur Tomuss avant la fin de la séance.

À faire avant le cours

Cours 9 : Ergonomie - spécificités du mobile - support PDF

TP 7 : Évaluation ergonomique d'une application mobile

Séance avec JADE (Jeu d'Apprentissage De l'Ergonomie) sans ordi dans une salle de TD.

  • Prenez connaissance du concept imposés pour la fiche.
  • Jouez avec JADE vert émeraude (vous avez le droit de vous amuser ;-) !
  • En fin de partie, complétez la fiche "Retour après la séance", ainsi que le questionnaire.
  • Enfin, un membre de chaque équipe reporte le contenu de sa fiche sur le Wiki du TP sur Claroline Connect, immédiatement ou au plus tard à 21h le jour même.

À faire avant le cours

Cours 10 : Ergonomie - spécificités liées au handicap - support PDF

TP 8 : maquettage : prise en compte des handicaps

Vous allez retravailler votre maquette du TP1 pour améliorer son accessibilité numérique (si vous l'avez perdue, vous avez un export sur Tomuss :-) :

  • Commencez par effectuer une analyse ergonomique de votre maquette en vous concentrant sur les aspects handicap.
  • Modifiez votre maquette pour améliorer son ergonomie.
  • Ajoutez notamment une gestion des erreurs de l'utilisateur pour l'écran de personnalisation de la pizza.
  • Rédigez un rapport de maximum 3 pages, rendu au format PDF, respectant le modèle donné (PDF - docx).
    1. La première page contiendra les principaux écrans de votre maquette après améliorations ergonomiques,
    2. la deuxième page contiendra les écrans montrant la gestion des erreurs,
    3. la troisième page contiendra la description de vos actions en faveur de l'accessibilité numérique.
  • Prenez soin de proposer des solutions ergonomiques et compatibles avec les outils d'accessibilité existants
    • Vos propositions intégreront au moins 3 solutions particulièrement adaptées à la prise en compte du handicap et de l'accessibilité numérique.
    • Ces solutions seront visibles sur les écrans de vos maquettes intégrés dans le rapport. Mais certaines améliorations ne pourront pas être visibles ou faites de manière opérationnelle dans votre maquette avec Quant-UX. Dans ce cas, vous vous contenterez de les décrire textuellement (mais rien ne vous empêche d'expliquer comment ça serait fait en HTML ;-)
    • Les différents écrans de votre maquette seront intégrés soigneusement dans les pages adaptées du rapport. Ils seront annotés clairement afin de faire le lien avec les explications textuelles.
    • Vos améliorations seront en effet expliquées précisément dans le rapport.
  • La mise en forme de votre rapport devra être soignée, tout particulièrement concernant les images de maquettes et leurs annotations, en tenant compte des conseils donnés en cours.
  • Petit + : votre rapport pourra lui-même être compatible avec les outils d'accessibilité (indiquez explicitement ce que vous avez fait dans ce sens).
  • Déposez votre rapport sur Tomuss avant la fin de la séance.

TD 2 : Combinaison de critères

Séance avec JADE (Jeu d'Apprentissage De l'Ergonomie) sans ordi

TP 9 : Vidéo pédagogique

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

L'équipe devra rendre :

  • à l'issue de la séance : 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 : une vidéo respectant les consignes concernant les vidéos

Vidéos pédagogiques des semestres précédents :

Sujets d'examens

PDF : sujet 2012 - sujet 2013 - sujet 2014 - sujet 2017 - sujet 2018 - sujet 2019 - sujet 2020 - sujet 2021 -

Remarques sur la notation

Autres ressources

Cours

Quiz à faire sur Claroline Connect

TP collaboratifs sur Claroline Connect avec correction et commentaires

Vos TP

Consignes et aides


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 Projet.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
  • 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...
    • Trouvez des fautes ou erreurs dans la page Web ou 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 l'enseignante)
      • Remarque : ces évaluations peuvent également servir de préparation à l'examen
      • OPALE : application mobile uniquement
      • graines-et-plantes.com : page échanges de graines et plantes
      • sosinfo : page d'accueil + page de création d'un ticket
      • elipse : page de demande de convention de stage
      • Tomuss : page principale

Choix des erreurs

Choisissez vos erreurs stratégiquement :

  • choisissez-les les plus intéressantes et variées possibles
  • elles peuvent porter sur un même élément d'interface
  • mais elles doivent concerner des concepts ergonomiques différents : chaque erreur doit être significativement différente des autres
  • ne parlez que d'un problème à la fois, même s'il est intéressant d'évoquer un autre concept lié

Rédaction

Respectez le modèle de rapport : pdf - docx :

  • 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 !

Relecture

Prenez le temps de relire soigneusement votre rapport avant de le rendre, en faisant comme si vous deviez le noter :

  • 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 comprend bien en quoi il s'agit d'un problème d'ergonomie ? 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 que la solution proposée est bien adaptée, suffisamment précise, opérationnelle ?
  • Est-ce que la présentation, l'expression et l'orthographe sont correctes ?

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, en particulier pour les éventuels musiques additionnelles et 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 chaîne 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é sur 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'apparaître ni 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.

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 :
  • enregistrer ou exporter : sous Word enregistrer-sous en choisissant le format pdf / sous LibreOffice exporter au format pdf : il y aura autant de pages dans le PDF que dans le document
    • pour enlever les éventuelles pages vides surnuméraires : dans les options de l'enregistrement du pdf, précisez le numéro des pages à intégrer dans le pdf
  • 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 à intégrer dans le pdf

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, en gardant les proportions initiales : 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 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).

Transfert 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.