Softwareentwickler benötigen Designsysteme, um Produkte mit guter User Experience zu entwickeln

Viele moderne Produktteams entwerfen weiterhin originelle UX-Designs und entwickeln digitale Erlebnisse von Grund auf neu. Dabei übersehen sie die Vorteile der Verwendung vorhandener und bewährter Designmuster, was zu schlechter Benutzerfreundlichkeit, visuellen und verhaltensbezogenen Inkonsistenzen sowie zu längeren Designzyklen führt. Um die Gesamtqualität des Benutzererlebnisses und UX-Qualität zu verbessern, sollten die Führungskräfte der Softwareentwicklung ein Designsystem einsetzen – eine Reihe von wiederverwendbaren Designobjekten und Code-Komponenten der Darstellungsschicht, die durch klare Standards für die Erstellung verschiedener digitaler Produkte geregelt sind.

„Ein Designsystem ist einer der wichtigsten strategischen Vermögenswerte für Ihr Unternehmen. Es ist ein lebendiges digitales Produkt, das ein Team, einen Plan und eine Reihe von spezialisierten Tools erfordert“, so Brent Stewart, Senior Director Analyst bei Gartner.

Jetzt herunterladen: Verbessern Sie die Softwarequalität durch Aufbau digitaler Immunität

Welchen Mehrwert bringt ein Designsystem?

Ein Designsystem schafft eine „einzige Version der Wahrheit“ – eine zentrale Designsprache für UX-Designer, die es ihnen ermöglicht, konsistente Benutzererlebnisse über verschiedene Teams, Kanäle und Plattformen hinweg zu gestalten. Das Wertversprechen eines Designsystems umfasst:

• Geschwindigkeit: Die Design- und Codierungszeit wird erheblich reduziert, da bewährte UX-Designmuster genutzt werden, anstatt alles von Grund auf neu zu erstellen.
• Skalierung: Es ermöglicht Designern und Entwicklern, gemeinsame, genehmigte Designobjekte und Code-Komponenten für ein ganzes Portfolio digitaler Produkte zu nutzen.
• Marken-Compliance: Es wird sichergestellt, dass jedes Designobjekt mit den Markenattributen eines Unternehmens wie Farbe, Logo, Typografie, Sprache, Ton usw. übereinstimmt. 
• Reduzierung von Fehlern: Mit der Zeit werden die Code-Komponenten eines Entwurfssystems „gefestigt“, so dass Produktionsfehler in der Darstellungsschicht seltener werden.

Woraus besteht ein Designsystem?

Ein ideales Designsystem besteht aus Design-Token, anpassbaren UX-Designmustern, produktionsreifen Codes und Anleitungen zur effizienten Bereitstellung leistungsstarker digitaler Produkte. Hier sind die vier Komponenten eines Designsystems:

Stilistische Besonderheiten

Die visuellen, schriftlichen und verhaltensbezogenen Attribute wie Logos, Farbpalette, Ikonographie, Typographie, Stimme oder Tonfall fallen unter das Dach stilistischer Besonderheiten.

Moderne Designsysteme verwenden Design-Token, um die Verwaltung von Farben, Textstilen, Symbolen und mehr zu zentralisieren. Design-Token sind plattformneutrale Einheiten, die Design-Variablen speichern und anstelle von fest kodierten Werten wie Pixel- oder Hex-Werten verwendet werden, um die Konsistenz von UI und UX bei der Skalierung von Designsystemen zu gewährleisten.

Strukturelle Besonderheiten

Strukturelle Besonderheiten sind eine Zusammenstellung von UX-Design-Elementen (bestimmte Schaltflächen, Seitenvorlagen usw.) zur Erstellung benutzerfreundlicher Bildschirmdesigns mit kürzerer Durchlaufzeit. 

Der atomare Designansatz ist eine der beliebtesten Methoden zur Beschreibung der Hierarchie von strukturellen Besonderheiten. Hier eine allgemeine Übersicht:

• Atome: Ein Atom ist die Grundeinheit einer Benutzeroberfläche. Ein einzelnes Formularfeld, ein Drop-down-Menü, eine Schaltfläche oder ein Symbol sind alles Atome. 
• Moleküle: Ein Molekül ist eine kleine Gruppe von UI-Elementen, die zusammen als eine Einheit funktionieren – ein Cluster aus mehreren Atomen. Eine Sammlung von Formularfeldern oder eine zugehörige Schaltfläche zum Absenden kann ein hervorragendes Beispiel für ein Molekül sein.
• Organismen: Ein Organismus ist eine komplexere Einheit in der UX-Design-Hierarchie – ein Aggregat von Molekülen und Atomen. Beispiele für Organismen sind die Hilfsnavigation, die globale Navigation, der Hero Space und die Fußzeile.
• Vorlagen: Eine Vorlage ist ein wiederverwendbares Framework oder Design-Layout, das durch das Ansammeln von Atomen, Molekülen und Organismen entsteht. Zu den Standardvorlagen gehören die Startseite, die Produktlistenseite, die Produktdetailseite und der Warenkorb.
• Websites: Eine Website ist eine vollständig entwickelte und optimierte Version einer Vorlage. Wenn eine Vorlage mit Platzhaltern oder echten Inhalten wie Text, Bildern oder Werbeeinheiten angereichert wird, wird sie zu einer Website.

Code-Komponenten

Code-Komponenten sind ein Inventar produktionsfähiger Codes in dem ausgewählten Framework. Sie sind nach der Hierarchie des atomaren Designansatzes organisiert. Jedem Design-Atom, -Molekül, -Organismus und -Vorlage ist eine entsprechende Code-Komponente zugeordnet. Ausgefeilte Designsysteme tokenisieren Code-Komponenten, um Farben, Typografie, Abstände usw. zentral zu aktualisieren.

Standards

Um effiziente Designsysteme zu schaffen, sollten durchsetzbare Leitprinzipien, Nutzungsrichtlinien und Governance-Politiken vorhanden sein.

Die Leitprinzipien stellen sicher, dass Designobjekte und Code-Komponenten modular, zusammensetzbar, generisch, flexibel und zugänglich sind. Zu den Nutzungsrichtlinien gehören Regeln in Bezug auf Typografie, Farbpalette, Abmessungen und Abstände, Grammatik, Seitenverhältnisse, Schreibstil usw.

Governance-Politiken sind notwendig, um die gegebenen Standards auf Dauer aufrechtzuerhalten. Anstatt das herkömmliche IT-Governance-Modell zu implementieren, können Softwareentwickler einen wiki-ähnlichen Ansatz verwenden. Dies kann den Mitwirkenden die Freiheit geben, stilistische Besonderheiten, strukturelle Besonderheiten und Code-Komponenten auf einer Ad-hoc-Basis zu erstellen, zu aktualisieren und zu löschen, so dass die Produktteams das Design-System spontan verbessern können.

Um die Glaubwürdigkeit des Designsystems aufrechtzuerhalten, kann das Führungsteam neben den vierteljährlichen Überprüfungen auch Ergänzungen, Änderungen und Löschungen während einer wichtigen Veröffentlichung überprüfen.

Nutzen Sie bestehende UX-Designsysteme 

Im Laufe der Jahre wurden verschiedene plattformbasierte und Open-Source-Designsysteme eingeführt, um ein leistungsstarkes UX zu gewährleisten. Für die Entwicklung von Apps auf einer großen Plattform ist es sehr empfehlenswert, diese bestehenden Designsysteme so weit wie möglich wiederzuverwenden. Die Designobjekte und Code-Komponenten dieser Systeme stützen sich auf umfangreiche Untersuchungen zum UX in Produktkategorien wie Kundenbeziehungsmanagement (CRM, Customer Relationship Management) und Warenwirtschaft (ERP, Enterprise Resource Planning). 

Weisen Sie ein Team für Designsysteme zu 

Behandeln Sie Ihr Designsystem wie ein digitales Produkt, indem Sie eine Produktführung einrichten, die aus einem Produktbesitzer, einem UX-Leiter und einem Entwicklungsleiter besteht. 

Die drei Leiter können das Designsystem durch operative, gestalterische und technische Beratung verbessern. Das Team kann auch Mitwirkende wie UX-Designer, Content-Strategen, Front-End-Entwickler und Spezialisten für Barrierefreiheit haben, die jede Version des Designsystems bearbeiten.