Fehlende Tiefe: Usability-Sünden in Flat Designs erkennen und vermeiden

„Wieso passiert denn nichts, wenn ich hier klicke?“ oder aber „Ach, man kann hier klicken, damit was passiert?!“ – haben Sie das auch schon erlebt? Vor etwa eineinhalb Jahren begann mit der Veröffentlichung von Windows 8 der große Hype um Flat Design. Es ist kein Geheimnis, dass mit der Reduktion gestalterischer Effekte auf ein Minimum zahlreiche Probleme mit der Benutzbarkeit einher gehen können. Die Kritik der Norman Nielsen Gruppe an Windows 8 und auch an iOS 7 sind populäre Beispiele dafür. Der Ästhetik der modernen, klaren und oft farbenfrohen Gestaltung können sich trotzdem sehr viele Menschen nicht entziehen.
Auch ich empfinde viele der neuen Websites und Benutzungsoberflächen als visuell ansprechend. Gleichzeitig ärgere ich mich seit vielen Monaten über die scheinbare Ignoranz, mit der fundamentale Gestaltungsgrundsätze der Software-Ergonomie über Bord geworfen werden: Links lassen sich oft schwer von normalem Text unterscheiden, Eingabefelder sind kaum als solche zu erkennen, Schaltflächen und Symbole wirken deaktiviert. Doch muss das so sein? Oder gibt es vielleicht neue Kniffe zu erlernen, um Flat Design und exzellente Usability zu vereinen? Es gibt! Zahlreiche Stellschrauben wie erwartungskonformes Layout, der geschickte Einsatz von Typografie oder Almost Flat Design trennen die Spreu vom Weizen.
Was ist Flat Design und (warum) sollte ich es anwenden?
Da Flat Design mittlerweile kein wirklich neuer Trend mehr ist, gibt es bereits eine Menge Artikel, welche die zugrunde liegenden Prinzipien detailliert darstellen. Ich möchte es daher an dieser Stelle bei einer knappen Erläuterung belassen: In Flat Design gehaltene Websites und Anwendungen verzichten auf gestalterische Mittel wie Schatten, Farbverläufe oder Texturen, die zur Erzeugung von räumlicher Tiefenwirkung eingesetzt werden können. Stattdessen spielen andere Aspekte wie die verwendete Typografie eine besonders starke Rolle.
Es gibt eine Menge Gründe, die dafür sprechen, eine Website oder eine Anwendung mit Flat Design zu gestalten:
- Der Fokus auf den Inhalt reduziert die kognitive Last zum Erfassen der wesentlichen Inhalte. Dies ist besonders vor dem Hintergrund der weiter steigenden Menge an Informationen, mit denen wir tagtäglich konfrontiert werden, sinnvoll.
- Die Umsetzung als Responsive Design wird erleichtert. Flat Design kommt damit der Anforderung an Benutzungsoberflächen, die sich an die verschiedenen Anzeigegrößen mobiler Geräte anpassen, entgegen.
- Der Verzicht auf viele Grafiken und Texturen kann die Ladegeschwindigkeit erhöhen und damit zu einer verbesserten User Experience beitragen.
Dies sind nur ein paar der Argumente, die durchaus für die Gestaltung in neuer, flacher Optik sprechen können. Die besondere Ästhetik – die sicherlich Geschmackssache ist – kommt dann noch dazu.
Außen hui, Bedienung pfui?
Die tatsächliche Umsetzung vieler Flat Designs zeigt leider, dass die Vorteile häufig mit Nachteilen in der Benutzbarkeit erkauft werden. Dabei gleichen sich manche Vor- und Nachteile – vereinfacht gesagt – quasi aus: Es ist wenig erstrebenswert, die kognitive Last zum Erfassen der Inhalte zu verringern, wenn gleichzeitig mehr kognitive Ressourcen benötigt werden, um interaktive von nicht interaktiven Elementen zu unterscheiden. Ein möglicher Fehler ist es, die reduzierten Schaltflächen ohne Tiefenwirkung in Form und Farbe genauso zu gestalten, wie rein dekorative Elemente. Ein Beispiel dafür findet man auf der Startseite von geckoboard.com (siehe Abb. 1).
Doch selbst die Elemente, die zum Beispiel durch vertraute Symbolik leichter als klickbar wahrgenommen werden können, sind vor aktuellen Gestaltungstrends nicht sicher: Eine Vielzahl moderner Web-Anwendungen setzt auf hellgraue Symbole – mal auf dunkelgrauem, mal auf weißem Hintergrund (siehe als Beispiel feedly.com in Abb. 3). Ich will nicht behaupten, dass das Deaktivieren von Funktionen zu den Best Practices gehört. Dennoch stellen deaktivierte Menüpunkte und Symbole ein weit verbreitetes und über Jahre erlerntes Konzept in Benutzungsoberflächen dar. Wie kann man also auf die Idee kommen, zentrale Elemente zur Bedienung so zu gestalten, dass sie deaktiviert aussehen?
Richtig Reduzieren bedeutet, die verbleibenden Elemente besonders sorgfältig zu gestalten
Was kann man also tun, um die Nutzer des eigenen Angebots beim Erfassen und Verstehen der Oberfläche zu unterstützen? Zunächst einmal lassen sich viele Probleme durch sorgfältige Auswahl von Schrift, Formen, Farben und Anordnung vermeiden.
Auf die bedeutende Rolle der Typografie im Flat Design wird in zahlreichen Artikeln hingewiesen. Schade, dass die Gestalter vieler Seiten dies scheinbar eher als Einladung verstehen, möglichst viele, unterschiedliche Stile zu integrieren ohne auf eine konsistente Semantik zu achten. Wie man es besser machen kann, zeigt Plover. Obwohl es im oberen Bereich der Startseite drei unterschiedliche Ausgestaltungen interaktiver Elemente gibt, teilen sich alle eine Eigenschaft: Sie verwenden ausschließlich Großbuchstaben. Zumindest innerhalb einer Seite kann so der Einsatz von Typografie zur besseren Unterscheidung zwischen Inhalten, dekorativen Elementen und interaktiven Elementen helfen.
Ein Weniger an Flach für ein Mehr an Benutzbarkeit
Es sollte allerdings auch die Frage gestellt werden, ob das eigene Design denn unbedingt restlos flach sein muss, oder ob auch ein fast flaches Design die eigenen Ansprüche an die visuelle Ästhetik erfüllen kann. In einem sehr lesenswerten Artikel beschreibt Felix Winkelnkemper einige grundlegende Eigenschaften der menschlichen Wahrnehmung von Objekten und ihrer Anordnung zueinander im Raum. So werden beispielsweise hellere Elemente auf einem dunkleren Hintergrund als Vordergrundobjekte wahrgenommen. Auch einen leichten Schlagschatten auf den unter einem Objekt liegenden Bereich interpretiert das menschliche Hirn intuitiv als Höhenunterschied. Aus diesen Eigenschaften lassen sich visuelle Hinweise ableiten, die – richtig eingesetzt – beim Verständnis von Benutzungsoberflächen äußerst hilfreich sind.
Neue Erkenntnisse sind das eigentlich nicht – es gibt einen Grund, warum zum Beispiel Schaltflächen über zwanzig Jahre zumindest ein bisschen wie ein dreidimensionaler Knopf aussahen. Allerdings: Das Wissen über die menschliche Wahrnehmung wieder in Erinnerung zu rufen scheint heute absolut notwendig zu sein. Glücklicherweise gibt es Designer, die es verstehen, dieses Wissen mit der modernen und klaren Ästhetik des Flat Designs zu vereinen. Sie bieten durch dezenten Einsatz von Gradienten oder Schlagschatten wertvolle visuelle Hinweise auf interaktive Elemente.
Die Gestaltung vieler Anwendungen von Google folgt diesem Almost Flat Design-Stil. So lassen sich beispielsweise in Google Mail Schaltflächen durch den dezenten Einsatz von Gradienten besser erkennen (siehe Abb. 8), in Google Maps werden Bedienelemente von der Karte durch einen leichten Schatten getrennt (siehe Abb. 9) – aus unerfindlichen Gründen gilt dies nicht für die Schaltfläche zum Anmelden.
Fazit: Auf die Details kommt es an!
Die zu Beginn dieses Artikels angeführten Motivationen für einen reduzierten Design-Stil sind zeitgemäß und verdienen Beachtung. Es steckt viel Gutes im Flat Design. Alte Zöpfe sollten in vielen Fällen hin und wieder abgeschnitten werden – Design lebt und das ist gut so. Aspekte der Benutzbarkeit sollten jedoch keinesfalls leichtfertig einem puristischen Design untergeordnet werden. Es erfordert Erfahrung und Fingerspitzengefühl, mit subtilen visuellen Hinweisen elementare Eigenschaften menschlicher Wahrnehmung anzusprechen.
Des Weiteren entscheidet die Erwartungshaltung der eigenen Zielgruppe maßgeblich darüber, welche Oberfläche intuitiv verstanden wird. Nicht zuletzt gibt der eigene Brand häufig wichtige Rahmenbedingungen für die Gestaltung vor. Ob also Flat Design das Richtige für ihre nächste Website oder Anwendung ist und welche Gestaltungsdetails dabei besonders wichtig sind ist eine sehr individuelle Frage. Experten-Reviews und Studien mit Teilnehmer aus der Zielgruppe können bei ihrer Beantwortung äußerst hilfreich sein.
Wie stehen Sie zu Flat Design? Hatten Sie selbst schon frustrierende Nutzungserlebnisse oder steht für Sie die moderne Ästhetik im Vordergrund? Ich freue mich über Ihre Kommentare!
Hallo,
toller Artikel, sehr gut geschrieben, vielen Dank 🙂
Apropos: http://www.flatvsrealism.com/ hat gestern einen Webby Award gewonnen. 😉
Sehr guter Artikel! Herzlichen Dank für die umfangreiche Darstellung und die mutige Meinung zum Hype „Flat Design“! Ich hatte manchmal den Eindruck, dass ich mit meiner Skepsis zum Full-Flat-Design alleine bin …
Vielen Dank für die freundlichen Worte! 🙂
Pingback: Lesenswert: Mai 2014 | produktbezogen.de
Pingback: Lesenswert: Die besten Links des Jahres 2014 - produktbezogen.de
Wirklich guter und kritischer Artikel zum Thema Flat Design – und das schon im Jahr 2014. Schade, dass manche Webdesigner wie hirnlose Schafe jedem Trend blind folgen. Auch ich habe mich zufällig mit dem Thema beschäftigt und habe ähnliche Kritikpunkte am Flat Design erwähnt:
https://kopfundstift.de/flat-design-webdesign-trends-unter-der-lupe/