Tipps und Tricks
Pattern Library: Was das ist und welche Vorteile sie hat
Lesezeit: 4 min
Eine gute Design Pattern Library ist sehr wichtig für nutzerzentrierte Produkte. Doch was genau sind Design Patterns? Wie helfen sie uns, bessere Produkte zu gestalten? Und was haben sie mit einer Bibliothek zu tun? Diese Fragen werden wir im folgenden Beitrag beantworten.
Der Begriff „Pattern“ – auf Deutsch „Muster“ – bezeichnet allgemein eine Struktur, die durch erneutes oder paralleles Auftreten gekennzeichnet ist. Durch diese Wiederholungsmöglichkeit ist eine einfache Reproduktion gewährleistet. Erstmals verwendete der US-amerikanische Architekt Christopher Alexander in seinem Werk „A Pattern Language“ den Begriff, um wiederkehrende Muster in der Architektur zu beschreiben. Damit gilt er in der Designszene oft als Mitbegründer des Pattern-Begriffs. Seinen Ansatz übertrugen gut 20 Jahre später UX-Vorreiter Don Norman und Stephen Draper in ihrem Buch „User Centered System Design” auf die Softwareentwicklung und setzten dadurch neue Maßstäbe im Interaktionsdesign.
In seinem Buch definiert Alexander Patterns wie folgt:
„Each pattern describes a problem that occurs over and over again in our environment and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.“
Christopher Alexander
Auf die digitale Welt angewendet bedeutet dies, dass ein Design Pattern ein wiederholt auftretendes Problem der Nutzer löst. Design Pattern hat man gestaltet, erprobt und entwickelt, um wiederkehrende Probleme einfach und schnell zu lösen.
Das wohl einfachste Beispiel eines Patterns ist ein simpler Button. Dieser tritt in verschiedenen Kontexten (Suche, Formular, Banner) und unterschiedlichen Inhalten (Anmelden, Suchen, Speichern) immer gleich auf. Aber nicht nur ein simpler Button lässt sich als Pattern definieren und dokumentieren. Vielmehr lassen sich sowohl kleine Bestandteile, etwa Checkboxen und Galerien, dokumentieren als auch ganze Elemente oder Komponenten wie Login-Funktionen, Formulare und vieles mehr.
Und so schließt sich auch der Kreis zur Pattern Library:
Die Menge an definierten und dokumentierten Elementen muss verwaltet und leicht zugänglich für Designer und Content-Creator sein. Eben wie Bücher in einer Bibliothek.
Nun wissen wir grob, was hinter dem Begriff Pattern Library steckt. Doch welche Vorteile hat diese ganze Dokumentation?
Vorteile von Patterns und Pattern Libraries
- Design Patterns verbessern die User Experience: Je intuitiver und konsistenter eine Webseite oder ein Produkt ist, desto besser ist die Erfahrung für die Nutzer. Denn durch gelernte und erprobte Muster lassen sich allgemein Probleme schneller und leichter lösen. Außerdem ist es durch Patterns möglich, schneller Prototypen zu erstellen und so Zeit für weitere Iterationen oder für die Bearbeitung neuer Probleme zu haben.
- Design Patterns sind nachhaltig: Durch eine geregelte und zentrale Dokumentation der Patterns ist es möglich, die verschiedenen Versionen nachzuvollziehen und bei Bedarf einen „Owner“ (eine verantwortliche Person für die Bibliothek) zu bestimmen. Der Owner pflegt die Pattern Library und kümmert sich darum, dass man die Design-Elemente regelmäßig überprüft, anpasst, weiterentwickelt und irgendwann auchaustauscht. Somit arbeitet das gesamte Projektteam immer mit dem neusten Stand.
- Design Patterns sind erprobt: Die bestehenden Patterns sind in der Regel bereits getestet und in Live-Umgebungen für gut befunden worden. Besonders für Produkte oder Features, für die kein großes Budget vorgesehen ist, kann man so schnell verlässliche Funktionen gestalten.
- Design Patterns ermöglichen eine klare und effiziente Kommunikation: Gut gepflegte Pattern Libraries vermitteln ein gemeinsames Verständnis sowohl innerhalb von als auch zwischen Projekt-Teams und bringen alle Beteiligten auf den aktuellen Stand der verschiedenen Lösungsansätze.
- Design Patterns verbessern die Code-Qualität: Da in den meisten Design-Systemen die einzelnen Module nicht nur dokumentiert, sondern auch als Code hinterlegt sind, hilft das den Entwicklern, die bereits erstellten Codes wieder zu verwenden. Dadurch spart man Zeit und vereinfacht zusätzlich die Qualitätssicherung.
- Design Patterns reduzieren Komplexität: Die Pattern Library ist eine große Sammlung an Lösungen für die verschiedensten Nutzerprobleme. Natürlich liefert eine Pattern Library nicht die Antwort auf alle Probleme. Sie enthält aber eine Vielzahl von erprobten Lösungen oder Ansätzen, die auf viele Situationen anwendbar sind. Damit lassen sich komplexe Probleme leichter runterbrechen und verständlicher lösen.
- Design Patterns erleichtern das Onboarding neuer Teammitglieder: Eine gut gepflegte Pattern Library erleichtert es jedem neuen Teammitglied, schnell und einfach ins Projekt einzusteigen. Besonders neue Designer und Entwickler profitieren enorm von einer guten Dokumentation, da sie hier auf einen Blick alle verfügbaren Elemente und Lösungen vorfinden.
Setzt man neue Produkte und Webseiten OHNE eine Pattern Library auf, kommt es häufig zu folgenden Problemen:
Problem 1: Fehlende Abstimmung
Sobald mehrere Designer und Programmierer an Produkten arbeiten, kann es schnell passieren, dass diese für dieselbe Aufgabenstellung verschiedene Lösungen erarbeiten. Dadurch können innerhalb kürzester Zeit verschiedene Ansätze auftauchen, die im Zweifel das Produkt inkonsistent erscheinen lassen. Kreative und innovative Ideen sind immer erwünscht; nur sollten diese stets mit dem kompletten Team abgestimmt und koordiniert entstehen.
Problem 2: Missverständliche Kommunikation
Der eine sagt etwas, der andere versteht es anders und schon gibt es die nächste Inkonsistenz. Solche Missverständnisse können schnell entstehen, beispielsweise wenn sich Designer und Entwickler austauschen. Ein mögliches Szenario: Der Designer entwickelt eine visuelle Lösung für ein Problem und brieft diese beim Team ein. Der Entwickler versteht die Lösung des Problems allerdings anders. Das Resultat: Ein Feature, das zwar aussieht wie die eigentliche „Designer-Lösung“, aber im Verhalten oder im Code grundlegend von der ursprünglich gewünschten Lösung abweicht.
Problem 3: Denken in Seiten
Nach wie vor wird oft in einzelnen Seiten oder Elementen gedacht. Startseite, Shop oder interner Bereich – dass diese Seiten alle Teile eines ganzheitlichen Erlebnisses sind, wird oft vernachlässigt. Funktionen und Elemente sollten über alle Seiten hinweg konsistent erscheinen und gut bedienbar sein.
Nur so ist gewährleistet, dass der Nutzer über die gesamte Customer Journey mit dem Produkt zufrieden ist.
Problem 4: Mehrfache Arbeit
Selbst wenn wir die oben genannten Probleme außen vor lassen, müssen wir die abgestimmten Elemente immer wieder neu anlegen, anpassen, im Zweifel erneut testen und evaluieren. Diese mehrfache Arbeit ist lästig und ineffizient.
Um diese Probleme zu vermeiden, arbeiten wir bei IW Medien mit Pattern Libraries in unseren Projekten. Dabei profitieren wir extrem von der engen Zusammenarbeit unserer Design-Teams mit der Programmierung. Wir bewerten die Einführung der Pattern Libraries als vollen Erfolg und versuchen stets, unsere aktuellen Sammlungen zu erweitern und neue Schnittstellen zu finden.
Wenn Sie durch diesen Beitrag auch Lust auf einen sich stetig weiterentwickelnden und immer aktuellen Style Guide in Form einer Pattern Library bekommen haben, nehmen Sie mit uns Kontakt auf. Wir helfen Ihnen gerne.
