
LifIHM
-
Interactions Homme-Machine en Licence informatique de l'Université Lyon
1
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
↓ À faire :
visionner la playlist conception
↓ À
faire : apprendre les 3 listes OPALE de codes IHM1 IHM2 IHM3
Semaine 2
↓ À faire :
visionner la playlist prog d'interfaces
Semaine 3
↓ À faire :
visionner la playlist concepts d'ergonomie
Semaine 4
Semaine 5
↓ À faire :
apprendre
la
liste OPALE de code ERG5
↓ À faire : jouer sur userinyerface.com,
noter le temps sur Tomuss
Semaine 6
↓ À faire :
visionner la playlist critères ergonomiques
Semaine 7
Semaine 8
Semaine 9
TP7
évaluation
ergonomique d'une
application mobile - collectif (JADE
en présentiel - plan B à distance)
↓ À faire :
visionner la playlist accessibilité numérique
Semaine 10
TP8
finalisation du TP-projet : prise
en compte de l'ergonomie, en
particulier du
handicap - collectif
Semaine 11
|
Informations
Aides techniques
Consignes
Exemples
d'examens
Playlists de révision
Remarques sur la notation
|
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 -
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 :
- 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
- 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 : concepts
d'ergonomie - accessibilité numérique - méthodes
de conception - programmation d'interfaces - critères ergonomiques - composants de l'IHM -
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.
haut
|