Logo Ecodev
  • Services
  • Projets
  • Agence
  • Aide
  • Articles
Logo Dilps

Application pédagogique de gestion d'images

intro background
Dilps - Tiresias
Accueil Dilps

Le besoin

Quand l'UNIL nous a contactés, ils avaient besoin de moderniser et consolider une application qu'ils avaient conçue en interne pour leurs étudiants.

Celle-ci a été progressivement améliorée au travers des années puis dupliquée pour deux projets : Dilps (orienté art) et Tiresias (orienté architecture / archéologie). Ce sont dès lors deux applications très similaires qui ont commencé à diverger dans leurs développements.

Cette duplication a rendu compliquées les évolutions futures. Or le besoin d'évoluer se faisait sentir.

L'UNIL désirait implémenter de nouvelles fonctionnalités d'ampleur, comme un important système de monitoring et de hiérarchisation des permissions, afin que les étudiants puissent créer leurs contenus à volonté, puis suivre un processus hiérarchique de validation de leurs créations. Les superviseurs quant à eux devraient voir leur quotidien facilité avec un système de notification et de comparaison entre les anciens et nouveaux contenus.

Le but était alors de concevoir une nouvelle application commune aux deux entités, assez flexible pour que chacune puisse fonctionner avec leurs données et leurs spécificités fonctionnelles tout en gardant un tronc fonctionnel commun.

Dilps
Dilps
Tiresias
Tiresias

Calendrier et stratégie

Ce nouveau projet était voué à être développé sur plusieurs itérations réparties sur plusieurs années. La première étape ne devait servir qu’à Dilps. Tiresias viendrait ultérieurement.

Nous avons par conséquent procédé à une étude technique détaillée des deux projets pour discerner les points communs et divergents des deux applications existantes, puis proposé des solutions techniques pragmatiques rendant l’interopérabilité ultérieure possible.

Le succès de ce projet repose sur une communication particulièrement efficace avec l'UNIL. L'université a mis en place une coordination interne rigoureuse, permettant de centraliser les retours des multiples parties prenantes. Cette organisation nous a permis de valider régulièrement que nos propositions techniques répondaient précisément aux besoins métiers spécifiques des différents départements. Cette synergie entre nos équipes et les experts académiques a été déterminante pour garantir que chaque fonctionnalité développée s'intègre parfaitement dans les pratiques pédagogiques existantes.

Ergonomie

Bien que le cahier des charges fût exhaustif et précis, nous avons identifié une opportunité d'amélioration dans les maquettes.

On parle ici d'une application centrée sur les images, or les maquettes fournies prônaient une approche traditionnelle du listing où le format de l'image n'était pas pris en compte. En résultait alors une grande perte d'espace.

Si on combine ce facteur au fait que les utilisateurs vont principalement utiliser des tablettes, les gains de place allaient s'avérer une plus-value précieuse.

Responsive - Format tablette
affichage au format tablette
Listing
affichage en mode listing

Venant de travailler sur natural-galerie-js, une librairie open source, qui résolvait précisément ce problème, nous avons proposé une ergonomie différente. Bien que le listing reste possible dans un mode d'affichage secondaire, celui par défaut serait celui d'une galerie de type "maçonnerie" avec un scroll infini et minimisant les pertes d'espace.

Natural gallery - Horizontal
Natural gallery - Horizontal
Natural gallery - Vertical
Natural gallery - Vertical

La particularité des galeries de type "maçonnerie" c'est qu'elles uniformisent une dimension et adaptent l'autre. On a ainsi des formats verticaux (comme Pinterest) ou horizontaux (comme Google Images). Cet alignement sur un axe permet de combler les espaces vides en imbriquant les images.

Bien qu'apportant ses avantages, ce mode d'affichage comporte aussi ses inconvénients. Avec un scroll infini, il n'est pas possible de se rendre immédiatement au milieu des résultats d'une longue liste. Il est nécessaire de scroller jusqu'à l'endroit désiré. Et c'est d'autant plus problématique que lorsque l'on change de page et qu'on revient au listing, il faut recommencer le défilement.

Nous avons alors implémenté des stratégies de réutilisation des pages afin de conserver le listing dans l'état où il a été laissé de façon transparente pour l'utilisateur.

Il y a un deuxième défaut qui peut s'avérer gênant lorsqu'un utilisateur cherche un contenu qui est loin dans la liste et qu'il est condamné à devoir défiler toute la page sans pouvoir sauter à la fin. Sauf que dans notre cas ce n'est pas vraiment un problème. Il se trouve que cette application est vouée à héberger des centaines de milliers d'images et qu'en pratique, les utilisateurs ne cherchent jamais un contenu en défilant la page car la réussite d'une telle opération est très incertaine et chronophage. Quand bien même ce serait nécessaire, ils disposent toujours de l'affichage secondaire en vue liste paginée.

Dans les faits, les utilisateurs vont surtout affiner les filtres de recherche ou se rendre dans les dossiers où ils ont classifié leurs images.

C'est ainsi que nous avons implémenté cette galerie d'images comme vue principale.

Le workflow collaboratif

La fonctionnalité principale de ce développement a été d'introduire un système de suivi.

Un étudiant doit pouvoir constater une erreur ou une lacune sur une fiche existante, la rectifier (en une ou plusieurs fois) et la soumettre pour validation quand il aura terminé.

Fiche détail : Mode consultation
affichage au format tablette
Fiche détail : Mode édition
affichage en mode listing

Un superviseur devra être en mesure de prendre connaissance qu'une correction lui a été proposée, puis constater les différences, les modifier à son tour si nécessaire, et décider s'il accepte la modification. En cas d'acceptation, la fiche originale est mise à jour.

Il est ainsi possible de suggérer des modifications, des nouvelles fiches ou des suppressions de fiches.

Suggestion de création
Suggestion de création
Suggestion de modification
Suggestion de modification
Suggestion de suppression
Suggestion de suppression

Dans Dilps/Tiresias, il n'y a que très peu de données qui sont universelles. Certaines catégories ont des visibilités publiques (que tout le monde peut voir) ou semi-publiques (que seuls certains rôles peuvent voir). Leur configuration dépend d'une hiérarchie de rôles. Mais ce n'est que la partie émergée de l'iceberg.

Collections privées, semi privées et publiques
Collections privées, semi privées et publiques

N'importe qui peut créer ses propres collections / classifications et définir leur visibilité puis fournir des permissions à d'autres personnes pour pouvoir collaborer et consulter les fiches. Les permissions sont relatives aux entités créées, ce qui rend chaque utilisateur souverain de ses créations et offre une grande flexibilité au système.

Le mot de la fin

En production depuis 2018, ce projet a permis de révolutionner, et fusionner, deux applications qui étaient auparavant distincte, Dilps et Tiresias. Il permet aujourd'hui de gérer +230'000 fiches consultées par +3'500 utilisateurs.

Equipe impliquée

Marc Rolli

Marc Rolli

Samuel Baptista

Samuel Baptista

Adrien Crivelli

Adrien Crivelli

Vous avez des projets ?

Si vous avez des projets ou des idées de projet nous serons ravis d'en discuter avec vous.

Nous contacter

N'hésitez pas à consulter nos autres travaux.

Voir tous nos projets
Outil de gestion pour les programmes doctoraux
Outil de gestion pour les programmes doctoraux
  • Logiciel libre
  • Politique de confidentialité
  • Conditions générales
  • Services
  • Projets
  • Agence
Ecodev logo
  • Rue de la Serre 11
  • 2000 Neuchâtel
  • Suisse
  • +41 32 513 17 04 (administratif)
  • +41 32 513 17 00 (technique)