Fact Sheet: Pattern Library
In Interface Design, Tools, Workflow Posted
Die Erstellung eines Prototypen, einer neuen Website oder auch nur ein ganz einfaches Responsive Design können sich manchmal zu einem ziemlichen Akt entwickeln. Viele Teammitglieder arbeiten an noch mehr Entwürfen und ein Ausbrechen aus dem Teufelskreis der Sisyphusarbeit liegt in weiter Ferne. Des Rätsels Lösung sind Musterentwürfe – sogenannte Design Patterns.
Was macht Design Patterns unverzichtbar?
Ganz grob lässt sich der Begriff Patterns mit Muster übersetzen – einfache Design Muster also. Das kann natürlich alles bedeuten. Die Struktur auf dem Papier oder das Dekor der Blumentapete.
Besonders wenn es um das User Experience Design geht, nimmt die ganze Angelegenheit wortwörtlich Form an. Unter der Prämisse eines einheitlichen Looks umfassen diese Design Patterns sämtliche Elemente, die wiederholt innerhalb des Interface Designs Anwendung finden. Auf diese Weise können beispielsweise Slider, Header oder Karussells bereits vorab fest in Aussehen, Funktion und Codierung definiert werden.
Ein konsistentes Design, welches mühelos auf verschiedene Endgeräte oder Anwendungen übertragen werden kann, ist am Ende des Tages die Entlohnung.
Die wichtigsten Elemente einer Pattern Library
Auch wenn eine Pattern Library oftmals mit einem Style Guide über einen Kamm geschoren wird; der kleine aber feine Unterschied macht’s. Während der Guide spezifische Vorgaben zu eher statischen Elementen wie Fonts und Farben gibt, zeichnet sich eine Pattern Library durch Interaktivität aus. So stehen überwiegend Bestandteile im Fokus, die essentiell für die Mensch-Maschine-Interaktion sind.
Eine schöne Übersicht dessen, was alles an Pattern Libraries möglich ist, bietet Styleguides.io. Mit rund 233 Design Patterns kann auch den ganz Großen einmal bei der Arbeit über die Schulter geblickt werden. Zu finden sind unter anderem Mailchimp, GitHub und WordPress.
Die Phasen einer optimierten Entwicklung mit Design Patterns
Von minimalistischen Buttons bis hin zu kompletten Layouts geben Pattern Libraries Hilfestellung in Sachen Umsetzung. Denn sobald die Bibliothek erst einmal steht, können Entwürfe nahezu am laufenden Band produziert werden.
1. Ein abgestimmter Entwicklungsprozess
Um das perfekte Design Pattern zu entwerfen, bieten sich zu Beginn Strategien wie die Durchführung eines Design Sprints an. So ein Sprint kann zwar unter Umständen zeitintensiv und fordernd sein, die harte Arbeit wird aber mit passgenauen und lange währenden Patterns belohnt. Es besteht keine Notwendigkeit mehr, für jedes Element einer Anwendung neue User Tests durchzuführen, da die Ansätze meist Lösungen für eine ganze Palette an Pain Points bieten.
Und auch bei der Gestaltung zusätzlicher Elemente muss das Rad nicht neu erfunden werden. Vorab definierte Codes beugen zeitintensives Basteln vor und reduzieren den Arbeitsaufwand auf ein Minimum.
2. Ein ausgeglichener Workflow
Hand in Hand mit dem Entwicklungsprozess geht natürlich der Workflow. Eigentlich ergibt es sich so schon von selbst, dass konsistente Pattern Libraries auch zu weniger Missverständnissen führen. Schließlich ist es eher die Ausnahme, dass eine Person für das komplette Design einer Anwendung zuständig ist. Sobald also verschiedene Teammitglieder an verschiedenen Elementen arbeiten, zählt die Kommunikation der Pattern Designs. Auf diese Weise sinkt die Wahrscheinlichkeit, dass Elemente doppelt bearbeitet werden müssen und auch neue Teammitglieder können einfacher eingearbeitet werden.
3. Eine verbesserte Usability
Die positiven Effekte von Pattern Libraries spüren natürlich nicht nur die Teammitglieder, sondern auch die User. Ähnlich dem Corporate Design beugen Patterns außerdem Verwirrung vor, indem wiedererkennbare und vertraute Elemente eingesetzt werden.
Da die Patterns bereits dokumentiert und erprobt sind, werden sich folglich in der Anwendung auch seltener Hürden für die User entwickeln. Die Usability der Anwendung ist somit optimiert, die Absprungrate bleibt gering und das Vertrauen in das Produkt wächst.
Wie sich eine Pattern Library anlegen lässt
Die Erstellung einer Bibliothek mit sämtlichen Design Patterns ist eine Investition, die sich langfristig lohnt. Verschiedene Tricks und Hacks unterstützen dabei das gesamte Team und wirken sich positiv auf die Entwicklung, die Kommunikation und die User Experience aus.
Mehr Infos darüber, wie sich eine Pattern Library also erfolgreich anlegen lässt, bietet der Folgeartikel.
- Warum Pattern Libraries so genial sind sevenal.com am 17.12.2017
- How to create a pattern library and why you should bother boagworld.com am 11.07.2017
- Warum braucht man eine Pattern Library? produktbezogen.de am 28.03.2018
