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

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

Informations

TD1 conception

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

haut

Projet programmation pour l'IHM

• 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).

• 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

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.

• 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

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)

haut