En chemin vers un nouveau design

Arthur Desaintjan ⋅ 31 juillet 2025

Nous travaillons sur Gephi Lite depuis plusieurs années. Dès le départ, notre objectif a été d’utiliser les technologies web pour offrir une expérience claire et légère de visualisation de réseaux. Pourtant, transformer ces intentions en une expérience utilisateur efficace n’est pas chose facile, surtout quand on est une équipe de trois ingénieurs (même expérimentés dans la conception d’interfaces complexes). C’est pourquoi nous avons estimé nécessaire de ralentir le développement de nouvelles fonctionnalités pour investir du temps sur l’utilisabilité de Gephi Lite. Arthur a consacré une grande partie de son temps avec nous à travailler sur ce sujet. Une excellente occasion pour chacun d’entre nous de pratiquer et d’apprendre.

Comment Gephi Lite est-il utilisé ?

Pour améliorer, il faut savoir ce qui pose problème. Or jusqu’ici, nous ignorions ce que les utilisateurs pensaient de Gephi Lite. À l’origine, nous avions fait certains choix de design par intuition, par conviction. Il nous fallait alors savoir comment ils sont réellement perçus. Nous souhaitions en savoir plus sur les utilisateurs existants (ou potentiels) de Gephi Lite, observer la manière dont ils l’utilisent aux côtés de Gephi, et voir si son interface aide, ou au contraire, pose des difficultés.

Pour ce faire, nous avons organisé une série d’entretiens qualitatifs et de tests sur Gephi Lite. Comme prévu, ceux-ci se sont révélés très instructifs. Grâce à eux, nous avons recueilli des retours sur les problèmes de l’interface et eu l’opportunité de mieux comprendre les besoins et les habitudes de nos interlocuteurs.

Résoudre les principaux problèmes : menus et attributs

Les menus de Gephi Lite se sont avérés très problématiques. La navigation dans la colonne de gauche était difficile. Les icônes de ses onglets n’étaient pas immédiatement compréhensibles. Les fonctionnalités fréquemment utilisées, comme l’apparence, étaient difficiles à trouver ou à atteindre. La colonne de droite était plus claire, mais trop grande et souvent vide, ce qui la rendait encombrante. Globalement, trouver des éléments dans les menus de Gephi Lite était soit difficile, soit un peu long.

Nos tests ont aussi montré que les attributs des nœuds et des liens étaient source de malentendus. Selon leur type (quantitatif ou qualitatif), les attributs n’apparaissaient pas dans certains sélecteurs d’apparence ou de filtres. Cette typologie d’attributs, calculée par des heuristiques et modifiable uniquement dans un panneau appelé « Graphe », n’était pas facile à utiliser.

D’autres problèmes, légèrement moins impactants, ont été abordés, et certains ont été mis de côté pour l’instant. Voici un rapide récapitulatif.

Écouter avant d’avancer

Outre les problèmes existants, les personnes interrogées ont également partagé leurs besoins. Deux d’entre eux ont plus particulièrement été cités :

Le premier concerne le besoin de nouvelles façons d’exporter, par exemple en ayant la possibilité d’inclure la légende avec le graphe. Ce sujet a régulièrement été évoqué dans le cadre d’une discussion plus large sur l’hébergement et la publication web des graphes. Nous avions ces questions en tête au début de cette refonte, mais nous les avons mises de côté pour mieux nous concentrer sur les problèmes d’usage quotidien.

Une demande souvent mentionnée était d’améliorer la lisibilité des données et des attributs. Certains interlocuteurs ont exprimé ce besoin avant même de rencontrer le problème des attributs, lors de leur exploration. Ils voulaient consulter toutes les données pour mieux comprendre le graphe. Le panneau de sélection active qui dévoile les attributs d’un nœud/lien sélectionné était trop limité pour ces usagers.

Beaucoup d’entre eux, ayant déjà utilisé Gephi, ont exprimé leur souhait d’un laboratoire de données. Ils s’attendaient à une table similaire pour faciliter leur navigation dans les données sous-jacentes et ne pas se limiter à la visualisation du graphe. Ils ont également mentionné que le laboratoire de données était utile pour éditer ces données.

Il se trouve que ce sujet est, en fait, lié aux problèmes d’attributs et de menus dont nous avons parlé précédemment. Les attributs étaient difficiles à trouver et semblaient mal placés dans le panneau Graphe. Une table de données permettrait de facilement vérifier les noms et les types d’attributs.

La prochaine étape pour Gephi Lite

En commençant cette itération, nous avions estimé que la construction de nouvelles fonctionnalités dans Gephi Lite n’était pas notre objectif. Cependant, les résultats des entretiens ont montré que nous avions l’opportunité d’améliorer les fonctionnalités existantes tout en les intégrant dans une nouvelle fonctionnalité : une table de données. Cela clarifierait le comportement des attributs, faciliterait l’édition des données et élargirait les possibilités d’exploration.

Nous avons donc décidé de consacrer cette nouvelle itération à deux chantiers principaux. D’abord, améliorer l’ergonomie en repensant l’interface et l’organisation des menus de Gephi Lite. Ensuite, créer un équivalent du laboratoire de données de Gephi dans Gephi Lite : une table pour trier, parcourir et éditer les données.

Une nouvelle navigation pour gagner du temps et… retrouver ses repères !

Nous avons donc réorganisé les menus de Gephi Lite. La colonne de gauche contient désormais moins d’onglets, pour un accès plus facile aux actions essentielles. Ces onglets n’étaient représentés que par une icône, ce qui ajoutait à la confusion. Nous leur avons ajouté un texte, tout en harmonisant leurs icônes, ce qui les rendra plus simples à reconnaître.

Ces onglets sont désormais des menus déroulants, donnant un accès direct à leurs sous-sections, qui sont devenues des panneaux à part entière (ils étaient auparavant cachés dans des onglets). Vous pouvez maintenant accéder à Force Atlas 2 en seulement un clic ! La description synthétique du réseau fait également partie de cette colonne, permettant de comprendre le graphe d’un seul coup d’œil.

La colonne de droite a également changé. Comme elle ne contient plus que la sélection active, elle n’apparaît que si des éléments ont été sélectionnés. Depuis celle-ci, il est toujours possible de consulter les attributs des nœuds et des liens, et dorénavant même dans le cas d’une sélection multiple.

Le laboratoire de données de Gephi Lite

Initialement, la table de données n’était pas prévue pour avoir sa propre page. Elle aurait pu être intégrée dans la colonne de droite, comme une nouvelle façon d’afficher la sélection active. Mais nous avons estimé qu’elle méritait plus d’espace qu’une simple colonne, et nous ne voulions pas non plus qu’elle empiète sur le graphe. Gephi Lite dispose désormais de deux vues distinctes. La première, « Graphe », est dédiée à la visualisation. La seconde, « Data », est la table de données.

Ces deux vues sont deux vues complémentaires, deux angles pour explorer les données. Cette complémentarité est renforcée par le maintient des états de sélection, filtrage, apparence (…) entre elles : les actions effectuées dans une vue restent actives dans l’autre. Comme dans Gephi, vous pouvez passer de l’une à l’autre en utilisant le nouvel en-tête de Gephi Lite, ou à l’aide de boutons spécifiques comme celui dans les panneaux dédiés à la sélection.

Une identité visuelle pour la visualisation

L’identité visuelle de l’interface de Gephi Lite a été conçue pour s’effacer et laisser la visualisation de réseaux s’exprimer : elle est neutre. Neutre dans ses couleurs, qui ne sont pas conçues pour attirer l’œil. Elles se limitent à des nuances de gris et de blancs qui permettent aux graphes, pleins de couleurs, de ressortir comme des feux d’artifice au centre de l’écran.

Les espacements et les tailles ont également été généralement réduits. Cela semblait nécessaire, car de nombreux entretiens ont souligné que les panneaux étaient trop larges, flottants. Les éléments d’interface sont désormais plus condensés, plus minimaux.

La police de caractères de Gephi Lite, Poppins (Indian Type Foundry), prenait aussi un peu trop de place, car elle est surtout adaptée aux titres. Cependant, son style géométrique correspondait bien aux graphes. Pour ne pas perdre cet aspect, nous avons choisi d’utiliser DM Sans, créée par Colophon Foundry (Royaume-Uni). Conçue à partir de la portion latine de Poppins, elle est plus condensée, ce qui correspondait parfaitement à notre intention.

Après le design

Ce nouveau design a été implémenté fin juin 2025. Ici, « implémenter » signifie coder l’interface web, mais aussi organiser un design system pour guider l’intégration web avec des règles de design. Benoît et Arthur ont soigneusement mis en place un ensemble de variables SCSS qui facilite l’utilisation de ces règles dans notre code.

Notre beau grand plan a dû être ajusté ici et là, car l’implémentation réserve toujours des surprises. Travailler tous ensemble dans la même pièce a été très fructueux et agréable.

La nouvelle version de Gephi Lite issue de ce travail a encore besoin de tests et de finitions. Nous utiliserons l’été pour cela. Plus précisément, nous profiterons de l’occasion idéale offerte par la Gephi Week, prévue fin août, pour présenter notre nouvelle version aux participant⋅e⋅s, dont certain⋅e⋅s ont participé à nos entretiens utilisateurs.

Cet événement nous permettra d’établir la dernière liste de modifications à apporter avant la mise en ligne. Attendez-vous donc à ce que la nouvelle version soit publiée au début de l’automne 2025.

Accueillir Arthur a été une excellente expérience pour nous. Arthur est maintenant retourné à l’université pour finaliser son mémoire de master. Nous envisageons de partager notre expérience d’avoir un vrai designer en interne. Restez à l’écoute pour en savoir plus. En attendant, nous (Alexis, Benoît et Paul) tenons à dire un grand et chaleureux MERCI à Arthur pour son aide précieuse et son infatigable gentillesse.