Material Design unter der Lupe

material designCredit: Google
http://www.google.com/design/spec/material-design/introduction.html#introduction-goals

Ende Juni 2014 hatte Google im Zuge des Updates auf Android 5 Lollipop Material Design vorgestellt. Damit hat Google zum ersten Mal eine umfassende Designrichtlinie heraus gegeben und für viel Echo gesorgt.
Material Design basiert eindeutig auf bestehenden Trends wie Flat Design und Content First, geht aber noch einige Schritte weiter.
Mein erster Eindruck von den Richtlinien war sehr gut. Und tatsächlich hatte ich auch als bekennender Apple-Fan zum ersten Mal das Gefühl, dass ein Designansatz von Android dem von Apple überlegen sein könnte.

Deshalb wollte ich mir im Folgenden die vier, meiner Meinung nach, wichtigsten Aspekte von Material Design einmal genauer ansehen. Dabei möchte ich herausfinden was sie besonders macht, und wie sinnvoll sie im praktischen Einsatz sind.

  1. Content in mehreren Ebenen

layeringCredit: Google
http://googledevelopers.blogspot.de/2014/06/this-is-material-design.html

Der Name „Material Design“ bezieht sich auf die Idee , dass der Designer oder Entwickler sich die einzelnen Ebenen einer App oder auch Website als übereinanderliegende Schichten von Papier vorstellen soll.
Dadurch wird eine zusätzliche Möglichkeit geschaffen, Elementen eine Hierarchiestufe zu geben: (von oben nach unten)

  • Ebene 1: Die untere Android Leiste mit den nativen Buttons (hier schwarz)
  • Ebene 2: Die obere App Bar der jeweiligen App (hier pink)
  • Ebene 3: Eventuelle von unten hineinscrollende Bottom Sheets (hier kleiner weißer Layer)
  • Ebene 4: Floating Action Buttons  (hier gelb)
  • Ebene 5 und mehr: der Eigentliche Content in evtl. mehreren Schichten (hier mittelgroßer weißer und großer grauer Layer)

Durch den Einsatz dieser Ebenen wird dem User immer verdeutlicht, welche Elemente der App welchen Anderen unter- oder übergeordnet sind.
Die Floating Action Buttons dienen als Blickfang, damit der User schnell die wichtigste Aktion auf  jeder Seite erkennt. Diese können auch im Layout fixiert werden, wodurch  sie immer im Fokus bleiben und besonders leicht zu erreichen sind.
Eine typische Anwendungsmöglichkeit dafür ist z.B. ein Call-to-Action Button wie „Zum Warenkorb hinzufügen“.

  1. Full Responsive Design

materialdesign_introductionCredit: Google
http://www.google.com/design/spec/material-design/introduction.html

Material Design zeichnet sich außerdem dadurch aus, dass es von vornherein darauf ausgelegt ist, über alle Gerätekategorien hinweg zu funktionieren. Vom Desktop-PC über Tablets, Smartphones, Wearables wie Uhren und Brillen bis zu Smart-TVs soll eine möglichst einheitliche Nutzererfahrung gewährleistet werden.
Ich denke es geht Google darum die User Experience plattformübergreifend zu kontrollieren und sozusagen als eigene Marke zu etablieren.

  1. Animation

animationCredit: CSS Script
http://www.cssscript.com/material-design-hamburger-animation-with-js-and-css3/

Material Design ermuntert den Designer außerdem ausdrücklich dazu zielgerichtete Animationen einzusetzen. Sie sollen dem User den Aufbau von Seiten verdeutlichen, seine Orientierung verbessern und seine Aufmerksamkeit lenken. Das ist an sich kein neuer Ansatz, er wird aber in den Material Design Guidelines noch einmal besonders anschaulich und anwendungsbezogen dargestellt.
Es gibt beispielsweise konkrete Empfehlungen dazu wie sich eine Seite animiert zusammensetzen soll, wie sich zusätzliche Elemente auf der Seite entfalten und wie Action Buttons durch Hinein-Zoomen Aufmerksamkeit auf sich lenken sollen.

  1. Komponenten und Style

bsp1bsp2bsp3Credit: Google
http://www.google.com/design/spec/style/typography.html#typography-standard-styles

Über weite Strecken macht Material Design zudem genaue Angaben wie einzelne Elemente (Buttons, Menus, Overlays etc.) aussehen sollen. Es enthält Vorgaben zur Bildgestaltung und zur Typographie bis hin zu genauen Vermaßungen.
Die Richtlinien erscheinen sinnvoll, aber erinnern insgesamt schon stark an einen Coporate Design Styleguide einer Eigenmarke. Der Gestaltungspielraum des Designers wird hier nicht unerheblich eingeschränkt.

Resümee

Insgesamt halte ich Material Design für einen sehr gelungenen Ansatz, der bestimmt auch über Android hinaus seinen Einfluss haben wird.
Besonders die Berücksichtigung aller Gerätetypen, der gezielte Einsatz von Animation, aber auch die zusätzlichen Ebenen schaffen echten Mehrwert.
Persönlich überzeugen mich aber nicht alle Elemente. Das bekannte Burger-Menü zum Beispiel, besonders in der oberen linken Ecke angebracht, halte ich nicht in allen Anwendungssfällen für geeignet. Vor allen Dingen auf Desktop Seiten halte ich es für wenig sinnvoll, da ja normalerweise genügend Platz vorhanden ist.

Es erfordert aber generell immer ein Klick mehr die verschiedenen Navigationspunkte überhaupt erst zu sehen und sie dann anzuwählen. Studien zeigen außerdem, dass ein Burger-Menu in vielen Fällen weniger Interaction erzeugt als beispielsweise die klassische Tab-Bar unter iOS (Siehe dazu “Why and how to avoid Hamburger Menus” https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/). Die von den Google-Designern vorgeschlagene, obere linke Ecke für das Menü ist als Rechtshänder – gerade bei den aktuell sehr großen Smartphones – mit einer Hand eigentlich am schwierigsten zu erreichen.
Einsatz und Position einzelner Elemente sollte deshalb immer für den jeweiligen Einzelfall individuell betrachtet werden. Auf der anderen Seite sollte aber immer auch einen guten Grund geben vom Standard abzuweichen.
Eine weitere Frage ist die nach ausreichender Individualität und Bezug zur eigenen Marke. Denn Material Design gibt gerade mit seinen Angaben zu Layout, Farben und Typographie schon sehr genaue Richtlinien vor.

Die Aufgabe für Designer wird sein, sich im jeweiligen Kontext die besten Aspekte von Material Design heraus zu picken. Es gilt über verschiedene Apps hinweg eine Konsistenz der Anwendung zu schaffen und trotzdem immer ein individuelles Erlebnis zu bieten.

Ich bin schon gespannt wie sich Material Design – nicht nur im Android-Umfeld – auf zukünftige Websites und Apps auswirken wird.

Leave a Reply