Die UI/UX der Snyk VS Code-Erweiterung verbessern

Bei Snyk hatte ich das Glück, an verschiedenen Projekten mitzuarbeiten und zahlreiche Teams bei Designaufgaben zu unterstützen – und ich liebe es. Die Vielfalt der Projekte liegt mir im Blut, denn auch meine früheren beruflichen Stationen waren ähnlich abwechslungsreich. In meiner Anfangszeit bei Snyk drehte sich eines dieser Projekte um die Developer Experience: das Design der Snyk IDE-Oberflächen für VS Code, JetBrains IDEs und Visual Studio.

Unser Ziel war es, sicherzustellen, dass die Snyk-Sicherheitsergebnisse in der IDE-Benutzeroberfläche korrekt angezeigt und hervorgehoben werden. Zugleich wollte ich ein ansprechendes Design schaffen und Entwicklerinnen und Entwicklern wichtige Informationen zur Anwendungssicherheit leicht zugänglich machen.

Als wir mit den ersten Versionen unserer Erweiterung vorankamen, stießen wir unterwegs auf zahlreiche Hindernisse. So hat jeder IDE-Anbieter eigene Richtlinien für das UI-Design, die aber nicht immer klar oder gut dokumentiert waren. Aufseiten von Snyk gibt es ein Plugin, das viele verschiedene Arten von Sicherheitsergebnissen anzeigt. Dazu kommt eine wachsende Zahl entwicklerorientierter Funktionen, die wir integrieren möchten. So häuften sich nach und nach technische Schulden in verschiedenen Bereichen an: Benutzerfreundlichkeit, Schwachstellendaten, Layout und Design.

Heute sieht die Entwicklungslandschaft rund um VS Code anders aus: Es gibt hervorragende Designrichtlinien und hilfreiche Ressourcen – ganz zu schweigen von den Möglichkeiten, die ChatGPT zum Lernen bietet. Außerdem bin ich inzwischen mit der Entwicklung von VS Code-Erweiterungen vertrauter und beschloss, verschiedene Probleme unserer Erweiterung zu beheben. Dabei berücksichtigte ich das Feedback unserer Kundinnen und Kunden sowie unsere eigene interne Nutzung dieser Tools: 

• Schwachstellen in Snyk Code hatten keinen passenden Titel (einheitliche Benennung und kognitive Belastung)

• Uneinheitliches Layout und uneinheitliche Schwachstellendaten (kognitive Belastung)

• Keine Anpassung an das aktuelle IDE-Design (visuelle Unruhe)

• Zu wenig Freude an der Benutzeroberfläche 

So bin ich als Produktdesigner bei Snyk diese Probleme angegangen.

Abstände und visuelle Hierarchie

Eines der am häufigsten unterschätzten Designelemente ist Freiraum. Er kann chaotische Layouts in übersichtliche, leicht bedienbare Oberflächen verwandeln. Wenn alle Elemente der Benutzeroberfläche richtig ausgerichtet sind, lassen sich unsere Schwachstelleninformationen besser lesen und klarer strukturieren. Wir haben eine Basiseinheit von 8 px für Abstände festgelegt und je nach Inhalt mit unterschiedlichen Multiplikatoren gearbeitet.

Verschiedene Snyk-Produkte, einheitliches Layout

Ein weiterer Punkt, den wir verbessern wollten, waren die Layout-Unterschiede zwischen den Bereichen Snyk Open Source und Snyk Code sowie die abweichende Darstellung dieser Daten in anderen Snyk-Oberflächen. Um diese Unterschiede auszugleichen, haben wir die Details zu Snyk Code um zusätzliche Informationen ergänzt und einen ähnlichen Header-Bereich erstellt, der nun in mehreren Umgebungen einheitlich ist: Web-App, IDE und CLI.

Weniger benutzerdefinierter Code

Damit die IDE-Erweiterung unabhängig vom verwendeten IDE-Design (dunkel oder hell) gut dargestellt wird, haben wir viele fest codierte Farben entfernt und stattdessen Standardfarben verwendet. So hatten beispielsweise die Marker in einer Beschreibung von Snyk Code zunächst je nach Schweregrad der Schwachstelle unterschiedliche, fest codierte Farben. Diese entsprachen zwar den Designrichtlinien von Snyk für die eigene Benutzeroberfläche. In einer IDE, in der das Design eine wichtige Frage persönlicher Vorlieben ist, vermittelten diese Farben jedoch nicht immer die passenden visuellen Hinweise. Stattdessen verwenden die dargestellten Marker jetzt die CSS-Farbvariable und übernehmen die Anpassungen des jeweiligen Designs: 

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

So fügt sich die Erweiterung unabhängig vom bevorzugten Design nahtlos ein.

Anpassung an das VS Code-Designsystem

Die Schwachstellendaten sind komplex. Sie umfassen verschiedene Formen: Textinhalte, Codeausschnitte, Listen, Tabellen und andere Elemente. Auf manche Elemente konnten wir direkt im Code zugreifen, während andere ohne direkte Kontrolle übernommen wurden.

Unter Berücksichtigung dieser Einschränkungen haben wir die Benutzeroberfläche so gestaltet, dass sie zur Ästhetik der IDE passt. Die Typografie orientiert sich am Stil von VS Code; die Schaltflächen verwenden dieselben Outline-Symbole und Hover-Effekte. Diese Änderungen verringern die kognitive Belastung und sorgen dafür, dass Ihnen unsere Erweiterung vertraut vorkommt.

Der letzte Feinschliff

Um alles abzurunden und das Erscheinungsbild der Erweiterung weiter zu verfeinern, haben wir jedem benutzerdefinierten Bereich unser Produktsymbol hinzugefügt. Dadurch hebt sich nicht nur das Gesamtdesign besser ab, sondern die Erweiterung erhält auch eine eigene visuelle Identität. 

Unser Ziel ist es, Ihnen ein nahtloses Erlebnis zu bieten, mit dem Sie die Sicherheit Ihres Codes verbessern können. Wir hoffen, dass Ihnen die Änderungen gefallen. Teilen Sie uns auch weiterhin Ihr Feedback und Ihre Vorschläge mit.