Retour d'expérience sur la conception d'un jeu éducatif

  • UX Design
  • UI Design

par Morgane Delacroix, Chloé Tubiana

le 19 novembre 2018

Pour la première fois, nous avons eu pour mission de créer une Progres­sive Web App éduca­tive : un système d’ap­pren­tis­sage par cartes à desti­na­tion d’élèves scola­ri­sés.

L’ap­pren­tis­sage par carte est un moyen de favo­ri­ser l’ap­pren­tis­sage par coeur (de listes de voca­bu­laire par exemple), avec un système de recto / verso, à travers des jeux.


Des cibles très diver­si­fiées

L’un des chal­lenges prin­ci­paux de concep­tion était lié aux cibles, extrê­me­ment diver­si­fiées. D’une part, des élèves scola­ri­sés de 6 à 20 ans : il était donc néces­saire de déve­lop­per une appli­ca­tion avec un système de navi­ga­tion très intui­tif et faci­le­ment iden­ti­fiable. D’autre part, les ensei­gnants : cette appli­ca­tion a pour objec­tif de leur permettre de créer des listes, mais égale­ment de consul­ter des séries “offi­cielles” et celles d’autres ensei­gnants. Une des diffi­cul­tés prin­ci­pales dans ce projet fut de réus­sir à créer un univers graphique qui soit compris et utili­sable tant par les élèves que par les ensei­gnants. En plus de cela, il était néces­saire d’en­vi­sa­ger les besoins des deux types d’uti­li­sa­teurs qui sont complè­te­ment diffé­rents.

Pour les élèves, nous nous sommes concen­trés sur la dimen­sion sociale et inter­ac­tive de l’app, afin de les encou­ra­ger à se connec­ter fréquem­ment. 

Pour les ensei­gnants, nous avons concen­tré nos efforts sur la créa­tion et la recherche de nouveaux conte­nus, avec un système d’abon­ne­ment à des chaînes pour les élèves, afin qu’ils puissent suivre ce que d’autres ensei­gnants publient.


Conce­voir des jeux

Afin de favo­ri­ser l’ap­pren­tis­sage des élèves, nous avons créé 2 modes d’en­traî­ne­ment et 4 modes de jeux, afin d’ap­por­ter une dimen­sion plus ludique et moti­ver les élèves à utili­ser l’ap­pli­ca­tion. La prin­ci­pale contrainte a été de trou­ver des jeux simples, perti­nents dans le cadre d’un appren­tis­sage, et assez diffé­rents les uns des autres.


Voici en substance les 4 jeux que nous avons créé :

Asso : Les recto et les verso sont tous affi­chés et mélan­gés : les élèves doivent asso­cier le recto et le verso corres­pon­dant.

Mémo : L’élève doit mémo­ri­ser l’em­pla­ce­ment de tous les verso. Les verso s’ano­ny­misent et un recto appa­raît. L’élève doit retrou­ver le verso corres­pon­dant.

Typo : Un recto est affi­ché et l’élève doit saisir le verso corres­pon­dant.

Brio : C’est le mode aven­ture, il fonc­tionne comme le jeu typo, mais avec un petit person­nage qui descend une piste de ski. Une ques­tion est affi­chée, si l’élève a la bonne réponse le person­nage continu sa descente, en revanche si l’élève se trompe le cerveau chute et rentre en colli­sion avec un arbre.


Nous avons égale­ment défini plusieurs niveaux de diffi­culté pour mieux corres­pondre aux diffé­rents âges des utili­sa­teurs. Pour accroître encore la notion de chal­lenge, nous avons créé un mode “duel” où un élève peut défier un autre élève sous forme de jeu.


Un système de rewards

Nous avons appliqué le prin­cipe de la gami­fi­ca­tion : cette tech­nique qui consiste à appliquer des codes et méca­nismes de jeux vidéos en dehors de ce domaine, cela encou­rage les utili­sa­teurs à inter­agir et utili­ser une appli­ca­tion/site web car il est motivé par l’idée de chal­lenge.

La gami­fi­ca­tion peut se faire de diffé­rentes façon, avec des récom­penses, des clas­se­ments, des points à gagner, une progres­sion marquée par des étapes…

Dans notre cas, nous avons axé la ludi­fi­ca­tion sur plusieurs prin­cipes :

Le gain de points : Les élèves remportent des points lorsqu’ils font des jeux en duel ou en solo mais aussi en se connec­tant régu­liè­re­ment sur le site


Déblo­cage d’ava­tars et badge : Les points gagnés permettent de débloquer des avatars et des badges. Quand un utili­sa­teur atteint un nouveau niveau il obtient une série de 5 nouveaux avatars repré­sen­tés par des illus­tra­tions d’ani­maux. les badges quand à eux sont des médailles (bronze, argent, or) qui se débloque en gagnant des points et qui s’ajoute sur l’ava­tar de l’élève.




Clas­se­ment : Quand un jeu est joué en mode solo, l’uti­li­sa­teur a accès à la fin de la partie au clas­se­ment global pour ce jeu et cette série, ce qui peut lui donner envie de rejouer pour atteindre une meilleure place dans le clas­se­ment.


Un univers graphique basé sur l’illus­tra­tion et l’ani­ma­tion

Les illus­tra­tions peuvent s’avé­rer être très impor­tantes de manière géné­rale de le design UI. Un visuel n’a pas pour seule fonc­tion­na­lité d’être joli, les avan­tages des illus­tra­tions sont multiples :

  • Cela permet d’im­mer­ger davan­tage les utili­sa­teurs dans un univers et de l’in­té­grer à l’in­ter­face
  • Complé­ter le texte et les instruc­tions qui l’ac­com­pagnent afin de faci­li­ter la trans­mis­sion d’un message ou l’ac­tion qui doit être réali­sée sur une page
  • Donner une image sympa­thique d’un produit

C’est pourquoi nous avons fait le choix d’ajou­ter des illus­tra­tions sur diffé­rentes pages de l’ap­pli­ca­tion. Nous avons aussi réalisé des anima­tion pour donner une image plus moderne.


Le mot de la fin

Ce projet, bien diffé­rent de ce que nous avons l’ha­bi­tude de produire nous a poussé à réflé­chir autre­ment et être dans une nouvelle démarche : celle du partage de connais­sances.

Nous avons ainsi beau­coup appris au cours de ce projet et ça a été pour nous très forma­teur d’avoir l’op­por­tu­nité de travailler sur ce type de sujet.


Retour en haut keyboard_arrow_down background Layer 1