Designsysteme: Zusammenarbeit mit Entwicklern

Im vorherigen Artikelhaben wir gesehen, warum es wichtig ist, die Entwickler nicht zu vernachlässigen, sondern sie im Gegenteil mit der Erstellung Ihres Designsystems in Verbindung zu bringen. Jetzt ist es Zeit zu sehen, wie!

Wenn Sie tiefer graben möchten, können Sie auch den Artikel von Leslie Pochat lesen:
Das Designsystem in 10 Schritten !

Schritt Nr. 1: Co-Design

Co-Design ist ein Ansatz, der es dem Endbenutzer ermöglicht, an der Reflexion und Entwicklung einer Dienstleistung oder eines Produkts beteiligt zu sein.
Dieser Ansatz kann häufig von Entwicklern verwendet werden, da sie die Benutzer Ihres Designsystems sind.

Sie könnten von ihren Ideen überrascht sein.

Schritt Nr. 2: Dokumentation

Ein Designsystem, das ohne ordnungsgemäße Dokumentation erstellt wurde wird nicht überleben. So einfach ist das. Wenn Sie keine Dokumentation haben oder diese nur schwer zu verwenden oder zugänglich ist, laufen Sie Gefahr, dass das Entwicklungsteam das Einfachste wählt … und auf Ihre Arbeit verzichtet.

Um erfolgreich zu sein, muss eine gute Dokumentation meiner Meinung nach folgende Anforderungen erfüllen:

1. Leicht zugänglich sein

Es ist ganz einfach, aber geben Sie Ihrem Designsystem einen Namen und erstellen Sie eine Webadresse (leicht zu merken). Dies wird einen Sammelpunkt bieten und das Projekt greifbarer machen. Vermeiden Sie übrigens nach Möglichkeit die Software, die der Entwickler installieren muss, dies würde einen unnötigen Reibungspunkt erzeugen, insbesondere wenn es um Beratung geht.
Schließlich strukturieren Sie Ihre Seite so fein wie möglich nach Ihren Bedürfnissen. Meistens hat die Dokumentation die folgende Form: * Allgemeine Richtlinien (Farben, Schriftarten, Metriken usw.) * Komponenten * Ressourcen (Illustrationen, grafische Charta, Logo usw.)

Sie können Ihre Dokumentation aber auch nach Verwendung, Geschäft usw. strukturieren. Es liegt an Ihnen, nach den Problemen des Unternehmens und seiner internen Organisation zu sehen.

2. Seien Sie einfach zu bedienen

Geben Sie direkten Zugriff auf den ausnutzbaren Code, das Bild und die Regeln und Verbote der Verwendung jeder Komponente. Wenn Sie nicht für die Integration zuständig sind, arbeiten Sie eng mit Integratoren zusammen, um Aktualisierungen so reibungslos und schnell wie möglich zu gestalten.

3. Sonderfälle verwalten

Verwalten Sie alle Sonderfälle, insbesondere für Ihre kleinsten Komponenten (und daher oft die am häufigsten verwendeten) wie Schaltflächen, Links, Popups, Titel oder Menüs ... Geben Sie deutlich das erwartete Verhalten und die zu befolgenden Regeln an. Verwalten Sie sie ab der ersten Bereitstellung und nicht später. Dies sind die Fälle, die den Entwickler dazu bringen, sich von Ihrem Design zu lösen.

4. Präsentieren Sie Beispiele und Szenarien

Wenn Sie dem Entwickler mehr Freiheit lassen und ihm erlauben möchten, die Bildschirme selbst aus Ihrem Designsystem zusammenzustellen, vergessen Sie nicht, viele praktische Beispiele und Szenarien bereitzustellen. Wie zum Beispiel: Formulare, Aktionsleisten, Expanding-Panels, Pop-ups, Seitenübergänge, Laden von Daten usw.

5. Fördern Sie schnelle Rücksendungen

Ihre Dokumentation wird so perfekt wie möglich sein, aber vergessen Sie nicht, den Entwicklern eine Möglichkeit zu bieten, sich schnell mit Ihnen auszutauschen, um kleine Missverständnisse auszuräumen.

6. Informieren Sie schnell und übersichtlich über die vorgenommenen Änderungen und deren mögliche Auswirkungen

Einer der Vorteile des Designsystems besteht darin, ein Element schnell und global ändern zu können. Es ist auch ein Risiko, weil die kleinste Änderung große Auswirkungen haben kann (z. B. eine Änderung der Schriftgröße). Benachrichtigen Sie Ihre Benutzer über alle Änderungen, ob allgemein oder auf eine einzelne Komponente beschränkt. Und vergessen Sie nicht, die möglichen Auswirkungen aufzulisten.

Schritt Nr. 3: Bleiben Sie informiert

Täglich, am Ende von Sprints oder sogar an der Kaffeemaschine, es gibt viele Möglichkeiten, Sie über die Probleme von Entwicklern auf dem Laufenden zu halten. Vernachlässigen Sie diese Momente nicht, denn hier erhalten Sie die besten Rückmeldungen und Informationen zu den aufgetretenen Problemen.

Schritt #4: Validierung

Um zu messen, ob Ihr Design von den Benutzern verstanden wird, ob es gefällt, kurz gesagt, ob es funktioniert, gibt es eine ganze Reihe von Diensten zum Messen, Quantifizieren, Verfolgen und Warnen. Und um zu beurteilen, ob Ihr Design von den Entwicklern richtig eingesetzt wird? Es ist komplizierter.
Aber es gibt immer noch Tools, die Sie bei Ihrer Aufgabe unterstützen.

Ein paar unter anderem: Pastell Spielzeugbox CSSPeeper Einwandfreie App

Schritt Nr. 5: Das Design-Review-Meeting

Ihr Designsystem beginnt sich zu drehen? Es ist ein guter Zeitpunkt, um Design Review Meetings zu vereinbaren! Das Prinzip ? Legen Sie einen Moment fest, der die Sprints unterbricht, um die bereits entwickelten Screens zu validieren, aber auch um die Probleme in den in der Entwicklung befindlichen Screens zu identifizieren. Indem Sie diese Momente des Teilens formalisieren, gewöhnen Sie jedes Team daran, die Probleme des anderen zu diskutieren, und die Entwickler daran, ihr kritisches Auge auf Ergonomie und die Einhaltung Ihrer Richtlinien zu richten.

Um weiter zur QA für das Design zu gehen: Das „Design Review“ zwischen Designern & Entwicklern

Hugo, UX-Designer @UX-Republic