L’objectif de ce dispositif est de créer une page interactive pour permettre aux débutants en astronomie de se figurer la distance qui sépare les planètes de notre système avec le soleil et par la même occasion d’être amené implicitement à les classer dans l’ordre. Ainsi, ce dispositif peut aussi servir de rappel pour les personnes de tous horizons, car on ne soupçonne pas, mais beaucoup de gens ignorent l’ordre exact des planètes, leurs noms ou encore leur distance moyenne au soleil. Ce dispositif permet d’y remédier de manière interactive.
Le "drag and drop" se prête particulièrement bien au degré d’approximation spatial et permet d’amplifier l’effet visuel escompté. Car contrairement au "point and clic", le "drag and drop" permet de faire ressentir à l’utilisateur cet effet de distanciation en “draggant” l’objet, ici les planètes et cet exercice intuitif lui permet de tester ses connaissances, ce qui serait moins efficace qu’avec un dispositif basé sur le "point and clic". Au début, je souhaitais faire que le "drag and drop" des planètes se poursuive sur l’axe des “x” indéfiniment afin d’augmenter la sensation de distance à la manière de ce site. Cependant ce n’était pas une bonne idée du point de vue de L’UX, la loi de shannon supposant que plus la distance est grande et plus les cibles sont petites, plus grande est la difficulté. Le "drag and drop" ne se prête pas bien à de longs déplacements de l’objet, encore moins au "scrolling" sur de longues distances, l’expérience utilisateur aurait été médiocre. Dans un souci du détail et pour augmenter l’effet visuel recherché, les planètes sont mises à l’échelle entre elles. Cependant, les distances ne sont pas compatibles avec le rayon des planètes, car afin de représenter ET les planètes ET la distance de manière réaliste sur un écran sans avoir recours au "scrolling", les planètes auraient été invisibles comme le représente très bien le (très bon) site web donné en exemple. J’ai aussi créé un bouton “réponse” qui ne s'affiche qu’une fois que les utilisateurs ont essayé le dispositif ou, du moins, cliqué sur le bouton de vérification, ceci dans le but qu’il fasse au moins l’exercice d'estimer la distance et qu’ils ne soient pas tentés directement d’obtenir les réponses. Il faut aussi noter que la valeur qui détermine la distance est approximative, étant donné que les distances par rapport au soleil ne sont pas toujours les mêmes tout au long de la révolution des planètes.
Je me suis grandement inspiré de l’exercice d’approximation spatial vu en cours et j’ai décidé de l’appliquer à un sujet que j’aime beaucoup, c’est-à-dire l’astronomie. J’ai commencé par rechercher une image contenant les différentes planètes du système solaire libre de droits, puis je l’ai modifiée sur Inkscape pour avoir une version de chaque planète détourée. La version avec les images en SVG ne fonctionnait pas et refusait de s’afficher donc je les ai toutes repassées en PNG. Je me suis ensuite attelé à mettre les planètes à l’échelle les unes par rapport aux autres pour sensibiliser l’utilisateur à leurs tailles respectives à l'aide du style. Ensuite, j’ai repris un morceau du code JavaScript de l’exercice d’approximation spatial vu en cours puis j’ai tenté de comprendre le code pour pouvoir l’adapter à mon dispositif et changer quelques fonctionnalités. J’ai ensuite ajouté un bouton caché “réponse” pour permettre la visualisation directe du placement correct des planètes étant donné la difficulté et la lenteur de les placer correctement manuellement, même avec une excellente motricité fine. Un problème qui persiste sur ma page et que je n'arrive pas à résoudre est le chargement de l'image du Soleil en background. Lors de la première arrivé sur la page, le fond reste blanc jusqu'à ce que l'utilisateur intéragisse avec les planètes ou recharge la page une seconde fois.
La grosse difficulté a été de travailler à partir d’un code qui n’est pas le mien et que je ne comprends pas dans son entièreté. Afin de pouvoir le manipuler et l’adapter à mon dispositif, il était nécessaire que je puisse développer une compréhension plus profonde du code emprunté. Il a fallu faire en sorte que le dispositif ne dépasse pas la fenêtre et soit un minimum responsive, c'est-à-dire: qu'il soit capable de s’adapter aux différentes tailles des écrans (sans perdre son côté relatif) sans quoi, il aurait perdu tout son sens. La deuxième grosse difficulté a été la création d’un bouton qui permettait de placer les planètes directement à l’endroit "juste". Encore une fois, la responsivité était la plus dure à mettre en place, il fallait que les valeurs "juste" données aux planètes correspondent à la valeur max établie pour l'affichage. (c'est difficile à expliquer). Une des faiblesses de ce dispositif est que les utilisateurs ont très peu de chance de placer les planètes parfaitement au bon endroit. Et plus les distances sur lesquelles le draggable peut se déplacer sont divisées par de petites unités et plus l'on perd en précision. Même si un utilisateur fait preuve de grande dextérité, placer une planète exactement à la valeur définie est presque impossible. C’est la raison pour laquelle un bouton supplémentaire a été créé. Celui-ci permet de placer directement les planètes à leur emplacement correct. Une amélioration possible serait de pouvoir "drag and drop" sur l'axe des "y" aussi pour échanger les planètes entre elles afin de pouvoir les mettre en perspective les unes par rapport aux autres plus facilement et d’avoir un effet visuel comparatif facilité.
Mattia A. Fritz: slide interactive sur le drag and drop
Phys.org: How far are the planets from the Sun?
Les images utilisées pour la conception du dispositif sont toutes libres de droit à conditions d'être citées et sont acessibles dans les bilbliothèques de médias libre d'utilisation exposée ci-dessous:
Le code manipulé est de Mattia A. Fritz et est sous license creative commons. Un lien ci-dessous mène à sa page personnelle