Designs wie von Google?

Material Design: Google-Style oder viel mehr?
Keine Kommentare

Der runde, schwebende Call-to-Action-Button unten rechts, das Burger-Menü oben links, starke, kontrastreiche Farben und eine schlichte, klare Font. Dazu noch ein flaches, frisches User Interface und die typischen Animationen – das ist Googles Material Design. Im vergangenen Jahr hat die Designsprache einen kometenhaften Aufstieg im App- und Webdesign erlebt. Ihre Vorteile sind auch absolut unbestreitbar. Aber daneben hat das Design ein großes Problem: Alles sieht aus wie Google. Oder?

Material Design ist nicht nur eine Designsprache, es steht eine ganze Philosophie dahinter. Webdesign soll sich an den bewährten Strukturen des Printdesigns orientieren, klare Formen und Interfaces sollen dem Nutzer helfen, sich zurechtzufinden. Auch der Wiedererkennungswert der typischen Designelemente ist hier hilfreich. Nutzer können sich so leichter und schneller in neuen Anwendungen zurechtfinden, wenn diese einem gemeinsamen Standard folgen. Googles Ziel ist es, das Design von Websites und Apps über alle Devices hinweg zu vereinheitlichen.

Um das beliebte Designkonzept anzuwenden und trotzdem etwas ganz eigenes zu machen, müssen Designer die Kernelemente der Sprache verstehen. Sie können ohne weiteres verwendet werden, ohne alle anderen Aspekte umzusetzen; sie stellen auch dann eine gute Grundlage für ein responsive Design mit hoher Nutzerfreundlichkeit dar.

ML Summit Munich 2020

Market Segmentation in the Era of Big Data

mit Özge Sahin (SkyScry)

Deep Learning mit TensorFlow

Mit Jakob Karalus (Deloitte Consulting)

Übereinander und untereinander: Die Ebenen

Material Design hält Website-Strukturen flach, indem es Ebenen einführt. Buttons liegen eine Ebene höher als Inhalte, Menüs eine Ebene über den Buttons. Die Ebenen werden durch Schatten hervorgehoben, sodass der Nutzer jederzeit erkennen kann, welche Elemente nun spezifisch zum gerade geöffneten Inhalt gehören und welche Teil des Grunddesigns einer Website oder App sind. Menüs verändern sich also auch dann nicht maßgeblich, wenn einzelne Elemente der Website geöffnet werden.

Schatten oder keine Schatten, das ist immer eine wichtige Frage im Design. Einerseits können Schattierungen die Übersicht erleichtern, andererseits aber auch dazu führen, dass ein Design überladen und unübersichtlich wirkt. Befinden sich beispielsweise viele schwebende Buttons über dem Inhalt einer Website, kann der Schattenwurf störend wirken.

Die Karten: Trennen, was getrennt werden muss

Karten sind das Herz des Material Design. Einzelne Content-Bestandteile werden übersichtlich auf jeweils eine eigene Karte gesetzt, die klar gegenüber anderen Inhalten abgegrenzt ist. Das ermöglicht einen schnellen Überblick über die vorhandenen Inhalte. Um Inhalte zu öffnen, wird die Karte angeklickt und dadurch vergrößert.

Karten sind aber nicht immer notwendig. Zwar ist das Design ein guter Ausgangspunkt für das Layout einer App; manchmal ergibt es aber auch Sinn, verschiedene Arten von Informationen auf einer Ebene zu präsentieren. Das passt nicht so recht zu den Karten des Material Design, die ausgeklappt den Bildschirm füllen und andere Informationen verdecken. Hier können die klassischen Tabs eine bessere Lösung darstellen.

Es blinkt und bewegt sich: Die Effekte

Apps im Material Design geben dem Nutzer Feedback über seine Interaktionen. Wird ein Element berührt, gibt es einen bestimmten Effekt dafür, wird ein Button angeklickt, wechselt er die Farbe. Und wenn ein Menü ausgeklappt wird, erscheint es nicht einfach, sondern wird optisch ausgefahren, sodass der Nutzer sieht, was nun wozu gehört und woher es kommt. Der Menü-Button kann sich in einer flüssigen Animation in einen „zurück“-Pfeil verwandeln; über den angeklickten Menüeintrag fliegt ein Schatten.

Um die eigene Anwendung aus der Masse hervorzuheben, kann es allerdings sinnvoll sein, eigene Effekte zu entwickeln. Die typischen Animationen des Material Design sind zwar gelungen, aber eben auch bekannt. Wer den Design-Standards folgen möchte, muss sie aber nicht verwenden. Der Sinn der enthaltenen Effekte ist, den Nutzer durch Anwendungen zu führen; das geht auch mit anderen Effekten.

Der Call-to-Action-Button

Dieser Button ist im Material Design immer prominent platziert. Typischerweise befindet er sich am rechten unteren Bildschirmrand und sticht durch eine leuchtende Farbe hervor. Er schwebt über den Inhalten der App, ist also jederzeit benutzbar, auch wenn der User noch nicht zum Ende der Seite gescrollt hat. Das vereinfacht die Bedienung von Apps und Websites in vielen Fällen sehr, weil der User jederzeit auf wichtige Bedienelemente Zugriff hat.

Nicht jede App hat nur eine einzelne Nutzerinteraktion. Buttons, die über jeder Seite einer Anwendung zu finden sind, immer an der gleichen Stelle, sollten allerdings eine feste Funktion haben. Wenn sie auf der einen Seite zur Eingabe einer Mailadresse dienen, auf der nächsten aber zum Shop führen, verwirrt das den User. Natürlich können in diesem Fall mehrere Elemente in einem Menü rund um den Button herum angezeigt werden; zu viele dürfen es aber auch nicht sein. Ebenfalls problematisch ist die Verwendung mehrerer gleichzeitig erscheinender Buttons dieser Art – das typische Smartphone-Display ist eben klein. Ein guter Ansatz ist dabei die Frage, welche Funktion am Wichtigsten für den Nutzer ist – diese wird dem Button dann zugewiesen.

Leuchtend bunt & kontrastreich: Die Farben

Pink und blau, das ist eine der bekanntesten Farbkombinationen des Material Design. Der hohe Kontrast der beiden Farben ist dabei kein Zufall: Google empfiehlt ausdrücklich, auf Kontraste zu achten und Farbkombinationen mit weniger großen Differenzen eher zu vermeiden. Das spiegelt sich auch in der Component-Library Material Design Lite wieder, Googles eigener Adaption der für Apps entwickelten Sprache auf das Web. Die hier vorgeschlagenen Farbkombinationen sind von Primärfarben geprägt, die ins Auge stechen und auffallen.

Farben sind kontrastreich im Material Design.  Quelle: https://www.google.com/design/spec/style/color.html#color-ui-color-application

Farben sind kontrastreich im Material Design. Quelle: https://www.google.com/design/spec/style/color.html#color-ui-color-application

Blau, blau, blau ist … Google. Es gibt wohl keine Farbe, die im Web stärker mit dem Internetriesen verbunden ist, als das typische blau. Insofern sind Designer gut damit beraten, nicht unbedingt die klassischen Farbvarianten zu wählen. Auch kann eine Abweichung vom Standard Sinn ergeben, um ein Design von anderen Apps abzuheben. Wenige Anwendungen im Material Design arbeiten beispielsweise mit Farbverläufen.

Der Kern der Usability: Die Icons

Google bietet ein Icon-Set mit 750 Elementen an, die den Standards des Material Design entsprechen. Das ermöglicht Designern einen großen Spielraum in der Gestaltung ihrer Anwendungen. Auch über die Verständlichkeit der Symbole müssen sich Designer hier nur wenige Gedanken machen. Manche Elemente erhöhen außerdem den Wiedererkennungswert des Layouts ungemein und helfen so Nutzern unmittelbar bei der Orientierung. Das Menü muss die klassische Burgerform haben, der Call-to-Action-Button ist rund mit einem Plus-Zeichen darauf.

Andererseits gibt es inzwischen aber eine Vielzahl von Projekten, die alternative Icons und andere Layoutelemente für das Material Design anbieten. Der Vorteil liegt klar auf der Hand: Zwar folgen diese Elemente dem Designstandard, sie sehen aber nicht so sehr nach Google aus, wie die hauseigenen Elemente des Konzerns. Wer sein Design also individualisieren möchte, ist gut damit beraten, sich anderweitig nach Icons umzusehen.

Material Design für alle?

Der Ansatz des Material Design ist vielversprechend. Gerade die Tatsache, dass alle Elemente dieser Sprache auf Responsive Design ausgelegt sind, macht sie attraktiv für Designer. Auch die Integration in viele Frameworks, sowohl fürs Web als auch für native Apps, ist ein großer Vorteil. In Sachen Usability ist Material Design definitiv ein guter Ausgangspunkt und viele Elemente ergeben auch für Apps mit anderen Designkonzepten Sinn. So ist beispielsweise der Call-to-Action-Button des Material Design sicherlich auch für andere Design-Stile nutzbar; auch die Nutzerführung über gezielt eingesetzte Animationen kann gerade in komplexen Projekten sinnvoll sein. Die Umsetzung aller von Google entworfenen Elemente ist dabei aber gar nicht notwendig – somit muss also eine App im Material Design nicht immer aussehen, als käme sie aus dem Hause Google.

ML Summit Munich 2020

Market Segmentation in the Era of Big Data

mit Özge Sahin (SkyScry)

Deep Learning mit TensorFlow

Mit Jakob Karalus (Deloitte Consulting)

Aufmacherbild: Illustration of unusual modern material design background via Shutterstock / Urheberrecht: Decorwith.me

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -