Les besoins
La société Opal, que j'accompagne pour la maintenance de leur site m'a contacté afin d'accompagner deux développeurs en charge du développement d'un outil interne de gestion des commandes fournisseurs. Ces derniers avaient déjà presque terminé le développement de la plateforme en Vue.JS et Symfony 5. Cependant l'interface qu'ils avaient mis en place était très simple et nécessitait d'être revue afin d'optimiser l'affichage et la rendre plus jolie.
- Revoir le design des interfaces
- Améliorer l'expérience utilisateurs
- Créer une plateforme fonctionnelle
- Créer une plateforme "chaleureuse"
- Technologie imposée : Vue.JS & Symfony 5
Les enjeux
Développement Vue.JS
Pour ma part, je n'avais que très peu touché à du code Vue.JS, c'était donc quelque chose de nouveau et j'ai dû m'adapter à cela. Le fait que tous les éléments soient déjà intégrés m'a facilité la tâche puisque je n'avais qu'a les re-designer conformément à la maquette réalisée auparavant. C'était donc principalement du CSS bien qu'il me soit arrivé de découvrir un peu de Vue.JS pour modifier quelques éléments.
Optimisation des interfaces
La problématique majeure de ce genre d'outil est toujours la même : il y a un grand nombre d'informations à afficher au sein d'une même page et il faut en afficher un maximum d'un coup. On se retrouve donc souvent avec des interfaces délaissant l'ergonomie au profit de la masse d'informations. L'enjeu était ici d'afficher un maximum d'informations sur un ordinateur (pas de responsive) en commençant par du 13 pouces.
Performances
Cet un enjeu que j'ai rencontré indirectement puisque nous avons dû revoir une partie du code afin d'optimiser les performances. Mes deux confrères se sont rendus compte d'un manque de performance au niveau d'une page affichant un tableau. L'utilisation d'un trop grand nombre d'éléments provenant de Bootstrap affectait considérablement les performances du site. Ils ont donc dû s'en séparer et les remplacer par d'autres moins consommateurs de ressources. De mon côté j'ai du ré-adapter le code que j'avais rédigé pour le rendre fonctionnelle avec ces nouveaux éléments.
L'accompagnement
Design
L'objectif de cette mission était assez simple : obtenir une interface moderne, fluide et accessible à tous sans oublier l'utilité même de la plateforme, afficher et gérer un grand nombre d'informations. Je leur ai donc proposé une maquette de l'interface que j'imaginai en me basant sur ce qu'ils avaient développé. J'ai réalisé cette maquette sur Figma, cela nous a permis de fixer ensemble les éléments importants à mettre en avant mais aussi de définir les diverses interactions possibles pour les utilisateurs.
Intégration
Une fois les maquettes réalisées et validées, il a fallu rendre tout cela interactif et les intégrer au sein du site. Comme je vous l'expliquai précédemment, cela a été facilité par le fait que la majorité des éléments étaient déjà en place. Dans la majorité des cas, je n'avais qu'à les déplacer ou revoir leur design. Dans certains cas, j'ai dû importer de nouveaux éléments Vue.JS et revoir aussi leur design. Cette phase d'intégration été pour moi un apprentissage complet en Vue.JS mais je n'ai pas rencontré de difficulté particulière.
Techniquement
D'un point de vue plus technique, c'était intéressant de travailler sur un tel projet puisqu'il mêlait à la fois design, intégration et optimisation de l'expérience utilisateurs.
De plus c'était un projet challengeant au niveau des délais, assez serrés et des technologies nécessaires. Comme je l'expliquai précédemment, l'utilisation de Vue.JS était quelque chose de nouveau pour moi.
Côté environnement de développement, c'était également intéressant puisqu'un Docker avait été mis en place ainsi qu'une configuration Webpack. Cela a considérablement facilité la mise à jour du design grâce à l’auto-compiler.
