Design Systems 101 – Teil 4: Ein flexibles Naming-Schema für Patterns

Neben vielen weiteren Vorteilen sollen Pattern Libraries und Design Systeme für ein gemeinsames Verständnis und effiziente Kommunikation zwischen Designern, Entwicklern, Produktmanagern und allen anderen Beteiligten der Produktentwicklung sorgen. Um dieses zu erreichen, bedarf es aber eines eindeutigen Schemas zur Bezeichnung der Patterns. Spricht man zum Beispiel von einem „Button“ ist nicht unmissverständlich klar, ob ein Button im allgemeinen oder exakt eines der definierten Button-Patterns gemeint ist (und wenn ja, welches).

Nachdem wir im letzten Teil der Serie gelernt haben, wie sich Patterns für den Aufbau einer Library identifizieren und strukturieren lassen, will ich als nächsten Schritt unseren Weg zu einem eindeutigen und sehr flexiblen Naming Schema für OTTOs Design Patterns aufzeigen.

Deskriptive vs. semantische Pattern-Namen

Wir Menschen sind visuelle Wesen und bei der Suche nach Namen für Design Patterns liegt es nahe, diese nach ihrem Aussehen benennen, zum Beispiel so:

Im Prinzip keine schlechte Idee, jeder wird bei „Blue Gradient Button“ an das blaue Button-Pattern mit Farbverlauf denken. Alles gut. Was ist aber, wenn es ein Redesign des Produkts gibt? Wenn plötzlich Rot die neue Akzentfarbe wird und visuelle Effekte zu Gunsten eines zeitgenössischen Flat Designs aufgegeben werden?

Mit flexibel programmierten Patterns lassen sich solche Änderungen schnell realisieren. Aber auf einmal steht man mit einem Haufen Patterns da, die entweder sinnlose Namen haben, oder allesamt umbenannt werden müssen, was jede Menge Mehrarbeit im Produkt-Code, in der Pattern Library und in allen Dokumentationen bedeutet. Von der Umgewöhnung der Pattern-Nutzer ganz zu schweigen.

Um größtmögliche Flexibilität und Robustheit der Patterns zu gewährleisten, sollten daher alle Patterns semantische Namen haben, die auf ihrer Funktion beruhen.

Beispiele für semantische Namen sind Primary Button, Slider, Copy, Headline. Auf deskriptive Namen (Shiny Button, Big Button, Red Headline) sollte verzichtet werden. Naheliegend aber ebenso ungeeignet sind Namen, die sich auf den Kontext oder den Einsatzort des Patterns beziehen (Button Footer, Sidebar Navigation) und die so einen Einsatz des Patterns an anderen Orten verhindern. Mit semantischen Bezeichnungen hingegen können Patterns auch nach ausgiebigen Redesigns stets ihre Namen behalten.

Kennzeichnung von Varianten

Die wenigsten Produkte kommen mit einer Handvoll Patterns aus, sondern haben nicht nur zahlreiche Patterns sondern auch Untervarianten von diesen Patterns. So gibt es Buttons oft in unterschiedlichen Größen oder Farben. Zusätzlich zu semantischen Namen brauchen Patterns also eine klare Kennzeichnung von Pattern-Varianten.

Bei unseren ersten Gehversuchen mit Design-Patterns waren wir versucht, dafür T-Shirt-Größen zu nutzen. Schließlich ist OTTO ein Unternehmen, was sein Geld hauptsächlich mit Mode macht.

Für weniger komplexe Projekte hätte eine solche Kennzeichnung von Varianten vollkommen ausgereicht. Wir mussten aber schnell feststellen, dass dieses System nicht flexibel genug war, um zusätzliche Varianten einzuführen.

Zwar lassen sich relativ gut kleinere und größere Varianten anhängen…

…sobald man aber eine neue Variante zwischen bestehenden Varianten einfügen muss, offenbart sich die Schwäche des Schemas:

Stilblüten wie „Extra-Medium“ oder „Small-Large“ wollten wir natürlich tunlichst vermeiden. Auf der Suche nach besseren Möglichkeiten, sind wir dann über Amerikanische Hausnummern gestolpert:

Bild von Margaret Almon (Lizenz: CC BY-NC-ND 2.0)

Wer schon mal in den USA war, wird sich vielleicht über die irre hohen Hausnummern gewundert haben, die in der Regel die Anzahl der Häuser in der Straße weit überschreiten. Der angebliche Wahnsinn hat aber Methode: Mit jedem Häuserblock steigen die Hausnummern um 100.

Das ist zum einen eine hervorragende Hilfe beim Navigieren (wenn ich vor Nummer 567 stehe und zu 815 will, weiß ich, dass es noch drei Blocks sind) zum anderen bleibt so stets genügend Freiraum zum Einfügen weiterer Hausnummern. Auf die in Deutschland angewendete Notlösung 3a, 3b, 3c kann man in den USA verzichten.

Inspiriert von diesem System haben wir unsere Pattern-Varianten mit Nummern versehen. Dreh- und Angelpunkt unserer „City Block Sizes” ist dabei die „100“, die die Standardvariante des jeweiligen Patterns kennzeichnet. Kleinere bzw. schwächere Varianten bekommen die Kennzeichnung „75“, „50“, „25“ usw., größere die „200“, „300“, „400“. Diese Art der Kennzeichnung erlaubt es uns, an beliebigen Stellen Zwischengrößen einzuführen:

Das System hilft zusätzlich, schnell die jeweilige Standardvariante zu identifizieren oder festzustellen, ob ein Pattern kleiner oder größer als die Standardvariante ist. Um auch hier nicht in der deskriptiven Falle zu landen, müssen die Zahlenverhältnisse nicht 1:1 den Größenverhältnissen entsprechen: Ein Button 200 ist also nicht zwingend doppelt so groß wie ein Button 100. Die Zahlen geben allenfalls einen groben Richtwert.

Wir fügen die 100 auch an Patterns an, die keine Varianten haben. Zum einen müssen wir so bei der späteren Einführung von Varianten das Ursprungspattern nicht umbenennen und zum anderen entstehen so für jedes Pattern wirklich eindeutige Namen: Wie bereits in der Einleitung angemerkt, ist die Bezeichnung „Button“ missverständlich – „Button 100“ ist hingegen sehr eindeutig.

Mehrdimensionale Varianten

Das City-Block-System stößt allerdings an seine Grenzen, wenn man Patterns hat, die Varianten in zwei oder mehr Dimensionen (z.B. Größe und Farbe) haben. Versucht man mehrere Dimensionen linear abzubilden, wird das Pattern schnell unübersichtlich und in der Benutzung unintuitiv:

Analog zu den CSS-Klassen in der Frontend-Entwicklung bilden wir daher zweidimensionale Patterns auch mit einem zweidimensionalen Naming ab. Zusätzlich zur Zahl, kommt ein weiterer (semantischer) Parameter hinzu:

Die totale Flexibilität beim Benennen der Patterns soll allerdings nicht bedeuten, dass jede Kombination aus Varianten-Parametern auch verfügbar ist. Zum Beispiel ist bei OTTO die Copy Thin erst ab einer gewissen Mindest-Schriftgröße erlaubt, ein Pattern „Copy 100 Copy Thin“ ist nicht zulässig.  Hier liegt es bei den Verantwortlichen des Patterns bzw. der Pattern Library, klar zu dokumentieren, welche Kombinationen erlaubt sind und welche nicht.

Das fertige Naming Schema

Fasst man alles zusammen, ergibt sich für unsere Patterns das folgende Schema:

[Semantischer Pattern-Name] + [City-Block-Size]
(+ [Zweite Dimension] )

Dank dieses Systems haben wir einen klaren Überblick über unsere Patterns und ihre Varianten und eine gemeinsame Sprache mit allen Beteiligten der Produktentwicklung:

Das System funktioniert so gut, dass wir es auch auf andere Elemente anwenden, wie zum Beispiel die SASS-Variablen unserer Farben…

…oder für Animationen:

Wie geht es weiter?

Nachdem wir nun Patterns gefunden, strukturiert und benannt haben, ist es Zeit für einen tieferen Einblick, wie sich all die Erkenntnisse aus den letzten Teilen in OTTOs aktueller Pattern Library auswirken.

Um nach vier Pattern-Artikeln am Stück auch anderen Themen Luft zu geben und um Zeit für die ganzen DSGVO-Anpassungen an unserem Blog zu haben, erscheint Teil 5 erst Mitte Juni.

Alle Artikel der Serie Design Systems 101

 

Wer sich nicht gedulden mag, kann natürlich in den alten Fassungen der Artikel weiter lesen:

 

Über Wolf Brüning

Wolf arbeitet als Executive UX Designer in der Abteilung User Experience der OTTO GmbH & Co KG und kümmert sich hier mit seinen Kollegen um Konzeption und Interaktionsdesign der vollständig inhouse entwickelten eCommerce-Plattform des Konzerns.

19 Kommentare

  1. Wolf Brüning Artikelautor

    Asche auf mein Haupt, Kevin. Das ist leider in den letzten Monaten total liegen geblieben. Ich versuche mich aber jetzt mal ranzuhalten. :)

  2. Anna

    Du spricht mir aus der Seele. Mir haben die ersten 4 Artikel dieser Serie sehr gut gefallen und ich kann es kaum erwarten die nächsten 3 zu lesen. Sind die schon in Arbeit?

  3. Korbinian

    Hallo Wolf,

    finde/fand die Artikelreihe sehr interessant! Hab den Link von der Agentur bekommen, die unsere neue Website umsetzt. Mich würde die Thematik des fünften Teils auch sehr interessieren. Ist denn schon abzusehen, wann der nächste Teil erscheint oder hast du alternativ empfehlenswerte Artikel zu dem Thema parat?

    Viele Grüße
    Korbinian

  4. Erik

    Hallo Wolf,
    tolle Serie und super zu lesen, aber wann geht es denn weiter? Bin schon gespannt!

    Viele Grüße
    Erik

  5. Wolf Brüning Artikelautor

    Ich hoffe, dass ich in diesem Jahr noch dazu komme. In Bezug auf Pattern Libraries kommt aber auf jeden Fall MItte Oktober ein neuer Artikel, der zwar nicht Teil dieser Serie ist, aber auch sehr, sehr spannend ist.

  6. Arne

    Sehr gut & informativ geschrieben, Wolf. Wäre toll, wenn du die Fortsetzung schaffst! ;)

  7. Spassbremse

    Sehr cooler Artikel! Gleich allen Designern weitergeleitet! ;)
    Ich warte natürlich auch schon auf die weiteren Teile, wie die anderen ;)

    Bezgl. Naming und diesen amerikanischen Hausnummern – sehr kreativ :) …aber da finde ich eben auch, dass man dann zu fest auf dieses descriptive reinfällt – trotzdem.

    Beispiel:
    Button100 und Button200.
    Kunde oder sonst eine andere Spassbremse: „Ich will, dass jeder Button200 kleiner ist als Button100… “ …“Wieso das denn, macht Usability doch null Sinn???“ …“Ich habe eine Machtposition und den ganzen Tag nichts zu tun…ich will das das jetzt so!!“

    Was macht ihr dann in einer solchen Situation? Ist mir klar, dass das evtl. gar nie passieren wird…aber meistens eben genau dann – nicht wahr? ;)

    Ich habe versucht, das ganze etwas noch abstrakter zu lösen. Anfangs war ich mit —primary, –secondary usw. ziemlich zufrieden – doch irgendwie nach –secondary fing es an zu nerven… –thirdary? …–quarternay? Ehm?

    Für mich persönlich sind hier griechsiche Buchstaben angenehmer: –alpha, –beta, –gamma, –delta usw. Wenn ich das Gefühl habe, dass ich hier eine weitere Dimension brauche, dann hier doch mit primary, secondary usw. weil ich hier dann nie über secondary kam (bis jetzt). Deine Projekte sind aber vielleicht auch um einiges komplexer.

    Was aber bei dieser abstrakten Variante nervt ist, dass man beim Coden (zumindest am Anfang eines Projekts), nie genau weiss, was jetzt –alpha, oder –beta usw ist…weil eben abstrakt.

    Soll keine Kritik sein…nur anders halt! :)
    Wie gesagt – sehr cooler Artikel. Ich bin wirklich auch auf die anderen Teile gespannt!

    Danke!

  8. Wolf Brüning Artikelautor

    Moin und danke für das Teilen deiner Erfahrungen. Das ist nochmal eine spannende alternative Perspektive.

    Was den Konflikt mit anderen Kunden oder Spaßbremsen angeht: Ich glaube nicht, dass das so oft auftreten wird. Wie die Patterns heißen ist ja sehr Spielwiese von UX/Design und Entwicklern und für alle anderen gar nicht so relevant. Die sparen sich dann lieber ihre Energie für Konflikte an anderen Stellen. Insbesondere, wenn man eine klare Logik im Naming darlegen kann.

    Ich mach mir gerade Gedanken, ob ich diese Serie fortsetze, so wie sie ist. Oder ob ich nicht gleich ein Reboot der kompletten Serie mache. In Sachen Pattern Libraries und Design Systems hat sich ja einiges getan in den letzten Jahren.

  9. Ufuk A.

    Hallo,

    gibt es mittlerweile ein Reboot? Ich bin sehr neu in dem Thema und mir haben die Artikel viel gebracht, danke dafür.

  10. Wolf Brüning Artikelautor

    Hallo Ufuk,
    tatsächlich arbeite ich genau jetzt dran. Ende des Monats wird die OTTO-Pattern-Library 5 Jahre alt und das Jubiläum nutze ich zum Neustart der Serie :)
    Freut mich, dass dir die Artikel bisher viel gebracht haben.
    Grüße, Wolf

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)