Jedes gute Design ist nach einem Design System aufgebaut, das muss aber nicht zwingend das weitverbreitetste Atomic Design sein. Ein Design System bildet für uns die Grundlage, um an User Interfaces von großen Projekten und mit verschiedenen Teams zu arbeiten. Wie das bei uns abläuft und aus welchen Fehlern wir gelernt haben, könnt ihr in diesem Beitrag lesen.
Bevor es ans Eingemachte geht: Was ist überhaupt User Interface (UI)?
Das User Interface (UI) umfasst alle Bedienelemente zwischen Mensch und Maschine, die zur deren Kommunikation nötig sind. Maschinen sind in diesem Fall vorrangig digitale Applikationen, also Apps, Websites, gestengesteuerte Anwendungen im 3-dimensionalen Raum oder auch Voice Interfaces, mit welchen nicht mehr visuell, sondern rein über Texteingabe durch Sprache kommuniziert wird.
Warum brauchen unterschiedliche User Interfaces gemeinsame Regeln?
Die Summe der User Interfaces ist wesentlicher Bestandteil der User Experience (UX), dem Nutzererlebnis. Im zugehörigen Gestaltungsprozess, dem User Experience Design wird insbesondere die Verständlichkeit der Anwendungsfälle, ein tiefes Verständnis für die Zielgruppe und deren tatsächlichem Nutzungsverhalten forciert. So kann ein User Interface in unterschiedlichen Nutzungskontexten unterschiedlich gut beim Nutzer ankommen oder funktionieren. Gewohnheiten und Vorwissen innerhalb der Zielgruppen, einzelne geographische oder auch demographische Unterschiede lassen die Wahrnehmung einer Interaktion teilweise sehr stark variieren.
Durch Gewohnheiten und gelernte Verhaltensmuster, können Nutzer mit begrenztem Wissen und begrenzter Zeit besser Entscheidungen treffen. Das ist ein zentrales Argument dafür, die eigenen User Interfaces, über verschiedene Touchpoints hinweg, konsistent zu halten, solange deren Zielgruppen zumindest große Schnittmengen aufweist.
Abgesehen davon, spart es in der Konzeption und Gestaltung viel Aufwand und Zeit auf schon vorhandenen Designs aufzubauen und diese weiterzuentwickelt. Im Umkehrschluss führt nur ein effizienter Prozess zur Iteration genau dieser bestehenden Design-Regeln auch zu der gewünschten Flexibilität, um auf besondere Anforderungen neuer Interfaces reagieren zu können.
Die fünf häufigsten Fehler im Design-Management, die es zu vermeiden gilt:
Communication is key - wie immer. Fehlt die nötige Struktur treten folgende Probleme immer wieder auf:
- Ergebnisse werden unklar kommuniziert oder sind nur für einen kleinen Kreis zugänglich. So entstehen unterschiedliche Informationsstände und das Arbeitsergebnis kann nicht mehr ganzheitlich bewertet werden.
- Fehlende Übersicht über bestehende Assets und Regeln führen zu unnötigem zusätzlichem Aufwand und sprengen in ihrer Korrektur den ursprünglichen Scope
- Touchpoints entwickeln sich “eigenständig” in unterschiedliche konzeptionelle und visuelle Richtungen, wodurch die Customer Journey und Experience geschädigt werden.
- Einzelne Elemente werden unsauber “nachgebastelt”, da die Originale nicht sauber abgelegt wurden und unter Zeitdruck nicht auffindbar sind.
- Abgelegte Referenz-Layouts sind nicht auf dem aktuellen Stand und sorgen so für mehr Verwirrung als Geschwindigkeit
Struktur schafft Abhilfe
Wie man im gesamten Team remote kommuniziert, haben wir in den letzten Tagen genug lesen und erfahren können, aber dadurch werden die meisten Probleme noch nicht gelöst:
Wir nutzen einen Point-of-Truth für Designer und Entwickler
Bei uns hat sich durchgesetzt, einen kleinen Styleguide z.B. in Zeplin aufzusetzen und hierin alle Layouts und Änderungen hochzuladen. Erst wenn Layouts zentral erfasst wurden, gelten sie als freigegeben. Neue Layouts werden mit einem entsprechenden Tag gekennzeichnet, damit sie erkannt werden. Sobald sie in der technischen Entwicklung sind, wird der Tag aktualisiert.
Neben den Layouts werden auch alle Komponenten mit ihren Zuständen und Ausprägungen einmal abgebildet. Besonderheiten zum Verhalten werden textlich festgehalten. Durch die Strukturierung im Tool lässt sich der Einsatz der jeweiligen Komponenten in den Layouts einfach nachvollziehen.
Wir nutzen eine Source-of-Truth für Designer
Die Source-of-Truth bildet die Quelle, aus der die Komponenten für den Point-of-Truth stammen. Viel wichtiger aber, sie dient als Pattern Library für Designer, die ausschließlich die hier zentral vorgegebenen Styles und Symbole verwenden dürfen.
Pattern Libraries an sich sind nichts Neues. Durch den Einsatz von Sketch werden deren Elemente jedoch im Drag and Drop Verfahren aktiv genutzt und deshalb auch gepflegt.
Es empfiehlt sich daher die Sketch Library direkt zu Projektbeginn aufzusetzen und mit der Zeit weiter wachsen zu lassen. Alle Elemente werden nach Kategorien benannt, sortiert und aufgelistet. Hierdurch zeigt sich schon früh, wie gut das angelegte Design System durchdacht wurde.
Mit Upload in die Sketch Cloud werden die einzelnen Assets allen mitarbeitenden Designern zur Verfügung gestellt. Wer die Library aus der Sketch Cloud hinzugefügt hat, erhält dann ganz automatisch alle Updates und arbeitet jederzeit mit den aktuellsten Versionen.
Layouts aufbauen
Für jedes Projekt sollte eine eigene Layout Datei angelegt und die Pattern Library Elemente eingesetzt werden. Inhalte können so falls nötig individuell überschrieben und Ausnahmen und Sonderfälle gezielt berücksichtigt werden. Grundsätzliche Änderungen im Styling oder Konzept können anschließend in der Library übernommen werden.
Zentrale Änderungen in der Sketch Cloud, die projektübergreifende Layouts betreffen, sollten nicht “mal eben schnell” gemacht, sondern strukturiert auf Kompatibilität geprüft und erst dann übernommen werden. Es empfiehlt sich daher die Bearbeitungsrechte für die Source-of-Truth nur an ausgewählte Teammitglieder zu vergeben.
Design-Komitee
Zur zuverlässigen Abstimmung und Synchronisation der über die Zeit entstehenden User Interfaces, bedarf es einer zentralen Kontrollinstanz. Es hat sich etabliert zu diesem Zweck ein Komitee aus verantwortlichen Projektleitern und Gestaltern zu bilden. In regelmäßigen Abständen werden in diesem Kreis Impulse aus den Einzelprojekten, Neuerungen und zentrale Anpassungen bewertet und beschlossen. So ist sichergestellt, dass sich die Source-of-Truth im Einklang mit den einzelnen Interfaces weiterentwickelt, gleichzeitig die individuellen Projekte aber nicht an Geschwindigkeit verlieren.
Projektspezifische User Interface Elemente
Trotz zentraler Regelverwaltung kann es durchaus vorkommen, dass von einem Element mehr als eine Version existiert. Beispielsweise können die Anforderungen an einen Header in einer mobilen App andere sein, als die einer Webseite. Sofern das Design-Komitee der spezifischen Abweichung zustimmt, kann diese bewusst bestehen bleiben. In einem solchen Fall empfiehlt es sich beide Varianten in der Sketch Library zu erfassen. Nimmt die Anzahl unterschiedlicher Darstellungen ähnlicher Elemente überhand, sollte ein Konsens im Sinne des Nutzers gefunden und die Vielfalt reduziert werden.
Unsere Struktur in Zeplin
Wir legen für inhaltlich zusammengehörige Projekte üblicherweise einen globalen Styleguide in Zeplin an. Hier werden alle Symbole und Styles eingefügt. Die Pattern Library haben wir vorab in Sketch so angelegt, dass nochmal alle Ausprägungen (Status, Bildschirm Varianten, inhaltliche Varianten) nebeneinander gestellt sind und deren Verhalten beschrieben werden kann. Zudem können Links zu Animationen oder Code Snippets hinterlegt werden.
Jedes Projekt wird einzeln angelegt und mit dem globalen Style Guide verlinkt. So werden die Layouts sortiert hochgeladen, werden aber durch die Verknüpfung auch noch in Beziehung zu den einzelnen Symbolen gebracht.
Diese Strukturierung bedarf zwar etwas Einarbeitungszeit, sorgt im Endeffekt aber für die effiziente, eindeutige und langfristig nachhaltige Verteilung von Verantwortlichkeiten und Abhängigkeiten. Die Struktur gibt einen skalierbaren und übersichtlichen Rahmen in dem gehandelt werden kann vor und erleichtert so auch das Onboarding für neue Parteien ungemein.
Unser Ansatz mag nicht vollständig auf jede Struktur anwendbar sein, darf Ihrem Design Management allerdings gerne als Inspiration dienen.
Sollten Sie Unterstützung bei der Implementierung Ihres Prozesses benötigen, zögern Sie bitte nicht Kontakt mit uns aufzunehmen. Unser Experience Design Team steht Ihnen gerne mit Rat und Tat zur Seite.
Sie wollen mehr zu unseren Methoden erfahren?
Unsere wichtigsten Methoden aus über 100 Projekten stellen wir Ihnen kostenlos mit Anleitung,
Praxisbeispielen und Arbeitsvorlagen zur Verfügung.
