Der Acolad-Blog

UX, UI – und Konsistenz: Wie ein gutes Designsystem noch besser wird

Geschrieben von Niki Lin | 13.08.2020 07:00:00

Die Vorteile eines Designsystems, das zu Ihrem Unternehmen passt, haben wir ja bereits erläutert. Hier geht es nun um die Frage, worauf Sie dabei unbedingt achten sollten – damit sich Ihre Investition auch wirklich lohnt. Im Wesentlichen sind es drei Aspekte, die über den Erfolg Ihres Designsystems entscheiden. Gehen wir sie der Reihe nach durch: 

1. Markenidentität 

Auf dem Weg zu einer modernen Komponentenbibliothek steht am Anfang die visuelle Sprache  – ganz wie zu den „guten alten Zeiten" der Offline-Styleguides. Die Designelemente? Farbe, Typographie, Bewegung und Raum. Das sind die Grundlagen Ihrer Markenidentität. Wenn die erst einmal steht, können Sie sich einigen nicht interaktiven Basis-Elementen wie Bildzeichen und Logo widmen. 

Einen Styleguide haben inzwischen viele Unternehmen. Allerdings ist der häufig (noch) nicht mit Blick auf Bildschirm-Nutzung und Interaktion optimiert. Manchmal reicht bereits eine kleine Anpassung, etwa ein kräftigeres Rot als zentrale Markenfarbe, da sich der vorherige Rotton am Bildschirm nicht deutlich genug von den übrigen Farben abgehoben hat. 

Eine visuelle Sprache zu gestalten ist ein langer und manchmal mühseliger Prozess – etliche Wiederholungsschleifen inklusive. Zu den Aufgaben des Art Director gehört dabei die Nutzer- bzw. Zielgruppenanalyse: Wo steht die Marke aktuell – und wo soll es hingehen? Sein Team wählt daraufhin die strategisch richtigen visuellen Elemente aus, damit die Neupositionierung gelingt. 

Haben Sie die richtige visuelle Sprache einmal gefunden, sollte sie nicht mehr allzu sehr verändert werden – bleiben Sie konsistent im Narrativ Ihrer Marke. Dennoch: Das Look-and-feel sollte alle paar Jahre dezent nachjustiert werden, denn die Assoziationen von Farben und Formen ändern sich im Laufe der Zeit. Regelmäßiges Feintuning ist besser, als plötzlich überrumpelt festzustellen, dass ein komplettes Rebranding notwendig ist. 

2. UI-Komponenten: Das Look-and-feel beim Nutzer 

Jedes Element, das an digitalen Touchpoints Ihrer Marke zur Interaktion auffordert, ist eine UI-Komponente. Dabei kann es ganz einfach um das Lesen der Inhalte gehen – oder um etwas Komplexeres, etwa das Filtern eine Produktliste. Die UI-Komponenten sind der sichtbare Teil der Informationsarchitektur, auf der sich Ihre Produkte finden lassen. Sie helfen Ihren Nutzern dabei, an jedem Touchpoint ihre Vorhaben möglichst intuitiv umzusetzen. 

Für die Gestaltung der UI-Komponenten – natürlich auf Basis der visuellen Sprache, wie oben besprochen – sind die „Interaction Designer“  zuständig. Sie verlieren dabei nie die Vielfalt der Endgeräte und die unterschiedlichen Größen der Bildschirme aus dem Fokus. Speicherort der UI-Komponenten sollte eine zentrale Komponentenbibliothek sein, auf die alle Teams zugreifen können. Die Kommunikation erfolgt idealerweise über eine digitale Plattform. 

Anders als die eigentliche visuelle Sprache sind die Komponenten in der Bibliothek keineswegs in Stein gemeißelt. Vielleicht macht zum Beispiel das Feedback der Nutzer für bestimmte Komponenten Optimierungsbedarf deutlich. Anders ausgedrückt: Die Komponentenbibliothek ist nicht statisch und niemals „fertig“. Nutzer-Erwartungen ändern sich, Endgeräte werden weiterentwickelt ... Daher kommen immer wieder neue Komponenten hinzu, die Bibliothek wird fortlaufend aktualisiert. 

3. Governance 

Der letzte, aber genauso wichtige Aspekt ist die Governance. Ihre Komponentenbibliothek steht, verschiedene Teams nutzen sie: Web-Redakteure für Webseiten, ITler im Rahmen ihrer Arbeit an Apps, die Marketing-Abteilung für die Unternehmenskommunikation usw.  Dabei haben die Kollegen beim Thema Nutzeroberflächen ganz unterschiedliche Wissensstände. Es bedarf daher klarer Regeln, damit alle Komponenten richtig und zweckmäßig verwendet werden. Dafür gibt es das Steuerungsteam. 

Es könnte zum Beispiel sein, dass Content-Verfasser ein und dieselbe Komponente fälschlicherweise für unterschiedliche Zwecke einsetzen. Das lässt sich von Anfang an vermeiden – indem Sie sicherstellen, dass alle Komponenten sorgfältig dokumentiert sind, einschließlich genauer Regeln, wo eine Komponente weshalb eingesetzt werden soll. 

In den meisten Systemen für Komponentenbibliotheken lässt sich eine Komponente direkt mit den dazugehörigen Regeln und der Dokumentation verknüpfen. Aber: Regeln können missverstanden werden, Menschen machen Fehler. Daher muss das Steuerungsteam unbedingt Qualitäts-Checks machen – auf den verschiedenen Entwicklungsstufen. Das beugt Problemen am Ende vor. 

Im praktischen Einsatz der Komponenten auf den digitalen Plattformen zeigt sich vielleicht, dass die aktuell in der Komponentenbibliothek zur Verfügung stehenden Tools noch nicht jedem Kommunikationsbedarf gerecht werden. Da wird schon mal der Wunsch nach Nachbesserung laut. Oder zwei Teams haben konträre Vorstellungen. Da sollte das Steuerungsteam vermitteln. Schließlich muss es am Ende auch die Regeln durchsetzen. 

Zusammengefasst: 

Als Unternehmen brauchen Sie auf jeden Fall eine Kommunikation, die sich einheitlich präsentiert – sowohl im Ton als auch visuell. Mit einem Designsystem profitiert Ihr Unternehmen technisch und kommunikativ, und das in vielfacher Hinsicht. Doch es ist wie so oft im (Geschäfts-)Leben: Ohne richtige Pflege und eine durchdachte Ein- und Durchführung funktioniert es nicht. 

Wählen Sie daher einen Botschafter, der das Designsystem im Unternehmen bewirbt und weiß, für welche neuen Projekte es die Grundlage bildet – damit das System von Anfang an funktioniert.