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.