Design und Systeme im Wandel

Designs haben sich schon immer an neue Entwicklungen anpassen müssen und wie überall gibt es auch in der Design-Welt schlicht Verfechter von bestimmten Stilrichtungen, von deren Grundprinzipien sie überzeugt sind. Solch ein Verfechter war auch Scott Forstall, der sich als Verantwortlicher für das iOS gemeinsam mit Steve Jobs aufmachte, mit dem iPhone den Startpunkt für das moderne Smartphone zu setzen. Er war von einem Designstil überzeugt, der auf der Nachahmung bekannter, naturnaher Gegenstände beruhte: Dem Skeuomorphismus. Für Forstall war es nur logisch, dass z.B. ein digitaler Notizblock eben auch so real wie nur möglich einem echten Notizblock nachempfunden werden sollte.

Heutzutage ist auf einem iPhone von diesem Stil nicht mehr viel übrig geblieben, was vor allem an Jonathan Ivy lag, der 2013 das OS-Design bei Apple übernahm. Ivy empfand den Skeuomorphismus als zu aufwendig, unflexibel und schlichtweg altbacken, weshalb er sich beim iOS 7 für das bereits bei Microsoft (Windows Phone 7 / Windows 7) erfolgreich vertestete Flat Design entschied. Bei diesem Design, welches vor allem im Mobile-Bereich nicht mehr wegzudenken ist, wird ein eher minimalistischer Ansatz verfolgt. Dreidimensionale Objekte kommen, wie der Name bereits verrät, überhaupt nicht mehr vor, dafür ist die der flachen Oberfläche des Bildschirmes nachempfundene Darstellung der Elemente so klar und übersichtlich gestaltet, dass selbst neue Nutzer schnell die Anwendungen und Funktionalitäten verstehen.

Standardisiert oder flexibel? — Neue Layouts braucht die Welt

Der Siegeszug mobiler Endgeräte war zu diesem Zeitpunkt natürlich bereits in vollem Gange und bevor man sich über die vermeintlich richtige Stilrichtung streiten konnte, musste zunächst einmal eine neue Ära des Webdesigns eingeläutet und verstanden werden, die mit ihren ganz eigenen Herausforderungen aufwartete und neue grundlegende Fragen hinsichtlich des Designprozesses aufwarf. Die handlichen Taschen-PCs mit kleinen Bildschirmen und einer nicht weniger kleinen Bildschirmauflösung mussten schließlich mit Leben gefüllt werden. Doch füllt man diese Mini-Geräte nun mit dem gleichen Inhalt wie stationäre PCs oder reicht auch weniger? Und, unabhängig von der Menge, wie stellt man diesen Inhalt auf den Screens überhaupt dar?

Um sich den wandelnden Gegebenheiten anzupassen, wurde an festen Gestaltungsrastern in der Layoutentwicklung gefeilt und immer mehr Design-Elemente wie Navigation oder Buttons wurden standardisiert. Dies führte zwar nach und nach zu einem Mobile-First-Ansatz, jedoch fingen die Designs dadurch an, sich extrem zu ähneln und somit austauschbar zu werden — ein Einheitsbrei, der für Designer unbefriedigend und für eine Marke tödlich sein kann. Gleichzeitig ersparten und ersparen sich auch heute noch viele Betreiber den Aufwand der Mobile-Entwicklung und stampfen sowohl Content als auch Funktionen ihrer Website schlicht für den Mobilgebrauch ein.

Deshalb machte sich Ethan Marcotte mit seiner Idee des Responsive Design 2010 daran, dem Webdesign eine neue Richtung zu geben. Anstatt immer weiter zu standardisieren, pochte er auf einen flexiblen Ansatz, in dem feste Raster fluiden weichen und Content nicht gekürzt, sondern in Gänze erhalten bleibt. Dank HTML5 und CSS3 Media Queries ermöglichte Responsive Design nun das Erstellen eines flexiblen Layouts, dessen Designelemente so skalierbar sind, dass sie sich fließend an unterschiedliche Displaygrößen anpassen können — Und der Content bleibt King.

Googles Weg von Material Design zu Material Theming

Dass der Fokus auf den Inhalt aber auch durch eine Art Standardisierung möglich ist, zeigte Google 2014 mit dem Launch von Material Design. Basierend auf dem damals noch recht jungen Flat Design, entwickelte Googles Vizepräsident für Design, Matias Duarte, das Konzept eines ‘Designsystems für Jedermann’. Und wie im Flat Design üblich, ging es darum, die einzelnen Elemente auf ihre wesentliche Funktion zu reduzieren und somit eine einheitliche visuelle Sprache zu kreieren.

Material Design lieferte so eine Art Baukasten für Designer, in welchem alle etablierten App- sowie Webdesign-Elemente aufeinandertreffen und zur Nutzung bereitstehen. Es ging also im Gegensatz zum Responsive Design wieder mehr um Standardisierung, jedoch war die grundlegend zu beantwortende Frage bei beiden Ansätzen die gleiche: Wie kann man trotz mehrerer Layouts den Fokus auf den Content legen? Googles Antwort: Eine allgemeine Designsprache mit kartenähnlichem Aufbau sowie einer papierähnliche Erscheinung, die trotz (oder dank) ihres minimalistischen Stils — vor allem durch ausgeklügelte Schatten- und Tiefeneffekte — dem Nutzer klar aufzeigt, welche Inhalte von Wichtigkeit sind und welche über eine interaktive Funktion verfügen.

Googles Material Design ist noch heute das populärste Open Source Designsystem und etablierte einige Prinzipien sowie Standards, die auch weiterhin Gültigkeit haben. Allerdings erschwerte die standardisierte Visualität das Durchbrechen des Einheitsbreis. Erst 2018 wurde mit Material Theming und dem zugehörigen Editor ein Update geliefert, welches Entwicklern erlaubt, eigene Elemente, Farben, Formen und Symbole hinzuzufügen, um die individuelle Identität einer Marke widerzuspiegeln und das Herausstechen aus der breiten Masse zu ermöglichen.

Digitale Kommunikation — Systeme müssen verständlich, inklusiv und zugänglich sein

Doch nicht nur die Anzahl und Ausprägung der zur Verfügung stehenden Endgeräte wartet heutzutage mit neuen Herausforderungen hinsichtlich des Designprozesses und der gesamtheitlichen Produktentwicklung auf. Unsere gesamte Kommunikation und Wahrnehmung hat sich durch die Digitalisierung sowohl in unserem Privat- als auch Arbeitsleben gewandelt. Diese digitale Kommunikation, welche sich aus unzähligen Berührungspunkten und Kanälen zusammensetzt, über die Nutzer und Kunden mit einem Unternehmen in Verbindung treten, kann nicht mehr schlicht durch einen Styleguide gesteuert werden. Eine konsistente digitale Präsenz über jede Plattform, jeden Kanal, jeden Touchpoint hinweg kann nur dann geschaffen werden, wenn verständliche digitale Systeme den Grundbaustein bilden und für alle relevanten Personen zugänglich sind.

Nur durchdachte und nutzerorientierte Designsysteme, die Inhalte personalisiert aufbereiten und Touchpoints zwischen allen Geräten erstellen, schließen die (Kommunikations-)Lücke zum Nutzer und können selbst auf von der Umgebung abhängige Bedürfnisse kontextuell reagieren. Ein gutes Beispiel hierfür ist der Streaminganbieter Spotify, welcher sich zum Ziel gesetzt hat, dass jeder Nutzer in jeglicher Umgebung und mit dem Gerät seiner Wahl auf die Inhalte der Dienste zugreifen kann, ohne dass die User Experience darunter leidet.

Auf der Desktop-App bedeutet dies, dass die größere Bildschirmfläche nicht unnötig überfüllt wird. Inhalte werden in visuell konsistenten Rastern und übersichtlichen Listen präsentiert, wobei die einzelnen Inhaltsmodule klar voneinander getrennt werden und eindeutige Überschriften eine verständliche Hierarchie abbilden. Wer nun vom Desktop zu seinem Smartphone wechselt, wird recht schnell bemerken, dass sich die Benutzeroberfläche dort deutlich unterscheidet. Um die kleinere Bildschirmfläche optimal zu nutzen, wird hier mit horizontalen Kartendesigns und Sub-Tabs, die verschiedene Ebenen ermöglichen, gearbeitet und der Fokus auf die Suche sowie die eigene Bibliothek gelegt.

Der Inhalt ist bei beiden Anwendungen 100% identisch, jedoch ist die gesamte Darstellung und somit das gesamte Erlebnis auf das verwendete Gerät und dessen Funktionen (z.B. beim Smartphone die Spracherkennung oder Verknüpfung mit anderen Mobile-Apps) zugeschnitten. Und da sich die Umgebung, in der man sein Smartphone verwendet, ebenfalls ändern kann, entwickelte Spotify zusätzlich einen Car View Modus. Hier wird die ganze Benutzerfläche auf die notwendigsten Funktionen (Titel/Pause/Play/Weiter/Zurück/Shuffle) reduziert, damit jeder, der beim Autofahren, Joggen o.ä. nicht großartig abgelenkt werden will und sollte, direkt mit einem einzigen Blick die gewünschte Funktion anwählen kann.

Optimale Visualisierung und Nutzung in jedem Kontext

Die verschiedenen Darstellungsmöglichkeiten sind eben nicht nur geräte- sondern auch umgebungs- und somit kontextabhängig. Als UX-Designer gilt es daher im Umgang mit Designsystemen dafür zu sorgen, dass die Nutzer über alle Touchpoints hinweg mit der passend dafür gewählten Darstellung der Inhalte sowie den damit verbundenen Anforderungen auch in Berührung kommen, um schlussendlich die bestmögliche Nutzung in jeglichem Kontext zu gewährleisten.

Dass das Design und die im digitalen Raum angewandten Designsysteme dabei immer komplexer werden, ist nicht von der Hand zu weisen, da die Nutzer teils gelernte, teils neue Ansprüche gegenüber Services, Produkten und Unternehmen entwickeln. Vor allem in Zukunft wird die Cross-Device-Nutzung, die das Wechseln und Verknüpfen von Geräten ermöglicht, noch weiter ansteigen, genauso wie die Personalisierung hinsichtlich Vorlieben und Nutzungsmuster der Anwender. Es bleibt daher ein spannender Balanceakt zwischen Konventionen und Innovationen; zwischen Standards und Flexibilität; zwischen Konformität und Individualismus.

Innovation Explorer. Design Consultants. User Experience Experts.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store