![\"illustration](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/illustration-ux-design-system-2.jpg\")
<\/p>\n<\/p>\n
Digitale Produkte werden mit jedem Jahr komplexer und interoperieren in systemischen Zusammenh\u00e4ngen. Unternehmen denken daher immer h\u00e4ufiger in Plattformen und digitalen \u00d6kosystemen statt in monolithischen Gro\u00dfprodukten. Um Komplexit\u00e4t zu beherrschen, ist die Etablierung eines \u00fcbergreifenden Design Systems, daher einer der wichtigsten strategischen Faktoren in der nutzer-zentrierten \u00c4ra.<\/strong><\/p>\n Und diese \u00c4ra wird nun immer KI-getriebener: Seit ChatGPT und Midjourney schreitet die Entwicklung KI-basierter Werkzeugen in einem atemberaubenden Tempo voran und l\u00e4sst gef\u00fchlt keinen Stein auf dem anderen. Auch an Design Systemen geht dieser Vormarsch sicherlich nicht spurlos vor\u00fcber. Doch Design System sind f\u00fcr jedes Unternehmen eine langfristige Investition und entwickeln sich evolution\u00e4r. Daher ist die Frage berechtigt: welche Konsequenzen ergeben sich f\u00fcr die Etablierung und Verbesserung von Design Systemen in einer KI-getriebenen Welt und wie stellt man sich als Unternehmen strategisch darauf ein?<\/p>\n Um eine Prognose zur zuk\u00fcnftigen Gestalt von KI-getriebenen Design Systemen abgeben zu k\u00f6nnen, lohnt es sich, zun\u00e4chst den Begriff des \u201eSystems\u201c in den Fokus zu nehmen. In der Dom\u00e4ne des System Engineering lautet die Definition folgenderma\u00dfen:<\/p>\n Ein System ist eine Menge interagierender Elemente, die einen oder mehrere Zwecke erf\u00fcllen.<\/em><\/p><\/blockquote>\n Unter professionellen System Engineers gibt es daher die vorherrschende Meinung, dass beispielsweise ein Lego-Bausatz kein System darstellt:<\/p>\n \u201eWas ist denn nun definitiv kein System? Meine Antwort: ein Lego-Bausatz! Das ist eine Menge von Elementen, die aber nicht interagieren. Diese Menge hat zwar auch Eigenschaften, sie ergeben sich aber durch einfache Aufsummierung (etwa das Gesamtgewicht).\u201c \u2013 Axel Scheithauer<\/a><\/p><\/blockquote>\n Die Tatsache, dass die Elemente eines Lego-Bausatzes in beliebiger Art und Weise miteinander kombinierbar sind, scheint in dieser Betrachtung somit kein system-stiftendes Kriterium zu sein.<\/p>\n Diese Perspektive d\u00fcrfte sowohl f\u00fcr Au\u00dfenstehende als auch f\u00fcr den ein oder anderen UX Professional zun\u00e4chst schwer nachvollziehbar sein, zumal in der UX-Community ein Design System vordergr\u00fcndig sehr h\u00e4ufig als eine Sammlung verschiedener UI Elemente und Patterns unterschiedlicher Komplexit\u00e4tsstufen beschrieben wird und dem Grundprinzip eines Lego-Bausatzes somit sehr nah kommt. Tats\u00e4chlich beschr\u00e4nken sich UI-lastige Design Systeme in der Praxis leider sehr oft auf blo\u00dfe Elementbeschreibungen und zielen weniger auf dynamische Wechselspiele oder eine tiefgr\u00fcndige Betrachtung der \u201eZweckerf\u00fcllung\u201c ab.<\/p>\n Um eine solide Basis f\u00fcr die Etablierung eines Design Systems in interdisziplin\u00e4ren, agilen Teams zu schaffen, definieren wir ein Experience Design System in unserem \u201eContinuous UX<\/a>\u201c Prozessbaukasten daher wie folgt:<\/p>\n \u201eEin Experience Design System ist die Gesamtheit von miteinander in Beziehung stehenden Nutzeranforderungen, Interaktionspatterns, Gestaltungskomponenten und Code Bausteinen, die multi-disziplin\u00e4re Teams dazu bef\u00e4higen, konsistente User Interfaces \u00fcber Abteilungs- und Produktgrenzen hinweg effizient und effektiv zu realisieren.\u201c<\/em><\/p><\/blockquote>\n Diese Definition orientiert sich stark an der origin\u00e4ren Definition aus dem System Engineering und fokussiert daher nicht vordergr\u00fcndig auf UI Komponenten, sondern vor Allem auf das Wechselspiel zwischen Nutzer*innen, Anforderungen, Patterns und UI Komponenten, sowie auf den Zweck, der mit Hilfe des Design Systems erf\u00fcllt werden soll.<\/p>\n Um beispielsweise als Product Owner oder gar Chief Product Owner Sinn und Zweck eines Design Systems besser einsch\u00e4tzen zu k\u00f6nnen, gibt es eine Reihe von Indikatoren, die signalisieren, ob dessen Kosten und Nutzen in einem guten Verh\u00e4ltnis zueinanderstehen. An dieser Stelle seien daher die wichtigsten Investitions-Indikatoren aufgelistet, die f\u00fcr die Etablierung und Pflege eines Design Systems sprechen, sofern eine durchgehend gute User Experience eines strategisches Ziel des jeweiligen Unternehmens ist:<\/p>\n Unabh\u00e4ngig von der Definition sowie dem Sinn und Zweck eines Design Systems, stehen UX und Digital Designer regelm\u00e4\u00dfig vor der Aufgabe, Design System Elemente auf den einzelnen Komplexit\u00e4tsstufen mit eindeutigen Begriffen zu belegen. Eine Betrachtungsweise, die sich in der UX Community recht gut durchgesetzt hat, entleiht dabei Begriffe aus der Chemie und teilt Elemente unter dem Oberbegriff \u201eAtomic Design<\/a>\u201c in folgende Kategorien ein:<\/p>\n Diese Einteilung greift aus meiner Sicht an vielen Stellen zu kurz. Zum einen fallen \u201eTemplates\u201c und \u201eSeiten\u201c aus der Begriffshemisph\u00e4re der Chemie ohne nachvollziehbare Begr\u00fcndung heraus. Dies erschwert es in komplexeren Projekten, die Evolution eines Design Systems entlang eines \u201eroten Fadens\u201c zu Ende zu spinnen. Zum anderen beziehen sich diese Kategorien ausschlie\u00dflich auf UI- und Gestaltungselemente. Auch der \u201ePattern\u201c Begriff avanciert beim Atomic Design in der Praxis oftmals ungewollt vom \u201eL\u00f6sungsmuster\u201c zur \u201ekonkreten L\u00f6sung\u201c und damit eher zur \u201eUI Komponente\u201c \u2013 der Pattern Begriff entfernt sich daher leider von Christopher Alexanders in seinem herausragenden Buch \u201eA Pattern Language<\/a>\u201c vorgestellten Idee.<\/p>\n F\u00fcr einen smoothen \u201eContinuous UX\u201c Prozess halte ich es f\u00fcr essenziell, dass ein Design System nicht nur UI- und Gestaltungs-Elemente enth\u00e4lt (also Elemente aus dem \u201eL\u00f6sungsraum\u201c), sondern auch Kontextelemente (also Elemente aus dem \u201eProblemraum\u201c). Es handelt sich also um jene Elemente, die eher der Anforderungsanalyse oder dem \u201eRequirements Engineering\u201c entspringen. Diese Problemraum-Elemente unterstreichen die Natur eines \u201eechten\u201c Systems, da erst mit ihrer Hilfe Sinn und Zweck anderer Elemente definiert werden k\u00f6nnen. In diesem Sinne empfiehlt unser Continuous UX Baukasten, folgende Artefakte aus dem Problemraum ebenfalls zu den Inhalten eines Design Systems zu z\u00e4hlen:<\/p>\n Nun klingt die Erweiterung eines Design Systems um Anforderungselemente aus dem Problemraum zun\u00e4chst nach mehr<\/em> statt weniger Arbeit und damit auch nach h\u00f6heren Kosten. Umso besser, muss der Nutzen einer solchen Erweiterung begr\u00fcndet werden.<\/p>\n Hier ein Versuch: im Grunde k\u00f6nnen moderne KI-basierte Werkzeuge bereits \u00fcberraschend viele UX und UI Aufgaben l\u00f6sen und nehmen uns jeden Tag ein bisschen mehr Arbeit ab. Egal ob ChatGPT<\/a>, Midjourney<\/a>, Galileo.ai<\/a>, uizard.ai<\/a>, Figma AI Addons<\/a> oder dergleichen: wenn wir der KI nur exakt genug schildern, was wir eigentlich wollen, dann bekommen wir auch \u00fcberraschend gute Ergebnisse. Umgekehrt hei\u00dft das: solange wir nicht sagen k\u00f6nnen was wir konkret wollen, werden wir von den L\u00f6sungen entt\u00e4uscht sein. Folgendes Zitat fasst diesen Sachverhalt knackig und humorvoll zusammen:<\/p>\n \u201eUm unseren Job durch KI zu ersetzen, m\u00fcssten Kunden erst einmal ihre Anforderungen richtig beschreiben. Macht euch keine Sorgen.\u201c<\/em><\/p><\/blockquote>\n Die Arbeit, ein UX Design System zu etablieren und zu pflegen wird also in Zukunft vielleicht nicht weniger, sie verlagert sich aber immer mehr in Richtung einer guten Anforderungsanalyse und einem soliden Requirements Engineering. Wenn die Nutzungskontexte, sowie die Frustrationen und Motivationen der Zielgruppe konkret genug beschrieben sind, dann ist eine LLM-basierte KI durchaus in der Lage. damit \u00fcberraschend effektive L\u00f6sungen zu liefern.<\/p>\n Hier ein kleiner Vorgeschmack aus einem Chat mit ChatGPT 4.0.<\/p>\n Imagine the following usage context: a machine plant where operator needs to load material into machines while shift leads are observing and monitoring the OEE of the production, trying to reduce human and technical errors as much as possible. some of the operators are frustrated though, because the do not understand the error messages of most machines. also they tend to forget to fetch new material early on, as they are in a rush with a lot of small manual tasks.<\/strong><\/p>\n How could a UI design system help and which UI elements should be contained in that design system in order to cover that scenario? Use the Atomic Design framework for your answer and apply the needed elements to the given scenario.<\/p>\n<\/div>\n ChatGPT<\/strong>:<\/p>\n „Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages are atoms, molecules, organisms, templates, and pages. Let’s apply these elements to the machine plant scenario:<\/p>\n Atoms<\/strong> Molecules<\/strong> Organisms<\/strong> Templates<\/strong> Pages<\/strong> Remember that atomic design is about creating a system that promotes consistency and cohesion while providing a clear methodology for crafting design systems. These are some of the ways it could be applied to the machine plant scenario, but the exact implementation would depend on the specific needs of the users and the requirements of the environment.“<\/p>\n<\/div>\n<\/div>\n Wenn schon so wenig Kontextinformation, ein so passendes erstes Skelett f\u00fcr ein \u201eUI Design System\u201c liefert, wie werden die Ergebnisse erst, wenn wir noch mehr und noch bessere Kontextinformationen liefern? Im zweiten Teil meines Artikels, werde ich mich genau dieser Frage widmen und den Weg hin zu einem echten \u201eUX Design System\u201c schildern.<\/p>\n <\/p>\n","protected":false},"author":5,"featured_media":0,"template":"","tags":[984,569,534,839],"class_list":["post-16229","blog","type-blog","status-publish","hentry","tag-ai-de","tag-continuous-ux-de","tag-design-system","tag-ki"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/16229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/5"}],"version-history":[{"count":8,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/16229\/revisions"}],"predecessor-version":[{"id":16248,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/16229\/revisions\/16248"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=16229"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=16229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Was ist ein Design System und was beinhaltet es?<\/h2>\n
![\"LEGO](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/lego-block-building-set.jpg\")
<\/p>\nInvestitions-Indikatoren f\u00fcr POs und Digital-Strategen<\/h2>\n
\n
Typische Elemente in Design Systemen<\/h2>\n
\n
Mehr als UI Elemente<\/h2>\n
\n
Mehr Aufwand? Dank KI nicht wirklich \u2026<\/h2>\n
\n\n\n
\nAtoms are the basic building blocks of matter. Applied to web interfaces, atoms are our basic HTML elements, like a form label, an input, or a button.<\/p>\n\n
\nMolecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.<\/p>\n\n
\nOrganisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.<\/p>\n\n
\nTemplates consist of groups of organisms stitched together to form pages. It’s where we start to see the design coming together and start seeing things like layout in action.<\/p>\n\n
\nPages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.<\/p>\n\n