#spotlightFlat DesignGoogle

Material Design: Ein Design mit klaren Regeln

Material Design: Ein Design mit klaren Regeln

Google ist nicht gerade für sein Design bekannt. Die Vielfalt an Plattformen und Geräten einhergehend mit der praktisch grenzenlosen Freiheit was die Gestaltung von Android Apps angeht, hinkten Apples klaren Richtlinien bisher deutlich hinterher. Mit dem Material Design versucht Google seine Konkurrenz nicht nur einzuholen, sondern zu überholen.

Die Einführung von Android 5.0 und “Material Design”

Nach und nach bringen die Smartphone Hersteller für ihre aktuellen Android Geräte das Update auf Version 5.0 „Lollipop“ heraus.
Wie üblich zuerst mit dem neuen Android-Flaggschiff Nexus 6 vorgestellt, passen die Hersteller das Betriebssystem an die jeweiligen Spezifikationen ihrer Geräte an.

Neben diversen Verbesserungen wie den Benachrichtigungen auf dem Sperrbildschirm, allgemein bessere Performance, mehr Schnittsstellen für Entwickler, Unterstützung von 64Bit Prozessoren und Verbesserung der Akkulaufzeit plus Stromsparmodus wurde mit dem neuen Betriebssystem auch die neue Designsprache “Material Design” eingeführt. 

Beispiele?

Bei Google hat man sich offensichtlich richtig Gedanken gemacht und bringt diese neuen Designrichtlinien nicht nur in Android, sondern übergreifend zur Anwendung. Wenn man also keines der bereits aktualisierten Android Geräte hat, dann kann man sich schon mal im Netz einen Eindruck verschaffen. Nach und nach werden sowohl Anwendungen als auch Seiten umgestellt. Google Docs, Maps und Inbox verwenden es schon, ebenso wie der Play Store. 

 

Ein kleiner Blick zurück

Mit der zunehmenden Grafikleistung der Computer wurden die Inhalte, wenn möglich, immer mehr realen Objekten nachempfunden, um einen besseren Bezug zur Funktion herzustellen (Skeuomorphismus). Eine Notizfunktion bekam die Optik eines Post-it und der Kalender wurde in Lederoptik gehalten, wobei sogar die Papierränder abgerissener Vormonate imitiert wurden. Der Umstieg von den gewohnten analogen Hilfen zu ihren digitalen Pendants sollte vereinfacht und vertrauter dargestellt werden.

Gerade mit der Zunahme der verschiedenen Darstellungsmedien sowie dem mittlerweile verschobenen Fokus auf Geschwindigkeit und einfache Bedienung wurde die skeuomorphistische Darstellung aber immer unrentabler, was zu dem relativ radikalen Umschwung auf das Flat Design führte. Einfache, große Flächen erleichtern die Bedienung auf Touch-Geräten, während gleichzeitig die Hardware entlastet und viel Zeit bei der Gestaltung gespart werden kann. Das neue Design wirkt modern und alle scheinen zufrieden. Warum baut Google jetzt wieder Schatten ein? Denn auf den ersten Blick erscheint eine Material Design Oberfläche zunächst wie inkonsequent umgesetztes Flat Design mit einigen wenigen Schlagschatten. Der Umstieg vom Skeuomorphismus zum Flat Design kann als Umstieg von einem Extrem (möglichst hoher Bezug zu physikalischen Objekten) zum anderen (möglichst hohes Abstrahieren durch Reduzierung auf das Wesentliche) gesehen werden. Mit dem Material Design versucht Google offenbar hier, das Beste aus beiden Welten zu vereinen.

 

Material Design: Ein Design mit klaren Regeln

Während auf der einen Seite die Flächen beibehalten werden, werden ihnen gleichzeitig physikalische Eigenschaften gegeben. Dadurch soll die Benutzung intuitiver werden. Im realen Leben haben wir keine zweidimensionalen Objekte. Selbst ein Blatt Papier hat seine Stärke und wirft einen Schatten.

Hier setzt das Material Design an. Das Flat Design wird um physikalische Regeln ergänzt. Flächen bekommen eine Position auf der Z-Achse und werfen entsprechende Schatten. Zudem hat das „Google-Material“ eine feste Dicke.

Dabei gibt es auch klare Grenzen. So darf sich nach den Regeln des Material Designs keine Fläche durch oder in eine andere bewegen, es sei denn, die beiden Flächen verschmelzen dabei miteinander. Auch können die Flächen nicht geknickt, gebogen oder gefaltet werden; Änderungen der Form (beispielsweise vom Kreis zum Rechteck) sind dagegen kein Problem.

 

Direktes Feedback ist wichtig

Wahrscheinlich hat das Problem jeder schon mal gehabt: Man klickt/tippt auf einen Button und es passiert anscheinend überhaupt nichts. Also klickt man noch fünf Mal und plötzlich kommen ein halbes Dutzend Reaktionen auf einmal. Ein guter Weg, dem entgegen zu wirken, ist ein direktes Feedback. Selbst wenn der Vorgang noch etwas dauert, bekommt der User zumindest schon mal eine Reaktion als Hinweis darauf, dass sein Befehl angekommen ist. Ein Beispiel dafür ist der an Wellen erinnernde „Ribble-Effekt“ oder kleine Animationen der gedrückten Buttons.

Videos: Google design guidelines

 

Dos and Don’ts der Animationen

Ein sehr wichtiger Grundsatz des Material Design ist die korrekte Verwendung von Animationen.

Google hat der dem Bereich der Animationen einen umfangreichen Teil seiner Design Guidelines gewidmet. Zusammengefasst gibt es folgende Aussagen:

Masse und Beschleunigung sind wichtig, abrupte Änderungen sind zu vermeiden
Im nicht sichtbaren Bereich befindliche Objekte werden mit voller Beschleunigung in und aus dem sichtbaren Bereich bewegt

 

Hier handelt es sich nur einen kleinen Ausschnitt der beschriebenen Techniken und Anwendungsbeispielen. Insgesamt ist die Dokumentation sehr umfangreich und ein Blick lohnt sich auf jeden Fall.

Fazit

Ein Blick auf die Google Design-Specs des Material Designs lohnt sich auf jeden Fall, selbst wenn man keine Android-Apps entwickelt. Das Team hat sich hier viele Gedanken um eine möglichst optimale Verbindung von Design und Usability gemacht, deren Anwendungsmöglichkeiten sich über viele Ebenen erstrecken.

Noch hat sich das Material Design nicht durchgesetzt, allerdings liegt das zum großen Teil daran, dass die einzelnen Hersteller die neue Android Version noch für ihre jeweiligen Geräte optimieren müssen. Wirkliche Nachteile haben sich noch nicht gezeigt, abgesehen von einigen Stimmen, denen das etwas klobig wirkende Design einfach optisch nicht gefällt.
Das ist aber Geschmackssache und hier bleibt es auch jedem selber überlassen, wie sehr man sich an die Design Specs hält.

Ich würde mich jedenfalls freuen, wenn wir bald unsere erste Seite im Material Design in unseren Referenzen auflisten können.

Quellen

 

Benjamin Reuter

Als gelernter Gestalter und Anwendungsentwickler gilt mein Interesse aktuellen Technik-Trends sowie der User/Software Interaktion.