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 !
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 :
Vidéos de démonstration des semestres précédents
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.
My Prototypes
liste vos maquettes.
Create new prototype
.Create empty screen
).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)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.
WireFrame
pour un effet maquette faite à la mainMaterial
pour des maquettes Android et iOS
pour des maquettes iPhoneLightning
, OpenUI
et Bootstrap
pour des maquettes Webcharts
propose des graphiques et icons
liste de nombreuses icônes que vous pouvez filtrer grâce au mode de recherchePanel
) qui représentera le menu (les propriétés des composants sont modifiables dans la zone de droite)Screens
à gauche), le nommer et choisir le type adapté, avant de créer son contenuRectangle
à gauche)label
), puis pour multiplier les items et gérer leur espacement utilisez les outils de clonage et de redimensionnement/distribution.Accept button
) et Annuler (de type Passive button
).Design
à la vue Protoype
de Quant-UX.
CRTL -
) et déplacer le canevas (↔ ↕ )Add action
: un 🔗 lien vers l'écran du menu déroulantSimulate
(barre d'outils du haut).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 validation
→ All fields valid
)forget state
)panel
, label
, textBox
), créez notamment une étiquette pour afficher la date choisie par l'utilisateurData
, sélectionnez Add data binding
, choisissez un nom pour votre variable, créez-la (Create
) avant de la sélectionnerAdd data binding
), puis sélectionnez votre variable de dateOR
(◇ Create logic element
), il sera associé en entrée au bouton Valider, et en sortie aux deux versions des pages de synthèseAction
: 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 42Pour aller plus loin, vous pouvez vous essayer en autonomie à la programmation pour l'IHM :
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.
image
(menu vertical à droite). Utilisez le titre pour indiquer la consigne à vos futurs testeurs.ajouter une section
; après la première section, on doit passer à la section suivante
.mode aperçu
dans le menu du haut).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.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 ?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).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.
Prototype
pour créer les liens, mais dans la vue Design
pour l'exploiter sous forme de test A/B.Simulate
) : en lançant plusieurs fois la simulation, vous tomberez parfois sur une version de l'écran de personnalisation, parfois sur l'autre.Back to prototypes
dans le menu principal) : copiez, puis diffusez le lien le test (bouton Share
) comme lors du test précédent.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.Séance avec JADE (Jeu d'Apprentissage De l'Ergonomie) sans ordi dans une salle de TD.
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.
Séance avec JADE (Jeu d'Apprentissage De l'Ergonomie) sans ordi dans une salle de TD.
Vous allez effectuer l'évaluation ergonomique et rédiger un rapport d'un "vrai" site Web.
Séance avec JADE (Jeu d'Apprentissage De l'Ergonomie) sans ordi dans une salle de TD.
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 :-) :
Séance avec JADE (Jeu d'Apprentissage De l'Ergonomie) sans ordi
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 :
Vidéos pédagogiques des semestres précédents :
PDF : sujet 2012 - sujet 2013 - sujet 2014 - sujet 2017 - sujet 2018 - sujet 2019 - sujet 2020 - sujet 2021 -
Remarques sur la notation
Cours
Quiz à faire sur Claroline Connect
TP collaboratifs sur Claroline Connect avec correction et commentaires
Vos TP
Tout travail ne respectant pas toutes les consignes ne sera pas corrigé et se verra attribuer la note définitive de 0/20.
TP3rapport.pdf
ou Projet.zip
par exemple.Choisissez vos erreurs stratégiquement :
Respectez le modèle de rapport : pdf - docx :
Prenez le temps de relire soigneusement votre rapport avant de le rendre, en faisant comme si vous deviez le noter :
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
)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).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 documentoptions de l'enregistrement du pdf
, précisez le numéro des pages à intégrer dans le pdfMicrosoft print to pdf
paramètres d'impression
, précisez le numéro des pages à intégrer dans le pdfimprime é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.