Contexte
Le Secrétariat Général du Ministère de l'Économie a mis en place un plan visant à moderniser son fonctionnement à travers l’acculturation, la transformation numérique et la rénovation des infrastructures. Pour assurer le suivi des actions mises en place, un index d’indicateurs de performance a été conçu sous la forme d’un fichier Excel.
Mais Excel empêche des fonctionnalités essentielles : plusieurs utilisateurs ne peuvent pas modifier le document en même temps pas de système de droits… Bref, le Laboratoire de transformations, dont je fais partie, est sollicité pour créer une interface web dédiée.
Problèmes à résoudre
Seul designer missionné sur ce projet, je vais designer de zéro un nouvel outil.
Le document de travail actuel n'est pas optimisé pour les tâches des agents sur ce projet, Excel n'étant pas conçu pour ça. L’objectif de ma démarche : répondre plus précisément aux besoins des agents en créant une interface réellement adaptée.
En analysant le document et en parlant avec les utilisateurs, voilà ce qui en ressort :
Lisibilité
Les agents sont confrontés à une grande quantité de données présentées dans un format peu adapté
Efficacité
Ils perdent du temps dans des tâches répétitives et manuelles, manque d'optimisation
Erreurs
L'absence de règles et de garde-fous sur Excel entraîne des possibles erreurs de manipulation et pertes de données
Comment rendre plus lisible une grande quantité de données au quotidien ?
1. Réarranger l'information
Le format tableur implique de longues lignes à scroller horizontalement. Chaque ligne est difficile à scanner pour un usage quotidien et des infos essentielles se trouvent parfois en bout de ligne.
Les données n’étant pas faites pour être comparées d’un indicateur à un autre, ce format n’est pas adapté. Je conçois un layout hybride pour qu’il y ait besoin de scroll dans une seule direction et avoir une vue d’ensemble beaucoup plus facilement.
2. Réduire la charge cognitive
En dépriorisant des éléments peu importants au quotidien
qui prennent de la place et empêchent un scroll efficace.
En créant une application “scannable”
Hiérarchisation et groupement des éléments (spacing, contrastes, tailles de typo), icônes qui facilitent la lecture efficace, UI épurée, cohérence graphique.
En designant un formulaire en plusieurs étapes
Moins chargé visuellement et plus fluide comparé à remplir à la main une nouvelle ligne sur Excel.
Comment faire gagner en efficacité ?
1. Afficher et modifier automatiquement le statut d’un indicateur
Le statut de l’indicateur est une information essentielle et mise en avant visuellement sur l’application. Il dépend de la date de la dernière mise à jour de l’indicateur, et de l’échéance pour le mettre à jour. Sur l’Excel, il n’était pas affiché explicitement, et les utilisateurs vérifiaient à la main les différentes colonnes qui constituent ce statut pour déterminer s’ils devaient agir.
2. Proposer des filtres de recherche
Il est bien sûr possible de créer des filtres manuellement sur Excel, mais tous les utilisateurs n’avaient pas ce réflexe. Ici j’ai directement affiché les critères qui permettent de trouver des indicateurs plus efficacement, ou les classer pour une tâche (par exemple pour savoir quels sont les indicateurs qui n’ont pas été mis à jour).
3. Simplifier la saisie
Sur le document de travail original, les utilisateurs devaient souvent saisir manuellement toutes les informations (oui, oui), même lorsque le nombre de choix aurait dû être limité. Quand applicable, j’ai remplacé les champs textes par des listes déroulantes, des chips sélectionnables etc.
Comment prévenir les erreurs ?
1. Ajouter des règles de validation
Pour plus de cohérence, un traitement de la donnée plus simple et éviter les erreurs :
2. Intégrité de la donnée
On peut archiver et cacher les indicateurs et sous-indicateurs obsolètes pour plus de lisibilité, mais leurs données seront conservées.
Cela va de pair avec une interface dédiée pour les administrateurs, qui peuvent ajouter des nouvelles options pour les caractéristiques des indicateurs, ou en archiver.
3. Ajouter de la friction à certaines actions
Comme l’archivage d’un indicateur ou quitter le formulaire de création.
Création d’un UI Kit
Il existe un Design System de l’État. Cependant, à l’époque de ce projet, son usage était peu adapté car il sert plutôt pour des sites de l’Etat, pas pour de l’applicatif.
En concevant l’application, j’ai repris le plus possible les éléments de ce Design System (icônes, police Marianne, couleurs d’accents, certains composants), et j’en ai profité pour créer le Transfokit dans un but de réutilisation future.
J'ai créé des composants flexibles avec les Component properties
Design tokens, light/dark mode
Tests utilisateurs
Quand une première version de ma maquette a été développée, j’ai réalisé des tests avec plusieurs tâches pour vérifier la compréhension de l’interface, la facilité de la prise en main et l’efficacité de la solution que j’avais designée.
Ils ont révélé quelques manquements, mais dans l’ensemble la solution semblait répondre au besoin, après correction elle a été déployée et a remplacé l'outil d'origine.
Bouton de feedback
Les tests utilisateurs sont limités car ils ne prennent pas en compte une utilisation quotidienne et plus vaste. Une solution complémentaire que j’ai donc mise en place : un bouton “Noter une frustration” qui permet d’envoyer un feedback très facilement, assez visible dans l’interface. Il servira sur le long terme pour corriger des problèmes d’expérience utilisateur.
