User Experience

Sieben praktische Tipps für erfolgreiche Design-Systeme

Dienstag, 28. Januar 2020
Design-Systeme werden in Zeiten komponentenbasierter UX-Architekturen und agiler Arbeitsmethoden für die Entwicklung digitaler Produkte immer wichtiger. Worauf Designer bei Konzeption und Realisation dieser Plattformen besonders achten sollten, erklärt Louis Henrich, UX-Spezialist bei der Digitalagentur Cocomore, in seinem Gastbeitrag für HORIZONT Online.
Unter einem Design-System versteht man eine Sammlung von vorgegebenen Standards und wiederverwertbaren Elementen für das Erscheinungsbild von digitalen Produkten wie Software und Webanwendungen. Wie in einem Baukasten mit Spielsteinen stehen alle Design-Bausteine auf der Plattform gut sortiert zur Verfügung. Das erleichtert den Arbeitsprozess erheblich.

Designer und Entwickler können so ganz einfach Elemente aus dem System einsetzen und wiederverwenden, anstatt die einzelnen Komponenten immer wieder neu kreieren zu müssen. Das spart Zeit – und damit auch Geld. Design-Systeme ermöglichen es dem Team zudem, Erfahrungen der Nutzer aufzugreifen und diese schnell und einfach in die Produkte und Services zu integrieren. Auf diese Weise stellen sie sicher, dass ein konsistentes und nachhaltiges Look and Feel entsteht, das letztlich zu mehr Zufriedenheit und stärkerer Kundenbindung führt.

Neben der Akzeptanz beim User steht weiterhin das Thema Effizienz ganz oben auf der Tagesordnung, wenn man als Entscheider über ein Design-System nachdenkt. Die freiwerdenden Ressourcen können nämlich direkt in die Produktentwicklung einfließen. Es entsteht sozusagen eine Win-Win-Win-Situation.

Design-Systeme erfolgreich implementieren

Die Vorteile liegen auf der Hand, so dass inzwischen immer mehr Unternehmen, Agenturen und Beratungen auf Design-Systeme setzen. Es erfordert jedoch einiges an Know-how, eine funktionierende Lösung zu etablieren. Daher gilt es, folgende Punkte zu beachten:


1.

Layout als Fundament erstellen

Herzstück eines Design-Systems ist das Layout. Dieses beinhaltet die Basis-Richtlinien, auf deren Grundlage Komponenten und Interfaces erstellt werden – wie ein Grid oder vorgegebene Abstände zwischen den Komponenten. Daher gilt es, auf die Erstellung des Layouts ein besonderes Augenmerk zu richten. Wenn das System gleich auf mehrere Produkte angewandt werden soll, ist es sinnvoll, einige Variablen anzulegen, um das Layout dementsprechend anpassen zu können.

2.

Styles festlegen

Styles geben die visuelle Sprache des Produktes vor und zeigen, wie Typografie, Icons und Farben verwendet werden sollen. Hierbei ist es wichtig, auf die Design-Prinzipien der Marke oder des Produkts hinzuweisen. Bei Schriften und Icons sollten die möglichen Anwendungs-Szenarien beschrieben sein. Bei Farben empfiehlt es sich, primäre und sekundäre Farben entsprechend zu kennzeichnen. Je präziser die Anwendungsregeln dargestellt sind, desto einheitlicher wird später die Umsetzung.

3.

Komponenten bündeln

Komponenten sind die Bausteine, aus denen das Produkt besteht. Hier lohnt es sich, aus organisatorischen Gründen und solchen der Skalierbarkeit auf die Prinzipien des sogenannten Atomic Designs zurückzugreifen. Dieses bedient sich Begriffen aus der Chemie: Während Atome, wie beispielsweise ein Icon oder ein Button, die kleinsten Elemente eines Design-Systems darstellen, gibt es auch Moleküle, die aus mehreren Atomen bestehen, sowie Organismen, die ihrerseits ein Gebilde aus mehreren Molekülen sind. Bei der Anwendung dieser Methodik werden sogenannte Artboards erstellt, die das Produkt abbilden.

4.

Variablen ermöglichen

Wenn eine Komponente verschiedene Stati haben kann, werden auch unterschiedliche Variablen benötigt. Das kann beispielsweise ein Button sein, der den Status aktiviert oder deaktiviert haben kann – es bleibt aber der gleiche Button. Solche Komponenten und deren Verhalten müssen detailliert definiert und dokumentiert werden. Dafür ist es sinnvoll, im Design-System einen speziellen Bereich für Variablen anzulegen, in dem die Komponenten und deren Guidelines in allen zur Verfügung stehenden Varianten angezeigt werden.

5.

Barrierefreiheit berücksichtigen

Ein gutes Design-System sollte über Guidelines für die eingeschränkte Nutzung des Produkts verfügen, damit es auch von Menschen mit visuellen, auditiven oder kognitiven Beeinträchtigungen ohne Hilfsmittel benutzt werden kann. Die geeignetsten Maßnahmen sollten dokumentiert werden: Erfüllt das Farbkonzept die Standards für Kontrastverhältnisse? Ist die verwendete Schriftart gut lesbar? Sind die Aktionsflächen auf mobilen Endgeräten groß genug? Sollte das Produkt mithilfe von Screenreadern gelesen werden können?

6.

Usability sicherstellen

Die Bedienbarkeit eines Design-Systems ist entscheidend für seinen Erfolg. Das Team sollte sich also schnell und einfach an das System und dessen Bedienung gewöhnen können. Komponenten und Informationen sollten schnellstmöglich und intuitiv zu finden sein.

7.

Informationsquelle definieren

Wichtig ist, dass alle Elemente und Informationen des Produkts aus einer einzigen Quelle stammen – dabei spricht man von der ‚Single Source of Truth’. Somit ist sichergestellt, dass das gesamte Team immer auf die jeweils geeigneten und aktuellen Bausteine zugreifen kann. Hier unterscheidet man zwischen dem Solitary Model, bei dem nur eine Person berechtigt ist, das System zu erweitern und zu aktualisieren, und dem Centralized Team Model, bei dem mehrere Personen für die Pflege des Design-Systems zuständig sind. Deren Anzahl sollte aber immer möglichst überschaubar bleiben. Dieses Modell eignet sich für komplexere Systeme mit mehreren Produkten. Es hat außerdem den Vorteil, dass Pflege und Erweiterung des Systems nicht von einer einzigen Person abhängig sind.

Design-Systeme als Fundament für den Produkterfolg

Wenn ein Team die wichtigsten Kriterien für ein Design-System berücksichtigt, kann es nicht nur Ressourcen und Kosten sparen. Die Designer tragen so auch aktiv zum Erfolg des Produkts bei. Grund genug, dass sich Marken- und Design-Spezialisten über die Einführung solcher Systeme Gedanken machen.
    stats