Vorheriger Artikel Nächster Artikel

… und die Welt ward flach! – Ein kritischer Blick auf den Flat-Design-Trend

Ist wirklich die Lösung so vieler Probleme – oder bringt es eher neue mit sich? Unser Gastautor Felix Winkelnkemper wirft einen kritischen Blick auf den Design-Trend und zeigt auf, welche Versprechen er einlösen kann und welche nicht.

… und die Welt ward flach! – Ein kritischer Blick auf den Flat-Design-Trend
Bildquelle: http://designmodo.com/flat-design-principles/

Flat Design ist im Trend: Endlich sind sie weg die überkandidelten Schnörkel in den Nutzeroberflächen, all die Zierrahmen und Abrundungen. Ausgedient haben auch die Papier- und Ledertexturen, die Glas-Buttons und virtuellen Eselsohren. Stattdessen zieht endlich wieder Nüchternheit ein ins User-Interface-Design. Ein Button braucht keinen Schnickschnack mehr, nicht mehr die bis vor kurzem noch allgegenwärtigen abgerundeten Ecken, keinen Farbverlauf, keine Schattenkanten und, Gott bewahre, schon gar keinen Schlagschatten. Im Flat Design tritt an seine Stelle eine rechteckige farbige Fläche mit einem einfach gehaltenen Piktogramm und einem prägnanten Text in einer schönen Schrift.

Klar ausgemacht ist der Feind, gegen den sich das neue Design richtet: der Skeuomorphismus. Ich gebe es offen zu, hätte man mich vor einem Jahr gefragt, was ein solcher Skeuomorphismus sei, hätte ich passen müssen. Mittlerweile ist der sperrige Begriff in aller Designer Munde und wer doch noch zu den offenbar wenigen Ahnungslosen gehört, dem erklärt die Wikipedia den Skeuomorphismus als eine Stilrichtung, „bei der Objekte in ihrer Gestaltung ein anderes Material oder eine Form eines älteren, vertrauten Gegenstandes bis hin zur vollständigen, für den Benutzer verwechselbaren Vollendung nachahmt, ohne dass diese durch ihre Funktion begründet ist“. Als ein Hauptprotagonist dieser Designrichtung wurde Apple ausgemacht und tatsächlich strotzen vor allem die noch aktuellen iPad- und iPhone- Oberflächen vor solchen Nachahmungen. Die Notizanwendung beispielsweise sieht aus, als würde sie aus einzelnen linierten Zetteln bestehen, man sieht oben sogar die Abrisskante, direkt unter einem Ledereinband.

In der Tat sind solche Gestaltungselemente aus ergonomischer Sicht problematisch. Weder Abrisskante, digitales Leder noch die Linierung helfen bei der Nutzung der Notizanwendung, ihr visuelles Ablenkungspotenzial ist jedoch enorm. Flat Design verspricht das Ende all dieser Ablenkungen, das ist erfreulich und in zumindest einem weiteren Bereich kann ich dem neuen Trend fast bedingungslos zustimmen: Mit der Abschaffung der Texturen ist auch das Icon-Design von vielem Ballast befreit worden. Hier waren über Jahre komplexeste, unruhige und teilweise nur schwer unterscheidbare Piktogramme im Einsatz. In den Ergonomie-Lehrveranstaltungen an der Universität Paderborn propagieren wir schon länger eine einfachere Gestaltung und jetzt, mit dem Flat Design, sehen wir zunehmend einfache und dennoch gut unterscheidbare, wiedererkennbare Piktogramme. Die Betrachtung des neuen Designs lässt somit hoffen.

Ist Flat Design wirklich der Schlüssel zu ergonomischen Oberflächen?

Beeindruckend ist, wie viele Magazine und Blogs sich des Themas angenommen haben. Noch erstaunlicher ist dabei, mit welcher Bestimmtheit das schöne neue Design vertreten wird. Sogar von einer Revolution ist mitunter die Rede. „Form follows function“ ist das, zugegebenermaßen nicht neue, Motto und da passen visuelle Ornamente (gemeint sind funktionslose Verzierungen) einfach nicht mehr ins Bild. Alles soll leicht erkennbar sein, ganz ohne Ablenkungen. Doch ist ein flaches Design wirklich der Schlüssel zu ergonomischen Oberflächen? Um diese Frage beantworten zu können, muss ich ein wenig ausholen und einen kleinen Ausflug in die Wahrnehmung des Menschen unternehmen, denn darum geht es letztlich: Um die Objekte einer grafischen Nutzeroberfläche erkennen zu können, muss der Mensch sie mit Hilfe seiner Augen und seines Gehirns verarbeiten.

Die Wahrnehmung des Menschen ist angepasst an seine Umwelt. Im Laufe der Jahrtausende der Menschheitsgeschichte waren die Menschen klar im Vorteil, deren Wahrnehmung schnell und effektiv war. Es galt, in der Masse der uns umgebenden Reize schnell auf diejenigen Reize reagieren zu können, die für das schiere Überleben oder das Jagen wichtig waren. Anderes konnte dabei ruhig hintenüber fallen. Der Schnelligkeitsgewinn wird durch einen Informationsverlust erkauft. Die menschliche Wahrnehmung ist daher immer selektiv. Zauberer und Illusionskünstler machen sich das oft zu Nutze. Sie lenken die Aufmerksamkeit auf etwas potenziell Wichtiges und können sich dabei sicher sein, dass uns das, was eigentlich passiert, verborgen bleibt. Die Selektivität fängt dabei schon in der Anatomie des Auges an. Es kann nur in einem sehr kleinen Bereich in der Mitte des Wahrnehmungsfeldes überhaupt scharf sehen, drum herum ist alles unscharf und farblos, dafür aber sehr bewegungsempfindlich, was bei einem herannahenden Raubtier so manchen unserer Vorfahren vor seinem Schicksal als Abendessen bewahrt haben dürfte.

So in etwa kann man sich das Gesichtsfeld eines Menschen vorstellen. Nur ein sehr kleiner Teil ist scharf und farbig.
So in etwa kann man sich das Gesichtsfeld eines Menschen vorstellen. Nur ein sehr kleiner Teil ist scharf und farbig. Passt das zum Flat Design?

Nun haben wir, wenn wir in die Landschaft schauen, hoffentlich nicht den Eindruck, das meiste nur unscharf und farblos zu sehen. Das liegt daran, dass unser Gehirn das, was wir gerade nicht, oder nur schemenhaft, sehen, ergänzt. Das Gehirn muss dafür gewissermaßen raten, wie das Bild zu vervollständigen ist. Anhand dieser Hypothese wird dann gegebenenfalls das Auge bewegt, um das Bild zu vervollständigen. Unsere Gehirne sind an die Umwelt, also an Landschaften auf der Erde, so gut angepasst, dass die Hypothesen meist stimmen. Schauen Sie zum Beispiel in einer Landschaft umher, kann davon ausgegangen werden, dass Objekte, sobald sie aus dem Wahrnehmungsfeld geraten, nicht auf einmal verschwinden oder ausgetauscht werden. Tun sie dies, wie in einem Trick, doch, bemerken sie das meist nicht oder brauchen recht lange dafür – unser Gehirn ist für solche Situationen nicht ausgelegt. Solche Defizite in der Anpassungsleistung fallen immer dann auf, wenn der Mensch Wahrnehmungssituationen ausgesetzt ist, die es in der natürlichen Umwelt nicht gibt.

Bei der Erkennung von Objekten in unserer Umwelt ist es wichtig, ein Objekt im Vordergrund von einem anderen im Hintergrund trennen zu können. Unser Wahrnehmungsapparat ist daher in der Erkennung der Übergänge von Vordergrund zu Hintergrund besonders effektiv und kann in üblichen Situationen den Vordergrund vom Hintergrund trennen, ohne die Szenerie komplett mit dem Auge „erwandern“ zu müssen. Lokale Hinweise im relativ kleinen scharfen Sichtfeld reichen dafür aus. Stellen Sie sich einmal vor, Sie hätten eine Fotografie einer Landschaft vor sich. Sie betrachten aber nicht die ganze Fotografie, sondern haben ein weißes Blatt Papier darübergelegt, in das ein relativ kleines Loch geschnitten wurde. Sie sollen nun sagen, ob in dem Ausschnitt, den Sie sehen, ein Objekt ein anderes verdeckt und, falls dies der Fall ist, welches Objekt vorne und welches hinten liegt. Sie werden schnell ein paar Regeln finden, mit Hilfe derer Sie eine gute Hypothese aufstellen können. Das könnte zum Beispiel so aussehen:

  • Eine Vordergrund-Hintergrund-Verdeckung liegt dann vor, wenn Sie im Bildausschnitt eine Kante, also einen abrupten Farb- oder Helligkeitsunterschied ausmachen können.
  • Die ungesättigtere Farbe liegt im Hintergrund, die gesättigtere im Vordergrund, denn wahrscheinlich ist die Sicht nicht ganz klar und entferntere Objekte erscheinen hinter einer Dunstglocke.
  • Wenn es keinen Dunst gibt, liegt die dunklere Farbe im Hintergrund, die hellere im Vordergrund, denn wahrscheinlich haben Sie das Licht hinter sich. Nahe Objekte sind dann stärker beleuchtet als entfernte.
  • Erkennen Sie einen Schlagschatten, liegt die Fläche, auf die der Schatten fällt, im Hintergrund, die andere im Vordergrund, selbst wenn die Hintergrundfläche heller sein sollte als der Vordergrund.
  • Erkennen Sie eine dunkle Objektbegrenzung, handelt es sich offenbar um eine lichtabgewandte Kante eines Objekts. Da Licht üblicherweise von oben kommt, begrenzt die Kante das oben liegende Vordergrundobjekt.
  • Erkennen Sie eine helle Objektbegrenzung, handelt es sich um eine lichtzugewandte Kante; das Vordergrundobjekt liegt also offenbar unten.
  • Erkennen Sie einen Helligkeitsverlauf, können Sie schließen, von welcher Seite das Licht kommt. Die Regeln 5 und 6 können dann auch auf linke und rechte Objektbegrenzungen angewandt werden.

Sieben einfache Regeln

Wenn Sie weiter überlegen, können Sie für übliche Landschaften noch weitere Regeln finden. Ist etwas blau, ist es wahrscheinlich der Himmel und somit der Hintergrund, ist etwas weiß oder grau und befinden Sie sich im oberen Bereich des Bildes, wird es sich ebenfalls um den Himmel, also um den Hintergrund handeln. Auch Regeln zur Erkennung von 3D-Körpern könnten einem einfallen. Doch selbst die sieben einfachen Regeln reichen schon für viele Ausschnitte. Versuchen Sie es mal mit einem Foto. Sie werden sich wundern, wie oft Ihre Hypothese hinterher stimmt.

Kommen wir wieder zurück zu unserem User-Interface. Auch hier gibt es Objekte, die vor anderen liegen. Buttons, als aktive Objekte, müssen sich irgendwie hervorheben; Hinweismeldungen liegen vor dem Anwendungsfenster und verdecken es teilweise; Eingabebereiche in der Anwendung müssen sich vom Hintergrund absetzen. Nun liegt es nahe, den Nutzer beim Erkennen und Trennen dieser Vordergrund- und Hintergrundobjekte visuell zu unterstützen. Da er ja Augen und ein Gehirn hat, die auf die Wahrnehmung unserer Umwelt gut eingestellt sind, können wir ihm auch hier die gleichen lokalen Hinweise zum Erkennen von Vordergrund und Hintergrund geben:

  • Vordergrund vom Hintergrund durch eine klare Kante, also einen hohen Kontrast, voneinander abgrenzen.
  • Die Hintergrundfläche mit einer weniger gesättigten Farbe versehen als den Vordergrund.
  • Den Vordergrund heller gestalten als den Hintergrund.
  • Vordergrundobjekte mit einem leichten Schlagschatten versehen.
  • Unter der Annahme, dass sich die Lichtquelle oben links befindet (sodass der Lichtverlauf unserer Leserichtung entspricht), die Vordergrundobjekte oben und links mit einer hellen Kante, unten und rechts mit einer dunklen Kante abgrenzen.
  • Durch einen leichten Helligkeitsverlauf andeuten, wo sich die Lichtquelle befindet.
Beispiele für die Unterstützung der Tiefenwahrnehmung durch Sättigungsabstufung oben und Helligkeitsabstufung unten, jeweils unterstützt durch Schlagschatten, Schlagschatten und Helligkeitsverlauf, Konturlinien, Konturlinien und Helligkeitsverlauf.
Beispiele für die Unterstützung der Tiefenwahrnehmung durch Sättigungsabstufung oben und Helligkeitsabstufung unten, jeweils unterstützt durch Schlagschatten, Schlagschatten und Helligkeitsverlauf, Konturlinien, Konturlinien und Helligkeitsverlauf.

Natürlich muss und sollte man nicht all diese lokalen Hinweise auf einmal anwenden. Das Resultat sähe dann fast unnatürlich plastisch und aufdringlich aus. Jeder dieser kleinen Tricks in Maßen angewandt hilft den Nutzern einer Oberfläche jedoch, die Elemente abzugrenzen und in ihrer Anordnung zu erkennen. Sie sind keine überflüssigen visuellen Ornamente, nicht einfach nur Ablenkung oder Zierwerk.

Auf dem Bildschirm eine flache Welt zu gestalten nimmt uns eine der natürlichsten Möglichkeiten, Strukturen zu erkennen, denn in der natürlichen Umwelt gibt es kein Flat Design. Jedes Objekt, das über einem anderen liegt, wirft in der Regel einen Schatten oder hebt sich durch Unterschiede in Helligkeit oder Sättigung ab. Und genau diese Informationen nutzt das Auge zur Erschließung des Wahrnehmungsfeldes. Im verständlichen Kampf gegen virtuelle Leder- und Holztexturen und Oberflächen, die aussehen wie Badarmaturen, fallen dem Flat Design also auch sinnvolle Gestaltungsmöglichkeiten zum Opfer, denn ohne helle und dunkle Kanten, Schlagschatten und Helligkeitsverläufe bleibt nur noch die Abstufung von Helligkeit und Sättigung. Manche Gestalter gehen beim Flat Design sogar so weit, auch diese letzte Rettung der Tiefenwahrnehmung abzuschaffen.  Sie kennen sicher Oberflächen, auf denen Sie schon einmal die anklickbaren Elemente gesucht haben. Früher, als die Welt noch nicht flach war, lag das meist daran, dass auch Elemente, die nicht angeklickt, ausgewählt oder betoucht werden konnten, so aussahen, als wäre dies möglich; einfache Textausgaben oder Bilder sahen etwa aus wie Buttons. Microsoft macht uns momentan in Windows 8 das Gegenteil vor: Man öffne die Charms-Bar, also die Leiste auf der rechten Seite und klicke dort auf Einstellungen. Im unteren Bereich, beschriftet mit „PC-Einstellungen ändern“, findet man dann Einstellungen unter anderem für das Netzwerk. Mehr scheint es nicht zu geben. Ich war sehr erleichtert, als ich feststellte, dass ich nicht der einzige blieb, der diesen Text nur für eine Beschriftung und nicht für eine Schaltfläche hielt.

Die Einstellungen-Seitenleiste links im Original, in der Mitte mit Helligkeitsabstufung, rechts mit zusätzlichem Schlagschatten.
Die Einstellungen-Seitenleiste links im Original, in der Mitte mit Helligkeitsabstufung, rechts mit zusätzlichem Schlagschatten.

Was genau gehört eigentlich zum Flat Design?

Aktive Elemente wie Buttons, aber auch die Bereiche einer Oberfläche, in denen Eingaben getätigt werden sollen, müssen sich „abheben“. Das Wort sagt uns bereits, dass das irgendwie mit der Darstellung räumlicher Tiefe zu tun hat. Natürlich braucht man dafür nicht unbedingt Helligkeitsverläufe und Schlagschatten. Hätten die Designer bei Microsoft den Text einfach auf eine rechteckige Fläche mit etwas hellerem Hintergrund gesetzt, wäre schon vieles besser. Doch ist eine solche Farbabstufung noch flaches Design? Schließlich ist es ja eine Technik zur Darstellung von Tiefe. Schwer zu sagen. Meine Bemühungen herauszufinden, was eigentlich genau zum Flat Design gehört und was nicht, scheiterten bisher. Klar ist, dass man keine Texturen haben will, keine Farbverläufe und keine Schatten. Aber gehören teiltransparente Objekte, durch die man also den Hintergrund noch sehen kann, zum Flat Design? Gehört ein Abdunkeln des Hintergrundes dazu, wenn ein Element im Vordergrund stehen soll? Thematisiert werden diese Techniken zur Schaffung von Tiefe und Orientierung nicht, wohl kommen sie aber in Oberflächen vor, die als Beispiele für Flat Design gelten.

Ein Aspekt des Flat Designs, der, zu meinem Erschrecken, allgemein anerkannt zu sein scheint, ist die Farbauswahl. Egal welchen Artikel oder Beitrag über Flat Design man liest, überall findet man die gleiche Aussage: Farben sollen offensiv verwendet werden: 5 bis 8 helle, gesättigte Farben sind in Ordnung. Während für das Weglassen von Oberflächentexturen oder Schlagschatten noch Begründungen gegeben werden (wenn ich, wie erläutert, auch nicht mit all diesen übereinstimme), wird die Farbwahl nicht mehr kritisch reflektiert oder begründet. Einfachheit und „form follows function“ können als Begründung zumindest nicht mehr herhalten. Freundlich und einladend soll die Farbgestaltung sein. Hier verlassen wir den Bereich ergonomischer Überlegungen und sind auf einem anderen Terrain unterwegs. Doch auch aus dem Gesichtspunkt der Ergonomie gibt es zur Farbe etwas zu sagen. Und wieder muss ich den Spielverderber geben!

Farben – und jetzt meine ich nicht Abstufungen der gleichen Farbe, sondern verschiedene Farbtöne – sind ein schwieriges Gestaltungsmittel, vor allem, wenn stark gesättigte Farben verwendet werden. Sie eignen sich hervorragend, um etwas auszuzeichnen, sodass es aus der Menge von Objekten herausfällt. Sie eignen sich also dazu, die Aufmerksamkeit auf etwas zu lenken. Denken Sie nur an eine Anzeigetafel, auf der ein Straßenbahnnetz angezeigt wird und eine nicht funktionierende Weiche rot aufleuchtet. Sie wissen sofort Bescheid: Hier müssen Sie hingucken, hier ist das Problem. Diese Aufmerksamkeitsleitung geschieht vorbewusst, das heißt, noch bevor Sie auch nur die Chance haben, darüber nachzudenken, sorgt Ihr Wahrnehmungssystem dafür, dass Ihre Aufmerksamkeit gelenkt wird. Farbliche Auszeichnungen sind auch auf grafischen Nutzungsoberflächen üblich, zum Beispiel beim Auswählen mehrerer Dateien, die farblich hinterlegt werden und dann auch mehr auffallen als die nicht markierten, was ja auch der gewünschte Effekt ist.

Farbige Kacheln im Windows-8-Store.
Neuer Trend Flat Design: Farbige Kacheln im Windows-8-Store.

Umgekehrt heißt das, dass Sie sich richtig anstrengen müssen, die Aufmerksamkeit wieder auf etwas anderes zu richten, wenn das farbige Element die ganze Zeit „Hierhin gucken!“ ruft. Schauen Sie sich einmal den Windows-8-Store an: Einige der Kacheln ziehen die Aufmerksamkeit auf sich, schreien einen geradezu an, lenken von den anderen Elementen ab. Ein Farbschema mit 8, okay sagen wir 5, leuchtenden Farben führt zwangsläufig zu Problemen: Es ist schwer, die Farben so auszubalancieren, dass sich nicht eine Farbe in den Vordergrund spielt und ablenkt. Gibt es mehrere auffällige Farben im Ensemble, ist der Benutzer hin- und hergerissen, wird von jeder Seite her angeschrien; und was passiert, wenn jetzt doch mal ein Objekt herausgestellt werden soll unter all den anderen, die sich schon gebärden wie ein Pfau? Mit Farbe bewusst Objekte hervorheben geht nur, wenn die übrigen Objekte farblich zurückhaltend, also idealerweise Ton in Ton gestaltet sind. Hinzu kommen noch optische Probleme wie chromatische Aberration. Licht verschiedener Wellenlängen wird im Auge unterschiedlich gebrochen, was dazu führt, dass zum Beispiel gesättigtes Blau anders fokussiert werden muss als gesättigtes Rot. Stehen die Farben in all ihrer Pracht nebeneinander oder aufeinander, ist immer eine von ihnen unscharf, das Auge muss laufend neu fokussieren, Augen- und Kopfschmerzen sind unvermeidlich.

Ist wirklich alles falsch, was das Flat Design verspricht?

Und nun? Ist, außer den schon angesprochenen Icons, wirklich alles falsch, was das Flat Design verspricht? Natürlich nicht. Im Vergleich mit weit überladenen Oberflächen der jüngeren Vergangenheit wirkt Flat Design erfreulich simpel und aufgeräumt, doch während bis dato zu viele unwichtige Elemente plastisch dargestellt werden, wird im Flat Design zu viel eingeebnet und flach. Das haben auch andere schon entdeckt. Wer im Netz nach Flat Design sucht, findet sofort auch den sperrigen Begriff „Almost Flat Design“, bei dem fast alles flach ist, das ein oder andere Element aber doch mit einem Schlagschatten oder einem leichten Helligkeitsverlauf versehen ist. Andere Designer kritisieren dies, denn eine solche Inkonsequenz sorge für Beliebigkeit und lasse eine klare Gestaltungslinie vermissen.

Solcher Kritik sollten wir uns nicht unterwerfen, wenn es darum geht, eine ergonomische Nutzungsoberfläche zu gestalten. Wenn der aktuelle Design-Zeitgeist etwas empfiehlt, was der natürlichen Wahrnehmung widerspricht, dann sollten wir uns trauen, uns einfach darüber hinwegzusetzen. Denn wer „form follows function“ sagt, dann aber auf eine Art und Weise gestaltet, die ein schnelles, sicheres und ermüdungsarmes Erkennen der Formen nicht unterstützt, der sollte vielleicht besser „form abandons function“ sagen. Doch wer braucht so etwas schon? Nehmen wir uns lieber die positiven Aspekte des Flat Designs und ergänzen sie um unsere eigenen Überlegungen, dann bekommen wir ein einfaches, nicht überladenes Design, das an den passenden Stellen aber die nötigen Wahrnehmungsunterstützungen bereitstellt:

  • Verzichten Sie auf aufwändige Texturen wie Leder oder Holz.
  • Verwenden Sie möglichst wenig verschiedene Farbtöne, sondern besser Helligkeits- und Sättigungs-Abstufungen weniger Farbtöne.
  • Verwenden Sie stark gesättigte Farben, vor allem in einem abweichenden Farbton, nur dann, wenn die Aufmerksamkeit gezielt gelenkt werden soll.
  • Gestalten Sie Objekte, die nicht aktivierbar sind (Bilder, Beschriftungen, Ausgaben...) möglichst flach.
  • Heben sie Objekte, die aktivierbar sind (Buttons, Texteingabefelder, ...) durch optische Hinweisreize ab.
  • Setzen Sie Objekte, die vor anderen liegen, optisch ab, zum Beispiel durch Abdunkeln, und damit visuelles Absenken, des Hintergrundes oder durch Verwendung eines Schlagschattens.
  • Setzen Sie Effekte, die Tiefe erzeugen, sparsam ein. Ein Schlagschatten oder Helligkeitsverlauf muss kaum auffallen, um zu wirken.

Über den Autor

Felix WinkelnkemperFelix Winkelnkemper ist wissenschaftlicher Mitarbeiter der Fachgruppe Kontextuelle Informatik am Heinz Nixdorf Institut der Universität Paderborn und arbeitet dort unter anderem an den Themen Wissensorganisation, Lernunterstützung und Software-Ergonomie. Ziel der Ergonomievorlesungen der Fachgruppe ist die Vermittlung von Gestaltungswissen, das von Technikerinnen und Technikern bei der Entwicklung von technischen Systemen produktiv umgesetzt werden kann.

Weiterführende Links

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
13 Antworten
  1. von Tom am 05.07.2013 (12:55 Uhr)

    Sehr guter Artikel! Es ist schön, einmal wissenschaftliche Argumente gegen diesen Modetrend zu erfahren.

    Antworten Teilen
  2. von Kovah am 05.07.2013 (14:10 Uhr)

    Tom Kirschner hat es glaube bereits sehr treffend erfasst: Flat-Design ist lediglich einer von vielen Lösungsmöglichkeiten. Wenn Flat Design für das Projekt passender ist als Skeumorphismus, 3D Effekte und Co, setzt man es ein.

    Was ich aber absolut gruselig finde ist das bunte Wirr Warr, dass von Windows fabriziert wird. Das hat meiner Meinung nach nichts mehr mit Benutzerfreundlichkeit zu tun, wenn dem Benutzer nach 5 Minuten die Augen von den grellen bunten Farben weh tun...

    Antworten Teilen
  3. von Hendrik am 06.07.2013 (10:10 Uhr)

    Schöne Zusammenfassung und treffende Interpretation.

    Was man vielleicht noch neben der schweren "Fokusführung" bei den (vielen) stark gesättigten Farben hinzufügen könnte ist, dass es bei heterogener Hardware (=> z.B. unterschiedliche Monitore bei PCs) zu Frustation führen kann. Kaum ein Enduser hat einen korrekt kalibrierten Monitor, sprich die Farben sehen überall anders aus. Damit das gewünschte Endresultat zu stande kommt, folgt für den Designer jede Menge finetuning. Sobald man für ein spezielles Device (z.B. iPhone) designed ist das Problem nicht gegeben.

    Was man "Pro"-Flat Design noch anführen könnte wären:
    - schlankerer Code (sowohl HTML als auch CSS)
    - schnellere Renderzeiten (weil u.a. weniger Bilder benötigt werden)
    - verringerte Hostingkosten (ok ist heutzutage whrs kein Thema mehr)
    - Responsive Design lässt sich einfacher umsetzen
    - letztlich auch positive Nebeneffekte beim SEO.

    Unterm Strich also ein guter Trend, man muss aber unbedingt die Usability im Auge behalten und dafür sollte man sich definitiv die im Artikel genannten Punkte genau zu Herzen nehmen.

    Antworten Teilen
  4. von Phillip Richter am 06.07.2013 (12:12 Uhr)

    Es ist wie so oft im Leben, die Mischung machts. Danke für den schönen Artikel, der das Thema angenehm unaufgeregt analysiert!

    Antworten Teilen
  5. von Theo am 06.07.2013 (18:21 Uhr)

    Sehr guter Artikel Die goldene Mitte zum jeweiligen Projekt zu finden und nicht den Design Trends zu folgen ist wichtig.

    Antworten Teilen
  6. von Mirco Kirsch am 07.07.2013 (11:39 Uhr)

    Vielen Dank für den gelungenen Artikel.
    Auch ich finde es interessant und lobenswert Design nicht nur aus einer Geschmacksecke heraus zu beurteilen, sondern belegbare wissenschaftliche Erkenntnisse für eine Beurteilung heranzuziehen.

    Ich persönlich bin weder ein Freund noch Feind des sogenannten Flat-Design und sehe sowohl die Vorteile als auch die Nachteile. Mit meinem Kommentar möchte ich keinerlei Partei für oder gegen das Flat-Design ergreifen.
    Es gibt jedoch eine grundsätzliche positive Entwicklung die das Flat-Design herbeiführt. Viele designtheoretische Abhandlungen befassen sich mit dem Unterschied von Design und Styling. Einige führen diese zwei Positionen auch als Unterschiede beim amerikanischen und deutschen Produktdesign der 50er und 60er Jahre an.
    Neben den technischen Vorteilen, die in anderen Kommentaren bereits erwähnt wurden, reduziert das Flat-Design das Webdesign wieder auf seine wesentlichen Elemente und "verachtet" das "Effekt-Design". Das ist ein deutlicher Qualitätsgewinn für Design. Es könnte dazu führen das Design nicht mehr durch seine Effekte als gelungen wahrgenommen wird, sondern durch eine reine "Designleistung".
    Jede Designrichtung verfällt leider irgendwann in ein Extrem und wird unweigerlich zum Selbtszweck. Dann riskiert Design seine Überzeugung und wird all zu oft uninteressant für einen alltäglichen Nutzen. Hier berührt Design in Teilen die Kunst und ich finde den Weg auch durchaus nützlich und sinnvoll um Grenzen auszureizen. Doch Webseiten sind ja in den meisten Fällen keine Kunstprojekte.

    Eine wesentlichen Antrieb erhält Design von seiner technischen Machbarkeit. Das betrifft alle Design Disziplinen. In den Anfängen des Webdesigns gab es nur eckige Boxen und blaue Links. Vor rund 15 Jahren haben wir Designer die Entwickler zur Weißglut gebracht als wir Webseiten mit runden Ecken und Schlagschatten haben wollten. Weil es "unsauberes" und aufwendiges Programmieren bedeutete. Inzwischen ist es mit CSS technisch unproblematisch und zu einem Standard geworden und für manche Designer kaum noch zu ertragen. Irgendwann muss halt was neues her.


    Am Ende möchte ich einen kurzen Satz bemühen der meine Position deutlicher beschreibt und auch die Praxis wieder in die Diskussion zurückholt.

    Das Gegenteil von gutem Design ist nicht schlechtes Design sondern willkürliches Design. Um die Aussage etwas passender zu machen, kann man willkürlich vielleicht durch dogmatisch ersetzen. Design wird so einseitig und unbeweglich weil man ohne den Nutzen zu hinterfragen auf gelernte Rezepte zurückgreift.
    Es ist also wichtig, wie bereits im Artikel gut beschrieben wurde, zu erkennen ob es einen Nutzen gibt.
    Die Aufgabe von Design ist jedoch nicht nur eine gute Benutzbarkeit zu ermöglichen und modern zu wirken sondern soll auch Emotionen wecken.
    In der Praxis bedeutet das, wenn ein Kunde sich durch ein effektreiches Design besser repräsentiert fühlt und seine Kunden das mit ihm teilen, dann bekommt er ein entsprechendes Design. Grundsätzlich Lederoptiken abzulehnen halte ich somit auch für keine gute Lösung, wenn ich damit Emotionen beim Betrachter wecken kann die gewollt sind.

    Ich finde den Satz von Tom Kirschner eigentlich sehr gelungen und ist deutlich kürzer als mein Kommentar.

    Antworten Teilen
  7. von Chio am 07.07.2013 (23:48 Uhr)

    "Die Kritiker der Elche waren früher selber welche"

    Wer hatte denn die diversen Leder-Bändchen an jedem (schattenverstärkten) Eck seiner Website? Es waren die, die das Apple Design für das höchste Leitbild aller Zeiten hielten und die Windows-Kacheln für flach und potthässlich. OK, Kacheln werdens wohl nicht, aber dass Apple bald auf "flat" macht, weiß man seit einem Jahr. Im Gleichschritt, Marsch.

    Der Artikel ist SEHR gut und bringt auf den den Punkt, worum es geht: Usability, nicht Kunst. Für Kunst sind Künstler zuständig, und die werden ihre Käufer finden. Für Usability sind Designer zuständig, und die sollten MITdenken.

    Antworten Teilen
  8. von mediajunky am 08.07.2013 (11:58 Uhr)

    Vielen Dank für den Artikel, der mir aus der Seele spricht! Wie viele Stimmen schon angemerkt haben: Ja, eine Reduktion auf die wesentlichen Elemente ist wichtig. Wenn unter einem neuen Designtrend aber die Usability leidet, geht man wieder ein Stückchen zu weit! Ich glaube, der sehr pure Flat-Ansatz wird sich nur kurz halten – eine Anreicherung mit den im Artikel genannten Elementen wird wieder kommen.

    Antworten Teilen
  9. von BastianBBux am 09.07.2013 (14:44 Uhr)

    endlich mal kritik! danke! ...
    some cents of mine:
    Ich finde ja z.b. bestimmte schlagschatten ziemlich praktisch, beispielsweise in formularen für das element mit dem focus. grad auf touchpanels (e.g. in der prallen sonne) oder umfangreichen formularen imho eine totale erleichterung um zu sehen wo man grad ist. oder auch leichte glass-effekte bei buttons die sich beim drüberfahren umkehren. das sind imho gute 'eye-catcher' im wörtlichen sinn.
    das problem mit all diesen techniken ist halt, wenn es dann sehr einfach wird, dass halbwegs auf allen browsern anzuwenden, dann macht's jeder depp, und meist zu viel. und dann wird man überflutet. wenn man z.b. auf einer webseite jede überschrift und jeden menüpunkt mit einem schlagschatten versieht dann wird das einfach too much, überhaupt wenn auch noch die browser-eigenen elemente mit schatten und effekten überladen sind, und das auge sieht sich schnell satt und ermüdet.
    wenn es nur der slogan im emotionsbild ist, dann ist's ok.
    ich verstehe ausserdem den begriff 'flat design' eher in richtung schlankes design. das heisst nicht automatisch, dass man auf jeden noch so kleinen effekt, rahmen oder runde ecken verzichten muss. die gaaanz runden ecken (border-radius > 4px) haben mir sowieso nie gefallen.
    und diese total über-designten notzizettel-apps die wie post-its etc .. daherkommen, sind sowieso nur überladen und unpraktisch, da lob ich mir tomboy, das kommt dbzgl. ganz unprätentiös daher.

    alles in allem, könnte man es mit paracelsus sagen: dosis sola facit venenum!

    Antworten Teilen
  10. von sarah_flieger am 20.11.2013 (14:50 Uhr)

    Bedienbarkeit sollte oberstes Gebot sein und da finde ich ist das Flat Design ein Schritt in die richtige Richtung

    Antworten Teilen
  11. von ics_agentur am 08.05.2014 (14:16 Uhr)

    Flat Design hat zwar seine Ruhe und Klarheit, jedoch macht es mich als User "rasend" nicht den gesuchten Menüpunkt, gesucht informationen nicht sofort zu finden!

    Antworten Teilen
  12. von ics_agentur am 08.05.2014 (14:17 Uhr)

    Flat Design hat zwar seine Ruhe und Klarheit, jedoch macht es mich als User "rasend" den gesuchten Menüpunkt, die gesuchte informationen nicht sofort zu finden!

    Antworten Teilen
  13. von ics_agentur am 08.05.2014 (14:18 Uhr)

    Flat Design hat zwar seine Ruhe und Klarheit, jedoch macht es mich als User "rasend" den gesuchten Menüpunkt, gesuchten informationen, nicht sofort zu finden! ...Grammar ;(

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Flat Design
iOS: Umfangreiche Übersicht liefert alle wichtigen Informationen zum App-Design
iOS: Umfangreiche Übersicht liefert alle wichtigen Informationen zum App-Design

Eine umfangreiche Übersicht zeigt euch, wie ihr iOS-Apps nach den offiziellen Vorgaben von Apple gestaltet. Von den verschiedenen Display-Größen bis zu häufig verwendeten UI-Elementen deckt der … » weiterlesen

Die 7 goldenen Regeln des UI-Designs
Die 7 goldenen Regeln des UI-Designs

Erik Kennedy ist UX-Designer – doch er hat schnell gemerkt, dass das beste User-Experience-Design ohne eine gute Bedienoberfläche wertlos ist. Also hat er sich daran gemacht, die goldenen Regeln … » weiterlesen

OS X Yosemite: Kostenloses UI-Kit für eure nächste Mac-App
OS X Yosemite: Kostenloses UI-Kit für eure nächste Mac-App

Mit Yosemite hat Apple den von iOS bekannten Flat-Design-Look auf sein Desktop-Betriebssystem übertragen. Ein UI-Kit für Sketch soll Designern jetzt dabei helfen, passende Mac-Apps zu gestalten. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen