Pattern Libraries helfen, eine markenkonforme User Experience über alle digitalen Anwendungen hinweg sicherzustellen. Doch welcher Systematik müssen sie folgen, um wirklich hilfreich zu sein? Und wie setzt man sie auf, um auch künftige Technologien integrieren zu können?
Nach einer kompletten Neuausrichtung zeigt sich die Pattern Library des Düsseldorfer Voice-over-IP-Anbieters sipgate aufgeräumt, übersichtlich und mit einer ganz auf den Zweck ausgerichteten Systematik. (Zum Vergrößern bitte auf das Bild klicken)
Über die Standardisierung digitaler Produkte kann man geteilter Meinung sein. Die Ergebnisse sind vielleicht nicht sonderlich kreativ, aber wenn man als Designer oder Developer in einem internationalen Unternehmen mit diversen Länderseiten, in einer Firma mit vielen Produktlinien oder in einem schnell expandierenden Start-up mit webbasiertem Geschäftsmodell arbeitet, weiß man die Vorteile sehr wohl zu schätzen. Solche standardisierten Websites, Microsites oder Point-of-Sale-Anwendungen basieren auf wiederverwendbaren Patterns wie Headern, Slidern, Teasern, Buttons, Kontaktformularen, Trust-Elementen und so weiter, die in einer Pattern Library verwaltet werden, inklusive Code-Snippets, die der hauseigenen Codekonvention entsprechen. Wenn man Glück hat, sind diese Bibliotheken mit dem Content-Management-System und dem produktiven Code verbunden, sodass die Wartung einfach ist und sich Änderungen in Windeseile über alle Webanwendungen des Unternehmens ausrollen lassen.
Diese Vorteile waren es denn auch, die den Voice-over-IP-Anbieter sipgate dazu brachten, eine Pattern Library aufzubauen, auch wenn er erst im zweiten Anlauf das richtige Konzept dafür fand. »Dadurch sind wir wesentlich konsistenter und auch schneller geworden – um den Faktor 20 bis 100«, sagt Tobias Ritterbach, der als Experience Owner den Aufbau der Pattern Library managte. Das 2004 gegründete Unternehmen will sowohl bei den Produktlinien als auch in andere Länder expandieren. Zu diesem Zweck wird es in Zukunft schnell neue Web- und Microsites, Features und Interfaces für immer mehr Displaygrößen und Gerätetypen zusammenstellen müssen.
Für Airbnb war neben Produktivitätssteigerungen vor allem die Markenkonsistenz ein Grund, ein übergeordnetes Designsystem einzuführen. Ohne eine gemeinsame Designsprache hätten sich die weltweit verstreuten Entwicklungsteams nicht mehr steuern lassen. »Im Laufe der Jahre sind wir stark gewachsen, unsere Designabteilung besteht inzwischen aus fast einem Dutzend Teams. Es wurde klar, dass wir systematischere Wege brauchen, um unsere Arbeit zu koordinieren«, erklärt Karri Saarinen, der als Design Lead bei Airbnb in San Francisco das 2017 eingeführte Design Language System (DLS) verantwortet.
Ohne eine solche zentrale Pattern Library hätte dem international aufgestellten Unternehmen ein Szenario wie dieses gedroht: Team eins entscheidet sich zur Lösung eines Designproblems für ein bestimmtes Interface-Element und brieft den Developer. Zeitgleich ist Team zwei mit einem sehr ähnlichen Designproblem konfrontiert – mangels Referenz und Austausch mit Team eins findet es aber eine komplett andere Lösung und gibt diese in die Entwicklung. Nun identifiziert das DLS-Team gleichartige Patterns und findet eine grundsätzliche Lösung. Bei Airbnb hat sich die Einführung des Design Language Systems längst amortisiert. Die agilen Entwicklungsteams stellten schon nach ein, zwei Wochen eine enorme Produktivitätssteigerung fest. Ein Prototyp mit fast fünfzig Screens ließ sich nun innerhalb weniger Stunden erstellen.
Systematik ist eine Kunst
Es gibt also genügend gute Gründe für den Aufbau einer Pattern Library – doch sind sie wirklich dringlich genug, um das Jammertal der Umsetzung zu durchqueren? »Pattern Libraries kommen nicht ohne Schmerzen«, sagt Daniel Kränz, Head of Interaction Design bei der Hamburger Digitalagentur deepblue networks. Vor allem bei der Kategorisierung der Elemente und der Verwaltung kann viel schiefgehen.
Tobias Ritterbach von sipgate hat das erlebt: Im ersten Anlauf scheiterte der Voice-over-IP-Anbieter an der falsch gewählten Systematik, an der dezentralen Verantwortlichkeit und an der Ausrichtung auf Developer. Daraus hat das Unternehmen gelernt und konzentriert sich nun bei jedem Pattern auf dessen Funktion: Soll es USPs aufzählen, Vertrauen erhöhen, Navigation oder Content anteasern? Was trägt das Element zur Seite bei? Den jeweiligen Zweck dokumentiert sipgate in der Bibliothek. »Denn das visuelle Design mag sich im Laufe der Jahre ändern, doch die Absicht hinter dem funktionalen Pattern bleibt bestehen. Ein Kontaktformular bleibt ein Kontaktformular«, sagt Ritterbach.
Wir hatten die Illusion, dass sich so ein System selbst reguliert.
Diesen neuen Ansatz hat der Voice-over-IP-Anbieter Alla Kholmatova, Head of Design & UX beim britischen Energie-Start-up Bulb, zu verdanken, die sipgate bei der Einrichtung der neuen Pattern Library im Herbst 2017 unterstützte. In ihrem Buch »Design Systems« hat sie nicht nur die Faktoren identifiziert, die ein effektives Designsystem ausmachen, sondern sie nimmt den Leser auch bei dessen Aufbau an die Hand. Um die richtige Kategorisierung zu finden, unterteilt die Designerin die Patterns grob in funktionale oder beschreibende Muster. Funktionale Patterns sind konkrete Module des Interfaces, beispielsweise ein Button, ein Formular oder ein Menü. Beschreibende Patterns wie Farbe, Typografie oder Icons kommunizieren visuell die Persönlichkeit des Produkts. Dazu gehören übrigens auch User-Interface-Elemente wie Hover-Effekte, Transitions und andere Animationen, die das Verhalten der Elemente zueinander beschreiben und die User Experience verbessern. Nicht selten fehlen sie in Pattern Libraries noch gänzlich. Aus Developer-Perspektive haben funktionale Module immer eine HTML-Basis, während b typischerweise CSS-Eigenschaften mitbringen.
Pattern Libraries senken die Entwicklungskosten und verkürzen die Time-to-Market für neue Anwendungen.
