Warum Materialdesign verwenden? Vor- und Nachteile abwägen

Die vor mehr als fünf Jahren eingeführten Material Design-Richtlinien von Google sind zum Markenzeichen ihrer Websites und App-basierten Dienste geworden. Sie sind sofort als Partner von Google erkennbar, ein Segen für das Branding des Unternehmens.

Material Design wurde auch von der breiteren Design-Community übernommen und ist nun auf Websites und Apps weit außerhalb der nativen Plattformen von Google (und sogar auf konkurrierenden Plattformen) zu finden. Simplenote verwendet beispielsweise eine Materialdesign-Ästhetik in seinen Apps für Desktop- und mobile Plattformen. Dies ist nur ein Beispiel dafür, warum Material Design eine ausgezeichnete Wahl für eine Vielzahl von Designimplementierungen ist.

Was ist Materialdesign?

Material Design wurde 2014 von Google entwickelt und basiert teilweise auf dem kartenbasierten Layout, das in Google Now verwendet wird. Die Anspielung auf papierbasierte Designstile unterschied es von dem damals weit verbreiteten flachen Designstil.

Wie die meisten Designsysteme wurde Material Design entwickelt, um eine einheitliche Benutzererfahrung über verschiedene Geräte, Plattformen und Eingabemethoden hinweg zu ermöglichen. Ähnlich wie Apple Flat-Design-Prinzipien als Standard implementierte, verwendete Google Material Design, um sicherzustellen, dass Benutzer unabhängig davon, wie sie auf ihre Produkte zugreifen, eine konsistente Benutzererfahrung haben.

Die Material Design-Spezifikation enthält Richtlinien für alles: Typografie, Raster, Abstand, Skalierung, Farbe und Bilder. Aber Material Design geht noch einen Schritt weiter, als Designern nur zu sagen, wie sie Dinge aussehen lassen sollen. Es ermöglicht Designern, beabsichtigte Designs mit Hierarchie, Bedeutung und Fokus in ihrem Endergebnis zu erstellen.

Warum Materialdesign verwenden?

Wie bei jedem etablierten Designsystem gibt es einige wichtige Vorteile bei der Verwendung von Material Design, die Designer berücksichtigen sollten.

Material Design ist praktisch ein ganzes Design-Ökosystem und nicht nur eine Reihe von Stilrichtlinien. Wenn es eine potenzielle Designsituation gibt, verfügt Material Design wahrscheinlich über einen umfassenden Satz von Regeln, wie damit umzugehen ist. Dazu gehören komplexe Anwendungsfälle, die von weniger umfassenden Designsystemen oft übersehen werden. Dies kann für Designer, die eine solche Struktur wünschen, sehr beruhigend sein.

Google pflegt Material Design und führt umfangreiche Dokumentationen zur Verwendung und Implementierung. Diese Art von Unterstützung und Dokumentation kann für viele moderne Designsysteme fehlen.

Trotz all dieser Vollständigkeit und Dokumentation bleibt Material Design eine ziemlich flexible Designbibliothek. Innerhalb der Richtlinien werden viele Einzelheiten zur Implementierung des Designs vollständig dem Designer überlassen.

Genauere Vorteile für Material Design umfassen Dinge wie den subtilen Skeuomorphismus, der es vom flachen Design unterscheidet und es für viele Benutzer intuitiver macht. Eine weitere benutzerfreundliche Funktion ist, dass Benutzerfeedback in Form von haptischem Feedback, dezenten Animationen und ähnlichem in die Richtlinien eingebaut ist. Es hat auch einen sehr vereinfachten Sinn für Physik, was Interaktionen intuitiver macht.

Material Design wurde auf einer Mobile-First-Sensibilität aufgebaut, was sinnvoll ist, wenn man bedenkt, dass sein ursprünglicher Zweck darin bestand, Android-Apps zu entwerfen. Es fördert auch Animationen in Designs, sowohl für Benutzerfeedback als auch um Hinweise darauf zu geben, wie verschiedene Funktionen funktionieren.

Schließlich wurden dunkle Themenoptionen verfügbar gemacht, die Designern noch mehr visuelle Flexibilität bieten. Ursprünglich war Material Design sehr hell und hell, was nicht gut zur Ästhetik einiger Marken passte. Das Hinzufügen einer Richtlinie für dunkle Themen behebt dieses Problem.

Nachteile der Verwendung von Material Design

Obwohl Material Design sehr offensichtliche Vorteile hat, bedeutet das nicht, dass es keine Nachteile gibt, die mit seiner Verwendung einhergehen.

Zunächst einmal ist Material Design sofort identifizierbar und wird stark mit Google und insbesondere mit Android in Verbindung gebracht. Dies ist zwar nicht unbedingt eine schlechte Sache für alle, aber möglicherweise für einige negativ.

Ein wichtiger Grund dafür, dass es negativ sein könnte, ist, dass es die Wirksamkeit anderer Marken bei der Verwendung des Designsystems einschränkt. Ja, Designer können Logos, Farbpaletten (innerhalb der Material Design-Richtlinien) und andere differenzierende Faktoren integrieren, um die Markenidentität zu unterstützen, aber ein Produkt, das den Material Design-Spezifikationen entspricht, wird fast immer auch mit Google in Verbindung gebracht.

Da Bewegung und Animation in den Material Design-Richtlinien gefördert werden, können Websites oder Apps, die es nicht enthalten, für Benutzer so aussehen, als ob ihnen etwas fehlt. Menschen assoziieren die Bewegungseigenschaften des Materialdesigns mit den visuellen Eigenschaften, die Designs ohne Bewegung vermissen lassen können.

Sicher, eine Lösung besteht darin, immer Bewegung in Designs zu integrieren, die den Material Design-Spezifikationen folgen. Umfangreiche Animationen können auf Mobilgeräten jedoch sehr ressourcenintensiv sein, was zu einer höheren Datennutzung und einer schnelleren Batterieerschöpfung führt. Es ist ein Balanceakt, den Designer berücksichtigen müssen, wenn sie innerhalb der Materialdesign-Richtlinien arbeiten.

Anfänger werden möglicherweise feststellen, dass die Material Design-Spezifikation komplizierter und schwieriger zu implementieren ist als andere Stile wie Flat Design. Da das Materialdesign-System so umfassend ist, gibt es viel mehr Dinge zu beachten und einzuhalten, als viele neue Designer mögen.

Seine Vollständigkeit kann auch dazu führen, dass sich manche Designer eingeengt fühlen und ihre eigene Kreativität nicht voll ausschöpfen können. Es kann auch Innovationen ersticken, da praktisch jede Designherausforderung geplant und Lösungen angeboten wurden. Obwohl dies in vielen Fällen hilfreich ist, kann dies Designer daran hindern, neue Herangehensweisen an Probleme zu finden, und gleichzeitig die Anzahl neuer Ideen begrenzen, die auftreten können.

Es gibt auch einige Usability-Probleme im Material Design, die Websites und Apps sehr benutzerfreundlich machen können. Eines der größten Probleme ist die sogenannte „Mystery Meat“-Navigation, die bei vielen mobilen Design-Apps anzutreffen ist. Symbole werden oft anstelle von Text verwendet, und während die Symbole manchmal sofort erkennbar und ziemlich brauchbar sind, sind sie es manchmal nicht.

Ein Kreis, der „Zuhause“ anzeigt, ist deutlich schwerer zu erkennen als das Haussymbol, das zuvor in den meisten Android-Oberflächen verwendet wurde. Dies ist ein hervorragendes Beispiel dafür, wie Form über Funktion gestellt wird, was ein Überbleibsel aus den Flat-Design-Wurzeln von Material Design ist.

Und das nicht nur in der unteren Navigationsleiste. Die Präferenz von Material Design, kreisförmige schwebende Aktionsschaltflächen einzuschließen, ist ebenfalls ein Problem der Benutzerfreundlichkeit. Diese kreisförmigen Schaltflächen enthalten nur Platz für ein Symbol, ohne Hilfstext. Und weil Symbole so offen für Interpretationen sind, fragen sich Benutzer in vielen Fällen, was diese Schaltflächen eigentlich tun.

Fazit

Wenn eine App hauptsächlich für die Android-Plattform entwickelt wird, ist die Verwendung von Material Design eine einfache Wahl. Aufgrund der weit verbreiteten Akzeptanz von Google wird sich jede App, die auf Material Design-Prinzipien basiert, wie eine native App anfühlen.

Abgesehen davon gibt es viele andere Anwendungsfälle außerhalb der Android-Plattform, bei denen Material Design eine gute Wahl ist. Wenn das Designsystem noch weiter reift, werden diese Situationen zwangsläufig zunehmen. Designer sollten sich zumindest mit den Richtlinien vertraut machen, damit sie selbst entscheiden können, wann die Verwendung von Material Design angebracht ist und wann andere Systeme möglicherweise besser geeignet sind.

• • •

Weiterführende Literatur im Toptal Design Blog:

• So erstellen Sie ein effektives Design-Framework (mit einer kostenlosen Skizzendatei)
• Erstellen eines UI-Styleguides für bessere UX
• Verständnis von Designsystemen und -mustern
• A/B-Tests von UX für komponentenbasierte Frameworks
• Designpsychologie und die Neurowissenschaft von Awesome UX