Flat Design + Usability = Flat 2.0?

2. November 2015

In Ihrem neusten Artikel geht die Nielsen-Norman Group auf Flat-Design und seine UrsprĂŒnge, dessen Usability und auf die Weiterentwicklung von Flat Design, Flat 2.0 ein.

Was ist Flat Design ĂŒberhaupt?

Um zu erklÀren, was Flat Design ist, fÀngt man am besten damit an zu erlÀutern was es nicht ist.
Im Gegensatz zur gewohnten drei dimensionalen Darstellung von Computergrafiken, verzichtet Flat-Design gĂ€nzlich auf 3D Effekte, da diese – angeblich – oft zu aggressiv, ĂŒbertrieben oder ablenkend sind. 3D-Effekte waren frĂŒher ein sehr beliebtes Werkzeug unter Designern und wurden beispielsweise in frĂŒheren Microsoft Versionen oft verwendet, wie auf dem folgenden Bild zu sehen ist. Hierbei dienen Schatten und Hervorhebungen dazu, dem Nutzer erkenntlich zu machen, bei welchen Bildschirmelementen es sich um Buttons handelt, auf die er zum Auslösen einer Funktion klicken kann.

Abbildung 1:
Abbildung 1:
Quelle: Walkernet.com

Des Weiteren wird im Flat Design nicht versucht reale GegenstĂ€nde digital nachzubilden. Die designerische Nachbildung der „realen Welt“ in Computer Grafiken wird als Skeuomorphismus bezeichnet. Der Skeuomorphismus war eine Zeit lang sehr populĂ€r und kam auch bei Apple oft zum Einsatz. In frĂŒheren iOS Versionen sah zum Beispiel die App fĂŒr Notizen aus wie ein Notizblock, die Kalender App wie ein richtiger Taschenkalender oder die iBooks App wie ein BĂŒcherregal – und entsprachen dem real-weltlichen Bedienparadigma, was die Bedienung intuitiv gestaltete.
Beim Skeuomorphismus geht es also nicht nur um die bloße grafische Darstellung von realen Elementen wie beim Realismus, sondern darum, die – interaktive – Erfahrung der Nutzer aus alltĂ€glichen Situationen mit dem digitalen Medium zu verbinden. Das Problem hierbei ist aber, dass die Weiterentwicklung schnell an ihre Grenzen stĂ¶ĂŸt, da VerĂ€nderungen in der realen Welt nicht mit VerĂ€nderungen in der digitalen Welt mithalten können und somit die ganzheitliche Nachbildung realweltlicher Erscheinungs- und Verhaltensformen innovative Bedienmöglichkeiten je nachdem verhindern wĂŒrden.

Abbildung 2:
Abbildung 2:

Abbildung 3:
Abbildung 3:

Quelle: Apple.com

Flat Design hat im Gegensatz zum skeuomorphischem Design nicht den Anspruch die reale Welt nachzuempfinden, sondern ist eine Design Form die den Fokus auf klare und minimalistische Strukturen legt und Hierarchien oftmals durch GrĂ¶ĂŸe und Farbe dargestellt werden.

Ursprung des Flat Design

2011 begann die PopularitĂ€t des Flat Designs zu wachsen, als Microsoft seine Metro Design Sprache veröffentlichte und den neuen Stil als „authentisch Digital“ bezeichnete. Die Metro Design Sprache sieht eine klare Aufteilung des Bildschirms in regelmĂ€ĂŸige KĂ€sten mit klar strukturierten Linien und klarer Typografie vor. „Unauthentische“ 3D-Effekte werden bewusst vermieden, denn der Bildschirm ist faktisch gesehen nur eine zweidimensionale Welt. Mit der Veröffentlichung von Windows 8 im Jahre 2012 wurde das Flat Design immer verbreiteter und verdrĂ€ngten so langsam Skeuomorphismus und Realismus als primĂ€ren Stil im Web Design.

Abbildung 4:
Abbildung 4:
Quelle: „Windows 8.1 ModernUI de germany“ von Microsoft – Benutzer:T§. Lizenziert unter PD-Schöpfungshöhe ĂŒber Wikipedia – https://de.wikipedia.org/wiki/Datei:Windows_8.1_ModernUI_de_germany.png#/media/File:Windows_8.1_ModernUI_de_germany.png

Auch Apples Verwendung des Flat Designs auf seiner Homepage bot einen guten Maßstab fĂŒr den neuen Design Trend und machte es fĂŒr viele Designer attraktiv.

Usability Probleme mit dem Flat Design

Seit Beginn des Flat Designs in 2011 kritisiert die Nielsen Norman Group lautstark dessen Usability Probleme. Der grĂ¶ĂŸte Kritikpunkt hierbei ist, dass Flat Design die BedĂŒrfnisse des Nutzers hinter Ă€sthetische OberflĂ€chengestaltung stellt. Jahrelang gab es 3D Effekte und untermalte Links, an welche die Nutzer gewöhnt waren und die fĂŒr sie eindeutige Handlungsaufforderungen, im Sinne von „mich kannst Du klicken“ darstellten. Beim Flat Design fallen diese nun gĂ€nzlich weg, wodurch selbst erfahrene Nutzer es schwer haben, z.B. Buttons als solche zu identifizieren, wenn sie nur als zwei-dimensionale farbige FlĂ€che dargestellt sind.

Flat 2.0 und seine Vorteile gegenĂŒber dem ursprĂŒnglichen Flat Design

Seit kurzen haben Designer damit begonnen die Usability Probleme des Flat Designs zu analysieren und diese zu beheben. Es entwickelte sich eine ausgewogenere Interpretation des Flat Design, wobei Designer realisierten, dass „authentisch digital“ auch möglich ist, ohne die Usability zu kompromittieren. Dieses Design wird dann unter anderem auch als „Flat 2.0“ bezeichnet. Der Stil ist ĂŒberwiegend flach, jedoch werden subtile Schatten, Lichter und Schichten genutzt um der BenutzeroberflĂ€che eine gewisse Tiefe und die nötigen Handlungsaufforderungen zu geben.

Auf den folgenden beiden Bildern kann man den Unterschied zwischen Flat und Flat 2.0 sehr gut erkennen. Das erste zeigt die Buttons von verschiedenen Social Media Apps im Flat Design. Im zweiten Bild sind die Buttons im Flat 2.0 Design. Bei Flat 2.0 kann direkt eine verbesserte Usability festgestellt werden, da durch die Schatten und Lichter eine „Klick mich“ Handlungsaufforderung suggeriert wird, welche beim ersten nicht vorhanden ist.

Abbildung 5:
Abbildung 5:

Abbildung 6:
Abbildung 6:

Zusammenfassend rĂ€t die Nielsen-Norman Group zu MĂ€ĂŸigung und Balance bei Design Trends und niemals die Usability fĂŒr ModernitĂ€t zu opfern. Zudem weisen sie darauf hin, dass die Designer nicht vergessen sollen, dass sie nicht die Nutzer sind und dass eigene Design-PrĂ€ferenzen nicht immer mit den informatorischen BedĂŒrfnissen der Nutzer einher gehen.

Diesen Beitrag bookmarken bei:
Bookmark bei: Yigg Bookmark bei: Webnews Bookmark bei: Technorati Bookmark bei: Mr. Wong Bookmark bei: Linkarena Bookmark bei: Del.icio.us Bookmark bei: Google Bookmark bei: Favoriten Bookmark bei: Facebook

Autor des Beitrags