Von einem grafischen Stand­punkt aus betrachtet sind E-Commerce-Shops komplexe Konstrukte. Die meisten Shops setzten sich aus vielen unter­schied­lichen Seitentypen zusammen, wie z.B. Start-, Übersichts- und Produkt­detail­seite.

Ist ein Online-Shop zudem responsiv optimiert, d.h. ist er für alle Bildschirmgrößen angepasst, existiert jeder Seitentyp in drei bis vier unterschiedlichen Aus­prä­gungen.

Rechnet man die Anzahl der Seiten hoch, kommen schnell hunderte, wenn nicht gar tausende verschiedener Templates zusammen.

All diese Seitentemplates mit ihren zahlreichen UI-Elementen, wie Buttons, Links, Slidern, Textblöcken, Trust Elementen, Teasern, individuell zu designen, erfordert einen hohen Entwicklungs- und Abstimmungs­aufwand.

Auch ist eine individuelle Gestaltungsmethodik sehr anfällig für „Wildwuchs“. Besonders dann, wenn mehrere Teams an einem Projekt arbeiten. Die Frontend-Teams laufen in Gefahr immer wieder neue Lösungen für die gleichen User-Szenarien zu erfinden. Ein konsistentes User Interface über den gesamten Shop hinweg aufrecht zu erhalten, wird dann zur echten Herausforderung.

Es braucht also effizientere und systematischere Methoden, um nutzerfreundliche Online-Shops zu realisieren.

Design mit System – das Chaos beherrschen

Hier kommen Designsysteme ins Spiel, die übergreifende Designstandards etablieren. Sie legen einmalig fest, wie UI-Elemente in einem Online-Shop auszusehen haben und wie sie sich im Seitenkontext verhalten.

Somit werden Templates nicht mehr als eigenständige Seiten betrachtet, die der indivi­duellen Gestaltung bedürfen. Vielmehr identifiziert man wiederkehrende Elemente und Designmuster (Patterns) und gestaltet diese so, das sie möglichst modular in unterschiedlichen Seiten­kontexten verwendet werden können. Erst im letzten Schritt setzt man die einzelnen Seitentemplates aus den gestalteten Patterns zusammen.

Ein Designsystem kann man sich als Weiterentwicklung eines Styleguides vorstellen. Styleguides beschreiben vor allem die marken­gerechte Verwendung von Logos, Farben, Typo­grafie, Icons etc. Ein Designsystem ist mehr als das und legt Standards fest, wie wiederkehrende Interface-Elemente aussehen und wie sie in unterschied­lichen Kombina­tionen verwendet werden.

Die Systematik dahinter

Effiziente Designsysteme basieren in der Regel auf einer Gestaltungsmethode, die unter dem Begriff des Atomic Design bekannt wurde. Im Jahr 2013 von Brad Frost veröffentlicht, bedeutete dieser bis dahin neue Ansatz eine Kehrtwende für die Konzeption komplexer Webseiten.

Im klassischen Grafikdesign-Prozess geht der Gestalter vom Großen zum Kleinen vor. Vom Groblayout arbeitet sich der Designer in mehreren iterativen Schritten bis zum finalen Entwurf vor.

Die Atomic Design-Methode funktioniert dagegen vom Kleinen zum Großen. Atomic Design fasst Webseiten als verschachtelte Systeme auf, die beginnend von den kleinsten Gestaltungs­­einheiten, wie Schriften und Farben, zu nächstgrößeren Design­elementen zusammengesetzt werden. Dies kann z.B. eine Formularzeile sein, die Teil eines Anmelde-Formulars ist. Und diese Komponente ist wiederum Teil einer Anmelden-Seite zum Mein Konto-Bereich, die weitere Komponenten, wie Header und Footer enthält.

Brad Frost unterteilt Webinterfaces in fünf verschachtelte Ebenen: Atome, Moleküle, Organismen, Templates und Seiten.

Das Atomic Design Model (Illustration nach Vorbild von Brad Frost)

Moderne Webseiten funktionieren nach dem Matroschka-Puppen-Prinzip und sind in sich verschach­telte Systeme.

Atomic Design in der Praxis

Die Atomic Design-Methodik hat zu einem Umdenken in der Interface-Gestaltung beige­tragen. In der Praxis allerdings kann die Methode mit seinen fünf verschachtelten Ebenen schnell zu komplexen und schwerfälligen Ergebnissen führen.

Sehr gute Erfahrungen haben wir stattdessen mit einem dreistufigen System gemacht, bestehend aus Designtokens, Komponenten und Seiten.

Designtokens bilden die kleinste Gestaltungseinheit. Sie legen grundlegende Designstandards wie z.B. Raster, Farben, Schriftarten und ein Set an Abständen fest.

Die nächsthöhere Ebene stellen Komponenten dar, die auf den Designtokens basieren. Komponenten sind z.B. Textstyles, Buttons, Links, Tabellen, Textfelder, Icons, etc. 


Aus den Komponenten setzen wir vollständige Seiten zusammen. Durch grundlegende Änderungen an den Design­tokens, können wir dem gesamten User Interface eine neue Richtung geben. Farbänderungen z.B. lassen sich so sehr schnell realisieren.

Wie ein Designsystem aufgesetzt wird

Nach unserer Auffassung stellt ein Designsystem ein theoretisches Model dar, das definiert wie ein Interface auszusehen hat. Ein Designsystem kann man sich als einen Bauplan vorstellen, der festlegt, wie sich eine Webseite aus kleineren Bausteinen zusammensetzt.

In der Praxis einsatzfähig wird ein Designsystem, wenn der Bauplan über eine digitale Bibliothek allen Stakeholdern zugänglich gemacht wird. Die gesamten Disziplinen finden im Idealfall so eine zentrale Anlaufstelle vor, unter der sie sich die Informationen holen können, die für ihre Arbeit wichtig sind. Product Owner erhalten einen Überblick welche Komponenten existieren und wie diese verwendet werden. Entwickler finden Codekonventionen und Code Snippets vor.

Solch eine Bibliothek kann in unterschiedlichen Formen aufgesetzt werden.

Die Pattern Library ist eine Sammlung wiederverwendbarer UI-Elemente, wie Buttons, Labels, Headings, Formulare, Bildunterschriften, usw. Damit die Bausteine miteinander kombiniert werden können und sich automatisch an unterschiedliche Bildschirm­größen anpassen, sollten sie Abstands- und Verhaltenslogiken mitbringen.

Der Idealfall tritt ein, wenn eine Pattern Library, direkt an den produktiven Code angeschlossen ist. Die enthaltenen Patterns und Komponenten sind so zwangs­läufig immer auf dem aktuellen Stand. So wird die Pattern Library zur „Quelle der Wahrheit“. Ein solches Setup stellt aktuell die effizienteste Möglichkeit dar, eine nutzerzentrierte User Experience bereit­zustellen und kundengerecht weiterzu­entwickeln und zu optimieren.

Eine Pattern Library ohne Verbindung zum produktiven Code ist die zweitbeste Möglichkeit ein Designsystem bereitzustellen. Diese Variante läuft allerdings in Gefahr nicht konsequent aktualisiert zu werden und somit an Relevanz und Beachtung zu verlieren.

Die statische Library ist die Lösung für kleinere Websites, bei denen der Aufwand für das Aufsetzen einer Pattern Library nicht im Verhältnis zum Nutzen steht.  Unabhängig von der Größe eines Online-Shops, profitiert jedes User Interface von einem Designsystem. Kleinere digitale Produktent­wicklungen können sich mit statischen UI-Bibliotheken behelfen, die mit Sketch, Photoshop oder anderen Tools angelegt wurden.

Fazit

Durchdachte Designsysteme mit Pattern Libraries, die an den produktiven Code angeschlossen sind, stellen aktuell die effizienteste Methode dar, Shopinterfaces auszuspielen und weiterzu­entwickeln. Ist das System einmal aufgesetzt, kann der Shop sehr schnell und kostensparend ausgebaut werden. Zudem führt der systematische Designansatz zu mehr Konsistenz und qualitativ besserem Code.

Unternehmen, die die Anfangsinvestion für ein Designsystem nicht stemmen wollen oder können, profitieren von einer statischen Pattern Library, die nach der Atomic Design-Methode oder einer Variante davon, konzipiert wurde.

Die durch die Produktivitäts­steigerung gesparte Entwicklungs­zeit, läßt sich nun an anderer Stelle investieren. Z.B. um das Designsystem weiter an die Nutzer­bedürfnisse anzupassen oder das Marken- und Produkt­erlebnis zu verbessern.

Sie haben eine Frage zum Thema Designsysteme oder möchten wissen wie wir bei einer Umsetzung unterstützen können? Ich freue mich von Ihnen zu hören: markus.remscheid@h2d2.de, Telefon: 030. 78 89 03-21

Markus Remscheid ist Gründer und Geschäftsführer von H2D2 und bringt mehr als 15 Jahre Erfahrung in der Gestaltung von Interface-Systemen für große und kleine E-Commerce-Sites mit.