Februar 2020
7 Praxis-Tipps für eine leistungsstarke UI Pattern Library
Eine Pattern Library stellt wichtige Designbausteine einer Webseite für das gesamte Entwicklungsteam bereit. Gerade bei großen Teams, ist sie ein unverzichtbares Instrument, um eine einheitliche und konsistente Nutzererfahrung sicherzustellen. Zudem kann eine gut integrierte Pattern Library die Entwicklungszeit drastisch verkürzen. In diesem Artikel möchte ich Tipps geben, was bei der Konzeption und dem Betrieb eines solchen Systems zu beachten ist.
Von Markus Remscheid
So viel wie nötig – so wenig wie möglich
Damit eine Pattern Library den höchsten Nutzwert für das Produktteam hat, sollte die Anzahl der enthaltenen Patterns möglichst schlank und übersichtlich bleiben. Werden die Designpatterns von Anfang an für einen modularen Einsatz gestaltet, läßt sich die Anzahl der Elemente wirksam reduzieren. Sind beispielsweise die Überschriftenstyles gut aufeinander abgestimmt, reichen oftmals vier verschiedene Überschriftenvarianten für eine komplette Webseite aus.
Klein anfangen und sukzessive ausbauen
Der Grundstein einer Pattern Library wird am Besten mit der Konzeption ganz elementarer Designpatterns gelegt. So werden zunächst Textstyles, Buttons, Links und Abstände gestaltet und in die Bibliothek aufgenommen. Aus diesen Bausteinen lassen sich bereits komplexere Module bis hin zu vollständigen Templates zusammensetzen. Mit dem Blick auf das Gesamtbild sollten die Grundbausteine so lange optimiert werden, bis alles perfekt zusammenpasst. Erst dann empfiehlt es sich, weitere Elemente hinzuzufügen und dabei immer wieder zu testen und zu optimieren.
Logische Konsequenz
Teil einer Pattern Library sind nicht nur die Bausteine selbst, sondern auch Gestaltungslogiken, die festlegen, wie diese eingesetzt werden. Eine klare Systematik hilft, Designentscheidungen schneller zu treffen und das Userinterface stringent und erwartungskonform zu gestalten. Beispielsweise könnte eine Regel lauten, das Icons, die mit einem Textlabel verwendet werden, immer die Farbe des Textes annehmen. Führt eine Regel in Einzelfällen zu keinen guten Ergebnissen, sollte zunächst die grundsätzliche Designlogik überdacht werden, statt die Darstellung mit einer Sonderlösung zu „überschreiben“. Stellt sich dabei heraus, das es mit einem Pattern nicht möglich ist, alle Fälle abzudecken, kann ein weiteres Pattern eingerichtet werden.
Nur Mehrweg-Bausteine zur Verfügung stellen
Damit die Pattern Library schlank und effizient bleibt, kann nach folgendem Credo vorgegangen werden: Teil der Pattern Library werden nur Bausteine, die auch mehrfach auf der Webseite zum Einsatz kommen. Elemente dagegen, die nur einmalig existieren, werden direkt Teil der Seitentemplates.
Die Wahrheit liegt im Code
Eine Pattern Library ist ein dynamisches Instrument und entwickelt sich mit der Webseite, für die sie geschaffen wurde, im Gleichschritt weiter. Die Pattern Library dokumentiert so auf verbindliche Weise, wie Elemente aktuell aussehen und wie sie sich verhalten. Layoutdateien synchron zu halten, ist zeitaufwendig und aus unserer Erfahrung nicht notwendig. Prototypen sollten realitätsnah sein, damit auf deren Basis Entscheidungen getroffen werden können, wie etwas gemacht wird. Auch dienen sie den Entwicklern als Vorlage bei der Umsetzung. Löst sich das Designteam vom Anspruch, die exakte Realität abbilden zu wollen, gestaltet sich der Designprozess effizient und zielführend.
Unterstützende Benamung
Damit die Bausteine einer Pattern Library auch vom Team gefunden werden, benötigt jedes Element einen sinnvollen Namen. Dabei sollten Patterns besser nicht nach Einsatzweck oder der spezifischen Erscheinung benannt werden. Ein „roter“ Button kann immer nur rot sein. Ein „Warenkorb“ Button kann immer nur ein Warenkorb-Button sein. Gute Bezeichnungen schränken die Einsatzmöglichkeiten eines Patterns nicht unnötig ein und geben dem Team dennoch Hilfestellung bei der Auswahl eines geeigneten Elements. So könnten z.B. die unterschiedlichen Varianten eines Buttons lauten: „Starker Button“, „Regulärer Button“ und „Reduzierter Button“.
Eine Routine für Pflege und Verbesserung einplanen
Ein festes Kernteam sollte sich verantwortlich um Pflege und Weiterentwicklung der Pattern Library kümmern. In einem regelmäßigen Austauschtermin prüft das Team, ob noch alle Patterns benötigt werden, der Nachbesserung bedürfen oder neue ergänzt werden sollen. Nicht verwendete Elemente, sollten aus der Library entfernt werden. So bleibt die Pattern Library immer auf Stand und behält ihren hohen Nutzwert für das gesamte Entwicklungsteam.
Markus Remscheid ist Gründer und Geschäftsführer von H2D2 und bringt inzwischen mehr als 15 Jahre Erfahrung in der Gestaltung von Interface-Systemen für große und komplexe E-Commerce-Sites mit. markus.remscheid@h2d2.de, Telefon: 030. 78 89 03-21