FIT für Usability

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/