Concevoir des interfaces ludiques pour l’accompagnement pédagogique.


Le jeu au service de l’apprentissage dans les interfaces: exercice de conception.

/ Introduction

Il est 11:00 dans une salle de classe, beaucoup d’élèves n’ont pas réussi à focaliser leur attention sur le cours, d’autres n’ont même pas su la mobiliser. C’est vrai, les distractions ne manquent pas surtout quand nos applications et nos sites favoris sont à portée de main. Certains font l'effort de couper toute distraction mais parfois c’est impossible compte tenu des besoins du cours.

Aussi, est-il possible de trouver un outil numérique qui, en plus d’être un outil d’accompagnement des élèves dans leur formation, vient s’intégrer dans les codes de ce qui peut nous distraire, en gardant les avantages mais sans les inconvénients ?

La ludification (ou gamification en anglais) est présente au sein de beaucoup de projets digitaux, de sites web, de situations d’apprentissage, de situations de travail ou même de réseaux sociaux.

Elle a l’avantage de lier des principes d’apprentissage à des pratiques ludiques communes aux digital natives. Elle comporte malheureusement certains défauts inhérents au jeu au sens général, tels que l’addiction, l’outre passement des règles etc.

Une approche pédagogique mettant en pratique la gamification dans l’accompagnement à l’apprentissage soulève donc quelques interrogations mais peut être une solution tangible, qui permet à la fois de lutter contre les distractions_ en prenant la place de ce qui pourrait nous distraire_ mais aussi de former de nouvelles mécaniques de jeu, pour favoriser par exemple :

  • La mise en place de tâches et l’organisation du travail dans le temps,
  • L’implication de l’individu dans le procédé d’apprentissage
  • La mise en place d’un rythme de travail sain pour intégrer sur le long terme des notions.

/ Les mécanismes

Au regard des écrits sur les mécanismes de progression dans un jeu, on remarque que l’aspect ludique se construit autour de plusieurs principes importants:

  • L’attraction ( la partie Design UI )
  • La mécanique gamifiée et les microinteraction
  • La capacité de rétention du joueur ( la capacité d’amener l’utilisateur à se dépasser dans le temps et à pérenniser ses actions )

Nous allons voir, dans l’existant, ce qui permet concrètement de construire une expérience ludique autour de ces points. C’est fort de ces éléments que nous construirons l’embryon d’une solution adaptée au cas de l’école que nous avions imaginé en introduction.

/ L’attraction & UI Design

Pour amener l’utilisateur à utiliser une application, la première chose à faire est de lui donner envie. L’interface de la plateforme est donc un élément essentiel qui déterminera la suite de l’expérience de l’utilisateur sur le site.

Prenons quelques exemples concrets.

Capture d’écran Duolingo

Duolingo propose une charte épurée et des couleurs enfantines qui installe tout de suite un cadre détendu et ludique. La mascotte du site nous suit tout le long de l’expérience pour nous offrir un suivi et une interaction personnifiée pendant les exercices ou pendant la navigation sur le site.

Capture d’écran Duolingo

CodeCombat quant à lui, propose une interface proche de ce qui se fait plus généralement dans le jeu vidéo. Elle plonge l’utilisateur dans une expérience vidéo-ludique qui en ferait presque oublier le but principal du site : apprendre à coder. Ce type d’interface immerge énormément l’attention de l’utilisateur dans l’univers du jeu, plus que dans le côté ludique.

Capture d’écran de Code Combat

C’est au niveau de l’UI (User interface) que se déterminera l’affordance des éléments d’interaction, mais aussi un univers qui se devra d’être suffisamment abordable pour permettre l’immersion de chacun sans phase d’adaptation.

/ La mécanique ludiques et les microinteraction ( UX et Game Design)

Au cœur de la gamification réside un élément fondamental concernant l'expérience à court terme de l’utilisateur sur l’interface d’accompagnement pédagogique, il s’agit du haut niveau d'interaction et de retour à ce que fait l’utilisateur, la bien nommée microinteraction (voir mon article sur la microinteraction). 
Dans notre cas elle permet concrètement l’implication de l’utilisateur dans ses phases de création, réflexion ou de mémorisation.
Aussi l’interface doit suggérer un haut niveau d’interactivité et de réponse pour quasi simuler la présence d’un accompagnant réel et permettre aussi de focaliser et mobiliser l’attention de l’apprenant.

Elle doit aussi accompagner émotionnellement l’utilisateur, et lui permettre de visualiser intuitivement ses tâches.

La mécanique d'ensemble doit permettre de favoriser un usage qui n’implique pas une mobilisation trop importante des capacités réflectives mais au contraire favoriser sa concentration sur le travail central. D’où l’importance d’une interface user experience friendly, une interface travaillée centrée utilisateur.

Des exemples de mise en pratiques de telles problématiques existent autant chez Codecademy que Flexbox Froggy ou encore une fois Duolingo.

Un des premiers exemple chez ce dernier est l’utilisation d’éléments très peu avares en feedback et qui vont présenter une haute interactivité à l’action de l’utilisateur (ou trigger).

Sur cet élément nous retrouvons un élément qui au passage de la souris (hover) va suggérer le clic (grande affordance), et qui au clic émet le son de ce qui est écrit. et un changement de couleur du bouton va suggérer le clic pour valider la saisie.

En outre cette mécanique suggère à l’utilisateur des actions en étapes par étape, le confortant dans la compréhension des réactions potentielles de l’outil qu’il utilise.

Elle encourage aussi la persévérance par les appels successifs à l’action.

Il faut néanmoins faire attention à ne pas surcharger par le feedback l’attention de l’utilisateur. Celle-ci doit être discrète (voir principes de la microinteraction: trigger, rules, feedbacks et modes).

Storytelling ingame CodeCombat

Ici nous voyons un exemple d’accompagnement, par une rédaction soignée, de l’utilisateur, permettant une bonne captation de l’attention, un accompagnement et une force d’appel à l’action considérable.

Visualisation des avancements sur CodeAcademy

La possibilité de voir son avancée au cours des modules est une fonctionnalité qui peut être une puissante source de volonté d’avancement.

L’avancement dans son travail est une formidable possibilité d’améliorer son propre suivi dans son cours.

/ Rétention

L’utilisateur est amené à se dépasser dans le temps et à pérenniser ses actions sur le site grâce à divers mécanismes de fidélisation.

Le site de Stack Overflow propose des questions et réponses sur un large choix de thèmes concernant la programmation informatique.

L’utilisateur se voit accorder des points et des badges en fonction de sa participation sur le site et de la pertinence de celle-ci.

Ces points lui forment une réputation au sein de la communauté qui lui accorde des privilèges spécifiques.

Voici les différentes fonctionnalités mises en place par Stack Overflow afin d’inciter ses utilisateurs à participer de manière pérenne sur le forum :

Les privilèges : l’utilisateur obtient des privilèges en augmentant sa réputation (par les points qu’il reçoit des autres utilisateurs pour avoir posté des questions et des réponses utiles).

Par exemple, un milestone (étape clé) : après 20 000 pts, l’utilisateur peut modifier, supprimer et non-supprimer des messages.

StackOverflox

Les badges : En plus de la réputation acquise par les posts, l’utilisateur peut obtenir des badges en fonction de son utilité sur le forum. Les badges apparaissent sur le profil de l’utilisateur et sur ses publications.

Les badges ont 3 couleurs sur stackoverflow

Les badges ont 3 couleurs différentes en fonction de leur reconnaissance :

  • Bronze
  • Argent
  • Or

Par exemple, le Famous question (or) : une question avec plus de 10 000 vues

Stack Oveflow mise sur le système d’attribution de privilèges au sein de la communauté pour fidéliser ses utilisateurs. Ceux-ci y trouvent leur intérêt car ils se construisent une réputation solide et approuvée par une majorité de développeurs. Cette réputation est une vraie valeur ajoutée pour eux, pour leur satisfaction personnelle et aussi durant leur carrière.

Exemple des questions badges de StackOverlfow

Cette idée serait à exploiter dans le cadre de la pédagogie afin de motiver les élèves dans leur apprentissage d’une discipline.

Duolingo affiche le nombre de points gagnés à la fin de chaque exercice mais également le nombre total de points à atteindre pour terminer le niveau. Ceci procure une satisfaction immédiate à l’utilisateur mais tend à le motiver davantage à ne pas s'arrêter là pour réaliser les étapes suivantes et terminer le niveau.
Nous retrouvons ce même affichage du gain de points d’expérience à la fin d’une étape dans Codecombat.

La validation d’une étape vu par Duolingo et Codecombat

Le visuel suivant affiche le parcours entier du cours en différenciant les exercices terminés et validés de ceux qui ne sont pas encore complétés. Cette vision globale permet à l’utilisateur de se situer dans son évolution : il voit ce qu’il a accompli et ce qu’il lui reste encore à faire.

Cette vision vise à lui donner envie d’aller plus loin, d’aller au bout de son projet.

Certification des progressions par Duolingo

/ Proposition d’interface

Au regard de ces éléments, nous pouvons envisager ce que serait un outil adapté à l’accompagnement des étudiants de notre école fictive dans leur apprentissage. Nous pourrions envisager une interface intranet avancée permettant, par une multitude de fonctionnalités de modifier l’accompagnement des élèves dans leur apprentissage, leur suivi et leur bonne compréhension des cours.

Visuellement il faudra compter sur une interface qui mette en place les principes énoncés plus haut, tout en gardant l’esthétique d’Hetic (le vert acide). Côté fonctionnalité

Le Backlog du produit:

  • Dashboard résumant l’avancée et donnant accès aux principales fonctionnalités
  • Compte “professeur” permettant de mettre en ligne des exercices et de créer des classes pour regrouper les élèves
  • Compte “élève” permettant de rejoindre une classe et de suivre les modules associés
  • Page profil de l’élève sur l’intranet de l’école) qui affiche :
  • Nom, Prénom
  • Promo
  • État d’avancement (modules réalisés et modules à venir)
  • Niveau d’expérience
  • Gain de badges après avoir déverrouillé un succès (ex: Badge ‘Designer’ pour avoir complété 20 modules de design)
  • Gain de points XP à la fin de chaque module complété
  • Passage au niveau supérieur après un certain nombre de points XP
  • Atteindre un certain niveau permet de débloquer des modules plus compliqués (ex: Atteindre le niveau 5 permet de débloquer les modules “avancés”)
  • Visualisation des modules avancées.
  • Système de rappels pour retourner plusieurs jours, semaines et mois après sur la synthèse du précédent module ou sur ses notes.

L'objectif global d’une telle plateforme est ainsi l’accompagnement de l’étudiant par l’aspect ludique. Il faut néanmoins trouver un juste milieu entre l’immersion et l’affordance pour ne pas tomber dans les défauts systémiques liés au jeu.