loader image

Herrpaulsdesign

Beitrag 3 | 2021

Design-Systeme, Styleguides & Pattern Libraries

Kontakt

Design-Systeme, Styleguides & Pattern Libraries – mehr Konsistenz in der Gestaltung und zufriedene Nutzer.

Beitrag 3 | 2021

Du bist mal wieder spät dran und musst dir noch schnell eine Fahrkarte kaufen, um zu deinem nächsten Meeting nach Berlin zukommen. Du öffnest die Fahrkarten App auf deinem Smartphone und wählst die gewünschte Verbindung aus. Du wischst intuitiv nach links, um die ausgewählte Fahrt zu buchen, doch nichts passiert. Irritiert wandert dein Blick über den Bildschirm… und nun? Verzweifelt versuchst du die von dir ausgewählte Fahrt zu buchen. Nach einer gewissen Zeit bist du schließlich dahinter gekommen, wie sich der Entwickler die Aktion vorgestellt hat.
Solche Situationen entstehen durch die Verletzung bzw. inkonsequenten Verwendung eines „Styleguides“ bzw. einer „Pattern Library“.
Damit euren Nutzern eine solche Situationen erspart bleibt und eure Anwendung/euer Produkt in sich konsistent ist, sollten bei jedem großen Projekt ein eigenes Design-Systeme mit Styleguide und Pattern Libraries entwickelt werden. Denn die Verwendung von Standards im Webdesign bringt zahlreiche Vorteile mit sich. Vor allem aber Konsistenz und Orientierung für den Nutzer. 

Warum machen Standards Sinn?

Vor allem, weil die Verwendung von Standards die Frustration des Nutzer reduziert und gleichzeitig die Bedienung einer Anwendung vereinfacht und vereinheitlicht. Somit wird das Leben der Nutzer erleichtert und die Nutzerzufriedenheit gesteigert. Ist eine Anwendung konsistent in der Interaktion, in der Aktion und in der Navigation, wird sichergestellt, dass der Nutzer nicht ständig dazulernen bzw. sich auf neue Dinge einzustellen muss. Nutzer haben sich an bestimmte Standards gewöhnt, wie zum Beispiel: Links werden in der Regel unterstrichen, die Suchfunktionen wird rechts oben angeordnet und das Logo wird links oben platziert.
Darüber hinaus macht es aus unternehmerischer Sicht Sinn, anstatt einzelner Seiten zu entwickeln, Seiten-Templates und Elemente zu programmieren die mehrfach innerhalb einer Anwendung verwendet werden können. Dies spart nicht nur Zeit und Geld, sondern vereinfacht auch die Wartung sowie die Pflege einer Anwendung.

Was schafft Konsistenz?

Um Konsistenz in der Gestaltung einer Anwendung zu erreichen muss man früh in der Konzeption ansetzten. Es geht im Wesentlichen um grundlegende Entscheidungen, wie zum Beispiel die Wahl des: 

Wordings –

Hierbei gilt es vor allem eine einheitliche Sprache der Anwendung zu definieren und diese konsequent und einheitlich zu verwenden. Das bezieht sich neben der Formulierung der wiederkehrenden Interaktionen (z.B. Login, Zurück, Registrierung etc.) auch auf die direkte Ansprache der Nutzer (z.B. Sie vs. Du). Auf allen Buttons und Navigationspunkten sollte die gleichen Begriffe verwendet werden.

Grafische Elemente –

Hierbei sollen Standards für grafische Elemente und deren Funktionalität definiert werden. Dies können Checkboxen, Radiobuttons und Icons sein. Diese Standards werden zum Beispiel in Form einer Pattern Library zusammengetragen und allen Projektbeteiligten und Produktionsteams im Unternehmen leicht zugänglich gemacht.

Layout und Seitenstruktur –

Benutzeroberflächen folgen bestimmten Mustern. Diesen Mustern liegt ein definiertes Grid zugrunde. An diesem Grid werden alle Seitenelement ausgerichtet und angeordnet. Neben dem Gestaltungskonzept orientiert sich die Platzierung der Elemente am erlernten Verhalten der Nutzer z.B. die Platzierung des Logos oben links.

Visuelles Erscheinungsbild –

Das visuelle Erscheinungsbild der Anwendung bzw. des Unternehmens sollte über verschiedene Kanäle und Anwendungen hinweg einheitlich gestaltet sein. Das sorgt für mehr Wiedererkennungswert und sorgt für Orientierung beim Nutzer. Dazu zählen unter anderem Elemente wie die – Typografie, Farben, Hintergrunde, Bildwelten und die Funktionalität von Elementen. Hierfür ist das Ausarbeiten eines Styleguides sinnvoll. Jedes Teammitglied hat so die Möglichkeit auf die definierten visuellen Standards zurückzugreifen. 

Was sind Styleguides?

Ein Styleguide (UI Guidelines, Human Interface Guidelines etc.)  ist eine allgemeine Beschreibung der Gestaltungsgrundlagen und definiert wie das visuelle Auftreten eines Unternehmens bzw. einer Anwendung aussieht. Styleguides haben vor allem den Zweck eine konsistente Gestaltung zu erreichen und den Wiedererkennungswert sicherzustellen. 
Kurzgesagt: Gemeint ist ein Katalog mit allen Bausteinen und Elementen die zusammen das User Interface bilden.
Dieser Katalog besteht unter anderem aus:
  • Typografie mit Vorgaben zur Schriftarten, -größe, -schnitt, Abstände, Verwendungsarten (H1, Titel, Fließtext etc.)
  • Farbpalette mit Angaben für digitale Web-Anwendungen, für iOS-Apps und Hinweisen für die Verwendung
  • Gestaltungsraster, Grid-System
  • Bildsprache & Icons
Ein Styleguide enthält zu jedem Element eine Beschreibung sowie Kriterien für dessen Verwendung. Es handelt sich um ein statisches und abgeschlossenes Dokument. Anders ist das bei einem Living Styleguide. Diese Art von Styleguide wird mit der Weiterentwicklung der Anwendung gepflegt, erweitert und aktualisiert. 

Was ist eine Pattern Library?

Ein Design Pattern ist ein Element innerhalb eines digitalen Produkts/ Anwendung. Dieses Element kann innerhalb einer Anwendung wiederholt auftreten z.B. in Form eines Dropdown-Menüs oder eines Buttons. Es beschreibt jedoch nicht nur das optische Erscheinungsbild, sondern beschreibt vielmehr die Funktion eines Elements.
Die Sammlung dieser Design Patterns nennt man Pattern Library. In dieser wird für jedes dieser Elemente der Nutzerkontext definiert und erfasst (Primär-Aktion, Sonderfälle, Positionierung, Abstand etc.). Damit sie sich voneinander abgrenzen. Ein Button kommt in der Regel mehrfach und in unterschiedlichem Kontext in einer Anwendung vor (Anmelden, Abmelden, Suche, Login, Mehr Erfahren, Absenden etc.). In eine Library wird demnach für jede Spezifikation, jede Form und jeden Einsatzzweck eines Buttons der Zustand definiert und erfasst. 

Eine Pattern Library enthält typischerweise folgende Elemente:

  • Navigationselemente – Menü, Brotkrumenpfad
  • Icons, Buttons
  • Formularelemente, Kalender, Zeitauswahl, Checkboxen, Dropdown-Menüs, Slider etc.
  • Tabellen, Listenelemente (Artikel, Bilder, Videos)
  • Fortschrittsbalken, Animationen, Warnhinweise, Bestätigungen etc.

Was ist ein Design-System?

Kurzgesagt ist ein Design-System eine komplexe Dokumentation für größere Unternehmen und komplexe Anwendungen. Das Design-System unterstützt die Unternehmen dabei das jeweilige Auftreten über mehrere Produkte, Anwendungen und Plattformen hinweg zu vermeintlichen. Es enthält in den meisten Fällen die allgemeinen Gestaltungsrichtlinien, einen Styleguide, eine Pattern Library sowie übergreifende Design-Prinzipien und Prozesse. Es bietet den Angestellten eine Basis mit der jedes Teammitglied arbeiten kann.

Warum braucht man solche Standards?

Will man eine Anwendung oder ein Produkt konsistent halten, kommt man um die Ausarbeitung von Standards kaum herum. Das trägt zu einer besseren Usability bei und verhindert Probleme wie im Beispiel aus der Einleitung. Darüber hinaus sind Styleguides und Pattern Librarys das Handwerkszeug und Fundament für jedes Projektteam. Gerade bei Agilen Prozessen machen Standards den Workflow effizienter. Aus diesem Grund sollte ein Styleguide oder eine Pattern Library digital umgesetzt werden. Es ermöglicht allen Teammitgliedern und Angestellten einen schnellen Zugriff und erleichtert die Recherche und Weiterentwicklung. 
Meiner Meinung nach braucht es jedoch nicht in jedem Fall eine solche ausführliche Dokumentation. Bei einer sehr schlanken Anwendung z.B. einem One Pager oder einer Landing Page reicht es in den meisten Fällen aus, einen kleinen Styleguide anzulegen und den Fokus eher auf Nutzertests zu legen, um abzuwarten bis das Design ausgereift ist.

Beispiele und Inspiration

Die folgenden User Interface Guidelines solltest du immer griffbereit haben, wenn du an einer Anwendung oder einem Produkt für das entsprechende Betriebssystem arbeitest:

Drei Beispiele für firmeneigene Styleguides und Pattern Librarys sind jene von IBM Design Language, Audi CI und die Otto Pattern Library diese sind frei öffentlich einsehbar und dienen gut als Inspiration. Auf der Webseite styleguides.io findet sich eine Sammlung bestehender Sytleguides und Pattern Librarys.
Kontakt

Say moin

mail@herrpaulsdesign.de

Instagram
Behance
Linkedin