Améliorer l’UI/UX de l’extension Snyk pour VS Code

Chez Snyk, j’ai eu la chance de travailler sur des projets variés et d’aider de nombreuses équipes dans leurs tâches de conception. Et j’adore ça. La diversité des projets fait partie de mon ADN, car mes expériences professionnelles précédentes suivaient le même schéma. À mes débuts chez Snyk, l’un de ces projets portait sur l’expérience des développeurs : concevoir les interfaces IDE de Snyk pour VS Code, les IDE JetBrains et Visual Studio.

Notre objectif était de veiller à ce que les résultats de sécurité de Snyk s’affichent correctement et soient mis en évidence dans l’interface de l’IDE. Mais je voulais aussi créer un design agréable et permettre aux développeurs d’accéder facilement aux informations essentielles sur la sécurité de leurs applications.

Au fil du développement des premières versions de notre extension, nous avons rencontré de nombreux obstacles. Par exemple, les éditeurs d’IDE ont chacun leurs propres recommandations de conception d’interface, qui n’étaient pas toujours claires ni bien documentées. Du côté de Snyk, un même plug-in présente de nombreux types de résultats de sécurité, auxquels s’ajoute un nombre croissant de fonctionnalités destinées aux développeurs que nous souhaitons intégrer. Peu à peu, nous avons accumulé une dette de développement dans différents domaines : l’ergonomie, les données sur les vulnérabilités, la mise en page et le design.

Aujourd’hui, le paysage du développement pour VS Code a changé : les recommandations de conception sont excellentes et les ressources utiles abondent, sans parler de l’expérience d’apprentissage offerte par ChatGPT. Je suis également plus à l’aise avec le développement d’extensions pour VS Code et j’ai décidé de corriger plusieurs problèmes de notre extension à partir des retours de nos clients, ainsi que de notre propre utilisation interne de ces outils : 

• Les vulnérabilités de Snyk Code n’avaient pas de titre adapté (cohérence de la nomenclature et charge cognitive)

• Mise en page et données sur les vulnérabilités incohérentes (charge cognitive)

• Manque d’adaptation au thème actuel de l’IDE (bruit visuel)

• Manque d’éléments d’interface agréables 

Voici comment j’ai abordé ces problèmes en tant que designer produit chez Snyk.

Espacement et hiérarchie visuelle

L’espace est l’un des éléments de design les plus sous-estimés. Il peut transformer des mises en page chaotiques en interfaces bien organisées et faciles à utiliser. Un alignement soigné de tous les éléments de l’interface offre une structure plus lisible et claire pour présenter les informations sur les vulnérabilités. Nous avons défini une unité de base de 8px pour l’espacement et appliqué différents multiplicateurs en fonction du contenu.

Des produits Snyk différents, une mise en page commune

Nous voulions également corriger les incohérences de mise en page entre les panneaux Snyk Open Source et Snyk Code, ainsi que les différences dans la présentation de ces données dans les autres interfaces de Snyk. Pour y remédier, nous avons enrichi les détails de Snyk Code avec des informations supplémentaires et créé une section d’en-tête similaire, désormais commune à plusieurs environnements : l’application web, l’IDE et la CLI.

Réduire le code personnalisé

Pour garantir un affichage optimal de l’extension, quel que soit le thème de l’IDE (sombre ou clair), nous avons supprimé de nombreuses couleurs codées en dur et utilisé à la place les couleurs intégrées. Par exemple, les marqueurs dans la description de Snyk Code avaient initialement des couleurs codées en dur différentes selon la gravité de la vulnérabilité, conformément aux recommandations de design de Snyk pour notre propre interface. Toutefois, dans un IDE où le choix du thème relève d’une préférence personnelle importante, ces couleurs ne fournissaient pas toujours les bons repères visuels. Les marqueurs affichés utilisent désormais la variable de couleur CSS et respectent les personnalisations du thème : 

color: var(--vscode-textLink-foreground)

Ainsi, l’extension s’intègre harmonieusement, quel que soit le thème choisi.

Respecter le système de design de VS Code

Les données sur les vulnérabilités sont complexes. Elles se présentent sous différentes formes : texte, extraits de code, listes, tableaux et autres éléments. Certains éléments étaient directement accessibles dans le code, tandis que d’autres étaient intégrés sans que nous puissions les contrôler directement.

Compte tenu de ces contraintes, nous avons conçu l’interface pour qu’elle reprenne l’esthétique de l’IDE. La typographie respecte le style de VS Code ; les boutons utilisent les mêmes icônes filaires et les mêmes effets au survol. Ces changements réduiront la charge cognitive et donneront à notre extension une apparence familière.

Les dernières petites retouches

Pour harmoniser l’ensemble et peaufiner encore l’apparence de l’extension, nous avons ajouté l’icône de notre produit à chaque panneau personnalisé. Cela permet non seulement de faire ressortir le design global, mais aussi de donner une identité visuelle à l’extension. 

Nous voulons vous offrir une expérience fluide pour renforcer la sécurité de votre code. Nous espérons que ces changements vous plairont et que vous continuerez à nous faire part de vos commentaires et suggestions.