Dans le groupe PION, nous sommes convaincus que WIMS est une plateforme d’exerciseur très efficace pour faire progresser les élèves sur les automatismes.
Cette plateforme, largement éprouvée, est extrêmement riche en exercices, et très finement paramétrable. Nous en promouvons des usages robustes et efficaces, à travers les DM WIMS, les « courses » ou les cahiers de vacances, qui offrent des résultats avérés et appréciés par les enseignants comme par les élèves et leurs familles.
Pour essayer de favoriser l’adoption de cette plateforme, nous avons au fil des années amélioré la mise en œuvre didactique grâce à de nombreux retours d’expérience : Magistère Compagnon Wims, formations dédiées, création simplifiée de classes, etc.
Mais un des freins majeur à son adoption reste sa conception graphique. Nous détaillons pourquoi dans cet article qui présente la création d’un « thème » Pion, ses avancées et ses limites.
Ce travail a été commencé en juin 2024, il y a environ 2 ans. Il n’est pas terminé car certaines fonctionnalités prévues ne sont pas encore développées. De plus, pour que ce thème soit publiable, il faudrait selon nous reprendre le travail de programmation en se basant sur le thème « Standard » de façon a créer du code plus propre et abouti.
Objectifs : pourquoi un nouveau thème ?
Dans Wims, lorsqu’on crée une classe (ou un ensemble de plusieurs classes : groupement ou établissement), ou encore lorsqu’on gère un serveur, on peut personnaliser l’apparence des interfaces. Cela se fait en premier lieu par le choix d’un thème.
Les thèmes « modernes » distribués sur tous les serveurs Wims sont les thèmes Nikaïa et Standard. Le groupe Euler-Wims de l’académie de Versaille a créé son propre thème. Au groupe Pion, nous avons décidé de créer nous aussi un thème. Ce projet répond à plusieurs objectifs :
Privilégier « l’expérience utilisateur »
Les usages évoluent, et la manière de présenter l’information avec. WIMS a été conçu à une époque où le web était essentiellement textuel et consulté sur écran fixe. Aujourd’hui, les élèves et étudiants interagissent quotidiennement avec des interfaces soignées, responsives et intuitives. Afin de maximiser l’engagement, il est important d’offrir une interface intuitive, c’est-à-dire qui répond aux codes et aux usages actuels.
Usage mobile
WIMS a été pensé pour s’afficher sur des écrans d’ordinateurs. Les thèmes actuels ne s’adaptent pas bien au format vertical et à l’absence de souris.
Dette technique
Le thème de WIMS le plus abouti est aujourd’hui celui du groupe Euler : nous nous sommes basés sur ce thème bien construit. Il est essentiellement constitué de feuilles styles CSS, mais il accumule des couches successives, parfois redondantes ou conflictuelles, voire aujourd’hui obsolètes : JQuery codé « en dur » dans WIMS, framework foundation incorporé dans Nikaia.
Nous souhaitons utiliser de bonnes pratiques dans le code produit, afin de contribuer à la « maintenabilité » du projet, mais pour le moment nous avons plutôt contribué à alourdir cette dette technique.
Aperçu général.
Voici à quoi ressemble notre thème de façon générale : on retrouve quelque chose d’assez proche du thème Euler-Wims ou Nikaïa,
Améliorer l’ergonomie pour les enseignants (simplifier, rationaliser)
Notre premier but était de proposer une interface simplifiée pour les enseignants. Notre expérience de formation d’enseignants nous montre en effet que les difficultés de prise en main (réelles ou supposées) sont un obstacle important à l’utilisation par les professeurs. Nous avons donc créé un menu simplifié, où seules les icônes qui nous paraissent les plus utiles sont visibles. Il est accessible via un « menu hamburger » (caractère ☰), conformément aux codes actuels. Il montre les fonctions les plus utiles quand on gère la classe virtuelle avec les élèves.
Le menu de pied de page (existant également en version simplifiée ou complète) montre les fonctionnalités qui sont plus techniques et concernent plutôt la configuration. Nous avons également supprimé certains doublons dans les menus.
Améliorer l’ergonomie pour les élèves (simplifier, utiliser de petits écrans)
Côté élève, notre soucis principal a été de créer un thème le mieux adapté possible aux petits écrans, car beaucoup d’élèves travaillent sur Wims à partir de leur smartphone ou d’une tablette. C’est pourquoi nous avons opté pour le menu « sandwich » qui s’adapte facilement à toutes les tailles d’écran.
Là aussi, nous avons simplifié les menus : le bouton « Mes notes » est mis en évidence au centre de la page, le menu de gauche ne contient presque rien et les fonctionnalités non essentielles sont renvoyées dans le menu de pied de page.
Nous avons réduit au maximum le texte écrit en haut de la page, car le travail à faire n’était parfois visible qu’après avoir fait défilé plusieurs écrans.
Nous avons opté pour une barre de titre « rémanente », comme dans les applications modernes : cette barre reste affichée même si l’élève défile l’écran vers le bas. Il peut donc à tout moment voir :
– à gauche : le bouton ☰
– à droite : son nom et le bouton pour se déconnecter ou un bouton « Retour à la liste des exercices »
– au centre : le chronomètre le cas échéant, avec un petit peu de javascript (le chronomètre reste affiché en bas de la page, mais il n’est parfois pas visible quand l’écran est chargé).
Modernisation du design
Un soucis particulier a été apporté au travail sur les CSS qui permettent de gérer et de moderniser l’apparence des vues. Cela passe par :
– des boutons « plats », des onglets plus modernes, une police plus claire
– des zones entières (comme les DM WIMS) sont présentées sous forme de « cartes » ombrées, et sont désormais cliquables (et plus seulement les titres) grâce à un petit ajout de javascript. En effet, ce qui était logique sur ordinateur (les éléments cliquables sont uniquement ceux qui font changer d’aspect le curseur de souris) ne l’est plus forcément sur smartphone.
Nous avons cherché à simplifier au maximum la page de connexion, pour qu’elle soit simple même sur petits écrans.
Des fonctionnalités ont été mises en valeur, comme le lien de déconnexion côté élève :
Ou encore le lien d’à propos, quand un enseignant (connecté ou non) consulte un module ou un exercice : un simple clic sur l’icône de partage copie l’adresse de l’exercice ou du module dans le presse papier, pour pouvoir ensuite partager ce lien à l’extérieur de Wims.
Adaptation à notre utilisation de Wims
Au groupe Pion, nous utilisons beaucoup la modalité « DMWims ». C’est un ensemble de deux examens Wims, qui se font donc en temps limité. Certains aspects de notre thème reflètent cette utilisation et la favorisent.
Nous donnons relativement peu de feuilles de travail à nos élèves, mais quand nous le faisons, c’est souvent sous la modalité « course » qui utilise une page de présentation et où nous ne voulons pas qu’un élève puisse accéder à tous les exercices tout de suite.
Le projet n’est pas terminé : limites du thème Pion et perspectives d’évolution
Nous avons encore une longue « todo list » : comme par exemple créer certains liens qui permettent de gagner quelques clics et qui manquent à certains endroits ; ou encore la possibilité pour chaque enseignant de personnaliser les menus visibles par défaut sur sa page d’accueil, car tout le monde n’a pas les même habitudes que nous…
Enfin, c’est un soucis important, nous avons conscience que nos ajouts dans le code ne sont pas toujours très bien faits et viennent se surajouter à au moins trois reprises du code, par des équipes différentes au fil des années. Une conséquence est que le poids des fichiers de CSS est très important et que le code devient labyrinthique par endroit, ce qui ne facilite pas sa maintenance. Nous aimerions donc recréer notre thème de façon mieux maitrisée. En repartant du thème standard par exemple, il serait envisageable :
– de supprimer la plupart des dépendances obsolètes, afin de réduire la dette technique
– de n’utiliser que des technologies actuelles mais pérennes, afin de favoriser la maintenabilité du code
– de nous focaliser sur d’autres améliorations : meilleure cohérence globale de l’interface, ludification de l’expérience (avec un système de points permettant de personnaliser un avatar ou son interface), retours plus visuels etc.
Nous sommes à la recherche d’un financement pour mener à bien ce travail car il se compte en semaines voire en mois à plein temps.
