Card Studio – Design Systeme in der Praxis strukturieren

Design Systeme enthalten – wie ihre Verwandten, die Pattern Libraries – geteilte UI-Komponenten und Design-Prinzipien. Es geht also nicht nur darum, Entwickler_innen eine Anlaufstelle fürs Copy & Paste zu geben. Gute Design Systeme erlauben Menschen aus den verschiedensten Berufskategorien ein gemeinsames Verständnis einer Designsprache zu bekommen.

Deshalb ist es wichtig, beim Start eines neuen Design Systems Benennungen und Kategorien zu finden, die ein gemeinsames Gespräch zwischen Design, Entwicklung und Produktmanagement erlauben. Egal ob das eigene Medium Sketch, HTML oder Excel ist: wenn von einem Akkordeon gesprochen wird, sollten sich alle auf die gleiche Komponente beziehen.

Um in kurzer Zeit zu einem Vokabular zu kommen, das für heterogene Gruppen funktioniert, haben wir zu diesem Zweck den Informationsarchitektur-Klassiker Card Sorting mit der kollaborativen Designmethode Design Studio kombiniert.

Und das Ergebnis konsequenterweise Card Studio getauft.

Card Sorting hilft uns dabei, partizipativ Kategorien zu gestalten. Normalerweise wird dieser Ansatz verwendet, um gut verständliche Navigationsstrukturen zu erhalten: In der geschlossenen Variante etwa schreiben wir Subkategorien auf Post-Its, die wir von Nutzer_innen sortieren lassen. So erhalten wir Gruppierungen, die dem mentalen Modell der Nutzer_innen entsprechen, statt einfach interne Strukturen im Menü zu spiegeln.

Um dem Prozess die nötige Geschwindigkeit zu verleihen, greifen wir auf Design Studio zurück. Dabei geht es darum, in der Gruppe und in wenigen Minuten Entwürfe und Konzepte zu generieren, und dann die besten Vorschläge zu umsetzbaren Designs zusammenzuführen.

Die richtigen Worte finden

Wenn Design Systeme strukturiert werden, ist der erste Impuls oft, Atomic Design zu verwenden. Dieser Ansatz gruppiert alle Komponenten nach Größe zu Atomen, Molekülen und Organismen. Moleküle setzen sich dabei aus Atomen wie Buttons oder Eingabefeldern zusammen und Organismen kombinieren wiederum Moleküle zu komplexeren Strukturen.

Atomic Design

Das klingt im ersten Moment sehr elegant, in der Praxis sind die Grenzen zwischen den Kategorien aber oft schwammig. Außerdem sind die Kategorien so abstrakt gewählt, dass nicht einfach zu entscheiden ist, wo denn nun das Akkordeon hingehört. Mit Kategorien, die mehr über ihren Inhalt aussagen, ist diese Entscheidung einfacher – genau hier setzt Card Studio an.

Schritt 1: Mustererkennung

Für ein erfolgreiches Card Studio braucht man etwa einen halben Tag Zeit, 6 – 15 Menschen, die in verschiedenen Rollen am Produkt arbeiten, und viele Post-Its.

Die Teilnehmer_innen werden in zwei gleich große Gruppen aufgeteilt, um Raum für ein breites Spektrum von Ideen zu schaffen. Wichtig ist dabei, dass die Gruppen in sich gut durchmischt sind: Auch innerhalb jeder Gruppe müssen die Perspektiven und Begriffe von Technik, Design und Produkt zusammentreffen.

Schritt 1: Mustererkennung

Die erste Aufgabe für jede Gruppe ist ein Inventar aller Patterns zu erstellen. Dafür druckt man am besten alle existierenden Screens oder Entwürfe aus. Nathan Curtis schlägt vor, diese Ausdrucke dann in Patterns zu zerschneiden. Wir hängen die Entwürfe lieber an die Wand und bekleben sie dann mit Post-Its, die dem jeweiligen Element einen Namen geben. Egal, welche Variante gewählt wird, die Inventarisierung zwingt die Gruppe, sich Gedanken über die Definition eines Patterns zu machen.

Um dabei Diskussionen über Grenzfälle und Blautöne zu vermeiden, nutzen wir die zeitliche Limitierung aus dem Design Studio und begrenzen diesen Schritt auf 15 Minuten. In dieser Zeit dürfen alle Teilnehmer_innen nach Belieben Patterns finden und markieren. Jedes Team arbeitet dabei an eigenen Ausdrucken.

Schritt 2: Patterns sortieren

Schritt 2: Patterns sortieren

Nachdem alle Patterns identifiziert und betitelt wurden, hat jedes Team 20 Minuten Zeit, seine Post-Its zu diskutieren und auf einem Whiteboard zu gruppieren. Die Gruppen bekommen dann jeweils einen Titel. Dieser Titel – z.B. Formularelemente – ist die Grundlage für die spätere Kategorisierung im Design System.

Schritt 3: Die Strukturen präsentieren

Schritt 3: Die Strukturen präsentieren

Nachdem jedes Team seine eigene Kategorisierung erstellt hat, ist jetzt der Zeitpunkt gekommen, sie dem anderen Team vorzustellen. Dafür hat jedes Team 15 Minuten Zeit. In diesem Schritt gibt es keine Diskussionen, es geht darum die Design-Entscheidungen des jeweils anderen Teams zu verstehen und mit seinen eigenen abzugleichen.

Schritt 4: Ansätze vereinen

Nachdem alle Kategorisierungen und Pattern-Definitionen im Raum stehen, folgt der komplexeste Schritt: Zu einer Lösung zu kommen, mit der alle leben und arbeiten können. Dazu finden die beiden Teams zusammen und haben 40 Minuten Zeit, ihre Entwürfe zu vereinen. Das klingt erstmal nach viel Zeit für eine Design-Studio-Iteration, aber hier braucht es Raum, um grundsätzliche Entscheidungen zu diskutieren.

Nach insgesamt weniger als zwei Stunden hat das Team dann nicht nur einen gemeinsamen Wortschatz für ihr Design System und die darin verwendeten Patterns, noch wichtiger ist, dass sich alle im Team mit der Frage auseinandergesetzt haben, was Patterns sind und wie sie in einem großen Ganzen zusammenhängen. So ist es viel wahrscheinlicher, dass das neue Design System in Zukunft auch akzeptiert wird und länger haltbar bleibt.

Schritt 4: Ansätze vereinen

Sprache lebt

Eine gemeinsame Sprache quer durch ein Produkt vermindert in Umsetzungsprozessen Reibungsverluste: Was in der Konzeption geplant wird, kommt so wesentlich leichter auch im Endprodukt an. Noch mehr Reibung nimmt man dem Prozess natürlich, wenn die Entwicklung auch bei der Konzeption schon mit dabei ist und bestehende Patterns nutzt, um schon früh zu prototypen.

Sprache ist allerdings nichts Statisches. Wenn sie genutzt wird, verändert sie sich auch. Ein Design System als gemeinsame Sprache muss deshalb gepflegt werden, damit es auch langfristig nützlich bleibt. Wenn Kategorien etwa beginnen unkontrolliert zu wachsen, werden sie schnell unübersichtlich.

Dann ist es an der Zeit zu überprüfen, ob möglicherweise die Definition der Patterns zu offen ist: Wenn zu viele Varianten und Komponenten, die nur einmaligen Nutzen haben, im Design System aufgenommen werden, muss die Pattern-Definition enger ausgelegt werden. Sonst geht die Übersicht und damit der Konsistenzgewinn durch das Design System verloren, weil sich zu einer Design-Frage nicht länger eine eindeutige Antwort findet.

Wächst eine Kategorie trotz passender Pattern-Definition weiterhin, muss die Kategorisierung an sich hinterfragt werden. Besonders Kategorien wie Sonstiges, die eigentlich unkategorisierbare Reste aufnehmen sollen, neigen zu unkontrolliertem Wachstum, wenn die restlichen Kategorien nicht wie geplant greifen.

Dafür eignet sich eine erneute kurze Runde Card Studio, um bestehende Kategorien aufzusplitten oder die Gesamtstruktur den neuen Gegebenheiten anzupassen. Wichtig ist immer im Blick zu behalten, dass ein Design System für alle nützlich bleibt. Dann kann es zum Knotenpunkt für Design-Fragen und damit eine gemeinsame Sprache werden.

Copy & Paste von Code-Snippets schließt das natürlich nicht aus.

Dieser Artikel basiert auf einem Vortrag, den Thomas Piribauer und Björn Ganslandt im April 2017 bei der Mind the Product Engage in Hamburg gehalten haben.

Über Thomas Piribauer

Thomas ist Mitgründer und Managing Director von intuio. Am liebsten und schon seit mehr als 20 Jahren denkt, konzipiert und entwickelt er interaktive Lösungen, die gut funktionieren und noch besser bedienbar sind.

Über Björn Ganslandt

Björn ist freier Frontend-Entwickler in Wien. Neben CSS interessiert er sich aber auch für Typografie, User Experience und alles was digitale Produkte sonst noch besser macht. Früher war er bei Peek & Cloppenburg für Usability und Conversion verantwortlich und hat das Kleinzeigensystem der Expat-Community »Just Landed« mit konzipiert.

2 Kommentare

  1. Sarah

    Danke für den hilfreichen Artikel.
    Wie geht ihr dabei mit verschiedenen Pattern für dasselbe Designproblem bzw. verschiedenen visuellen Gestaltungen um? Wird das im Rahmen des Workshops geklärt oder davor?


  2. Björn Ganslandt

    Hallo Sarah!

    Im Rahmen des Workshops werden verschiedene Ausprägungen einer Komponente unter einem Namen zusammengefasst. Wie die im Detail aussieht, und ob es vielleicht doch Varianten des Patterns braucht, wird dann im Anschluss geklärt.


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Mit Absenden des Kommentars stimmst Du der Speicherung deiner persönlichen Daten (Name, eMail-Adresse, Webseite und Nachricht) durch uns bis auf Widerruf zu. Zur Vermeidung von Spam und zur rechtlichen Absicherung wird deine IP für 2 Monate gespeichert. Ebenfalls zur Vermeidung von Spam werden diese Daten einmalig an Server der Firma Automattic inc. geschickt. Zur Darstellung eines Nutzerbildes wird die eMail-Adresse im pseudonymisierter Form an Automattic inc. übermittelt. Wenn du einen oder beide Haken für die eMail-Benachrichtigungen setzt, wird deine eMail-Adresse bei Automattic inc. gespeichert. (Datenschutzerklärung)

Du hast noch viel mehr zu erzählen?

Dann schreib doch einen eigenen Artikel auf produktbezogen.

Artikel vorschlagen →