Rapport d'exercice n°5 | Drag & Drop

Réalisé le 15 Janvier 2022 par Nicolas Hervy

Liens

Traduttore, traditore.

Objectifs

Les objectifs pédagogiques se réfèrent à la section "Projet 5" sur l'Edutech Wiki.

J'ai eu pour volonté, en réalisant cette page, de créer une première approche sommaire de la psychophysique, en passant par le fait de vivre six illusions visuelles. L'objectif étant de proposer une expérience d'apprentissage interactive en invitant l'apprenant / utilisateur à résoudre au travers de ses manipulations par le biais du drag-drop ou du drag only les illusions proposées. (Jonathan & al., 2011).

Design

Le site se voulant être une brève présentation interactive de la psychophysique, j'ai souhaité reproduire l'effet que l'on pouvait obtenir sur des présentations power point classiques. Pour se faire, la fonctionnalité "Scroll & Snap" a été utilisée.

L'utilisateur est fortement guidé dans son apprentissage et est invité à réaliser les activités pour poursuivre l'exploration de la page. Des consignes textuelles indiquent à l'utilisateur quoi faire pour résoudre les énigmes que posent les illusions d'optiques. Comme l'indique Laubheimer, 2020, "Le glisser-déposer existe depuis l'aube des interfaces graphiques et est familier à la plupart des utilisateurs. Il s'agit d'un type de manipulation directe, particulièrement utile pour regrouper, réorganiser, déplacer ou redimensionner des objets. ." Les utilisateurs peuvent ainsi utiliser le drag & drop pour se rendre compte que leur système perceptif est trompé. Le drag & drop est ici utilisé à des fins pédagogiques, de par l'intérêt qu'il peut avoir sur la profondeur des apprentissages réalisés :
"Sur le plan théorique, les interfaces homme-machine conventionnelles pour les tests en ligne peuvent induire des exigences cognitives et comportementales qui ralentissent le candidat lors de l'exécution de la réponse, comme devoir comprendre comment exécuter une série de clics de souris. En incorporant l'interactivité glisser-déposer, moins d'effort est nécessaire pour exécuter sa réponse. Par conséquent, avec le format glisser-déposer, les performances des tests reflètent mieux ce que l'apprenant sait plutôt qu'un reflet des défis liés à l'utilisation d'une interface peu conviviale" (Greiff et al., 2017).

Le drag & drop, au-delà de l'intérêt pédagogique qu'il peut avoir (Ponce, Mayer & Loyola, 2020), est utilisé ici dans l'objectif de permettre techniquement la résolution des biais cognitifs consécutifs à la perception d'une illusion d'optique (pour l'illusion du damier (figure 3) et des flèches (figure 5)). Pour l'illusion de mouvement (figure 4) la fonctionnalité "drag only" est utilisée pour vivre l'illusion d'optique par notre action : "action learning, in brief, is learning from concrete experience " (Zuber-Skenitt, 1993).

Production

Les formes et illustrations utilisés en background ont été réalisés avec PowerPoint au moment de la création du prototype de la page (mockup, disponible dans le dossier assets). L'ensemble des illustrations ont été produites au format PNG. Le code HTML, CSS et JS ont été produit à l'aide des cours disponibles sur l'edutechwiki : STIC 1 - Exercice 5 .

Ci-dessous les sources des illusions d'optiques modifiées et utilisées dans le cadre de la réalisation de ce site :

Auto-évaluation

D'autres éléments interactifs liés au drag & drop auraient pu être ajoutés afin de proposer une plus grande diversité d'illusions d'optiques. Au niveau du design des mécanismes drag & drop, deux aspects peuvent être améliorés :

  1. La taille des deux flèches de la figure 5 (Arrow optical illusion) aurait pu être plus grosse afin de faciliter le "grab".
  2. La distance séparant les zones de drag et de drop auraient pu être raccourcie, limitant la distance de trajet du curseur, induisant potentiellement une moins grande charge cognitive liée à l'utilisation de ce type de fonctionnalité.

Enfin, l'objet étant la sensibilisation à la psychophysique, cette page a été produite en évitant d'être trop exhaustive, mais cela a impliquer de se limiter à l'expérimentation des illusions d'optiques souvent abordées dans ce domaine de la recherche scientifique. Il aurait pu être intéressant d'aborder les différentes théories de la perception (Structuralisme, Gestaltisme, approche cognitive) ou bien de traiter de la théorie de la détection du signal, mais tout cela aurait impliquer une quantité de travail supplémentaire dépassant le cadre de ce cours.

Ressources

Bibliographie

Beta movement. (2018). In Wikipedia.
https://en.wikipedia.org/w/index.php?title=Beta_movement&oldid=864354336

DiSalvo, B. (2014). Graphical Qualities of Educational Technology : Using Drag-and-Drop and Text-Based Programs for Introductory Computer Science. IEEE Computer Graphics and Applications, 34(6), 12 15.
https://doi.org/10.1109/MCG.2014.112

Evans, C., & Gibbons, N. J. (2007). The interactivity effect in multimedia learning. Computers & Education, 49(4), 1147 1160.
https://doi.org/10.1016/j.compedu.2006.01.008

Experience, W. L. in R.-B. U. (s. d.). Drag–and–Drop : How to Design for Ease of Use. Nielsen Norman Group.
https://www.nngroup.com/articles/drag-drop/

Litman, J. (2005). Curiosity and the pleasures of learning : Wanting and liking new information. Cognition and Emotion, 19(6), 793 814.
https://doi.org/10.1037/11304-026

Fechner, G. T. (1948). Elements of psychophysics, 1860. In Readings in the history of psychology (p. 206 213). Appleton-Century-Crofts.
https://doi.org/10.1080/02699930541000101

Ponce, H. R., Mayer, R. E., & Loyola, M. S. (2021). Effects on Test Performance and Efficiency of Technology-Enhanced Items : An Analysis of Drag-and-Drop Response Interactions. Journal of Educational Computing Research, 59(4), 713 739.
https://doi.org/10.1177/0735633120969666

Redirected Walking—ProQuest. (s. d.) :
https://www.proquest.com/openview/fb76f9b62be494669530d768a645cb70/1?pq-origsite=gscholar&cbl=18750&diss=y

Robinson, J. O. (2013). The Psychology of Visual Illusion. Courier Corporation. Rowe, J. P., Shores, L. R., Mott, B. W., & Lester, J. C. (2011). Integrating Learning, Problem Solving, and Engagement in Narrative-Centered Learning Environments. International Journal of Artificial Intelligence in Education, 21(1 2), 115 133.
https://doi.org/10.3233/JAI-2011-019

Wilson, C. J., & Soranzo, A. (2015). The Use of Virtual Reality in Psychology : A Case Study in Visual Perception. Computational and Mathematical Methods in Medicine, 2015, e151702.
https://doi.org/10.1155/2015/151702

Zuber‐Skenitt, O. (1993). Improving Learning and Teaching Through Action Learning and Action Research. Higher Education Research & Development, 12(1), 45 58.
https://doi.org/10.1080/0729436930120105