Probleme des Flat Design

14. Juni 2018

Flat Design ist ein beliebter Design-Stil bei Webseiten und Apps: seit 2012 wird es immer hĂ€ufiger genutzt. Das Hauptproblem bei seiner Verwendung ist jedoch die Unterscheidung zwischen klickbaren und nicht klickbaren Elementen, was hĂ€ufig zu Defiziten in der Usablilty fĂŒhrt.

Minimalistisches Flat-Design

Das Flat-Design zeichnet sich durch seinen Minimalismus aus. Zuvor waren Webseiten hĂ€ufig durch 3D-Buttons, wie die klassischen grauen Klickfelder, die mit Schatten unterlegt wurden, ausgestattet. Das Flat Design ist beliebt, da es leichter und Ă€sthetischer wirkt. In vielen heutigen FĂ€llen spricht man bereits von Flat 2.0, da der Stil noch etwas verfeinert wurde und durch leichte Schatten, Hervorhebungen oder Tiefenwirkung neue Möglichkeiten bietet. Nichtsdestotrotz leidet unter dem Flat Design hĂ€ufig vor allem die Usability einer Website, wenn das Design unĂŒberlegt eingesetzt wird.

Das Flat Design bietet sich fĂŒr Webseiten an, die wenig Inhalte bzw. Seiten zeigen. Das minimalistische Design droht andernfalls in den Inhalten unter zu gehen. Entsprechend sollte auch die Navigation minimalistisch und einfach handhabbar sein. Je weniger Interaktion eine Seite verlangt, desto nutzerfreundlicher ist das Flat Design.

Flat Design hat weiterhin Vorteile fĂŒr Webseiten, die eine hohe Besucherfrequenz aufweisen und vor allem von wiederkehrenden Besuchern hĂ€ufig aufgerufen werden. Denn durch das minimalistische und einfache Design, finden diese sich gut zurecht und wissen schnell, wie sie an ihre Informationen gelangen. Zudem profitiert das Flat Design von den mit ihm vertrauten Publikum, insbesondere dann, wenn der Nutzer auch andere Webseiten im Flat Design regelmĂ€ĂŸig nutzt. Nutzern fĂ€llt der Umgang mit Seiten im Flat Design leichter, je hĂ€ufiger sie damit auf unterschiedlichen Seiten in Kontakt kommen.

Flat Designs richtig gemacht

Das Wichtigste bei der Verwendung eines Flat Designs ist die visuelle Unterscheidung von klickbaren und nicht klickbaren Interaktionselementen – was sich positiv im Sinne der SelbstbeschreibungsfĂ€higkeit gemĂ€ĂŸ DIN EN ISO 9241-110 auszahlt. Die Interaktionselemente sind dabei so zu gestalten, dass sie in Text, Farbe und Form erkennbar und eindeutig unterscheidbar sind und dies konsistent auf der gesamten Webseite. Das Layout sollte dabei möglichst erwartungskonform im Sinne der DIN EN ISO 9241-110 sein: sich bei der Gestaltung (bezogen auf den Aufbau und der Navigation) also an der bekannten Nutzerwelt orientieren, da ihnen so das VerstĂ€ndnis auf der Webseite erleichtert wird.

AngewĂ€hlte Navigationselemente sollten sich abheben, sodass der Nutzer erkennt, wo er sich befindet. Aber auch im Allgemeinen ist eine kontrastreiche Struktur der Übersichtlichkeit dienlich: das Flat Design sollte also nicht ganz „flat“ gestaltet sein, sondern kann durch leichte Schatten oder Höhen- bzw. Tiefendarstellungen (Flat 2.0) weiter aufgelockert werden.

Flat Designs an einem Beispiel

In Abbildung 1 ist die Google-Startseite im Flat Design zu sehen. Mittig erkennt man den Unternehmensschriftzug und das Suchfeld, unterlegt mit einem leichten Schatten. Darunter befinden sich die grau gefĂ€rbten Buttons, ĂŒber die die Suche gestartet werden kann. Die Seite ist sehr ĂŒbersichtlich gestaltet, da neben dem Suchbereich nur wenige weitere Elemente auf der Seite zu finden sind.


Abbildung 1: Google-Startseite im Flat Design

Oben rechts befindet sich beispielsweise der Anmeldebutton, ĂŒber den der Besucher sich in sein Google-Konto einloggen kann. Links daneben lĂ€sst sich eine Suchkategorie (z.B. Bilder, Videos) auswĂ€hlen. Im unteren Bereich sind Informationen ĂŒber Google und die Nutzungsbedinungen verlinkt, außerdem die Möglichkeit die Sucheinstellungen zu prĂŒfen und anzupassen. Der untere Rand ist mit einem grauen Balken versehen, ĂŒber den die Aktionen angeklickt werden können. Alle Buttons verĂ€ndern sich, wenn sie mit der Maus ĂŒberfahren werden, so dass dem Nutzer angezeigt wird, dass diese klickbar sind.

Abweichend davon verĂ€ndert der Button „Anmelden“ sein Aussehen nicht, was beim Nutzer aufgrund der Inkonsistenz Irritationen (im Sinne der ErwartungskonformitĂ€t nach DIN EN ISO 9241-110) hervorrufen kann. Der Schriftzug „Deutschland“ in der unteren linken Ecke birgt das selbe Risiko, da dieser bis auf eine etwas grĂ¶ĂŸere Schriftart identisch mit den anderen Aktionsfeldern am unteren Rand ist, jedoch abweichend davon nicht klickbar ist. Diese Nutzungsdefizite in der Anwendung fallen vermutlich kaum ins Gewicht, da sich die meisten Nutzer in der Regel auf die Suche konzentrieren werden und oftmals auch schon angemeldet sind. Dennoch zeigt das Beispiel, dass hier NutzungsmĂ€ngel in der Webseitengestaltung angelegt sind.

Quelle: „Flat-Design Best Practices“, https://www.nngroup.com/articles/flat-design-best-practices/

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