Enseignants : Stéphanie Jean-Daubias, Pierre Yang, Jey Gil
Présentation : Cette UE aborde des concepts d'Interface Humain-Machine, d'Interaction Humain-Machine et d'ergonomie des logiciels.
L'enseignement (Organisation de l'UE) associe cours en amphi, activités en équipe et mises en situation pratique 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 faire un jeu de piste (ou une chasse au trésor) à l'Université 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.
Simulate
dans la barre d'outils du haut).My Prototypes
liste vos maquettes.
Create new prototype
.Desktop
pour une application pour ordinateur, un modèle de smartphone sinon)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 rassemblent les différents types de composants disponibles dans Quant-UX :
WireFrame
pour un effet maquette faite à la mainMaterial
pour des maquettes Android et iOS
pour des maquettes iPhoneLightning
, OpenUI
et Bootstrap
pour des maquettes Web (le modèle du TP utilise principalement OpenUI
, complété par Lightning
, pour les groupes de cases à cocher et de boutons radio notamment)charts
propose des graphiquesicons
comporte de nombreuses icônes que vous pouvez filtrer grâce au mode de rechercheAccept button
et un bouton d'annulation de type Passive button
), lien, liste de cases à cocher, boutons radio, panel, zone de texte multiligne, liste déroulante, sélecteur de date.copy style
)Screens
à gauche), le nommer et choisir le type adapté, avant de créer son contenuRectangle
à gauche)label
), puis multipliez les items et gérez leur espacement grâce aux outils de clonage et de redimensionnement/distribution (barre d'outils du haut au centre)Design
à la vue Prototype
de Quant-UX (attention, selon les résolutions les textes Design et Prototype peuvent être remplacés par des icônes).CRTL -
) et déplacer le canevas (↔ ↕ )Add action
: un 🔗 lien vers l'écran cibleSimulate
(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
)Data Survey element
) qui seront utilisées dans un autre écran (🍕 par exemple la date sera rappelée dans le bilan)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 variableOR
(◇ Create logic element
) : il sera associé en entrée au point de départ (🍕 le bouton Valider), et en sortie à chacune des deux versions (🍕 des écrans de bilan)Action
: créez une règle (➕ Add rule
) de type Widget
pour le lien qui a une spécificité (🍕 on teste si le composant contenant le code promo a pour valeur 42)ZIP
que vous déposerez sur Tomuss.
Pour 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 3 différents tests avec Quant-UX à effectuer auprès d'utilisateurs. Pour chaque test, vous devez commencer par choisir le(s) écran(s) concerné(s) et l'hypothèse que vous allez étudier.
image
(menu vertical à droite). Utilisez le titre pour indiquer la consigne à vos futurs testeurs.ajouter une section
; après la première question, 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 (via le partage Google de page de Chrome ou avec un outil externe, par exemple Unitag) 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
des réponses, copier les graphiques et enregistrez dans un fichier PDF la synthèse proposée par l'outil de questionnaire (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 d'une part l'élément d'interface qui lance les 2 versions (🍕 l'item Pizza du menu déroulant) et d'autre part les deux écrans testés par le test A/B (🍕 les écran 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, 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.
Plan B (uniquement pour les étudiants concernés)
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 (⚠ le site à évaluer pour le TP noté sera donné à l'heure de début du TP).
Séance avec JADE (Jeu d'Apprentissage De l'Ergonomie) sans ordi dans une salle de TD.
Vous allez travailler sur une maquette pour améliorer son accessibilité numérique et sa gestion des erreurs. Pour cela, vous allez reprendre votre maquette des TP 1 et 2 (vous pouvez la retrouver sur Tomuss où vous l'aviez téléversée à la fin des séances). Selon les cas, il pourra donc s'agir de la maquette du sport, ou de la maquette des pizzas.
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 - sujet 2022
Remarques sur la notation
DUPONT_DURAND_TP3rapport.pdf
ou DUPONT_DURAND_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).Enregistrement d’écran
dans les fonctions (paramètres) de baseClipchamp
et Xbox Game Bar
(accessible par le raccourci clavier Windows+G
) préinstallésQuickTime Player
Photos
et Clipchamp
sont préinstallésenregistrer-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
options 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.