Front-End Styleguides: Definition, Anforderungen, Checkliste

by Page Laubheimer (deutsche Übersetzung) - 27. März 2016 

Was ist ein Front-End Styleguide?

Front-End Styleguides sind zu einem zunehmend weitverbreiteten Lieferergebnis in UX-Umfeld geworden. Wie von Jeff Gothelf und Josh Seiden in ihrem Buch Lean UX beschrieben, entstanden sie aus dem Agile oder Lean Umfeld. (Anmerkung der Übersetzung: Styleguides sind schon seit Jahrzehnten fester Bestandteil der Usability-Industrie Toolbox. Sie sind nicht abhängig vom zugrunde liegenden Systementwicklungs-Modell (Wasserfall, V-Modell, Spiralmodell, Agile, etc., d.h. sie können unabhängig vom jeweiligen Entwicklungsmodell in jedem Projekt erstellt werden.)

Definition: Front-End Styleguides bestehen aus einer modularen Sammlung aller UI-Elementen Ihres Produktes. Meist werden diese zusammen mit Code-Ausschnitten für Entwickler dargestellt, um nötigenfalls diese Elemente per ‚Copy und Paste‘ zu implementieren. Sie umfassen gebräuchliche UI-Komponenten wie Schaltflächen, Input-Elemente, Navigationsmenüs, modale Overlays, Icons und vieles anderes mehr.

Ein Front-End Styleguide ist sowohl ein Lieferergebnis eines UX Teams (typischerweise in Übereinstimmung mit dem Entwicklungsteam) als auch ein Tool, welches vom gesamten Team zur Einhaltung von einheitlichem, flexiblem Produktdesign genutzt wird.

Front-End Styleguides unterscheiden sich von Bibliotheken mit Design-Pattern, die ein langdauerndes Werkzeug sind, welches von UX Fachleuten eher zur Festlegung von breit angelegten Designideen als für spezifische Details zur Implementierung genutzt wird. Leider bezeichnen einige Verfechter von Front-End Styleguides diese als Pattern-Bibliotheken, was zu einiger Verwirrung in der UX Community geführt hat.

Salesforce’s Lightning Design System zeigt ein UI Element, Button Group Base, zusammen mit einem Beispiel, wie es zu implementieren ist, Richtlinien für dessen Funktionsweise und wann eine alternative Variante (z.B. Button Group Disabled) genutzt werden sollte. Das Beispiel ist ein interaktives Live-Element, das die gleichen Verhaltensweisen zeigt wie im Endprodukt.

Die UX-Vorteile eines Front-End Styleguides

Der Sinn eines Styleguides ist die Sammlung aller Elemente der Produktoberfläche in einer modularen Bibliothek. Das UX Team profitiert hiervon in zweierlei Hinsicht: (1) die Pattern-Entwicklung neuer Ideen und die Implementierung neuer Designs werden effizienter und (2) für das gesamte Produkt kann ein einheitliches visuelles Design leicht durchgesetzt werden. Designer und Entwickler sind genauso bequem wie jeder andere Mensch auch. (“Bequem” in einem positiven Sinne, da es Arbeitsaufwand und Ressourcen bewahrt.) Wenn es daher weniger Arbeit ist, das Richtige zu tun und eine einheitliche Nutzeroberfläche zu erschaffen, werden sie sehr viel wahrscheinlicher genau dies machen anstatt ein neues, uneinheitliches Design oder Implementierung zu erfinden.

Wenn ein ausgereifter Front-End Styleguide existiert, braucht das UX Team weniger Zeit für die Schaffung präziser High-Fidelity Design-Mockups für jede neue Idee. Stattdessen kann die Haupt-Designspezifikation einen schnellen Entwurf liefern, der unmissverständlich darauf verweist, welche Komponenten wo in dem Design angewendet werden. Solch eine Bibliothek von bestehenden Modulen erlaubt ebenfalls eine schnelle Entwicklung von High-Fidelity Prototypen: das UX Team kann schnell ein realistisches, interaktives Modell erstellen, welches in Usability-Tests genutzt oder mit anderen Projektbeteiligten geteilt werden kann.

Front-End Styleguides sind weder Editorial- noch Branding-Styleguides

Sie mögen bereits zwei weitere Arten von Styleguides kennen:

1. Redaktionelle Gestaltungsrichtlinien legen den Schreibstil, Grammatik, Punktierung und andere Content-redaktionellen Regeln fest. Viele Websites und die meisten Publikationen haben solche Gestaltungsrichtlinien und Content-Teams sollen sich daran halten.
   
   
2. Styleguides für’s Branding legen markenspezifische Regeln wie zulässiger Gebrauch von Logos, Farbpalette und Typografie fest.

Im Gegensatz zu redaktionellen Gestaltungsrichtlinien enthalten Front-End Styleguides normalerweise keine Vorgaben für das Schreiben im Internet. Allerdings überlappen sie sich oft mit den Stylelguides für Branding – zusätzlich zu den Regeln und Beschreibungen der UI Komponenten enthalten sie markenbezogene Elemente und Vorgaben.

Corporate Brand Guidelines” von Adobe sind eine Gestaltungsrichtlinie für Branding und nicht eine Front-End Gestaltungsrichtlinie. Front-End Gestaltungsrichtlinien enthalten oft viele Elemente, die in einem Dokument mit Vorgaben für Branding zu finden sind. 

Das wichtigste Merkmal, das Front-End Styleguides von andersartigen Gestaltungsrichtlinien unterscheidet, ist dass sie selten statisch sondern eher eine lebendige Sammlung von Beschreibungen für UI Elemente mit den dazugehörigen Code-Ausschnitten sind.

Meistens sind Front-End Styleguides in Form einer Website oder eines anderen interaktiven digitalen Mediums anstatt eines PDF zu finden. Sie können normalerweise mit allen Komponenten in einem Front-End Styleguide interagieren und viele Entwicklerteams ziehen es vor, diese zu implementieren, so dass jede Änderung der Komponenten in der Gestaltungsrichtlinie automatisch auch das Produktdesign aktualisieren wird. Dies ist keine Voraussetzung für eine effektive Gestaltungsrichtlinie, aber es kann helfen, deren Nutzung rigoros durchzusetzen.

Front-End Gestaltungsrichtlinien enthalten Muster für responsives Webdesign

In Responsive Designs sollten die Front-End Styleguides nicht nur die Oberflächenkomponenten definieren, sondern auch die unterschiedliche Gestaltung und Anwendung auf den verschiedenen Bildschirmgrößen umschreiben. Hier sind einige Informationen, die nützlich sind:

• Layout-Raster, welches vorgibt, wie die verschiedenen Komponenten bei verschiedenen Bildschirmgrößen genutzt werden sollten
• Leerraum rund um gebräuchliche UI-Elemente bei der Verwendung auf unterschiedlichen Bildschirmgrössen
• Richtlinien dafür, wo auf der Oberfläche spezifische Komponenten positioniert werden sollten. (Diese Richtlinien können helfen, Einheitlichkeit durchzusetzen: z.B. in einer Handy-App werden üblicherweise die Titelleiste und die Navigationselemente auf den meisten Bildschirmen oben angeordnet sein. Dies festzulegen kann dazu beitragen, Einzel-Bildschirmdesigns zu vermeiden.)

Google’s Material Design Styleguide beinhaltet Darstellungen, wie das Responsive Rastersystem anzuwenden ist und wo die verschiedenen Teile der Oberfläche einheitlich platziert werden sollten.

Checkliste der 8 wichtigsten Anforderungen an einen Front-End Styleguide

Wenn Sie eine Richtlinie erstellen, achten Sie darauf, die folgenden 8 Schlüsselmerkmale einzufügen:

1. Inhaltsverzeichnis, das die Komponenten in leicht auffindbare Kategorien unterteilt
2. Responsive Layout oder Rastersysteme, die für die Anordnung von allgemeinen UI Elementen genutzt werden können
3. Farbpalette des Produkts (im entsprechenden Format, z.B. HEX für das Web, UIColor für eine iOS-App)
4. Schriftart und Schrifttyp (z.B. H1 Überschrift, Textkörper, Fotountertitel), die den Namen der Schriftart und Druckart, Grössen, Gewichtung, Leading- und Zeilenhöhe, Abstände und der für diesen Textstil passende Nutzungskontext.
   
   Geben Sie dann für jedes einzelne UI Element in ihrem Produkt die folgenden Informationen an:
   
   
5. Beschreibung des passenden Nutzungskontext: Wann macht es Sinn, lieber eine bestimmte Komponente statt einer anderen zu benutzen?
6. Code-Ausschnitte, oft in einem Accordion-Feature verborgen
7. Spezifikationen für die Implementierung, inkl. Positionierungs- und Abstandsangaben
8. Ge- und Verbote für dieses Element

25 gebräuchliche UI Komponenten, die in Front-End Gestaltungsrichtlinien enthalten sind

Als Anregung hier eine Liste von UI Elementen, die üblicherweise in einer Gestaltungsrichtlinie aufgenommen werden. Es ist zwar keine vollständige Liste aller UI Elemente, die in Front-End Gestaltungsrichtlinien verwendet werden können, berücksichtigt aber viele der alltäglichen Komponenten.

1. Buttons
2. Buttongruppe
3. Brotkrumennavigation
4. Karten
5. Tabellen
6. Dialoge
7. Gitterleisten für Content, Medien oder Fotos
8. Kolonnen
9. Navigationsmenüs (und Unternavigation)
10. Datums- und Zeitwähler
11. Fortschritt- und Ladeanzeigen
12. Kontrollkästchen
13. Optionsfelder
14. Auswahlmenüs
15. Schieberegler
16. An-Aus Schalter
17. Schrittweise Zahleneingaben/Vorwärtszähler
18. Formularfelder (inkl. der Varianten mit Anzeigen der Maximalbuchstabenerfassung und Anzeigen, wenn ein Feld vorgeschrieben ist)
19. Tabs
20. Funktionsleisten
21. Kurzinfos
22. Alert Modals
23. Icons
24. Animationen
25. Tokens, auch als Chips bekannt (z.B. E-Mail-Adressfeld)

Kayak’s iOS-App bietet eine schrittweise Zahleneingabe für die Anzahl von Zimmern und Gästen. Wenn Sie diese Eingabekomponente in Ihrem Produkt zeigen, sollte sie in der Gestaltungsrichtlinie enthalten sein. 

Ein Beispiel eines Token (oder Chip) von Google’s Material Design. Tokens werden häufig in E-Mail-Adressfeldern der Adressaten genutzt, um jeden Empfänger einzeln darzustellen und es Ihnen zu ermöglichen, einen Adressaten mit einem Klick zu löschen. Sie werden auch in erweiterten Suchfeldern und Metadaten Tags verwendet, um zwischen Begriffen zu differenzieren, die eine Leerstelle beinhalten.

Beginnen Sie mit dieser Liste und wählen sie von ihr nur die Komponenten aus, die in Ihrem Produkt enthalten sind (fügen Sie nicht einfach neue Elemente zu ihrem Produkt oder Design hinzu, nur um dieser Liste zu entsprechen). Wenn Sie zusätzliche spezifische Elemente haben, nehmen Sie sie in ihre Gestaltungsrichtlinie mit auf.

Schlussfolgerung

Front-End Styleguides haben sich zu einem der nützlichsten UX Lieferergebnisse entwickelt. Sie sind besonders in agilen Umgebungen wichtig, wo die Realisierung eines effizienteren Design-Arbeitsflusses kritisch ist, um mit der schnellen Entwicklung Schritt zu halten. Rigoros entwickelte Styleguides fördern ein einheitliches Designverfahren und setzen die Einhaltung der Spezifikationen von den Entwicklern durch. Eine gute Front-End Styleguide sollte Responsive-Designmodelle und –raster, Code-Ausschnitte für die Implementierung und ein solides Regelwerk für die Nutzung jeder Komponente enthalten.

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.