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.
There are only two hard things in computer science. Cache invalidation and naming things.
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:
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.
Alle Artikel der Serie Design Systems 101
- Teil 1: Warum braucht man eine Pattern Library Warum entstehen Inkonsistente UIs, was sind Design Patterns und welche Vorteile bringt ihr Einsatz.
- Teil 2: Auf der Suche nach der perfekten Pattern LibraryDie fünf Iterationen bis zur heutigen OTTO-Pattern-Library und was wir dabei gelernt haben.
- Teil 3: Patterns identifizieren und strukturierenWie man Patterns in seinem Produkt entdeckt und strukturiert.
- Teil 4: Ein flexibles Naming-Schema für PatternsWie man Patterns eindeutige Namen gibt und dabei flexibel auf Veränderungen und Wachstum reagieren kann.
- Teil 5: Anatomie der OTTO-Pattern-LibraryEinblick in Konzept und Funktion der aktuellen Library von OTTO.
- Teil 6: Technische Grundlagen einer Pattern LibraryErscheint Ende 2019
- Teil 7: Prinzipien für den Aufbau und Betrieb einer Pattern Library2020
- Teil 8: Ressourcen, Links und lose Gedanken2020
Wer sich so lange nicht gedulden mag, kann natürlich in den alten Fassungen der Artikel weiter lesen:
cool, danke!
Sehr gute Artikelreihe! Wo bleibt denn Teil 5? :-)
Asche auf mein Haupt, Kevin. Das ist leider in den letzten Monaten total liegen geblieben. Ich versuche mich aber jetzt mal ranzuhalten. :)
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?
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
Ihr habt recht, es wird wirklich Zeit, hier weiter zu kommen. @Korbinian: Hast du zur Überbrückung schon ein paar konkrete Fragen?
Ich würde mich über eine Fortsetzung sehr freuen!
Hallo Wolf,
tolle Serie und super zu lesen, aber wann geht es denn weiter? Bin schon gespannt!
Viele Grüße
Erik
Wirklich sehr interessant! Wie stehen denn die Chancen für die restlichen Teile?
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.
Oh je… das Thema zieht sich irgendwie. Für Alle, die auf eine Fortsetzung warten, gibt es aber schon Mal zwei weitere, lesenswerte Artikel auf produktbezogen:
Let’s Talk Design Patterns – produktbezogen im Gespräch mit Peter Boersma
Wenn Pattern Libraries wachsen – Wie man Verantwortung und Code für Patterns im Unternehmen verteilt
Sehr gut & informativ geschrieben, Wolf. Wäre toll, wenn du die Fortsetzung schaffst! ;)
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!
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.
Tolle Reihe.. bis Teil 4 ;)
Was würde denn ein Reboot rechtfertigen?
Neuer Pattern-Content auf produktbezogen: Let’s Talk Design Patterns – produktbezogen im Gespräch mit Laura Elizabeth.
@Robert: Mittlerweile gibt es diverse Dinge an den Artikeln zu aktualisieren und ich würde auch die Abfolge der Artikel etwas ändern. Darum die Gedanken an einen Reboot.
Hallo,
gibt es mittlerweile ein Reboot? Ich bin sehr neu in dem Thema und mir haben die Artikel viel gebracht, danke dafür.
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
Und los geht es! Der erste Artikel der neuen Serie wurde komplett überarbeitet und heute veröffentlicht: Design Systems 101 – Teil 1: Warum braucht man eine Pattern Library?
Hi Wolf, lesenswert – und auch für nicht UXer verständlich. Vielen Dank, dass du dir auch die Arbeit gemacht hast für den Rebbot!
Trari trara, Teil 5 ist da: Anatomie der OTTO Pattern Library