Rapport de l'exercice 2 - 25 octobre 2020
Objectif
Cette flashcard a un objectif double :
- Elle permet de faire découvrir à l'utilisateur ce qu'est le triangle pédagogique de Houssaye. Cette découverte devrait s'accompagner de la documentation donnée en bas de page, afin de mieux comprendre les différentes notions qui y sont exposées : acteurs du triangle et leurs interactions.
- Elle sert à revoir le triangle pédagogique afin de mémoriser son contenu. La représentation graphique permet de bien resituer les différents acteurs et les interactions.
Ce dispositif serait dédié à des étudiants en sciences de l'éducation, afin de réviser cette notion très spécifique propre à leurs études. C'est une activité qui peut se faire seul.
Design
Si l'utilisateur découvre le triangle pédagogique, le bouton afficher/cacher n'est pas vraiment utile. Il affichera tout de suite le contenu pour en prendre connaissance, en suivant en parallèle la documentation donnée en référence. L'application lui sera plus utile une fois la notion découverte.
Si la notion est connue de l'utilisateur, il va tester ses connaissances en tentant de se rappeler des légendes du triangle. Il s'appuie donc sur la première image sans contenu. Quand il pense savoir, il clique sur le bouton et affiche le triangle légendé. Il vérifie ensuite si sa réponse imaginée est juste ou non. S'il s'est trompé, il peut recommencer en cachant le contenu.
Deux points de design sont donc importants dans ce dispositif :
- Le bouton qui affiche/cache le contenu
- Sans cliquer sur ce bouton, on donne un contexte à l'utilisateur, mais le contenu d'apprentissage est masqué. C'est cette absence de contenu qui mène justement à l'apprentissage et à la mémorisation de celui-ci. L'affichage du contenu permet de corriger sa réponse puis d'apprendre le schéma correct. Le dispositif permet de revenir à l'image sans contenu pour recommencer ce processus d'apprentissage.
- Le compteur de clics
- Il permet à l'utilisateur de savoir combien de fois il a affiché le contenu du triangle. Cette information lui permet de savoir combien de fois il lui faut répéter l'opération de mémorisation pour avoir enfin la bonne réponse. Sans apporter quoi que ce soit à l'apprentissage lui-même, c'est un bon outil de métacognition : grâce à cette information, l'utilisateur perçoit mieux ses compétences de travail, ici la mémorisation d'informations.
Production
Il m'a d'abord fallu trouver une idée de matériel pédagogique adapté à la tâche. Je voulais trouver un contenu qui présente un schéma simple que je pouvais créer moi-même, d'abord pour m'entraîner à la création d'images en SVG, puis pour m'éviter d'emprunter une image. J'ai donc pensé au triangle didactique que je venais de mentionner dans un de mes travaux de MALTT.
En m'inspirant du schéma de la page Wikipédia de cette théorie, que je donne en référence sur ma page, j'ai construit deux triangles, le premier avec simplement le titre et le contour, et le deuxième auquel on rajoute les différentes boîtes à texte avec leur contenu et des flèches pour marquer les interactions.
Le codage en HTML5/CSS et pour la première fois en JavaScript a été grandement simplifié par les consignes du cours qui décrivait étape par étape une marche à suivre et proposait un code fonctionnel dans lequel j'ai du placer mes images en SVG. J'ai aussi apporté pas mal de modifications au style de la page et j'ai utilisé des noms de valeurs différents dans le JavaScript.
Auto-évaluation
Au niveau de la technique, je suis satisfait de mon travail. La présentation de la page me semble correcte et je suis content de voir que mon application fonctionne.
Je me pose quelques questions au niveau du design de mon dispositif, notamment d'un point de vue didactique. Je me demande si ma première image ne devrait pas afficher les flèches et les boîtes vides plutot que de n'afficher que le triangle. Cela aurait pour seule différence que l'utilisateur, au moment de l'exercice, aurait une information de moins à connaître, qui est le nombre d'informations qu'il doit pouvoir donner.
Pour répondre à cela, on pourrait imaginer un deuxième bouton "Indice" qui révélerait une troisième image du triangle pédagogique, cette fois-ci avec les flèches et boîtes mais sans les intitulés de ces boîtes.