Flat Design: Reduktion auf das Wesentliche oder Usability-Problem?

Eines der Buzzwords in diesem Jahr ist zweifelsohne „Flat Design“. Für die Einen ist es nur ein weiterer Trend im Webdesign, für die Anderen die Antwort auf das in den letzten Monaten oft kritisierte Apple-Design, bei dem sich nahezu alles an Alltagsobjekten orientiert.

Was ist Flat Design?

Seit den letzten Wochen beobachte ich verstärkt, dass immer mehr Websites online gehen, die sich durch ein sogenanntes Flat Design auszeichnen. Wie der Name es schon erahnen lässt, geht es beim Flat Design darum, auf Tiefe, die in der Vergangenheit durch Schatten, Verläufe und Spiegelungen simuliert wurde, zu verzichten. Bestes Beispiel ist der Relaunch der Microsoft-Website, der sich an dem Design von Windows Phone 7 bzw. Windows 8 orientiert. Aber auch The Next Web besticht durch ein typisches Flat Design.

Flat Design wird aber oft auch als Gegenbewegung zum Skeuomorphismus, also der Imitation von Gegenständen und deren Funktion aus dem Alltag im Design gesehen. Durch Apple geprägt, griff ein Trend im Web um sich, in dem man z.B. mit Leder-Strukturen, Papierstapeln und Notizzetteln versuchte, einer Website oder einer App mehr Leben einzuhauchen.

Flat Design verspricht hingegen, durch Minimalismus und ohne Effekthascherei den Fokus wieder aufs Wesentliche lenken. Doch ist das wirklich so?

Das Problem mit der Usability im Flat-Design

Derzeit wird unter Gestaltern heftig diskutiert, ob Flat Design nicht evtl. ein Rückschritt in Sachen Benutzerfreundlichkeit ist. Über Jahre hinweg haben wir dem Nutzer beigebracht, dass er die Navigation und wichtige Elemente wie Buttons an dem 3D-Effekt erkennt. Erkennt der Nutzer einen Button auch noch, selbst wenn er diese simulierte Plastizität nicht mehr besitzt?

Grundsätzlich bin ich ein Fan von minimalistischem Webdesign und deswegen auch dem Flat-Design nicht gänzlich abgeneigt. Ich glaube aber auch, dass der konsequente Verzicht auf Verläufe und Schatten, gerade bei Navigationselementen, sich negativ auf die Usability einer Website auswirken kann. Denn ohne Verläufe und Schatten bleiben uns weniger Möglichkeiten zum Hervorheben von Elementen übrig. Auf der Microsoft Website arbeitet man deshalb primär mit unterschiedlichen Größen und Farben, um den Blick des Nutzers auf wichtige Elemente zu lenken.

Im oberen Bild sehen wir einen Header der Microsoft Office Website. Durch den Verzicht auf Schatten und Verläufe wirkt das Layout insgesamt ruhiger und ausgeglichener. Allerdings, so behaupte ich, fällt es dem Nutzer dadurch auch schwerer, den Call-to-Action Button als solchen zu erkennen. Lediglich durch den Rot-Grün-Kontrast (abgesehen von der Beschriftung) wird der Button als solcher erkennbar.

Für Jemanden mit einer Rot-Grün-Sehschwäche würde die Website dann u.U. so aussehen:

Zum Vergleich: Daneben habe ich einen ebenfalls grünen Button platziert, allerdings mit Verlauf und Schatten. Jetzt weiß auch der Nutzer mit einer Rot-Grün-Schwäche auf den ersten Blick, wo er klicken soll. Glücklicherweise haben die Meisten von uns kein Problem mit der Unterscheidung von Farben. Und doch denke ich, dass grundsätzliche Schwächen einer Website bei Menschen mit Behinderung besonders deutlich werden. Als Webdesigner ist es unsere Aufgabe, dem User zu zeigen, wo es lang geht. Und in einer Zeit, in der Websites nur noch gescannt, statt gelesen werden, ist es umso wichtiger, den Fokus auf wichtige Elemente zu lenken.

Zu dem Entschluss scheint man auch bei Google gekommen zu sein. So zeichnete sich Google+ von Beginn an durch ein minimalistisches Design aus. Und doch werden wichtige Navigationselemente wie (Sub-) Navigationen und Buttons zur Hervorhebung stets mit einem leichten Verlauf versehen. Genauso werden Schatten verwendet, um einen aktiven Status zu kennzeichnen bzw. einen eingedrückten Button zu simulieren.

Fazit: Die Mischung macht’s

Leider habe ich keine Eye-Tracking-Studien gefunden, in denen ein Button mit 3D-Effekt mit einem „Flat Design“-Button verglichen wurde. Meiner Meinung nach ist Google+ aber ein guter Kompromiss aus Flat Design und guter Benutzbarkeit. Das man bei Google mit Schatten und Verläufen arbeitet, merkt man eigentlich erst, wenn man diese deaktiviert. Und genauso so sollte es sein. Gutes Design ist oftmals unsichtbar. Umgekehrt kann ein Flat Design sehr schnell Schwächen in der Gestaltung aufdecken. Was in vorhergehenden Mockups schon nicht richtig gut funktioniert hat, lässt sich auch durch ein paar Effekte nicht mehr ausbügeln.

Was denkt ihr über Flat Design? Habt ihr bereits Projekte in diesem Stil realisiert? Ich bin gespannt auf euer Feedback.

Update

Beim 3. Webmontag in Kiel habe ich einen Vortrag zum Thema Flat Design gehalten. Die Slides könnt ihr euch hier ansehen:

Slides ansehen