À faire avant le cours

Découvrir les sections de la page de l'UE Prendre connaissance des conseils de lecture Répondre aux questions sur Tomuss Rendre sa photo visible sur Tomuss

À faire avant le cours

Visionner la playlist conception Visiter le site Web de La rache. Que pensez-vous de cette méthode de conception ? Constituer si possible les équipes de 4 pour le TP1 (parmi les étudiants du même groupe de TP) Lire le sujet du TP 1 (noté)

TP 1 : Conception en équipe

Par équipe de 4, vous allez concevoir une nouvelle fonctionnalité fictive pour l'application mobile OPALE : la réservation de créneaux de sport en pratique autonome (pour les séances où il reste des places disponibles). Vous aborderez la fonctionnalité du point de vue de l'utilisateur final et du point de vue de l'administrateur de l'application.

L'équipe devra rendre, en respectant les consignes :

• sur Tomuss au plus tard lundi 3 février à 21h : la fiche (PDF - docx) numérisée proprement ou faite sur ordi en respectant strictement le format et la pagination donnés (rendre exclusivement les 2 pages pertinentes de la fiche).
• sur Tomuss au plus tard jeudi 13 février à 21h : une vidéo de présentation 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 (notamment lors du TP2).

Vidéos de démonstration des semestres précédents

• 2012-2016
• 2016-2017 : automne (reconnaissance de plantes) - printemps (une appli pour le campus)
• 2017-2018 : automne (une appli de vote) - printemps (gestion des parkings du campus)
• 2018-2019 : automne (une appli pour donner une seconde vie aux objets) - printemps (une version ludifiée de l'appli OPALE)
• 2019-2020 : automne (une appli pour gérer son potager) - printemps (une appli pour entraîner la mémoire)
• 2020-2021 : automne (une version numérique pour le jeu JADE) - printemps (un quiz ludique)
• 2021-2022 : automne (une appli pour créer du lien entre étudiants) - printemps (une appli pour la BU)
• 2022-2023 : automne (une appli pour le sport) - printemps (une appli de jeu de piste)
• 2023-2024 : automne (informations sur les salles du campus) - printemps (une appli pour trouver mon livre à la BU)
• 2024-2025 : automne (itinéraires inclusifs sur le campus) - printemps (une appli pour réserver des créneaux de sport sur le campus)

À faire avant le cours

Visionner la playlist maquettage Lire des consignes pour les rendus Créer un compte sur Quant-UX, se familiariser avec l'outil

TP 2 : Maquettage

Vous allez créer une maquette interactive avec Quant-UX : la maquette du TP1 que vous utiliserez dans votre vidéo (au sein d'une équipe, un binôme fait les maquettes utilisateur final, l'autre binôme fait les maquettes administrateur).

0. Découverte (⏱ 5 min).
   • Avant tout, visualisez un exemple de maquette avec Quant-UX. 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). Remarque : seule la partie concernant la commande de pizzas a été créé.
   • Création d'un compte sur Quant-UX.
   • ⚠ Attention, au moins 5 minutes avant la fin de la séance de TP, passez à la question 3 !
1. Création de votre maquette et de ses composants (⏱ 30 min).
   • Création de 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.
   • Configuration de la maquette.
     • attribuez un nom à votre maquette, choisissez la taille de l'écran (Desktop pour une application pour ordinateur, un modèle de smartphone sinon)
     • créez et positionnez votre premier écran vide (Create empty screen)
   • Mode collaboration. Il vous permet de travailler à plusieurs sur un même prototype (mais il faut éviter de travailler sur le même écran !). Sur l'écran qui liste vos prototypes, vous pouvez ajouter ➕ un membre à votre Team.
   • Configuration de l'écran. En cliquant sur le nom d'un écran, vous pouvez accéder aux propriétés de l'écran dans la zone qui s'affiche à droite. Vous pouvez notamment :
     • 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.
   • Ajout de composants. Les 🧩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 main
     • Material pour des maquettes Android et iOS pour des maquettes iPhone
     • Lightning, 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 graphiques
     • icons comporte de nombreuses icônes que vous pouvez filtrer grâce au mode de recherche
     • testez au moins les composants suivants : boutons (dont un bouton de validation de type Accept 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.
     • pensez à grouper les éléments fonctionnant ensemble, et à vous aider des outils d'alignements (en haut de la zone de droite)
   • Configuration des composants. Les propriétés du composant sélectionné sont modifiables dans la zone de droite :
     • mise en forme des composants : couleur, taille, ombre, marges, etc.
     • mise en forme des textes : police, taille, couleur, alignements, etc.
     • pour gagner du temps, vous pouvez copier le style d'un composant vers un autre (copy style)
   • Ajout d'écrans.
     • créez tous les écrans nécessaires (au moins 3) à votre maquette de façon rudimentaire (par exemple en créant uniquement un label de titre et les boutons de navigation), vous reviendrez dessus par la suite (en dehors du TP, mais avant le prochain TP).
     • vous pouvez copier un composant d'un écran vers un autre (pour gagner du temps, mais surtout obtenir des composants rigoureusement identiques, ce qui donnera l'illusion qu'on reste sur le même écran)
2. Création d'interactions dans votre maquette (⏱ 45 min).
   • Prise en main des 2 types de vues.
     • pour rendre votre maquette interactive, vous devez passer de la vue 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).
     • si besoin, vous pouvez dézoomer (CRTL -) et déplacer le canevas (↔ ↕ )
     • vérifiez que vous êtes bien en mode ➚ édition
   • Lien entre écrans par l'enchaînement.
     • sélectionnez le composant de départ (par exemple un bouton) sur la fenêtre appelante et ajoutez-lui une action ➕ Add action : un 🔗 lien vers l'écran cible
     • un bouton Annuler doit être associé à une action de type ← retour
     • testez vos interactions avec le bouton ▶ Simulate (barre d'outils du haut).
   • Enrichissement des interactions.
     • 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 validation → All fields valid)
     • forcez la mise à zéro des différents champs lors du réaffichage de l'écran (forget state)
     • sélectionnez et nommez les données (Data Survey element) qui seront utilisées dans un autre écran (par exemple un écran de bilan rappellera les faits précédemment)
     • testez toujours bien le résultat.
   • Lien entre écrans par les données. Vous allez maintenant lier les valeurs des champs de saisie d'un écran 1 avec les champs d'affichage d'un é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 :
     • dans l'écran 1, créez une variable qui contiendra la donnée à stocker : dans les propriétés du composant 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 : sélectionnez le composant qui devra afficher la variable, créez le lien avec les données (Add data binding), puis sélectionnez votre variable
     • testez le résultat.
   • Utilisation d'éléments logiques. Cela permet de proposer deux comportements différents à vos utilisateurs.
     Commencez par tester deux fois le modèle : une fois sans code promo, une fois avec le code promo 42. Constatez la différence sur l'écran de bilan pour comprendre le fonctionnement.
     • commencez par dupliquer l'écran concerné par la variante
     • adaptez la copie
     • ajoutez maintenant un connecteur logique OR (◇ Create logic element) : il sera associé en entrée au point de départ, et en sortie à chacune des deux versions
     • configurez maintenant une Action : créez une règle (➕ Add rule) de type Widget pour le lien qui a une spécificité
     • l'autre lien n'est pas associé à une règle : l'utilisateur sera aiguillé vers le bilan normal dans tous les cas où la règle précédente n'est pas respectée.
3. Fin de la séance (⏱ 10 min).
   • ⚠ Export du projet. Avant la fin de la séance de TP, exporter le projet correspondant à votre maquette dans une archive ZIP que vous déposerez sur Tomuss.
   • Finalisation de la maquette. Vous pourrez continuer d'améliorer votre maquette jusqu'à la prochaine séance de TP : vous devrez arriver en TP3 avec une version complète.
4. 💪 Le coin du malin : pour les + motivés et/ou les + forts.
   Répondez aux questions suivantes avant la prochaine séance (rapport optionnel PDF de quelques lignes à une page à déposer sur Tomuss avant la prochaine séance : modèle PDF - docx) :
   • Concernant l'interface : quels sont les points forts de votre maquette ? Quelles sont ses limites ?
   • Concernant les interactions : quels sont les points forts de votre maquette ? Quelles sont ses limites ?
   • Qu'auriez-vous fait de plus/différemment si vous maîtrisiez parfaitement Quant-UX / si Quant-UX le permettait ? Pourquoi ?

À faire avant le cours

Finaliser la maquette du TP précédent Visionner la playlist tests utilisateurs Prendre connaissance des Consignes pour les vidéos et des Aides de la page de l'UE Tester un outil d'eye-tracking, par exemple GazeRecorder

TP 3 : Tests utilisateurs

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.

1. Test de perception (⏱ 15 min). Vous allez créer puis diffuser un questionnaire en ligne montrant votre maquette, avec l'outil de votre choix, par exemple Google Forms.
   • 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 de Google Forms) 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 pas visible lorsque l'utilisateur répondra aux questions (afin de respecter le fonctionnement d'un test de perception), vous allez ajouter une section ; après la première question, on doit passer à la section suivante.
   • Dans la seconde section, ajoutez les questions (4 doivent suffire) à poser à vos utilisateurs : 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 votre questionnaire (mode aperçu dans le menu du haut).
   • Diffusez votre questionnaire à vos testeurs : 3 à 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 (via la fonctionnalité Enregistrer et partager de Chrome, ou avec un outil externe) 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 Results. 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 et les importer dans votre rapport, vous pouvez télécharger le fichier 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).
2. Test A/B (⏱ 45 min). Pour cela vous allez retravailler votre maquette avec Quant-UX.
   • Commencez par choisir l'écran concerné, pertinent pour un test A/B.
   • Créez une version alternative de cet écran. Évidemment, vous utiliserez l'outil de duplication d'écran pour gagner du temps.
   • Prenez le temps de bien positionner séquentiellement vos différents écrans dans Quant-UX pour vous y retrouver facilement par la suite.
   • Ajoutez un élément logique A/B entre d'une part l'élément d'interface qui lance les 2 versions (qui devrait être à gauche du connecteur) et d'autre part les deux écrans testés par le test A/B (qui devraient être à droite du connecteur).
   • Vous pouvez maintenant tester le résultat (▶ Simulate) : en lançant plusieurs fois la simulation, vous tomberez parfois sur une version, parfois sur l'autre.
   • Vous êtes maintenant prêts à diffuser votre test A/B. Pour cela, depuis l'écran de gestion de la maquette (Back to prototypes dans le menu principal) : copiez, puis diffusez le lien le test (bouton Share) à vos testeurs.
     Si votre maquette est au format smartphone, vous pouvez directement utiliser le QR code qui s'affiche en mode simulation.
   • Pendant que vos testeurs évaluent votre maquette, effectuez également leurs tests.
   • Maintenant, vous pouvez 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) ; l'onglet Results synthétise les résultats et permet d'accéder aux détails (bouton Analytic canvas) : Heat map, User journey, etc. donnent un aperçu des parcours, des clics des testeurs sur les différents écrans. Explorez les différentes possibilités qui s'offrent à vous.
   • Quel est le temps moyen que passent vos utilisateurs sur l'écran testé dans les 2 versions testées ?
   • Pour garder une trace de ces résultats et les importer dans votre rapport, vous pouvez télécharger certaines données et faire des captures d'écrans des autres résultats.
3. Test utilisateur classique (⏱ 15 min). Pour cela vous allez observer 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é par 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. Synthèse (⏱ 15 min). Vous allez maintenant rédiger un rapport synthétisant les résultats de vos 3 tests, en respectant le modèle donné (PDF - docx). Pour chacun des tests :
   • présentez brièvement l'objectif
   • décrivez le test
   • montrez les résultats obtenus
   • puis formulez vos conclusions.
5. Déposez ce rapport sur Tomuss au format PDF avant la fin du TP.
6. Pour terminer, améliorez votre maquette en fonction des conclusions tirées de ces différents tests. Vous pourrez aussi continuer à l'améliorer tout au long du semestre, car vous retravaillerez dessus lors du dernier TP.
7. 💪 Le coin du malin : Pour compléter cette évaluation de votre application, quel test pourriez-vous mettre en place ? Comment ? Pour atteindre quel objectif ?
   Rédigez votre réponse dans le rapport du malin précédent, déposez-le sur Tomuss dans les mêmes conditions.

À faire avant le cours

Visionner la playlist concepts d'ergonomie Visionner la vidéo de présentation du jeu JADE En option, regarder les films "Vice versa" et "Les Gardiens de la Galaxie Vol. 3" ;-)

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

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

• JADE (⏱ 60 min) : Jouez avec JADE vert anis (vous avez le droit de vous amuser ;-) !
• SUP3RS (⏱ 30 min) : En fin de partie, vous allez vous entraîner à la rédaction SUP3RS pour faire le lien avec les TP classiques. Complétez par table de jeu la fiche "Retour après la séance" (⏱ 5 min). Chaque table présentera ensuite son erreur à la classe à l'oral selon la méthode S(U)P3RS.
• 💪 Le coin du malin : Décrivez l'erreur la plus grossière et l'erreur la plus subtile que vous avez rencontrées pendant votre partie de JADE.
  Rédigez votre réponse dans le rapport du malin précédent, déposez-le sur Tomuss dans les mêmes conditions.

À faire avant le cours

Appliquer le cours précédent à vos maquettes du TP2 : évaluation ergonomique et amélioration (avec l'outil de votre choix : Quant-UX NON obligatoire), dépôt sur Tomuss chaque semaine Relever le défi de userinyerface.com, noter le temps de votre premier essai sur Tomuss (format 07:42) Visionner la playlist composants d'IHM Lire des consignes pour les rapports de TP

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

Vous allez évaluer ergonomiquement une application-jouet (c'est-à-dire une application conçue spécifiquement pour les besoins 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 10 de ces erreurs.
• Rédigez ensuite très précisément en suivant la méthode SUP3RS un rapport d'évaluation ergonomique de 2 pages maximum respectant les consignes concernant les rapports et le modèle donné (PDF - docx).
• Rédigez enfin une 11^ème erreur, non présente dans le logiciel testé, mais qui pourrait exister. Respectez encore la méthode SUP3RS pour décrire cette erreur imaginaire.
• Déposez votre rapport sur Tomuss avant la fin de la séance.
• 💪 Le coin du malin : Décrivez 1 erreur identifiée préalablement, mais que vous n'avez pas choisi de décrire dans votre rapport, car elle vous semblait trop complexe. Expliquez pourquoi.
  Rédigez votre réponse dans le rapport du malin précédent, déposez-le sur Tomuss dans les conditions habituelles.

À faire avant le cours

Appliquer le cours précédent à vos maquettes du TP2 : évaluation ergonomique et amélioration Visionner la playlist critères ergonomiques En option, regarder le film "Les Gardiens de la Galaxie Vol. 2" ;-)

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

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

• JADE (⏱ 60 min) : Jouez avec JADE orange (vous avez le droit de vous amuser ;-) !
• SUP3RS (⏱ 30 min) : En fin de partie, vous allez vous entraîner à la rédaction SUP3RS pour faire le lien avec les TP classiques. Complétez par table de jeu la fiche "Retour après la séance" (⏱ 5 min). Chaque table présentera ensuite son erreur à la classe à l'oral selon la méthode S(U)P3RS.
• 💪 Le coin du malin : Décrivez un problème posé par une solution proposée pendant votre partie de JADE (améliorer un critère en a aggravé un autre).
  Rédigez votre réponse dans le rapport du malin précédent, déposez-le sur Tomuss dans les mêmes conditions.

À faire avant le cours

Appliquer le cours précédent à vos maquettes du TP2 : évaluation ergonomique et amélioration Visionner la playlist critères ergonomiques Web Lire des consignes pour un rapport SUP3RS

TP 7 : Évaluation ergonomique d'un site Web

Vous allez effectuer l'évaluation ergonomique et rédiger un rapport pour un "vrai" site Web (uniquement les pages indiquées) :
le site Web Sciences pour tous de l'Université Lyon 1 : page d'accueil + page A propos.

⚠ le site à évaluer pour le TP noté sera donné à l'heure de début du TP de chaque groupe. Affichage actuel : TP du semestre précédent.

• Vous ferez l'évaluation du point de vue des critères spécifiques au Web vus dans le cours de cette semaine, mais aussi des cours précédents.
• Commencez par découvrir et tester soigneusement le site Web donné.
  ⚠ nous vous faisons évaluer les pages d'un vrai site, 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 8 de ces erreurs (les plus intéressantes, celles que vous savez mieux expliquer et respectent la répartition imposée).
• Rédigez ensuite un rapport d'évaluation ergonomique de 2 pages maximum (pas plus d'1 page pour les 4 premières questions) selon le modèle donné (PDF - docx) et en respectant les consignes concernant les rapports.
  • Les 4 premières erreurs seront particulièrement bien expliquées, en respectant la rédaction SUP3RS (chaque erreur sera notée /4 points)
  • 1 erreur concernera les théories générales (cours 5) ou les guides de style (cours 6)
  • 1 erreur concernera les critères généraux (INRIA/Bastien et Scapin, cours 7)
  • 2 erreurs concerneront les critères Web (cours 8)
  • Les 4 erreurs suivantes seront moins détaillées (pas de rédaction SUP3RS, chaque erreur sera notée /1 point). Elles porteront sur les cours d'ergonomie de votre choix.
• Déposez votre rapport sur Tomuss avant la fin de la séance.
• 💪 Le coin du malin : Qu'auriez-vous aimé faire dans ce TP qui aurait permis de mieux exprimer vos connaissances ?
  Rédigez votre réponse dans le rapport du malin précédent, déposez-le sur Tomuss dans les mêmes conditions.

À faire avant le cours

Appliquer le cours précédent à vos maquettes du TP2 : évaluation ergonomique et amélioration Visionner la playlist critères ergonomiques mobile

TP 8 : Évaluation ergonomique d'une application mobile

Selon le choix que vous avez fait préalablement, vous allez faire (A) une séance ludique avec JADE ou (B) une séance classique avec la rédaction d'un rapport d'évaluation ergonomique.

1. Séance avec JADE (Jeu d'Apprentissage De l'Ergonomie) sans ordi.
   • JADE (⏱ 60 min) : Jouez avec JADE vert émeraude (vous avez le droit de vous amuser ;-) !
   • SUP3RS (⏱ 30 min) : En fin de partie, vous allez vous entraîner à la rédaction SUP3RS pour faire le lien avec les TP classiques. Complétez par table de jeu la fiche "Retour après la séance" (⏱ 5 min). Chaque table présentera ensuite son erreur à la classe à l'oral selon la méthode S(U)P3RS.
   • 💪 Le coin du malin.
     Pourquoi avez-vous parfois manqué d'information pour travailler sur l'ergonomie des appli pendant la partie ?
     Rédigez votre réponse dans le rapport du malin précédent, déposez-le sur Tomuss dans les mêmes conditions.
2. Séance classique.
   Vous allez effectuer l'évaluation ergonomique et rédiger un rapport pour une "vraie" appli mobile : donnons.org (vous pourrez évaluer l'appli Android et la version mobile du site Web).
   • ⚠ Nous vous faisons évaluer une vraie appli, respectez-la (relisez toutes les consignes du TP précédent à ce sujet !)
   • Vous ferez l'évaluation du point de vue des critères ergonomiques EMERAUDE spécifiques au mobile vus dans le cours de cette semaine.
   • Testez soigneusement l'application sur mobile.
   • Vous chercherez dans un premier temps le plus d'erreurs ergonomiques possible, puis vous choisirez 10 de ces erreurs.
   • Rédigez ensuite un rapport d'évaluation ergonomique de 2 pages maximum respectant les consignes concernant les rapports
   • Déposez votre rapport sur Tomuss avant la fin de la séance.
   • 💪 Le coin du malin : pour les + motivés et/ou les + forts.
     Quelles différences peut-on constater entre la version appli et la version mobile du site Web ?
     Rédigez votre réponse dans le rapport du malin précédent, déposez-le sur Tomuss dans les mêmes conditions.

À faire avant le cours

Appliquer le cours précédent à vos maquettes du TP2 : évaluation ergonomique et amélioration (vous devriez donc maintenant avoir amélioré vos maquettes en tenant compte des concepts ergonomiques des cours d'ergonomie 5 à 9) Visionner la playlist accessibilité numérique Tester certains outils d'accessibilité de votre ordinateur et de votre smartphone (au moins le narrateur/lecteur d'écran)

TP 9 : prise en compte des handicaps

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, 2 et 3 (vous pouvez la retrouver sur Tomuss où vous l'aviez téléversée à la fin des séances).

• Commencez par effectuer une analyse ergonomique de la maquette en vous concentrant particulièrement sur les aspects handicap.
• Puis modifiez votre maquette pour améliorer son ergonomie.
• Ajoutez notamment une gestion des erreurs en particulier pour les écrans nécessitant une entrée d'information de la part de l'utilisateur (au moins 3 actions différentes).
• Prenez soin de proposer des solutions ergonomiques et compatibles avec les outils d'accessibilité existants dans les systèmes d'exploitation.
  • 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 la maquette 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 ce serait fait en HTML ;-)
  • Les différents écrans de votre maquette seront intégrés soigneusement dans les pages correspondantes du rapport. Ils seront annotés clairement afin de faire le lien avec les explications textuelles à l'aide des chiffres associés aux actions.
• Petit + : votre rapport pourra lui-même être compatible avec les outils d'accessibilité (indiquez explicitement ce que vous avez fait dans ce sens).
• Rédigez soigneusement vos explications dans un rapport de 6 pages, rendu au format PDF, respectant le modèle donné (PDF - docx).
  1. Les pages 1 et 2 contiendront les principaux écrans de la maquette avant et après améliorations ergonomiques (au moins 6 écrans différents, donc 12 avant/après),
  2. les pages 3 et 4 contiendront les écrans de la maquette montrant la gestion des erreurs, et la description de vos actions pour une bonne gestion des erreurs,
  3. la page 5 contiendra la description de vos actions dans la maquette en faveur de l'accessibilité numérique,
  4. la page 6, optionnelle, contiendra la description de vos actions en faveur de l'accessibilité numérique du rapport.
• Déposez votre rapport sur Tomuss avant la fin de la séance.
• 💪 Le coin du malin : pour les + motivés et/ou les + forts.
  La page de l'UE est-elle accessible ? Qu'est-ce qui pourrait être amélioré ? Comment ?
  Développez votre réponse dans le rapport du malin précédent, déposez-le sur Tomuss dans les mêmes conditions.

TP 10 : Combinaison de critères ergonomiques

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

TP bonus : Optionnel

2 TP bonus pour le semestre de printemps 2024-2025 (vous pouvez éventuellement faire les 2) :

1. De nouveaux exemples pour les cours : pour un concept précis, proposez une nouvelle capture d'écran illustrant une des facettes du concept. Elle doit être complémentaire et si possible apporter un éclairage nouveau. Vous pouvez faire plusieurs propositions (une proposition par page du rapport rendu). Mettez la capture d'écran de bonne qualité dans le rapport + un lien ou des explications pour trouver cet écran (page Web, application ordinateur ou mobile).
2. Des doublons dans les cours ? : pour un concept précis, repérez 2 diapositives de 2 cours différents (noter le nom du cours et le n° de la diapositive) qui ont des points communs. Expliquez si vous pensez qu'il s'agit de redites qui devraient être supprimées ou si ça vous semble en partie complémentaire.

Dans les 2 cas, rendez un rapport succinct illustré et expliqué sur Tomuss.

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 :

• tests utilisateurs
• méthodes de conception
• programmation d'interfaces - programmation d'interactions
• composants de l'IHM
• concepts d'ergonomie
• critères ergonomiques généraux, spécifiques au Web, spécifiques au mobile
• accessibilité numérique

Playlists de révision

Conception Concepts d'ergonomie Composants d'IHM Critères ergonomique généraux Critères spécifiques au Web Critères spécifiques au mobile Critères spécifiques au handicap

Programme de révision

Savoir définir l'IHM, identifier une approche pertinent Savoir choisir une méthode de conception adaptée à un contexte donné Savoir choisir une technique d'évaluation adaptée à un besoin Savoir nommer précisément les composants d'une interface et les événements d'interaction Connaître les concepts et critères d'évaluation ergonomique Pour chaque concept, savoir donner un exemple de bonne application et un contre-exemple (erreur d'ergonomie) Savoir identifier, en particulier du point de vue de l'ergonomie, les spécificités du Web, du mobile, du tactile, du handicap Savoir identifier et corriger des erreurs d'ergonomie Savoir décrire les problèmes de manière SUP3RS pour convaincre le concepteur de les corriger Comprendre le lien entre les concepts des cours (cf. carte mentale de LifIHM)

Sujets d'examens

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

Remarques sur la notation

Autres ressources

• Cours
• Vos TP avec notes et commentaires
• La partie "Le coin du malin" des différents TPs (à faire ou à relire)

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 de l'application).
• 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 : DUPONT_DURAND_TP3rapport.pdf ou DUPONT_DURAND_Projet.zip par exemple.

Quand rendre le travail ?

• Les TP sont à rendre avant la fin 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.

Et si on trichait ?

• Réponse humoristique : en vidéo
• Réponse officielle : Article 44 du règlement intérieur "Les fraudes ou tentatives de fraude commises à l’occasion d’une inscription, d’une épreuve de contrôle continu, d’un examen ou d’un concours ou les faits de nature à porter atteinte à l’ordre ou au bon fonctionnement de l’établissement (violences, vols, propos injurieux…) font l’objet d’une procédure devant la section disciplinaire de l’université en application des articles R. 712‐9 à R. 712‐45 du code de l’éducation et du décret n°92‐657 du 13 juillet 1992 relatif à la procédure disciplinaire dans les établissements publics d'enseignement supérieur placés sous la tutelle du ministre chargé de l'enseignement supérieur.

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

Méthode SUP3RS

Pour rédiger un rapport d’évaluation ergonomique convaincant, respecter ces 6 étapes :

• Situation : situer/localiser le problème (page, écran, zone de l'écran, composant concerné -le nommer précisément-).
• URL : pour les sites Web, préciser l'URL.
• Problème identifié : décrire/situer le problème du point de vue de l’utilisateur (à la 3ème personne du singulier : "on").
• 3E (le 3 représente le E en miroir) : Explication de l’Erreur Ergonomique : expliquer l’erreur du point de vue de l’ergonome, en précisant le concept ergonomique concerné et en l'expliquant, avant d'expliquer en quoi le problème relève de ce concept (qu’est-ce que ce signifie ici, dans ce contexte ?).
• Risques encourus : présenter les risques pour l’utilisateur / pour le logiciel / pour l’entreprise et estimer l’impact du problème (sa criticité : mineur, faible, modérée, élevée, majeur, critique).
• Solution opérationnelle : expliquer quoi faire concrètement pour résoudre le problème. La solution peut être proposée en 2 temps : une solution micro qui va résoudre localement le problème, une solution macro qui peut résoudre plus globalement le problème.

Des exemples de rédaction sont donnés en fin des cours 6 et 7.

Conseils pour préparer la vidéo

• Scénario : il est important de scénariser votre vidéo.
  • Scène d’introduction : elle doit permettre de comprendre qui sont les utilisateurs (avec éventuellement différents rôles dans l'appli : utilisateur final / admin), et de bien comprendre leur problème, leur besoin
  • Proposition de la solution : votre appli est introduite comme une solution à ce problème
  • Présentation de l’appli : intégrer une capture vidéo de la maquette interactive (une dizaine d'écrans, au moins 5 écrans par rôle) sur un fond pertinent par rapport au scénario, en expliquant à l'oral le fonctionnement de l’appli pour les différents rôles
  • Retour à la situation initiale : on doit comprendre que l’appli a résolu/va résoudre le problème
  • Conclusion (attention à ne pas faire une fin trop abrupte) : phrase de conclusion sur l’appli ou la résolution du problème et crédits (PAS de n° d’étudiants, noms PAS obligatoires).
• Image : elle doit être de bonne qualité.
  • On doit bien voir les écrans que vous montrez : ne filmez pas votre écran, utilisez un outil d'enregistrement d'écran.
  • Vous pouvez emprunter un stabilisateur à l'enseignante pour filmer en mouvement.
  • Vous pouvez appuyer la présentation du logiciel avec un curseur mobile, mais attention à limiter les mouvements qui peuvent vite gêner la visualisation.
  • Utilisez des outils libres de droits et évitez ceux qui ajoutent des filigranes sur la vidéo.
• Son : il doit être de bonne qualité.
  • Le niveau sonore doit être le même pendant toute la vidéo. Vous pouvez emprunter un micro-cravate à l'enseignante pour filmer en extérieur.
  • Préférez les commentaires audios aux commentaires textuels : il n’est pas possible de lire les textes et observer la maquette en même temps.
  • Évitez les remarques inutiles (ex : "quand on clique sur le menu, on voit le contenu du menu").
  • Le texte doit être préparé à l'avance. Articulez bien, ne parlez pas trop vite.
• N'hésitez pas à être originaux et drôles, mais restez politiquement corrects ! De plus, il est important que l'on puisse comprendre votre idée, votre humour.
• Vous n'êtes pas obligés d'être visibles à l'écran. Les éventuels personnages présentant l'appli ou les concepts peuvent être d'autres personnes ou des figurines par exemple.
  Vous pouvez mettre vos noms et prénoms au générique si vous le souhaitez, mais ne mettez jamais vos numéros d'étudiants.
• Attention au respect du droit d'auteur : pour les images, les éventuels musiques additionnelles et extraits de vidéo.
• Attention à l'orthographe : dans vos interfaces, dans les textes de vidéo et dans le texte de description.

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

Utilisez des outils libres de droits ou dont vous avez les droits, évitez les outils qui ajoutent des filigranes sur la vidéo.

• Maquettage
  • En TP nous utiliserons Quant-UX, ce n'est pas l'outil le plus facile à utiliser ni celui qui fait les plus belles maquettes, mais il est intéressant pour les tests utilisateurs.
  • Autres outils de maquettage : Balsamiq, Mocking Bird, draw.io/Diagrams (More shapes>Software), Pencil, Quant-UX, Alva, Sketch, Adobe XD
• Capture vidéo
  • La plupart des systèmes d'exploitation intègrent un outil de capture vidéo :
    • sur Android 11 et + : Enregistrement d’écran dans les fonctions (paramètres) de base
    • sur Windows 10 et + : Clipchamp et Xbox Game Bar (accessible par le raccourci clavier Windows+G) préinstallés
    • sur Mac : QuickTime Player
  • Autres outils : DaVinci Resolve, OpenShot, CamStudio
  • Comparatif d'outils de capture vidéo
• Montage vidéo
  • Sur Windows : Photos et Clipchamp sont préinstallés
  • Autres outils : DaVinci Resolve, OpenShot, CamStudio
  • Comparatif d'outils de montage vidéo.

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.

Réduction de la taille des images

• Dans Word ou PowerPoint : pour réduire la taille des fichiers, il est possible de compresser les images dans Office. Sélectionner une image du document, puis la fonctionnalité Compresser les images. Lancer ensuite la compression sur toutes les images du document en ajustant les paramètres, enregistrer le document, sa taille devrait être significativement réduite.
• Modification de l'image : Avant d'utiliser une image à forte résolution dans une maquette ou dans un rapport, il est utile de réduire son volume (et donc son impact environnemental). À titre d'exemple, une photo de smartphone peut "peser" 3000 Ko pour une résolution de 4000x1850 pixels. Une fois appliquées les 2 modifications ci-dessous, elle ne fait plus que 400 Ko !
  1. Réduction de la résolution : Ouvrir l'image dans un logiciel de retouches d'images (l'outil de visualisation de photos du système d'exploitation suffit en général), utiliser la fonctionnalité Redimensionner/Resize, choisir une résolution "raisonnable", adaptée à l'usage qui serait fait de l'image. Choisir l'option Conserver les proportions avant d'enregistrer l'image transformée.
     • 1280 pixels sur la plus grande dimension de l'image garantissent une image HD, adaptée pour une image de fond.
     • 300 pixels peuvent suffire pour une vignette ou une image dans une maquette.
  2. Changement de format/compression : Les formats PNG, WEBP et JPG garantissent un faible poids de l'image tout en conservant une qualité suffisante pour la plupart des usages. Pour changer le format d'une image, il faut l'ouvrir dans un logiciel de retouches d'images, utiliser la fonctionnalité Enregistrer sous, choisir le format adapté, le taux de compression souhaité (95% laisse une image de très bonne qualité), avant d'enregistrer l'image au nouveau format.

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.