Flat Design: Seine Ursprünge, seine Probleme und warum Flat 2.0 für Nutzer besser ist

by Kate Meyer (deutsche Übersetzung) - 27.09.2015

Das Flat-Design ist ein beliebter Designstil, der durch das Fehlen von auffälligen oder dreidimensionalen visuellen Effekten in den grafischen Elementen einer Webseite definiert wird. Viele Designer betrachten es als Ableger des minimalistischen Webdesigns.

Dreidimensionale Effekte, Skeuomorphismus und Realismus

Um ein Flat Design zu definieren, müssen wir bestimmen, was Flat Design nicht ist. Das Flat Design wird häufig als reaktionäre Bewegung gegen dreidimensionale, skeuomorphe und realistische Designstile interpretiert. Eine komplett flache Nutzeroberfläche enthält keine dieser Stile. 

Dreidimensionale Effekte

Dreidimensionale Effekte geben einer Nutzeroberfläche die Illusion der Tiefe, was Nutzern helfen kann, die visuelle Hierarchie zu interpretieren und zu verstehen, welche Elemente interaktiv sind.

• Hervorgehobene Elemente sehen aus, als ob sie gedrückt (bzw. mit der Maus angeklickt) werden können. Diese Technik wird häufig als Signifier für digitale Schaltflächen verwendet.
• Elemente, die versenkt oder hohl aussehen, kommunizieren, dass sie ausgefüllt werden können. Diese Technik wird häufig als Signifier für Eingabefelder, wie Suchleisten, verwendet.

Seit den frühen Tagen der grafischen Nutzeroberflächen enthalten Bildschirme pseudo-dreidimensionale Effekte (Schatten, Verläufe, Hervorhebungen), damit Nutzer die verfügbaren Aktionen auf einen Blick erfassen können. Der Pseudo-3D-Effekt dieser frühen grafischen Nutzeroberflächen war allerdings aggressiv, übertrieben und optisch störend.

_{Dieses Windows 95 Dialogfeld enthält starke Schatten und Hervorhebungen, um 3D-Effekte zu erzielen. Beachten Sie, wie die Buttons hervortreten und die Eingabefelder versenkt zu sein scheinen. Es ist auch klar, welcher der drei Karteireiter vor den anderen beiden liegt. Starke Schatten können eine Nutzeroberfläche aber schnell unattraktiv aussehen lassen.}

Skeuomorphismus

In digitalen Designs ist ein skeuomorphes Design ein Objekt, das über unnötige, dekorative Designbestandteile verfügt, die Präzedenzfälle in der echten Welt imitieren. Skeuomorphe Designs sollen Nutzern dabei helfen, eine neue Nutzeroberfläche kennenzulernen, indem sie vorhandenes Wissen über diese Präzedenzfälle anwenden.

_{In früheren Modellen des Kindle Fire Tablet von Amazon, verwendete das Android-basierte Betriebssystem ein skeuomorphes Bücherregal-Design mit dreidimensionalen „Ablagen“ und Holzstruktur. Die Bücherregal-Metapher sollte Nutzern dabei helfen, vorhandenes Wissen über Bücherregale (als Ort, um physische Medien aufzubewahren und zu sortieren) in die digitale Umgebung zu übertragen. Die „Ablagen“ und die Holzstruktur sind für die Funktion des Systems irrelevant, dienen aber dazu, die Metapher zu unterstreichen. Amazon entfernte das skeuomorphe Bücherregal-Design später aus der Nutzeroberfläche.}

Realismus

Realismus ist ein Designstil, der physische Objekte oder Strukturen aus ästhetischen Gründen imitiert. Skeuomorphismus wird häufig mit Realismus verwechselt. Im Webdesign treten die beiden Stile normalerweise gemeinsam auf. Der Hauptunterschied besteht darin, dass der Realismus ein visueller Stil ist, der Designelemente und Strukturen verwendet, die die physische Welt aus ästhetischen Gründen imitieren, während der Skeuomorphismus eine Metapher unterstützt, die dem Nutzer dabei hilft, die Nutzeroberfläche zu verstehen.

_{Wie frühe Kindle Fire Tablets verwendet die Webseite der Lebensmittelkette Sprouts dreidimensionale Holzstrukturen. Der Realismus in diesem Design hat allerdings nur ästhetische Zwecke. Es unterstützt keine Metapher, die Nutzern erklären, wie die Nutzeroberfläche funktioniert, und imitiert keinen Präzedenzfall in der echten Welt.}

Die Ursprünge des Flat Designs

Die Veröffentlichung der Metro-Designsprache von Microsoft und von Windows 8 im Jahr 2011 machte das Flat Design ganz besonders beliebt. In der Designdokumentation von Microsoft wird der neue Stil als „authentisch digital“ bezeichnet: ein Satz, der die Faszination vieler Designer mit dem Flat Design genau beschreibt. Im Gegensatz zum skeuomorphen Design bietet das Flat Design Designern die Möglichkeit, das digitale Medium zu erkunden, ohne zu versuchen, das Erscheinungsbild der physischen Welt zu kopieren.

Die flachere Startseite von Apple ist eine nützliche Benchmark für den Anstieg der Popularität des Trends. Skeuomorphismus und Realismus sind seit langem Markenzeichen des Designs von Apple und seine Startseite widerstand dem Flat-Trend ungefähr bis zum Jahr 2013.

_{Die Startseite von Apple im Jahr 2007 (über WayBack Machine). Die Navigationsleiste enthält glänzende, dreidimensionale Karteireiter.}

_{Die Startseite von Apple im Jahr 2012 (über WayBack Machine). Die Karteireiter-Metapher ist verschwunden, die Navigationsleiste ist aber immer noch glänzend und abgerundet (ein Beispiel für Realismus statt Skeuomorphismus). Die neue Suchleiste verfügt über integrierte Schatten, um sie hohl wirken zu lassen (ein eleganterer optischer Effekt als die Windows-Eingabefelder 17 Jahre zuvor - im Prinzip aber dieselbe Idee). Die in der unteren rechten Ecke angezeigten Symbole sind so glänzend, dass der Betrachter fast nicht sehen kann, worum es sich handelt. Die Buttons scheinen zu strahlen, anstatt hervorgehoben zu erscheinen.}

_{Die Startseite von Apple im Jahr 2015. Die gesamte Navigationsleiste, inklusive Logo, ist komplett flach – keine erkennbaren Schatten, Strukturen oder Hervorhebungen. Es gibt keine 3D, realistischen oder skeuomorphen Effekte mehr. Nutzer erkennen basierend auf Gewohnheit, ob Navigationsoptionen anklickbar sind: ein stark gefärbter Streifen im oberen Bereich der Webseite ist normalerweise die Navigationsleiste (außer es handelt sich um eine Werbeanzeige – diese Leiste ist allerdings zu schmal, um der Banner-Blindheit zum Opfer zu fallen).}

Usability-Probleme des Flat Designs

Seit dem Aufkommen des Flat Designs im Jahr 2011 ist die Nielsen Norman Group ein lautstarker Kritiker der entstehenden Usability-Probleme. Unser wichtiges Argument gegen das Flat Design ist, dass es häufig die Bedürfnisse des Nutzers zu Gunsten einer trendigen Ästhetik opfert.

Seit Jahren kennen Nutzer die traditionellen Signifiers für Klickbarkeit, wie blaue, unterstrichene Links und 3D-Effekte von Buttons. Da sich Designtrends verändern und Nutzer mit neuen Mustern konfrontiert werden, hat sich auch die Fähigkeit des durchschnittlichen Nutzers, verlinkte Elemente intuitiv zu erkennen, weiterentwickelt. Doch nur weil Nutzer verlinkte Elemente besser erkennen können, bedeutet das nicht, dass Sie gar keine Hinweise benötigen.

Als wir eine 22-ährige Kanadierin (die an einer Studie für unseren bevorstehenden Kurs Designen für Millennials teilnahm) fragten, woher sie wusste, worauf sie auf einer Webseite klicken konnte, gab sie die folgende Antwort:

„Wenn es blau und unterstrichen ist, ist das ein guter anfänglicher Hinweis. Man sieht das ja sogar in Word und so weiter. Doch, es stimmt: wenn es unterstrichen ist, dann hilft das sehr. Wenn es ein Button ist, muss dieser nicht mit Hier klicken beschriftet sein, es reicht aus, wenn er Jetzt kaufen oder Kaufen oder In den Warenkorb heisst.“ 

Dieses Zitat zeigt die Art von Hinweisen, die Menschen verwenden, um Klickbarkeit zu bestimmen:

• Traditionelle, extern konsistente Ankündiger (z.B. blaue, unterstrichene Texte, hervortretende Buttons)
• Etwas, das an einen traditionellen Ankündiger erinnert (z.B. unterstrichene Texte in jeder Farbe, Texte in Kästchen)
• Kontextuelle Hinweise (z.B. Texthinweise, Platzierung im oberen Bereich der Seite)

_{Die Startseite von Trader Joe enthält eine Vielzahl von Klick-Ankündigern. (1) Der blaue, unterstrichene Text View All ist ein traditioneller Ankündiger. (2) Der flache, rote Hintergrund des Finden-Links erinnert an einen Button – auch ohne dreidimensionale oder realistische grafische Effekte. (3) Die schwarzen Links in der Hauptnavigationsleiste kommunizieren ihre Anklickbarkeit nur durch Platzierung und Text. (Beachten Sie aber, dass die vorwiegend flache Seite ein Element des Skeuomorphismus enthält: die Holz-„Ablage“ unter dem vorgestellten Produktkarussell.)}

Falls Ihr Unternehmen zu einer flacheren Ästhetik übergehen möchte, befolgen Sie unsere Richtlinien für das Design von erkennbar anklickbaren Elementen, um sicherzustellen, dass Sie keine Klick-Unsicherheit hervorrufen.

Die Erweiterung des Flat Designs

Vor kurzem begannen Designer damit, sich den Usability-Problemen des Flat Designs zu widmen. Das Resultat ist eine reifere und ausgeglichenere Interpretation des Flat Designs. Designer sind der Meinung, dass sie „authentisch digital“ sein und die einzigartigen Möglichkeiten des Mediums nutzen können, ohne die Usability zu gefährden.

Das wird manchmal als „Semi Flat“, „fast flach“ oder „Flat 2.0.“ bezeichnet. Dieser Designstil ist grossteils flach, verwendet allerdings subtile Schatten, Hervorhebungen und Ebenen, um der Nutzeroberfläche Tiefe zu verleihen.

_{Elemente des Flat Designs mit langen Schatten, wie im Portfolio dieses Designers, wurden ungefähr im Jahr 2013 beliebt. Lange Schatten sind nur ein Beispiel für ein fehlerhaftes Flat 2.0 – die 3D-Effekte sind rein ästhetisch und liefern dem Nutzer keine wichtigen Informationen. Zum Glück ist ihre Beliebtheit zurückgegangen, Symbole mit langen Schatten werden allerdings immer noch in einigen flachen Nutzeroberflächen verwendet.}

Die Material-Designsprache von Google ist ein Beispiel für Flat 2.0 mit den richtigen Prioritäten: sie verwendet konsistente Metaphern und Prinzipen der Physik, um Nutzern zu helfen, Nutzeroberflächen zu verstehen und visuelle Hierarchien zu interpretieren.

_{Die Evernote App für Android ist ein gutes Beispiel für die möglichen Vorteile des Flat 2.0. Obwohl die Nutzeroberfläche zum Großteil flach ist, enthält die App einige subtile Schatten in der Navigationsleiste und einen schwebenden Plus-Button („Add New“). Außerdem verwendet sie die Karten-Metapher, um Inhalte als flache, stapelbare Ebenen in einem 3D-Raum anzuzeigen.} 

Wie bei jedem Designtrend raten wir zu Ausgewogenheit und Mässigung. Treffen Sie keine Designentscheidungen, die die Usability einem Trend opfern. Vergessen Sie nicht, dass Sie – sofern Sie nicht ausschließlich für andere Designer designen – nicht der Nutzer sind. Ihre Präferenzen und Ihre Fähigkeit, Klick-Signifier zu interpretieren, stimmen nicht mit jenen Ihrer Nutzer überein, da Sie wissen, welche Funktion jedes Element in Ihrem eigenen Design hat. 

Frühe Pseudo-3D Nutzeroberflächen und Skeuomorphismus im Stile von Steve Jobs hatten häufig schwere, komplizierte Nutzeroberflächen zur Folge. Diesen Exzess zu reduzieren, tut der Usability gut. Visuelle Unterscheidungsmerkmale zu entfernen und Flat Designs ohne Signifier zu schaffen, ist allerdings ein ebenso negatives Extrem. Flat 2.0 bietet Gelegenheit für Kompromisse und ermöglicht visuelle Unkompliziertheit ohne Signifier opfern zu müssen.

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.