Bauanleitung für eine Pattern Library – Teil 4: Ein flexibles Naming Schema für Patterns

Neben vielen weiteren Vorteilen können Design Patterns 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).

Nachfolgend will ich daher 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, im Extremfall zum Beispiel so:

Button mit deskriptivem Namen

Im Prinzip keine schlechte Idee, jeder wird bei „Shiny Blue Button“ an das blaue Button-Pattern mit Glanzeffekt 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?

Redesign mit deskriptiven Namen

Mit unseren flexiblen 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.

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 (z.B. 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.

Naming Schema Varianten

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…

Naming Schema Varianten

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

Naming Schema Varianten

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:

Mosaic House Number 1441 by Nutmeg Designs

Foto: Margaret Almon (Creative Commons 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.

Straßenkarte Ann Arbor, MI

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:

Naming Schema Varianten

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, entsprechen die Zahlenverhältnisse nicht 1:1 den Größenverhältnissen (ein Button 200 ist also nicht zwingend doppelt so groß wie ein Button 100) sondern 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.

Zweidimensionale 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:

Naming Eindimensional

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

Naming Zweidimensional

Naming Schriftgrößen

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:

OTTO.de Patterns

Das System funktioniert so gut, dass wir es mittlerweile auch auf andere Elemente anwenden, wie zum Beispiel Farben und Animationen:

Naming Schema Farben und Animationen

Nachdem ich nun die Prinzipien für eine schlanke Pattern Library mit dem Naming Schema vollendet habe, will ich mich im nächsten Artikel mit den besonderen Anforderungen an Design Patterns und an eine Pattern Library im Kontext von Responsive Web Design widmen.

Wer trotzdem jetzt und sofort mehr wissen will, dem möchte ich die Folien meiner Pattern-Vorträge vom UXCampEurope 2014 und der webexpo Prag ans Herz legen. Falls Ihr selber schon positive oder negative Erfahrungen mit einer Pattern Library gemacht habt, falls ihr Fragen zu diesem oder Wünsche für Folgeartikel habt, freue ich mich auf Eure Kommentare.

Weitere Artikel aus dieser Serie:

Über Wolf Brüning

Wolf arbeitet als Senior 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.

12 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! 😉

Schreibe einen Kommentar

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