Konsistentes Design in digitalen Produkten: Das sind die Vorteile

Das Design und die Ästhetik eines Produkts sind bekanntlich Geschmacksache und sehr individuell zu betrachten. Ist es denn wirklich notwendig, auf die Konsistenz im Design zu achten? Lass uns im folgenden Artikel genauer hinschauen.

Was ist mit konsistentem Produktdesign gemeint?

Konsistentes Produktdesign ist, wenn für dasselbe Problem immer dieselbe Lösung verwendet wird. Beispiel Button:

  • Ein Button hat normalerweise eine Funktion: Ein Klick auf den Button löst eine Aktion aus (Formular absenden, Berechnung durchführen, Abbrechen).
  • Unter normalen Umständen reichen 2–3 Buttontypen: Primärer Button, sekundärer Button etc.
  • Entsprechend reicht es für ein einfaches digitales Produkt, 2-3 Buttontypen zu gestalten.

Im Folgenden ein Beispiel von Buttons, bei deren Gestaltung nicht auf Konsistenz geachtet worden ist. Es existieren sieben Typen für den Learn More Button, drei Typen für den Sign On Button sowie weitere Typen für andere Funktionen auf derselben Webseite.

Quelle: Brad Frost

Wenn man von Konsistenz im Produktdesign spricht, unterscheidet man zwischen der visuellen Konsistenz und der funktionalen Konsistenz. Visuelle Konsistenz bedeutet, dass Komponenten mit der gleichen Zielaktion (Formular absenden, Berechnung durchführen, Abbrechen) immer gleich aussehen. Funktionale Konsistenz bedeutet, dass gleiche Elemente auch immer genau gleich reagieren und funktionieren sollten. Beispielsweise sollte ein Zurück Button auf einer Webseite immer nach dem genau gleichen Muster funktionieren.

Lass uns genauer anschauen, was die Folgen von fehlender Konsistenz sind.

Der Designprozess verlangsamt sich

Und damit auch die Produktentwicklung – das Produkt wird später als möglich an den Markt und die Enduser gebracht. Design- und Entwicklungsteams schauen sich Probleme isoliert an und erfinden immer wieder spezifische Lösungen:

«Wir sollten noch einen Button haben für die Newsletter-Anmeldung.»
«Klar, mache ich.»
«Kannst du dann noch einen Button designen fürs Kontaktformular?»
«Ja, ich gestalte dann was.»

Besser wäre, wenn Designer*innen erstmal innehalten und sich fragen würden: «Welche Typen von Buttons brauchen wir immer wieder? Lass und diese gestalten, dann können wir sie immer wieder verwenden.»

Sind diese Typen erstmal definiert und gestaltet, kann man immer wieder darauf zurückgreifen. Designer*innen können sich auf grössere Herausforderungen als Buttondesigns fokussieren, der Designprozess wird beschleunigt und Produkte sind schneller entwickelt.

Die Kundenzufriedenheit sinkt

Ist ein digitales Produkt konsistent gestaltet, so führt das zu besserer Berechenbarkeit bzw. Vorhersagbarkeit der Benutzeroberfläche für die User. Sie wissen genau, was nach dem Klick auf den einen Button passiert, weil sie das Verhalten von den vorherigen, gleich aussehenden Buttons bereits kennen.

Ist das Produkt jedoch inkonsistent gestaltet und funktioniert überall ein wenig anders, so sind User weniger effizient in der Nutzung, verlieren das Vertrauen und werden zunehmend frustrierter.

Klarheit im Produkt fehlt

Von Markenexpert*innen wissen wir, wie wichtig Klarheit für eine Marke ist. Eine Marke und deren Werteversprechen sollen möglichst fassbar sein. Dadurch kann sich eine Firma besser differenzieren, wird besser wahrgenommen und die Beziehung zur Zielgruppe wird verbessert – alles Faktoren, dank denen eine Firma ihre Produkte und Dienstleistungen besser verkaufen kann.

Konsistentes Produktdesign reiht sich genau so in die obenstehenden Faktoren ein. Wie sollen User begeistert werden von der Marke deiner Firma und deinem Angebot, wenn sie sich im digitalen Produkt nicht zurechtfinden? Wie sollen User deiner Firma vertrauen können, wenn sie nicht mal wissen, was nach dem Klick auf den Button auf der Webseite passiert?

Konsistentes Produktdesign unterstützt somit einen vertrauenswürdigen Auftritt deiner Marke im digitalen Produkt.

Skalierung ist schwieriger

Zugegeben, inkonsistente Gestaltung ist bei einem einsprachigen digitalen Produkt für eine kleine Zielgruppe nicht verheerend.

Versetze dich aber in die Lage einer Firma wie Airbnb: Airbnb ist in 60+ Sprachen sowie auf Dutzenden von mobilen Geräten und Browsern verfügbar. Ausserdem gibt es Hunderte von Screens, welche gestaltet und entwickelt werden müssen.
Für Airbnb ist es also ungemein wichtig, das Design konsistent zu halten – anders kann die Firma ihr Produkt nicht schnell genug verändern und auf neue Userbedürfnisse rasch eingehen.

Quelle: Airbnb

Wie erreicht man Konsistenz in digitalen Produkten?

Inkonsistenzen entstehen, wenn man Probleme isoliert betrachtet und individuelle Lösungen gestaltet. Das geschieht nicht aus bösem Willen, sondern oftmals aus Nichtwissen: Man weiss nicht, an welchen Herausforderungen andere Leute im Produktteam arbeiten.

Es gibt hauptsächlich zwei Massnahmen, um digitale Produkte konsistenter zu gestalten:

Etablieren einer Komponentenbibliothek oder eines Design Systems

Schafft man es als Team, Probleme nicht mehr isoliert zu betrachten, sondern mit einem ganzheitlichen Blick zu lösen, so sollten diese Lösungen auch dokumentiert sein. Das erreicht man, indem man alle erstellten Komponenten an einem Ort sammelt und dokumentiert. Um zu starten, hilft es bereits, diese Elemente zu dokumentieren:

  • Farben und ihren Verwendungszweck und ihre Bedeutung
  • Schriftarten und Schriftstile und ihren Verwendungszweck
  • Layoutraster und Abstände: Wie werden Elemente angeordnet
  • Definierte Komponenten wie Buttons, Navigationselemente oder Inhaltsblöcke

Diese Komponentenbibliothek – oder auch Styleguide genannt – sollte möglichst zugänglich und gut dokumentiert sein. Sie soll als Single Source of Truth dienen, wo sich jedes Teammitglied selbst jeweils die notwendigen Informationen holen kann.

Aus dieser Basisarbeit kann sich mit der Zeit ein sogenanntes Design System entwickeln. Der Anspruch bei einem Design System ist, dass sämtliche visuelle und funktionale Elemente eines digitalen Produkts im Kontext des Gesamtsystems gedacht und entworfen sind. Normalerweise sind in einem solchen System nicht nur Einzelelemente wie Farben, Schriften oder Buttons definiert sind, sondern auch ganze Informationsarchitekturen und User Journeys über mehrere Screens hinweg.

Verbesserte Kommunikation im Produktteam

Die zweite Massnahme zu erhöhter Konsistenz in digitalen Produkten ist regelmässige und transparente Kommunikation. Zwei konkrete Ideen:

  • Tägliche Standups: Wer sie noch nicht macht, sollte jetzt damit beginnen. Dieser kurze tägliche Austausch (oft am Morgen) hilft, sich innerhalb des Teams abzustimmen, Doppelspurigkeiten zu vermeiden und mehr Verständnis für die Arbeit anderer zu erhalten.
  • Wöchentliche oder monatliche Design Reviews: Neue Designkonzepte oder Design-System-Elemente werden im Team vorgestellt und Feedback dazu wird eingeholt. Dadurch bleibt das ganze Team über die neusten Entwicklungen informiert. Gleichzeitig fliesst die kollektive Intelligenz in die einzelnen Designkonzepte. Wie so oft kann man als Einzelperson nicht jeden erdenklichen Fall abdecken und ist froh um Hinweise von Teamkolleg*innen.

Fazit

Konsistentes Design in einem digitalen Produkt und das Pflegen einer Komponentenbibliothek ist nicht nice-to-have. Die erfolgreichsten digitalen Firmen setzen schon lange auf Systemdenken beim Produktdesign. Sie erreichen dadurch eine höhere Zufriedenheit der Nutzer und effizientere Entwicklungsprozesse.


Weitere Informationen

Was können wir für dich tun?