Entwerfen von modularen UI-Systemen über Styleguide-gesteuerte Entwicklung

Die Verwendung eines Styleguides zur Steuerung der Entwicklung ist eine Praxis, die in der Front-End-Entwicklung viel Anklang findet – und das aus gutem Grund. Entwickler beginnen im Styleguide, indem sie neuen Code hinzufügen oder bestehenden Code aktualisieren und so zu einem modularen UI-System beitragen, das später in die Anwendung integriert wird. Aber um ein modulares UI-System zu implementieren, müssen wir das Design modular angehen.

Modulares Design ermutigt uns, UI und UX in Mustern zu denken und zu entwerfen. Anstatt beispielsweise eine Reihe von Seiten oder Ansichten zu entwerfen, damit ein Benutzer eine Aufgabe ausführen kann, würden wir den Designprozess damit beginnen, zu verstehen, wie das UI-System strukturiert ist und wie seine Komponenten zum Erstellen des Benutzerflusses verwendet werden können.

Weiterführende Literatur zu SmashingMag:

• So erstellen Sie einen effektiven Styleguide
• Ein umfassender Überblick über Living Style Guide Tools
• Automatisierung der Styleguide-gesteuerten Entwicklung
• Free Style Guides Icon Set für Autoren und Redakteure

In diesem Beitrag erkläre ich den Wert der Modularität im UI-Design und wie es mit dem Prozess der Styleguide-gesteuerten Entwicklung zusammenhängt, der die Implementierung flexibler und benutzerfreundlicher Anwendungen verbessert und Designern und Entwicklern hilft, produktiver zusammenzuarbeiten.

Modulares Design in der Benutzeroberfläche

Beim modularen Design geht es darum, ein Design in kleine Teile (Module) zu zerlegen, diese unabhängig voneinander zu erstellen und sie dann später zu einem größeren System zu kombinieren. Wenn wir uns umschauen, finden wir viele Beispiele für modulare Bauweisen: Autos, Computer und Möbel sind alle modular. Aufgrund ihrer Modularität können Teile dieser Systeme ausgetauscht, hinzugefügt, entfernt und neu angeordnet werden. Dies ist großartig für Verbraucher, da sie das System an ihre Bedürfnisse anpassen können . Wollen Sie ein Schiebedach, einen stärkeren Motor, Ledersitze? Du hast es! Der modulare Aufbau von Autos ermöglicht diese Art von Anpassungen und vieles mehr.

Ein weiteres großartiges Beispiel sind IKEA-Möbel. In den folgenden Abbildungen können Sie sehen, dass die Modularität des Designs nicht nur in der Form des Bücherregals liegt, die es ermöglicht, es in verschiedene Richtungen zu stellen, oder darin, dass Sie Einsätze in seine Öffnungen einfügen können, sondern auch ganz Teile, aus denen das Stück selbst besteht, bei denen es sich um Rechtecke unterschiedlicher Größe handelt, die dasselbe Muster wiederholen.

Aus Fertigungssicht ist modulares Design auch kosteneffizient. Ein wichtiger Aspekt dabei ist, dass es einfacher und billiger ist, kleine einfache Teile zu bauen, die später verbunden werden können, als ein großes komplexes Teil auf einmal zu bauen. Darüber hinaus kann die Lösung immer wieder verwendet werden, was die Produktivität maximiert.

Die Ziele beim Erstellen eines UI-Designs sind ähnlich. Als Designer möchten wir ein UI-System schaffen, das sowohl im Aufbau als auch im Betrieb effizient ist. Wenn wir eine Lösung für ein Problem finden, möchten wir die Lösung an vielen Stellen wiederverwenden können. Dies spart nicht nur Zeit, sondern legt auch ein Muster fest, das Benutzer einmal lernen und in anderen Bereichen der Anwendung erneut anwenden können. Außerdem wollen wir das System für bestimmte Szenarien anpassen können, ohne alles umstrukturieren zu müssen.

Genau das bringt Modularität in das UI-Design: Sie führt zu einem System, das flexibel, skalierbar und kosteneffizient , aber auch anpassbar, wiederverwendbar und konsistent ist .

Beispiele für modulares Design

Einige Beispiele für modulares UI-Design können in Mustern wie reaktionsschnellen Rastern, Kachelfensterdesign und Kartendesign gesehen werden. In allen werden Module wiederholt verwendet, um ein flexibles Layout bereitzustellen, das sich leicht an unterschiedliche Bildschirmgrößen anpasst. Darüber hinaus fungieren die Module als Container für Komponenten, die es uns ermöglichen, verschiedene Arten von Inhalten und Funktionen einzufügen, ähnlich wie die Einsätze, die einem IKEA-Schrank hinzugefügt werden können.

Ist das homogen?

Wenn es beim modularen Design darum geht, ein System zu entwerfen, und UI-Systeme meistens aus denselben Teilen bestehen (Schaltflächen, Schriftarten, Symbole, Raster usw.), dann fragen Sie sich vielleicht:

• Werden modulare Designs nicht alle gleich aussehen?
• Wie wird sich dies auf die Markenidentität auswirken?
• Wie kann die UI eines Produkts einzigartig gemacht werden?

Diese Fragen sind zwar berechtigt, werfen aber eine grundlegende Frage auf: Wo liegen Innovation und Einzigartigkeit im Produktdesign? Diese Debatte hat in letzter Zeit wieder zugenommen (siehe „Die unerträgliche Homogenität des Designs“ und „Verteidigung des homogenen Designs“), aber ich würde sagen, dass wir, weil visuelles Design das ist, was wir zuerst sehen, dazu neigen, zu glauben, dass Innovation und Einzigartigkeit darin liegen wie ein Design aussieht. Die visuelle Gestaltung ist jedoch nur ein Teil davon. Innovation und Einzigartigkeit im Produktdesign müssen im gesamten Produkt berücksichtigt werden: in der Werthaltigkeit, die es bietet, und in der Art und Weise, wie Menschen es erleben, einschließlich seines Aussehens. Nimm einen Stuhl. Es muss ein Stuhl sein, aber nicht alle Stuhldesigns sehen gleich aus, fühlen sich gleich an oder funktionieren gleich. Tatsächlich war das Stuhldesign historisch gesehen ein Bereich der Innovation in Design und Materialien. Ebenso haben Benutzeroberflächen ihre eigenen Anforderungen, und die Verwendung von Mustern, die nachweislich funktionieren, bedeutet nicht, Innovation und Einzigartigkeit zu opfern. Im Gegenteil, Innovation und Einzigartigkeit sind erforderlich, um die speziellen Probleme Ihrer Kunden zu lösen. Das Schöne am modularen Design ist, dass es uns ermutigt, diese Lösungen als ein System miteinander verbundener Teile zu betrachten, anstatt isolierte Originallösungen zu finden, um anders zu sein. Mit anderen Worten, ein innovatives Design, das auf ein UI-Steuerelement angewendet wird, bleibt nicht an einer Stelle in der Anwendung, sondern durchdringt das gesamte System, erhält den Zusammenhalt und verbessert die Benutzerfreundlichkeit.

Die Modularität der Styleguide-Drive-Entwicklung

Von der Implementierungsseite her ist die Styleguide-getriebene Entwicklung ebenfalls sehr modular. Für den Anfang beginnt der Prozess mit einer Entdeckungsphase : Verstehen des Problems, das gelöst werden muss, Sammeln von Anforderungen und Iterieren durch Designlösungen. Während die Designlösungen normalerweise als Gesamtpaket oder Feature präsentiert werden, sollten sie wirklich die Kombination der vielen Teile des Systems sein, die im Styleguide dokumentiert sind. Einige Teile des Designs sind möglicherweise neu, sollten aber dennoch als Module erstellt werden. Der Punkt ist, den Styleguide zu verwenden, um zu bestimmen, welche Module im UI-System verfügbar sind, die wiederverwendet oder erweitert werden können, um das Design zu erstellen.

(Was ist, wenn es keinen Styleguide gibt? Machen Sie sich keine Sorgen! Ich werde Ihnen im nächsten Abschnitt zeigen, wie Sie modular designen können, auch wenn Sie keinen Styleguide verwenden.)

Der nächste Schritt in der Styleguide-gesteuerten Entwicklung ist die Abstraktionsphase , die im Grunde die Übung ist, die Designlösung in kleinere Teile zu zerlegen. Während dieser Phase arbeiten Designer und Entwickler zusammen, um das vorgeschlagene Design zu erkennen und die Elemente und Komponenten (dh Module) zu identifizieren, die entweder verwendet oder verbessert werden oder die für die Implementierung erstellt werden müssen.

Die Abstraktionsphase dient auch dazu, einen Plan für den nächsten Schritt zu skizzieren: Implementierung und Dokumentation . Während dieser Phase werden die Module isoliert von den übrigen vorhandenen Modulen entweder erstellt oder erweitert. In der Webentwicklung bedeutet dies, eine Komponente zu bauen oder die Stile für ein Element unabhängig von der Anwendung zu definieren. Dies ist ein wichtiger Aspekt der Modularität, da es Ihnen hilft, Probleme frühzeitig im Prozess zu erkennen und unvorhergesehene Abhängigkeiten mit anderen Teilen des Systems zu vermeiden. Das Ergebnis sind stabilere Teile, die sich einfacher in das Ganze integrieren lassen.

Etwas Einzigartiges an der Styleguide-gesteuerten Entwicklung ist, dass während die Implementierung fortschreitet, auch die Dokumentation stattfindet, anstatt ein nachträglicher Einfall zu sein. Dies ist möglich, weil durch den Einsatz eines Styleguide-Generators die Dokumentation zu einem lebendigen Styleguide wird, der sowohl als Framework als auch als Sandbox für die Umsetzung dient:

• Der Living Style Guide dient als Definitionsrahmen für UI-Elemente (z. B. Überschriften, Listen, Links, Eingabesteuerelemente usw.) und als Bibliothek von Komponenten (z. B. Navigationssysteme, Symbolleisten, Suchwerkzeuge, Rastertabellen usw.). ), die verwendet werden können. Das bedeutet, dass die Entwicklung nicht jedes Mal bei Null begonnen wird. Stattdessen baut es auf bestehenden Definitionen im UI-System auf und trägt dazu bei.
• Es ist auch eine Sandbox , da es als Demonstrationsraum zum Erstellen und Testen der Implementierung dient. Genau hier findet die Entwicklung statt, bevor es in die Anwendung integriert wird.

Der letzte Schritt der Styleguide-getriebenen Entwicklung, die Integrationsphase , ähnelt dem Montageschritt im modularen Design. Die benötigten UI-Elemente oder Komponenten sind entwickelt und können in die Anwendung integriert werden. Was bleibt, ist, sie zu konfigurieren und anzupassen. Während der Integration ist der Styleguide wie jede gute Bedienungsanleitung, die verwendet wird, um ein physisches modulares Design zusammenzustellen.

Nachdem wir nun die grundlegenden Konzepte des modularen Designs und der auf Styleguides basierenden Entwicklung identifiziert haben, wollen wir sie anwenden.

Modular gestalten

Stellen Sie sich Folgendes vor: Sie haben sich einen großartigen Benutzerfluss ausgedacht, Mockups und Prototypen zusammengestellt, um die Interaktionen zu veranschaulichen, und jeden einzelnen Teil dokumentiert. Die Chancen stehen gut, dass Ihre Designs bereits einem Styleguide folgen, was Ihnen einen großen Vorteil verschaffen könnte. (Wenn nicht, schwitzen Sie nicht!) Treten Sie einfach einen Schritt zurück und beginnen Sie, die Hauptteile Ihrer Designlösung auf hohem Niveau zu entwerfen. Diese Teile könnten die Interaktionspunkte sein, an denen bestimmte Dinge ausgeführt werden. Ein Checkout-Flow könnte beispielsweise so aussehen:

Aber halten Sie Ihre Waffen fest! Dies sind noch keine Module. Um dorthin zu gelangen, müssen wir die UI-Elemente identifizieren, die im Flow persistent sind, wie zum Beispiel:

• die Checkout-Schrittanzeige,
• Formularelemente zur Eingabe von Informationen,
• die Darstellung von Produkten im Warenkorb,
• die Darstellung verwandter Produkte, die andere gekauft haben,
• Richtlinien über den Kauf,
• Hilfstext,
• Nachrichten und Warnungen.

Wenn wir etwas tiefer graben, werden wir auch Stile und Interaktionsmuster finden:

• Stile:

• Farben zur Bezeichnung von:

  • Fehler-, Erfolgs-, Warn- und Informationsmeldungen;
  • primäre versus sekundäre Aktionen;
  • inaktive versus ausgewählte versus deaktivierte Zustände;
  • Links versus normaler Text;
  • Branding;

• Typografie, die verwendet wird, um verschiedene Arten von Inhalten zu bezeichnen:

  • Schriftgröße zum hierarchischen Anordnen von Informationen;
  • Schriftarten zum Hervorheben von Nachrichten oder Bereitstellen zusätzlicher Informationen;
  • Listen zur Zusammenfassung von Informationen;

• Ikonographie, um visuelle Bedeutung zu vermitteln und um schnell auf häufige Aktionen zu verweisen.

• Interaktionsmuster:

  • anstehende Schritte anzeigen (deaktiviert);
  • vorherige Schritte anzeigen (aktiviert, damit die Informationen bearbeitet werden können);
  • Anzeigen von Zusammenfassungen, die bearbeitet werden können;
  • Validieren von Informationen, sobald der Benutzer aus dem Feld geklickt hat;
  • Bereitstellen von Hilfetext beim Rollover;
  • Aktualisieren des Einkaufswagens, sobald eine Auswahl getroffen wurde.

Sobald das Design in all diese kleineren Teile zerlegt ist, haben wir endlich unsere Module. An dieser Stelle ist es einfacher zu erkennen, dass viele von ihnen nicht nur für den Checkout-Prozess gelten, sondern für viele andere Bereiche der Anwendung. Mit einem modularen Designansatz können diese Module so erstellt werden, dass sie in diesem speziellen Design sowie in zukünftigen verwendet werden können.

Atomic Design ist als Methode erwähnenswert, die diesen Prozess der Erstellung modularer Designs beschleunigen kann. Diese Methodik analysiert die Beziehungen zwischen den verschiedenen Teilen des Systems und wie sie miteinander in Beziehung stehen, wobei die Chemie als Analogie verwendet wird. Das Durchlaufen der Schritte ist so ziemlich das Gegenteil unserer vorherigen Übung:

1. Wir gehen von den Atomen aus, die die kleinsten Module im System sind (in unserem Beispiel die Schaltflächen, die Typografie und die Ikonografie).
2. Die Module werden immer komplexer und verbinden sich zu Molekülen , die mehr Funktionalität bieten (in unserem Beispiel die Indikatoren für die Checkout-Schritte und das zugehörige Produktmodul).
3. Dann gibt es Organismen , das sind Moleküle, die in der Anwendung gruppiert sind (in unserem Beispiel der Header der Anwendung und verschiedene Formulare).
4. Verlassen wir die Chemie-Analogie, ist die nächste Ebene die Schablonen , die vordefinierte Strukturen sind, in denen Organismen platziert werden.
5. Schließlich gibt es Seiten , die Instanzen von Vorlagen sind.

Das fehlende Stück hier ist eine Möglichkeit, die identifizierten Module zu dokumentieren. Dabei geht es nicht nur darum, ein Spezifikationsdokument zu erstellen, um festzuhalten, wie die Module aufgebaut werden müssen, oder Richtlinien zu schreiben, die allgemeine Definitionen wie Markenfarben und Schriftfamilien (die für jeden Standard-Styleguide typisch sind) festhalten. Vielmehr muss die Dokumentation ausgefeilter und dynamischer sein, damit die Dokumentation nicht veraltet, wenn sich diese Module ändern (und Sie wissen, dass sie es tun werden!). Genau hier füllen Wohnstil-Guides die Lücke!

Mit einem Living Style Guide

Ein Living Style Guide kann während des Designprozesses sehr nützlich sein, da er mehrere Dinge bietet.

Eine Basis, mit der man arbeiten kann

Anstatt jedes Mal bei Null anzufangen, gibt der Styleguide die visuelle Richtung vor und die Module, die Sie verwenden sollten, um das Design zu erstellen.

Da ein lebendiger Styleguide aus tatsächlichem Code generiert wird, spiegelt er die neueste und beste Version des implementierten Designs wider.

Dokumentation von Designlösungen

Das Wissen, das zur Lösung eines bestimmten UI- oder UX-Problems erworben wurde, kann zur späteren Verwendung bereitgestellt werden.

Dies trägt dazu bei, die Konsistenz bei der Implementierung aufrechtzuerhalten, und ermutigt Sie, jede neue Lösung in einen Teil des aktuellen Designs einzufügen.

Sie entwickeln Muster, mit denen sich Benutzer vertraut machen können, und verbessern so die Benutzerfreundlichkeit.

Einfache Kommunikation

Der Leitfaden hilft bei der Kommunikation des Designs, indem er die aktuellste Darstellung der Benutzeroberfläche bereitstellt (im Gegensatz zu statischen Mockups, die schnell veraltet sind).

Eine gemeinsame UI-Sprache wird entwickelt, weil man die verschiedenen Elemente im Styleguide benennen muss. Dies erfordert nicht nur die Zusammenarbeit zwischen UI-Designern, sondern zwischen Designern und Entwicklern, was ein großer Vorteil ist, wenn Sie kommunizieren müssen, wie ein Design implementiert werden soll.

Unabhängig davon, ob Sie bereits einen Styleguide haben oder planen, einen zu erstellen, die Automatisierung des Prozesses bringt Sie in die richtige Richtung und treibt den Designprozess auf modulare Weise voran. Wenn Sie also bereit sind, einen Generator für Wohnstil-Guides zu kaufen, dann würde ich die folgenden Ressourcen empfehlen:

• „Ein umfassender Überblick über Living Style Guide Tools“, Robert Haritonov, Smashing Magazine
• „Überblick über Musterbibliotheksgeneratoren“, David Hund, GitHub
• „Style Guide Generator Roundup“, Susan Robertson, A List Apart

Nehmen Sie es nicht auf die Spitze!

Nachdem wir uns nun angesehen haben, wie der Designprozess verfeinert werden kann, um Modularität sowie die Vorteile eines Living Style Guides zu integrieren, wollen wir einige der häufigsten Fallstricke untersuchen, denen Sie dabei begegnen könnten.

Der Styleguide ersetzt keine Designarbeit

Es ist nicht ungewöhnlich, von Managern zu hören, dass der größte Teil der Designarbeit erledigt ist, sobald der Living Style Guide steht. Während ein Großteil der sich wiederholenden und trivialen Arbeit erledigt wird (z. B. das Prototyping der verschiedenen Zustände einer Schaltfläche immer wieder), bedenken Sie Folgendes:

• es müssen ständig neue Funktionen entwickelt werden,
• Um eine Lösung zu finden, müssen Designentscheidungen getroffen werden.

Also, ja, ein lebendiger Styleguide und die von Styleguides geleitete Entwicklung verbessern den Entwicklungsworkflow, aber es nimmt den Designer nicht aus der Gleichung. Ein Tool zu haben, das Arbeitsabläufe beschleunigt und die Kommunikation fördert, ist sowohl für Designer als auch für Entwickler von Vorteil. Das Tolle an diesem Ansatz ist jedoch, dass er viel Raum für die Anpassung der Benutzeroberfläche lässt und dadurch die Benutzererfahrung verbessert – und das herauszufinden, ist Teil der Rolle des Designers.

Folgen Sie Mustern nicht bis zum Äußersten

Wir sollten immer danach streben, Muster in einer Anwendung zu verwenden. Beispielsweise kann die konsistente Verwendung von Farben und Schriftgrößen den Benutzer schnell auf Elemente in der Benutzeroberfläche hinweisen, mit denen interagiert werden kann. Vermeiden Sie es jedoch, ein Muster zu verwenden, nur weil es zuvor implementiert wurde. Verwenden Sie es vielmehr, weil es das vorliegende Problem wirklich löst.

Wenn Sie beispielsweise das Muster zum Anzeigen von Symbolleisten am oberen Rand des Bildschirms festgelegt haben, funktioniert dieses Muster in den meisten Fällen, aber manchmal ist es sinnvoller, eine kontextbezogene Symbolleiste anzuzeigen, die näher an der Stelle liegt, an der der Benutzer aktiv wird . Stellen Sie sich also immer die Frage, ob die Wiederverwendung eines Musters der Einfachheit der Implementierung Vorrang vor der Benutzererfahrung einräumt.

Übersehen Sie nicht die Design-Iteration

Das knüpft ein wenig an den vorherigen Punkt an. Übersehen Sie nicht den Wert von Iteration und Innovation, wenn Sie neue Muster ausprobieren und Wege finden, eine Benutzeroberfläche zu entwerfen, auch wenn sie auf den ersten Blick nicht dem Styleguide folgen. Der Styleguide sollte Ihre Bemühungen, die bestmögliche Benutzererfahrung zu schaffen, nicht einschränken. Vielmehr sollte es, wie der Name schon sagt, ein Leitfaden sein, ein Ausgangspunkt, der Ihnen hilft, Probleme zu lösen, indem Sie auf frühere Arbeiten und Erfahrungen zurückgreifen. Iteration während der Designphase sollte nach wie vor wichtig sein und Sie dazu anspornen, etablierte Muster zu verbessern.

Die Wartungslast

Unter den unzähligen Dingen, die Ihr Job mit sich bringt, sollte die Pflege des Styleguides das Letzte sein, was sich wie eine Last anfühlt. Um dies zu überwinden, finde ich die folgenden Praktiken hilfreich:

• Finden Sie ein Dokumentationssystem, das einfach zu installieren ist und mit dem Sie regelmäßig interagieren können.
• Machen Sie Dokumentationsaktualisierungen zu einem Teil Ihres Workflows und nicht zu einem nachträglichen Gedanken, wenn die Implementierung bereits abgeschlossen ist. Dokumentieren Sie, während Sie gehen!
• Richten Sie Richtlinien ein, die es jedem leicht machen, zur Dokumentation beizutragen. Dies verteilt die Arbeitslast und erhöht das Gefühl der Eigenverantwortung.

Bauen Sie modular, um modular zu bauen

Die Erstellung eines flexiblen UI-Systems, das konsistent und einfach anpassbar, aber auch skalierbar und kosteneffizient ist, hängt nicht nur davon ab, wie es aufgebaut ist, sondern auch davon, wie es gestaltet ist. Eine Komponentenbibliothek hat sehr wenig Wert, wenn jedes neue Design unabhängig erstellt wird und etablierte Standards und Muster ignoriert werden.

Auf der anderen Seite geht es nicht darum, einfache Schnittstellen zu erstellen, die dieselben Stile und Muster wiederverwenden, weil es praktisch ist. Ein gutes Design wirkt nicht wegen seiner Einzigartigkeit, sondern weil es Form und Funktion zu einem großartigen Erlebnis verbindet . Dieses Ziel sollte immer im Vordergrund stehen, und die Verwendung einer Methode wie der Styleguide-gesteuerten Entwicklung, um sowohl Design als auch Entwicklung Modularität zu verleihen, sollte Ihnen helfen, ein zusammenhängendes UI-System zu erstellen, das dieses Ziel erreicht.