Erstellen eines UI-Styleguides für bessere UX

Hören Sie sich die Audioversion dieses Artikels an

Stellen Sie ein einheitliches Produktdesign und eine einheitliche Benutzererfahrung sicher

1976 veröffentlichte Johnny Cash One Piece at a Time , ein Lied, das die Geschichte eines Detroiter Autoarbeiters erzählt, der zwanzig Jahre damit verbringt, vom Fließband gestohlene Cadillac-Teile zu sammeln.

Wenn der Arbeiter mit dem Bau seines Bootleg-Cadillac beginnt, stellt er leider fest, dass viele Teile nicht kompatibel sind, weil sich wichtige Designmerkmale im Laufe der Jahre geändert haben. Mit ein wenig Einfallsreichtum kommt das Custom Car zusammen, aber es ist ein unansehnlicher Mischmasch, der überall Spott hervorruft.

Das hintere Ende sah auch irgendwie komisch aus
Aber wir haben es zusammengestellt und als wir durchkamen
Nun, da bemerkten wir, dass wir nur eine Schwanzflosse hatten.

Designer und Entwickler heutiger digitaler Erlebnisse stehen vor einer ähnlichen Herausforderung. Der Lauf der Zeit ist ein gewaltiger Feind, der die Kontinuität digitaler Produkte verheeren kann. Mit der Zeit kommen und gehen Teammitglieder, Trends entwickeln sich und Funktionen ändern sich. Außerdem bedeutet das schnelle Tempo unserer modernen digitalen Landschaft, dass Produktinnovationen in Quartalen statt in Jahren stattfinden.

Wenn ein Unternehmen oder ein Designteam nicht über eine gemeinsame Aufzeichnung verfügt, die das beabsichtigte Erscheinungsbild eines Produkts dokumentiert, entstehen visuelle und erfahrungsmäßige Inkonsistenzen, die Benutzer werden frustriert und der Ruf der Marke wird darunter leiden.

UI-Styleguides sind ein Design- und Entwicklungstool, das der Benutzeroberfläche und dem Erlebnis eines digitalen Produkts Kohärenz verleiht. In ihrem Kern sind sie:

• Erfassen Sie alle Designelemente und Interaktionen, die innerhalb eines Produkts auftreten
• Listen Sie wichtige UI-Komponenten wie Schaltflächen, Typografie, Farbe, Navigationsmenüs usw. auf.
• Dokumentieren Sie wichtige UX-Komponenten wie Hover-Zustände, Dropdown-Füllungen, Animationen usw.
• Enthält Live-Elemente und Code-Snippets, die Entwickler referenzieren und verwenden können

Bevor wir uns genauer ansehen, wie man einen UI-Styleguide auf Expertenebene zusammenstellt, ist es wichtig zu verstehen, dass es keinen einheitlichen Ansatz gibt. Der Wert von Styleguides geht über große Marken mit großen Produktteams hinaus. Mittelständische und kleine Unternehmen, die ein konsistentes digitales Erlebnis suchen, profitieren ebenfalls davon, wenn UI-Styleguides auf ihre spezifischen Bedürfnisse zugeschnitten sind.

Nehmen Sie diese entscheidenden Designkomponenten in UI-Styleguides auf

Designer, die mit Markenidentitätsrichtlinien vertraut sind, sollten kein Problem damit haben, auf UI-Styleguides umzusteigen, da es viele wichtige Designkomponenten gibt, die enthalten sein müssen.

Profi-Tipp: Dokumentieren Sie nur relevante Designkomponenten. Überflüssige Informationen machen UI-Styleguides aufgebläht und es ist schwierig, damit zu arbeiten.

Typografie-Schema

Typografie ist eines der häufigsten Designelemente für Benutzeroberflächen, daher reicht es nicht aus, nur die Namen der in einem Produkt verwendeten Schriftarten aufzulisten. Für Titel, Untertitel, Überschriften (H1, H2, H3), Haupttext und Bildunterschriften sollten klare Anweisungen gegeben werden.

Außerdem sollten Schriftgrößen angegeben, Gewichte angegeben und Stile definiert werden. Zeilenhöhe und Unterschneidung sind ebenfalls erforderlich, und es ist eine gute Idee, eine bevorzugte Schriftart auszuwählen, die verwendet werden kann, wenn besondere Umstände auftreten.

Responsive Layouts

Wenn digitale Produkte um responsive Grid-Systeme herum entworfen werden, müssen UI-Styleguides Schnittstellenlayouts für alle Bildschirmgrößen berücksichtigen. Das bedeutet, dass Sie Notizen und Beispiele für Abstände, Polsterung und Platzierung hinzufügen. Es ist auch hilfreich, Overlays des Rastersystems des Produkts in Bezug auf verschiedene Bildschirmgrößen anzuzeigen.

Das große Ziel dabei ist, genügend Kontext bereitzustellen, um die Notwendigkeit einmaliger Bildschirmdesigns zu vermeiden. Im Laufe der Zeit summieren sich diese und untergraben den Zusammenhalt eines digitalen Produkts.

Farbpalette

Einer der schnellsten Wege, eine Benutzeroberfläche zu ruinieren, ist die uneinheitliche Verwendung von Farben, daher müssen Farbkombinationen klar definiert werden. Das Auflisten von Farben und ihren Werten (HEX, UIColor) ist ein guter Anfang, aber es sollten auch spezifische Paarungen und Anwendungsbeispiele gegeben werden.

Wenn der UI-Styleguide auf eine Reihe von Richtlinien zur Markenidentität verweist, überprüfen Sie, ob ein sekundäres Schema mit helleren Akzentfarben verfügbar ist. Wenn nicht, erstellen Sie Ihre eigenen und dokumentieren Sie sie. Auch eine Auswahl an Grauwerten ist sinnvoll.

Tasten

Nahezu jede Benutzeroberfläche enthält Schaltflächen. Nehmen Sie sich also die Zeit, ihre Größen, Stile, Farben, Platzierungen, Abstände und typografischen Elemente zu dokumentieren. Wenn verschiedene Schaltflächen in unterschiedlichen Kontexten verwendet werden, machen Sie dies ebenfalls deutlich.

Zusätzliche UI-Komponenten, die möglicherweise benötigt werden

• Ikonographie
• Tooltips und Popovers
• Modale
• Formularelemente
• Datentabellen
• Navigationsmenüs
• Diagramme und Datenvisualisierungen
• Registerkarten
• Ein-Aus-Schalter
• Dialoge
• Inhaltsrasterlisten
• Vertikale Listen
• Symbolleisten
• Datums- und Zeitauswahl
• Ladeindikatoren
• Kontrollkästchen
• Warnungen
• Dropdown-Menüs
• Schieberegler
• Stepper
• Seitennummerierung

Designanweisungen organisieren und kontextualisieren

Zusätzlich zu den unverzichtbaren UI-Komponenten gibt es eine Reihe praktischer Funktionen, die es Unternehmen und Designteams erleichtern, UI-Styleguides zu referenzieren, zu navigieren und zu implementieren.

Inhaltsverzeichnis

Ein gut organisiertes und klar gekennzeichnetes Inhaltsverzeichnis ist eine einfache Möglichkeit, jedem dabei zu helfen, den Inhalt des Dokuments schnell zu finden.

Kontextnotizen

Es ist unmöglich, jede problematische Designentscheidung vorherzusagen, die während der Lebensdauer eines Produkts auftreten kann. Daher kann die Artikulation der Designprinzipien hinter häufig verwendeten UI-Komponenten die Lösung unvorhergesehener Szenarien erleichtern.

Zum Beispiel:

„Im Kern geht es bei unserem Produkt darum, die besten Architekturbilder aus der ganzen Welt zu präsentieren. Aus diesem Grund priorisiert das Layout unserer Benutzeroberfläche große, auffällige Bilder gegenüber Text. Stellen Sie, wann immer möglich, Bilder in den Mittelpunkt unseres Produkts.“

Abstands- und Positionierungsanweisungen

Abstände und Positionierung werden häufig im Abschnitt „Responsive Layouts“ behandelt. Je nach Komplexität des digitalen Produkts können Anweisungen aus allgemeinen „Faustregeln“ bestehen oder sehr detailliert sein.

Verhaltensregeln

Oftmals kann es hilfreich sein, Do’s und Don’ts im Design klar zu umreißen. Zum Beispiel:

• „ Verwenden Sie die weiße Wortmarkenversion unseres Firmenlogos in der Fußzeile der Benutzeroberfläche.“
• „Verwenden Sie keine alternativen Farbversionen unserer Firmenwortmarke auf schwarzem Hintergrund.“

Gebote und Verbote verhindern Diskussionen und sparen Design- und Entwicklungszeit, aber es ist immer am besten, einen Hinweis auf den Kontext wie diesen zu geben:

„Diese Liste von Do's and Don'ts deckt eine breite Palette wichtiger Designentscheidungen ab, berücksichtigt jedoch nicht jeden möglichen Missbrauch der Designelemente unseres Produkts. In Anbetracht dessen sollten Sie bei Unsicherheiten nach bestem Ermessen handeln und Entscheidungen treffen, die das allgemeine Erscheinungsbild unseres Produkts genau widerspiegeln.“

Live-Elemente und Codeschnipsel

Markenidentitätsrichtlinien sind in der Regel statische Dokumente, aber UI-Styleguides enthalten Live-Elemente, die wie im Endprodukt funktionieren – das heißt, Schaltflächen verhalten sich wie Schaltflächen, Dropdown-Menüs werden tatsächlich heruntergeklappt und Animationen sind animiert.

Code-Snippets ermöglichen es Entwicklern, den Code von Live-Elementen schnell zu kopieren und in das Back-End eines Produkts einzufügen.

Gestalten Sie UI-Styleguides für Designteams leicht zugänglich

Nachdem wir nun verstanden haben, wie man einen Styleguide erstellt und welche Komponenten und Funktionen in einem UI-Styleguide enthalten sind, richten wir unsere Aufmerksamkeit auf die gemeinsame Nutzung und Kommunikation. Genauer gesagt, welche Optionen gibt es für die Unterbringung von UI-Styleguides?

Traditionell existierten UI-Styleguides als Webseiten. Dies bietet Designern und Entwicklern einen einfachen Zugriff und ermöglicht, dass Designelemente so funktionieren, wie sie es im Produkt tun würden.

In jüngerer Zeit sind eine Handvoll Cloud-basierter Plattformen entstanden, die es Teams ermöglichen, Produkte gemeinsam zu entwerfen, zu prototypisieren und zu testen. Dieselben Plattformen sind auch in der Lage, UI-Styleguides aufzunehmen und den Teammitgliedern den Austausch von laufendem Feedback und Ideen zu ermöglichen.

Sehen wir uns an, wie einige dieser Plattformen ihren Ansatz für UI-Styleguides beschreiben.

Figma

„Erstellen Sie Designsysteme mit verknüpften UI-Komponenten, die das gesamte Team verwenden kann. Erhalten Sie Updates, wenn Änderungen an gemeinsam genutzten Komponenten vorgenommen werden“

Phase

„Bibliotheken, wie sie immer hätten sein sollen: Farben, Eigenschaften und Elemente … sogar Übergangszeiten – jetzt alles in einer Komponente. An Ort und Stelle bearbeiten – alles ist ein Meister. Überschreiben Sie alles, was Sie nicht benötigen, pro Instanz.“

In Vision

„Alle Marken- und UX-Komponenten – einschließlich der Nutzungsdokumentation – werden an einem einzigen Ort verwaltet. Änderungen werden mit dem gesamten Team synchronisiert, und Designer können jederzeit zur neuesten Version wechseln oder Updates rückgängig machen.“

Material.io

„Erstellen Sie Ihr eigenes Materialthema und erstellen Sie eine Markensymbolbibliothek, indem Sie Stiländerungen auf Farbe, Form und Typografie anwenden. Design-Iterationen in der Galerie teilen, hochladen und präsentieren. Verwenden Sie dann den Prüfmodus, um auf die Entwicklerdokumentation zuzugreifen.“

UI-Styleguides sollten einfach zu verwenden sein

Beim Zusammenstellen von UI-Styleguides ist Kommunikation keine Selbstverständlichkeit. Produktteams setzen sich aus Menschen unterschiedlicher Disziplinen, kultureller Hintergründe und Berufserfahrungen zusammen. Verwenden Sie diese Prinzipien, um Klarheit und Benutzerfreundlichkeit zu gewährleisten.

Einfache Layouts

UI-Styleguides erfordern saubere, übersichtliche Bildschirmlayouts. Jeder Bildschirm sollte gut organisiert, klar beschriftet und gut lesbar sein. Es hat keinen Vorteil, Bildschirme mit visuellen Informationen zu überladen, also streben Sie nach minimalen und geräumigen Anordnungen.

Kurze Anleitung

Halten Sie Anweisungen kurz und bündig. Vermeiden Sie lange Absätze und verwenden Sie Aufzählungszeichen. Demonstrieren Sie nach Möglichkeit mit Bildern statt mit Worten.

Informative Nutzungsszenarien

Sie fragen sich, wann Sie diesen Slider-Stil über diesem verwenden sollen? „Szenarien verwenden“ löst diese Art von Verwirrung. Auch hier sind Bilder stärker als Worte, stellen Sie also Beispiele bereit, die sowohl das Szenario als auch den richtigen Weg nach vorn deutlich machen.

Relevante Versionsgeschichten

Digitale Produkte werden häufig aktualisiert. Da Produktteams versuchen, jedes Detail der Benutzeroberfläche zu verfeinern, ist es wichtig, fortlaufend Aufzeichnungen darüber zu führen, wie sich Designkomponenten entwickelt haben. Seien Sie hier diskret – für kleinere Unternehmen und Produktteams kann es unpraktisch sein, eine umfangreiche Bibliothek mit Versionsverläufen zu führen.

UI-Styleguides sind eine wertvolle Ressource und ein leistungsstarkes Design-Tool

Zeitgenössische Design- und Entwicklungsteams legen Wert auf Effizienz und multidisziplinäre Zusammenarbeit – wie die Designsprachensysteme belegen, die von großen Marken wie MailChimp, Google und Salesforce angepriesen werden.

Design-Sprachsysteme ermöglichen es verschiedenen Teams, die an anspruchsvollen digitalen Produkten arbeiten, mit einer standardisierten visuellen Sprache zu kommunizieren. UI-Styleguides sind in die Struktur von Design-Sprachsystemen eingewoben und dienen als zuverlässiges Werkzeug für schnelle Iterationen und konsistente digitale Erlebnisse.

Gleichzeitig ist Design keine Beschäftigung, die nur großen Unternehmen vorbehalten ist. Eine Vielzahl von Produktteams und digitalen Projekten können von gut konstruierten UI-Styleguides profitieren, aber die Ressourcen (Finanzen, Zeit und Talent) variieren von Unternehmen zu Unternehmen.

Aus diesem Grund sind UI-Styleguides am nützlichsten, wenn sie auf die Bedürfnisse einzelner Unternehmen und Designteams zugeschnitten sind. Das höchste Ziel jedes UI-Styleguides ist ein ausgewogenes Verhältnis von Klarheit und Praktikabilität, das zu durchweg angenehmen Benutzererlebnissen führt.

Weiterführende Literatur im Toptal Design Blog:

• Schriftstile für Web- und Printdesign
• Responsive Design – Best Practices und Überlegungen
• Warum Startups einen Styleguide brauchen
• Best Practices für Benutzerfreundlichkeit und Design von Symbolen
• Nutzen Sie Ihre Inspiration – Ein Leitfaden für Moodboards