3. Design

Deux instructions seulement sont inscrites à l'écran : "Ordonne dans l'ordre croissant les nombres suivants" et "Noxxy te dira lorsque tu auras réussi la série."
La deuxième instruction indique que le feedback final sera donné automatiquement, j'ai souhaité le rendre automatique et ne pas implémenter de bouton "Fini" car ceci augmentrait considérablement le nombre de clics final tout au long l'activité. Pour donner un ordre d'idée, le nombre de clics minimum pour finir cette activité est de : 9 clics (5 pour la série 1, 4 pour la série 2). Si on devait cliquer sur un bouton de vérification entre chaque mouvement, on devrait compter 18 clics au minimum... Imaginez en moyenne pour des élèves de 8P ! Cela ferait trop de clics et donc un moyen de perdre l'engagement des élèves (Bevan, 1997).
Les deux séries sont donc montrées à l'écran directement. J'ai préféré garder la même disposition que dans l'exercice se trouvant sur biceps.ch.
Un bouton avec un point d'interrogration a été implémenté comme un bouton d'aide qui est classiquement utilisé sur les sites internet. Je n'ai pas souhaité donner de feedback automatique à l'élève, comme si elle ou il était devant sa feuille, à tout moment si elle ou il cherche de l'aide, un clic sur ce bouton pourra l'aider.
Lorsque l'utilisateur-trice clique sur ce bouton d'aide, une question rhétorique indique le premier nombre de la liste qui peut être déplacé car inférieur au nombre le précédent dans la liste. Cette aide disparait après n'importe quel mouvement.
J'ai donné de l'importance à l'implémentation des pseudo-classes (CSS) comme ':hover' ou ':active'. En effet, la souris change de forme lorsqu'elle passe sur un des nombres, indiquant à l'utilisateur-trice que cet objet peut être attrapé (ex., ':hover {cursor:grab}', puis lorsqu'il est attrapé le curseur change sous la forme d'une main qui attrape (ex., ':hover {cursor:grabbing}'). Ces implémentations permettent d'améliorer l'utilisabilité en donnant cette perception de 'l'affordance'.
Une fois que la série se termine, le titre apparaît en vert avec écrit "TERMINÉE" et il n'est plus possible de glisser-déposer un nombre. Il reste cependant les pseudo-classes hover pour cette liste terminée que je n'ai pas réussi à modifier.
De plus, Noxxy, le compagnon virtuel montre un signe d'encouragement lorsque la série est terminée. Comme vu précédemment sur mes autres productions, je l'utilise comme un moyen d'améliorer l'engagement de l'utilisateur-trice en permettant un échange émotionnel (Yasavur, Lisetti & Rishe, 2014; Tran, Robert & Bremond, 2016; Jeong & Breazeal, 2017).
Un message de célébration et d'encouragement est affiché à l'écran lorsque les deux séries sont finies. Indiquant à l'utilisateur de réessayer en cliquant sur Noxxy.
Deux eastereggs sont cachés dans l'application, saurez-vous les trouver? (indice : avez-vous bien regardé le coin inférieur gauche de l'écran?)