1 Liens
Le dispositif se compose des éléments suivants :
2 Objectifs
Ce dispositif est inspiré d’une séquence pédagogique en présenciel dans le cadre du cours d’ergonomie. En effet, l’enseignante à présenté le diagramme des causes d’Ishikawa comme un outils utilisé en ergonomie pour aider à établire un diagnostique des causes. Le premier exemple d’application qui à été donné est celui d’une photo flou. Dans ce cas il s’agirait de trouver les cause qui on pu amené à ce problème en utilisant le diagramme. L’enseignante avait ensuite mis en place une activité de groupe pour appliquer le diagramme à une situation de crash d’avion.
Dans mon dispositif, j’ai imaginé une présentation de la même notion mais dans un carde d’enseignement à distance asynchrone. Dans ce cas, l’activité de groupe serait moins pertinente. De plus, la séquence pédagogique imaginée dans le carde de ce dispositif vise uniquement à introduire le diagramme d’ishikawa en tant qu’outil dans l’ergonomie. La séquence de la quelle je me suis inspiré avait des objectif plus développés ce qui explique une deuxième application à un cas complexe comme celui du crash d’avion.
Séquence pédagogique: Dans un premier temps, la notion du diagramme d’Ishikawa est présentée à distance de façon théorique. (via un power point ou une capsule vidéo) Puis l’étudiant est invité à cliquer sur le lien de ce dispositif pour appliquer le diagramme à l’exemple de la photo floue comme expliqué dans la consigne de la petite application. L’étudiant qui utilise ce diagramme pour la première fois peut tenter de faire l’exercice et avec la possibilité de regarder la solution proposée autant de fois qu’il en ressent le besoin Le compteur indique combien de fois il a eu besoin de regarder la solution pour compléter l’exercice. Ceci ajoute un élément d’autoévaluation ou de suivi de l’apprentissage et de l’aquisition du concepte par l’apprennant durant l’utilisation.
3 Design
Le designe de l’application est simple et épuré. Etant donné que le diagramme contien en lui déja beaucoup d’information, il est important que le reste du designe soit simple pour éviter une sercharge cognitive gardant ainsi la concentration sur les éléments d’information qui constituent l’objectif pégagogique du dispositif. Anisi l’image occupe 100% de l’espace avec un max fixé à 550xp ce qui est la limite après laquelle la page n’apparêt plus en son entier sur l’écran. Ce choix à été fait pour éviter à l’utilisateur de scroler pour voir ce qu’il y a en bas puisque l’essentiel de l’information se trouve dans l’image.
Les autres éléments de la page (entête, pied de page, bouton) présentent la même couleur. Ce choix permet de mettre de la couleur et rendre la page un minimum attractive et agréable tout en gardant une consistence générale dans la page. L’attractivité est importante pour améliorer l’utilisabilité et l’acceptabilité générale de l’application.
Une couleure différente mais dans les même tons à été choisie pour le diagramme rendant les classe de causes du diagramme saillentes et visible à première vue.
4 Production
L’application à eté faite en suivant les 6 étapes du tutoriel de ce cours dédié à cet effet. Elle est constituée d’un fichier html contenant les élément de la page et liant les différent fichier ensembles, d’un fichier css contenant les élément de style, un fichier JS utilisant le langage javscript qui permet de programmer le côté interactif de l’application (effet du bouton, apparition d’une des deux carte à la foi) et deux images svg en fichiers externes.
Les images ont été créées sur le logotiel gratuit en ligne lucid qui oermet de créer des diabram, shema et mindmap et de les telécharger sous différents format dont le format svg. L’une est une vertion modifée de l’autre ou les élément de solution ont été enlevé.
5 Auto-évaluation
L’application est fonctionelle et vient s’insérer dans une séquence pédagogique et un contexte précis et cohérant. Cette exercice m’a permis de revoir une artie des cpmpétence développées dans l’exercice précédant tel que l’utilisation de HTML et CSS anisi que l’organisation des dossier dans un serveur. A ces compétences vien s’ajouter une compréehension superficielle des principe du codage avec java script. Cette dernière compétence est encore en cours d’apprentissage et j’espère pouvoir m’améliorer dans le futur.
6 Bibliographie
Pas de bibliographie pour ce rapport.
7 Ressources
lucid pour la création des images
Betancourt, M. (2023). Design centré utilisateur et ergonomie Période 1 - Partie 2 (MALTT Design centré utilisateur et ergonomie) [Présentation PowerPoint]. Université de Genève. Repéré sur la plateforme Moodle https://tecfalms.unige.ch/moodle/mod/resource/view.php?id=31092