18 Tipps, die dir helfen, eine gute Pattern Library zu bauen (veraltet)

+++ ACHTUNG: Dieser Artikel ist veraltet +++

Wir haben unsere Pattern Library seit der Veröffentlichung dieses Artikels konsequent weiterentwickelt und dabei wahnsinnig viel gelernt. Einige Empfehlungen in diesem Artikel würden wir heute nicht mehr aussprechen. So haben wir uns z.B. mittlerweile von Atomic Design verabschiedet und verfolgen stattdessen den “Purpose-first”-Ansatz, bei dem der Zweck der Patterns im Vordergrund steht.

Wir haben eine Pattern Library für all unsere Produktseiten gebaut. Hier sind unsere Take-aways:

(Der Erfahrungsbericht folgt weiter unten)

14 Dinge, die du tun solltest, wenn du eine Pattern Library baust:

  1. Gemeinsames Verständnis entwickeln
    Für die Akzeptanz einer Pattern Library im Unternehmen ist es super wichtig, dass alle Beteiligten wissen, was du mit ihr erreichen willst und wie die konkrete Umsetzung aussehen soll.
  2. Verschiedene Rollen einbeziehen
    Die Pattern Library ist ein Tool für alle im Team, z. B. POs, Entwickler, UXer, Designer und Texter. Deshalb solltest du auch all diese Rollen so früh wie möglich einbeziehen. Das verbessert die Qualität und fördert die Nutzung der Pattern Library.
  3. Den Einstieg einfach halten
    Zum ersten Mal mit der Pattern Library zu arbeiten muss einfacher sein, als selber eine neue Seite ohne Library zu bauen. Gerade Nicht-Entwickler, wie Designer oder Texter, sollten auch mit der Library arbeiten können.
  4. Jedes Pattern in die Library packen
    Alle sollen von neuen Patterns profitieren können: Kunden und Kollegen. Es ist total kontraproduktiv, Verbesserungen für sich zu behalten und sein Wissen zu horten.
  5. Patterns dokumentieren
    Es macht total Sinn, Patterns in der Library zu dokumentieren. Dazu gehören z. B. auch Parameter, die an das Template übergeben werden können. Das hilft Leuten, die keinen Zugriff auf den Code haben, zu verstehen, was möglich ist.
  6. Patterns mit optionalen Parametern erweitern
    Manchmal wirst du vor der Frage stehen, ob du ein bestehendes Pattern erweitern oder besser eine neues Pattern anlegen sollst. Beide Optionen sind denkbar. Optionale Parameter im Template können helfen, Patterns zu erweitern, ohne dass sich diese Änderungen auf bestehende Implementierungen auswirken. Wenn’s zu komplex wird, bist du mit einem neuen Design Pattern oft besser dran.
  7. Disruption zulassen
    Design hat immer auch was mit Zeitgeist zu tun. Damit sich dein Design weiterentwickeln kann, ist es wichtig, dass jeder neue Patterns entwickeln kann und bei der individuellen Gestaltung nicht eingeschränkt ist. Neue, bessere Patterns können so ältere ersetzen.
  8. Aktuelle Technologien verwenden
    Deine Pattern Library sollte auch technisch so flexibel sein, dass du immer mit der Zeit gehen kannst. Sonst musst du in ein paar Jahren wieder von vorne anfangen. Falls du mit einem Framework wie Bootstrap arbeitest, achte darauf, dass Updates möglich sind und du regelmäßig welche machst.
  9. Wissen, wo welches Pattern verwendet wird
    Wir haben einen kleinen Crawler gebaut, der regelmäßig checkt, wo welches Pattern verwendet wird. Solltest du auch machen. So kannst du bei Änderungen an Patterns direkt checken, ob noch alles funktioniert. Außerdem kannst du nicht benutzte Patterns erkennen und ggf. verbessern oder aus der Library schmeißen.
  10. Genug Platz für die Darstellung der Patterns einplanen
    Wir haben in unserer Pattern Library eine Sidebar für die Navigation innerhalb der Library. Das ist deshalb ungünstig, weil wir Patterns, die über Vollbreite gehen, nicht sinnvoll darstellen können. Das kannst du besser — z. B. mit einem Off-Canvas-Menü oder einer horizontalen Navigation im Header.
  11. Individuelles CSS für jedes Pattern vorsehen
    Wenn du ein Pattern für mehrere Projekte verwenden willst, musst du darauf achten, dass du bei der Gestaltung flexibel bleibst. Wir haben für jedes Pattern ein Fallback-CSS, das das grundlegende Design festlegt. Bei der Implementierung im Projekt kann man dieses Design dann aber mit seinen eigenen Styles überschreiben. Solltest du definitiv auch machen.
  12. Pattern Library als Wissensdatenbank nutzen
    Neben den Design Patterns solltest du alles, was man braucht, um eine Webseite zu bauen, in der Pattern Library dokumentieren. Das können z.B. Brand Guidelines, Coding Conventions oder Anleitungen für die Einrichtung einer lokalen Entwicklungsumgebung sein. So hast du alles an einer Stelle.
  13. Die Pattern Library öffentlich machen
    Klingt vielleicht komisch, bringt aber total viel. Einerseits sorgt eine gute Sichtbarkeit für Motivation und damit bessere Qualität. Wer will schon mit etwas an die Öffentlichkeit gehen, von dem man nicht überzeugt ist? Andererseits ist so eine Pattern Library auch eine super Gelegenheit, neue, interessierte Kollegen zu finden. Willst du bei uns arbeiten?
  14. Für eine gute User Experience sorgen
    Genauso wichtig wie die Struktur ist auch die visuelle Gestaltung der Pattern Library. Ausreichend Whitespace, gute Lesbarkeit und die Verwendung von Illustrationen, Icons und Videos sorgen dafür, dass die Arbeit mit der Pattern Library Spaß macht.

4 Fehler, die du vermeiden solltest, wenn du eine Pattern Library baust:

  1. Für jedes Projekt eine eigene Pattern Library aufsetzen
    Design Patterns sind nicht an ein bestimmtes Projekt oder eine Seite gebunden. Im Gegenteil: Der größte Wert einer Pattern Library liegt in der Wiederverwendbarkeit der Design Patterns. Deswegen macht es absolut keinen Sinn, für jedes Projekt eine eigene Library zu erstellen.
  2. Die Pattern Library mit Patterns zumüllen, die niemand braucht
    Halte Deine Pattern Library sauber. Schau regelmäßig drüber. Bestimme Paten, die die Verantwortung dafür übernehmen. Halte nicht an ungenutzten Patterns fest, nur weil es Zeit gekostet hat, sie zu bauen. Schmeiß sie raus oder verbessere sie, bis sie genutzt werden. Sonst findest du nachher nichts mehr wieder.
  3. Design Patterns nach ihrem Zweck benennen
    Du solltest deine Design Patterns nach ihrer Form benennen und nicht nach ihrem Zweck. Das mag erstmal verwirrend klingen, denn das ist das Gegenteil von dem, was man macht, wenn man CSS-Klassen benennt. Das macht aber deshalb Sinn, weil der Zweck durch das Design Pattern nicht vorgegeben wird. Ob ich z. B. ein Icon mit Headline und Text auf einer Webseite als USP oder als Testimonial verwende, gibt das Pattern nicht vor. “Icon mit Headline und Text” ist deshalb auf jeden Fall ein besserer Name als “Testimonial mit Bild”.
  4. Patterns nur im eigenen Projekt testen
    Wenn die Pattern Library von mehreren Teams für unterschiedliche Projekte benutzt wird, ist es wichtig, dass du Änderungen an Patterns auch überall testest. Jedes Team sollte jedes Pattern für jedes Projekt nutzen können, ohne erst Bugs fixen zu müssen.

Wie wir zu unserer Pattern Library gekommen sind.

Wir bauen Webseiten seit 1998 und waren eigentlich auch ganz gut darin. In den letzten Jahren haben wir es aber irgendwie versäumt, am Ball zu bleiben. Viele unserer Produktseiten waren veraltet: inhaltlich, optisch und technisch.

Design Sprint

Um uns diesem Problem zu nähern, haben wir mit ein paar Leuten aus der UX-Community einen Design-Sprint eingeschoben. Nachdem wir ein gemeinsames Verständnis entwickelt hatten, skizzierten wir Lösungen, bauten einen Prototypen und luden Tester zu uns ins Büro ein.

Daniel hat auf der Lean UX DUS erklärt, was ein Design Sprint ist und wie wir an das Problem rangegangen sind.
Der neue Header und Footer haben den User-Test bestanden. Auch simquadrat ist jetzt deutlich als sipgate Produkt zu erkennen.

Wir brauchen eine Pattern Library

Um es kurz zu machen: Wir haben erkannt, dass wir nicht alle Portale gleichzeitig umbauen können — und wollen. Aber auch wenn wir schrittweise vorgehen und mit nur einem Portal anfangen, brauchen wir eine Lösung, die für alle Seiten funktioniert und wiederverwendbar ist. Wir brauchen eine Pattern Library, in der wir wiederkehrende Design Patterns definieren und zur Wiederverwendung für alle Produktseiten ablegen können.

Atomic Design

Uns gefiel Brad Frosts “Atomic Design”-Ansatz. Hierbei werden Design Patterns je nach Komplexität in Atome, Moleküle, Organismen und Templates aufgeteilt.

Die Umsetzung

Nachdem also verschiedene Leute hier einen Tag in Vorbereitungen und Recherche investiert hatten, konnten wir uns an die Umsetzung machen. Wir haben das Thema mit einem unserer Scrum-Teams gegroomt und ein Backlog erstellt.

Unsere UX-Community hat das Team bei der Entwicklung einer neuen Trunking-Startseite unterstützt.
Timm und ich besprechen letzte Änderungen, bevor die neue Trunking-Startseite live geht.

Soll ick jetzt den Knaller zünden?

Auch intern sorgten die neuen Seiten für Aufmerksamkeit und machten unsere Product Owner und Entwickler neugierig. Erste Devs checkten das GIT-Repository aus und fingen an, mit der Pattern Library zu experimentieren. Kurz darauf begannen die ersten Produkt-Teams, ihre Webseiten mit der Pattern Library umzubauen. Auch komplett neue Projekte, wie voipschool.de, wurden mit der Pattern Library umgesetzt. Und das quasi von alleine. Innerhalb von zwei Wochen gingen vier neue Seiten an den Start. Dafür hätten wir vorher Monate gebraucht. Oder wir hätten weiteren Wildwuchs erzeugt.

Läuft bei uns?

Auch wenn wir uns alle gut fühlten mit der Pattern Library, wollten wir qualifiziertes Feedback von außen. Wir laden oft ExpertInnen zu uns ein, von denen wir etwas lernen können. Meistens gibt es dann intern einen 1–2 tägigen Workshop und abends noch ein offenes Meetup für alle, die das Thema interessiert.

Brad Frost beantwortet unsere Fragen und schaut mit uns über unsere Pattern Library
Abends erklärt er dann 100 Gästen bei der Lean UX DUS was es mit diesem Atomic Design auf sich hat. Hier findet ihr die Slides von seinem Vortrag.

Sieht dann nicht irgendwann alles gleich aus?

Einige befürchteten, eine Pattern Library könnte die Kreativität einschränken und würde dafür sorgen, dass alles gleich aussieht. Diese Angst konnten wir mit unserem neuen sipgate basic Portal ausräumen.

Individuelle Illustrationen, Typographie und Farben sorgen dafür, dass die Seite ihren eigenen Style hat.
Zum Vergleich: Die Stage-Bereiche von simquadrat und sipgate basic sehen komplett unterschiedlich aus — beide Bereiche verwenden aber dasselbe Pattern aus unserer Library.

Wie geht’s weiter?

Brad gab uns einige Verbesserungsvorschläge mit auf den Weg, von denen wir schon einige umgesetzt haben. Zum Beispiel ist der Einstieg in die Pattern Library und die Arbeit damit für Nicht-Entwickler noch relativ schwer.

Unsere Pattern Library findet ihr auf www.sipgate.de/design

So fresh, so lean!

Wir versuchen generell so lean wie möglich zu arbeiten. Da kam die Pattern Library als Standardisierungs-Tool natürlich wie gerufen. Sie ermöglicht uns unsere Webseiten kontinuierlich und inkrementell zu verbessern. Sie sorgt dafür, dass Wissen über Patterns nicht verloren geht und dass Änderungen an unseren Webseiten schnell an unsere Kunden geshippt werden können.

Neugierig geworden?

Unsere Pattern Library findest du auf sipgate.de/design. Möchtest du dich mit uns über das Thema austauschen? Komm zum Essen bei uns im Büro vorbei oder schreib mir über Twitter.

--

--

Innovative Telefonie für zu Hause, unterwegs und das Büro.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
sipgate

Innovative Telefonie für zu Hause, unterwegs und das Büro.