Future of Industrial Usability Warum Sie an einem Designsystem nicht vorbeikommen

Ein Gastbeitrag von Franz Koller & Juliane Markotschi*

Anbieter zum Thema

Jedes Unternehmen, das mehr als ein digitales Produkt oder einen digitalen Service im Portfolio hat, sollte ein Designsystem haben. Warum sich ein Designsystem schnell auszahlt und wie es entsteht – das zeigen wir anhand eines Beispiels aus der Fertigung.

Designsysteme helfen, der Komplexität der digitalen Welt zu begegnen.
Designsysteme helfen, der Komplexität der digitalen Welt zu begegnen.
(Bild: gemeinfrei / Pixabay)

Modular. Responsiv. Kollaborativ. Die digitale Transformation hat die Produktentwicklung grundlegend verändert: Eine Vielzahl von digitalen Produkten und Services bilden riesige Produktökosysteme. Sie laufen auf unterschiedlichen Plattformen und Devices. Und entstehen, indem Produkt-Entwicklung, Design, Frontend, Backend, Marketing und Vertrieb interdisziplinär zusammenarbeiten.

Daraus ergeben sich vielfältige Herausforderungen für die einzelnen Stakeholder:

  • Wie können Entwicklerinnen und Entwickler neue Features entwerfen, ohne die gleiche Arbeit für unterschiedliche Produkte und Devices immer wieder zu wiederholen?
  • Wie können Unternehmen in der Produktentwicklung effizienter werden? Wie gelingt ein konsistentes Marken- und Nutzungserlebnis auf allen Kanälen und Devices?
  • Wie erreichen Product Owner, dass ihre Produkte schneller und besser auf dem Markt zugänglich sind?
  • Wie stellen Designer und Designerinnen sicher, dass sich alle an die Gestaltungsrichtlinien halten und die gleichen Designelemente und Patterns verwenden?

Conference & Expo: Future of Industrial Usability

Früher noch optional, wird Benutzerfreundlichkeit auch in der Industrie zunehmend zu einem obligatorischen Erfolgskriterium. Doch was bedeutet das und wo fängt man an? Wie gestaltet man eine optimale Mensch-Maschinen-Schnittstelle und erhöht so beispielsweise die Bedien- und Prozess-Sicherheit von Maschinen und Anlagen?
Die Konferenz Future of Industrial Usability am 26. und 27. Oktober in Würzburg liefert Antworten. Das neuaufgelegte Format dient als Plattform, auf der Expertinnen und Experten von neusten Entwicklungen berichten und echter Austausch möglich ist – branchenübergreifend und praxisnah.

Jetzt informieren und Ticket buchen!

Design mit System

Ein Designsystem ist eine lebendige Bibliothek mit klaren Regeln, Prinzipien und wiederverwendbaren Komponenten, auf deren Basis ein Team digitale Produkte oder Services entwirft. Das Designsystem definiert wichtige Gestaltungselemente wie Farben und Typografie, Formsprache, Icons oder auch Animationen – alles, was die Interaktion und das Design einer Marke ausmachen. Komplementiert wird es durch eine Komponenten- und Pattern-Bibliothek, die die wichtigsten UI-Komponenten wie Buttons und viele weitere Controls umfasst.

Ein Designsystem ist aber mehr als nur eine zentrale Komponenten-Bibliothek. Es beschreibt gleichzeitig Gestaltungsprinzipien, wie und wo die einzelnen Bestandteile angewendet werden. Es ist also wie ein Baukasten inklusive Bauanweisung. An diesen vordefinierten, wiederverwendbaren und erweiterbaren Bauteilen können sich Fachkräfte aus Design und Entwicklung bedienen, um neue digitale Anwendungen oder Features zu realisieren.

Designsysteme sind aber kein normiertes Regelwerk. Vielmehr sind sie vergleichbar mit dem Duden. Dieser gibt zwar einerseits einen korrekten Sprachgebrauch vor, passt sich aber auch immer wieder an etablierte Konventionen an und entwickelt sich stetig weiter.

So profitieren Marken und Unternehmen von einem Designsystem

Ein Designsystem ist schon für ein einziges Produkt hilfreich und wirkungsvoll. Es wird aber umso wirkungsvoller, je mehr digitale Produkte und Services Teil des Ökosystems sind – und je mehr Teams daran arbeiten. Darum zahlt sich ein Designsystem aus:

  • 1. Viele Touchpoints, ein einheitliches Markenerlebnis: Nutzende kommen an vielen Touchpoints mit einer Marke in Berührung. Mit einem Designsystem lässt sich das Marken- und Nutzungserlebnis über alle Plattformen hinweg konsistent gestalten. Davon profitiert die Marke, aber auch die Nutzenden. Die einheitliche Bedienung erleichtert das Erlernen und Verstehen von neuer Software. Denn Anwender und Anwenderinnen können bekannte Muster auf die neue Software übertragen. Das wiederum reduziert die kognitive Belastung. Die Einheitlichkeit sorgt insgesamt für eine positive User Experience – und damit für ein wertvolles Differenzierungsmerkmal für die Marke.
  • 2. Brücke zwischen Design und Entwicklung: Ein Designsystem stellt sicher, dass Design- und Entwicklungs-Verantwortliche sowie andere Stakeholder die gleiche visuelle Sprache sprechen. Das verbessert die Kommunikation und Kollaboration zwischen den unterschiedlichen Disziplinen.
  • 3. Schnellere und effizientere Produktentwicklung: Ein Designsystem beschleunigt den Design- und Entwicklungsprozess. Design und Entwicklung lassen sich dank eines Designsystems schnell replizieren. Anstatt ähnliche Komponenten von Grund auf immer wieder neu zu bauen, kann das Projektteam vorgefertigte UI-Komponenten und -Elemente (wieder)verwenden. Da das Team das Rad nicht immer wieder neu erfinden muss, sinken Entwicklungs- und Abstimmungsaufwände. Die Teams gewinnen zudem Zeit, um sich auf größere und komplexere Probleme zu konzentrieren. Da Anwendungen schnell und einfach entstehen, wachsen und skalieren, sinkt die Time-to-Market.
  • 4. Maximale Qualitätssicherung, weniger Fehler: Designsysteme eliminieren viele Fehlerquellen und Redundanzen, da die Teams globale Komponenten nutzen. Der Aufwand für die Qualitätssicherung sinkt, da es nur eine Single Source of Truth gibt. Das gibt Ressourcen frei für mehr Usability- oder UI-Tests, die die Qualität der Produkte und Services weiter optimieren.

Gestaltung eines Designsystems für produktive Apps

Anhand eines Beispiels aus der Fertigung zeigen wir, wie ein Designsystem entsteht. Für unseren Kunden Trumpf entwickelten wir ein Designsystem für die mobile App-Welt des Unternehmens. Dieses hatte zu diesem Zeitpunkt einige Produkt-Apps in Planung, die Mitarbeitenden in der Fertigung ihren Arbeitsalltag erleichtern sollen. Ein app-übergreifendes Designsystem sollte die Basis legen, um diese einheitlicher und effizienter zu entwickeln.

Im ersten Schritt galt es, die Marke in ihren Werten und ihrer Designsprache zu verstehen. Daher analysierten wir bestehende Medien wie Printmedien, die Homepage, die bestehenden Human-Machine-Interfaces, aber auch das Produktdesign: Was funktioniert gut? Was sollte aufgegriffen werden, um eine medienübergreifende Markenwahrnehmung zu sichern? Was lässt sich optimieren? Auf Basis unserer Erkenntnisse entwickelten wir iterativ markentypische Interaktionsprinzipien und Gestaltungselemente. Es entstanden erste Sets an UI-Komponenten, mit welchen wir die wichtigsten Screens ausarbeiteten.

Designsystem auf Basis des Atomic Designs

Die UI-Komponenten dokumentierten wir in einem HTML-Styleguide auf Basis des Atomic-Design-Prinzips nach Brad Frost. Atomic Design ist wörtlich gemeint. Es geht vom Atom als kleinsten Bestandteil eines Designs aus – beispielsweise ein Button oder eine Checkbox. Moleküle sind eine Gruppe von Atomen, die miteinander verbunden sind und die kleinsten Grundeinheiten einer Verbindung darstellen. Dies kann beispielsweise ein Suchfeld sein, das aus den Atomen Eingabefeld und Such-Button zusammengefügt ist. Die nächstgrößere Einheit bezeichnet Frost als Organismus. Sie gruppiert Moleküle zu einer komplexeren Struktur wie beispielsweise einem Seitenheader oder -footer. Eine Gruppe von Organismen bildet wiederum ein Template. Templates sind sehr konkret und stellen den Kontext für diese relativ abstrakten Moleküle und Organismen her. Templates bilden zudem die Grundlage von Pages. Hier werden Platzhalterinhalte durch echte, repräsentative Inhalte ersetzt.

Bildergalerie

Im Trumpf-Styleguide dokumentierten wir alle UI-Komponenten inklusive sämtlicher Zustände und Ausprägungen und stellen ihr Styling als CSS bereit. Da die zu entwickelten Apps überwiegend Webapplikationen sind, haben wir uns bei dem Styleguide mit HTML5 und CSS für eine Webtechnologie entschieden. Entwickelte und implementierte Komponenten sind verlinkt. Entwicklerinnen und Entwickler können so bestehende Komponenten wiederverwenden, ohne sie jedes Mal von neuen entwickeln zu müssen. Immer auf dem neusten Stand, zentral verfügbar, hochdynamisch und übersichtlich – die Vorteile eines solchen Living Styleguides liegen auf der Hand.

Jetzt Newsletter abonnieren

Verpassen Sie nicht unsere besten Inhalte

Mit Klick auf „Newsletter abonnieren“ erkläre ich mich mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung (bitte aufklappen für Details) einverstanden und akzeptiere die Nutzungsbedingungen. Weitere Informationen finde ich in unserer Datenschutzerklärung.

Aufklappen für Details zu Ihrer Einwilligung

Anschließend waren wir bereit, die einzelnen Projekte beziehungsweise Apps zu gestalten. Alle neuen Komponenten, die in den aktuellen Projekten entstehen, sollen wieder in das Designsystem zurückfließen. Dieses entwickelt sich also kontinuierlich weiter. Ein Kernteam von Trumpf und UID mit Fachpersonal aus den Bereichen Konzept, Design und Entwicklung unterstützt die jeweiligen Projektteams beim Gestalten ihrer Produkte mit dem Designsystem. Mit Hilfe dieses Kernteams entstanden so bereits mehrere Anwendungen, wie beispielsweise die Lokalisierungslösung Trumpf Track & Trace sowie der digitale Assistent Fabrication unter Trumpf Oseon.

Menschzentriert gestalten – mit Designsystemen

Wie das Beispiel von Trumpf zeigt: Ein Designsystem hilft dabei, Design und Entwicklung zu skalieren und zu optimieren. Doch eines sollte klar sein: Ein Designsystem allein sorgt nicht automatisch für bessere Produkte. Damit aus den Komponenten und Patterns nutzungsfreundliche Produkte entstehen, führt kein Weg an User Research vorbei. User-Research-Methoden wie Nutzungskontextanalysen helfen Projektteams dabei, die Bedürfnisse von Nutzenden zu analysieren. Das bildet die Basis für die Produktentwicklung.

Mindestens genauso wichtig wie diese Nutzungskontextanalysen ist das iterative Testen und Einholen von Nutzerfeedback. Mit Hilfe von Prototypen können Projektteams so testen, wie ihre Ideen, Konzepte und Designs bei den Nutzenden ankommen und diese verbessern. Nur so kann man sicherstellen, dass ein Designsystem im Sinne der Nutzenden angewandt wird. Im Trumpf-Projekt Oseon besuchten wir beispielsweise ausgewählte Kunden vor Ort und beobachteten die Arbeit in der Fertigung. Mit interaktiven Klick-Dummies testeten wir Konzept und Design regelmäßig mit Nutzenden. Im fortgeschrittenen Entwicklungszustand startete der Einsatz bei Testkunden. Das Feedback der Testkunden nutzen wir, um Oseon kontinuierlich zu optimieren.

Designsystem etablieren und wachsen lassen

Ein Designsystem verändert bestehende Workflows. Es muss daher in vielen Fällen erst eine Awareness bei den Design- und Entwicklungs-Fachleuten geschaffen werden, damit sie das Designsystem überhaupt verwenden beziehungsweise es richtig nutzen. Nur dann kann es seine Vorteile entfalten.

The pixels and code of design systems are easy; it’s the people and relationships that are the most challenging and rewarding.

Ryan Merrill

Die Erfahrung zeigt: Es reicht nicht aus, ein Designsystem einmal zu erstellen. Wie ein lebender Organismus entwickelt es sich als integraler Bestandteil des Unternehmens weiter. Designsysteme müssen daher, vergleichbar wie die Produkte, die aus ihnen entstehen, kontinuierlich gepflegt, geprüft und weiterentwickelt werden. Nur so lässt sich sicherstellen, dass sie immer effizienter, nicht obsolet werden, keine Redundanzen entstehen oder die Systeme sogar veralten. Ändern sich Kundenbedürfnisse oder Anforderungen, muss auch das Designsystem angepasst werden. Ein Designsystem wird nur so effektiv sein, wie das Team, das es verwaltet.

Mehr Konsistenz und Effizienz für Ihr HMI

Ein Designsystem fördert die Zusammenarbeit zwischen Design und Entwicklung. Geschwindigkeit und Effizienz in der Produktentwicklung steigen, so dass sich die Investition schnell auszahlt. Ein Designsystem schafft zudem ein gemeinsames Design-Verständnis und stellt das entsprechende Vokabular bereit. Mit einem solchen System gestaltet ein Unternehmen alle seinen digitalen Touchpoints wie HMI, Apps oder Websites in einer einheitlichen visuellen Sprache. Damit erfahren Nutzende ein konsistentes Marken-Nutzungserlebnis über alle Produkte und Medien innerhalb des Ökosystems hinweg.

Referenteninfo: Franz Koller

Franz Koller ist Gründer und Managing Director der User Interface Design GmbH (UID). Er verfügt über 25 Jahre Erfahrung in der Gestaltung von nutzungsfreundlichen und responsiven HMI für Embedded Systeme, Maschinen, Anlagen und Automatisierungssysteme.
Das Thema Designsysteme stellt er im Rahmen des Events Future of Industrial Usability am 27.10.22 um 15:30 Uhr noch mal ausführlich vor.
Jetzt informieren und Ticket buchen!

* Franz Koller ist Managing Director bei User Interface Design GmbH.

* Juliane Markotschi arbeitet als Lead Corporate Communications bei User Interface Design GmbH.

(ID:48545751)