Flat Design: Nicht nur auf die Schönheit kommt es an

25. Februar 2018

Flat Design bringt nicht nur Vorteile, da die Usability der Ă€sthetischen OberflĂ€chengestaltung oft untergeordnet wird. Anhand von fĂŒnf Punkten, lĂ€sst sich am Beispiel der Google-Startseite kurz aufzeigen, wie eine Seite möglichst nutzertauglich gestaltet werden kann.

Einfach im Design doch auch einfach in der Nutzbarkeit

Flat Design wird mittlerweile fĂŒr viele OberflĂ€chen verwendet. Das minimalistische Design sieht durch die klare Struktur modern und authentisch aus. Doch das birgt auch SchwĂ€chen, da bekannte Handlungsoptionen – wie bei der klassischen 3D-Darstellung von Interaktionselementem – nicht mehr deutlich genug durch Schriftart, Formen oder Farben erkennbar sind.

Wichtig ist, dass die verwendeten Darstellungen konsistent (im Sinne der ErwartungskonformtĂ€t nach DIN EN ISO 9241-110) sind und man weiß, was durch Klicken oder BerĂŒhren eines Feldes passiert. ZUdem sollte die Struktur im Allgemeinen Ă€hnlich zu anderen Seiten sein. Denn in Anlehnung an Jakob’s Law of User Experience verbringt der Nutzer mehr Zeit auf anderen Webseiten und eine Ă€hnliche Struktur erleichtert ihm die Orientierung und Navigation. Neben einer erwartungskonformen Darstellung und Struktur, macht die Verwendung von klaren Linien und Kontrasten die Nutzung des Flat Designs komfortabler. Buttons und Felder fallen so mehr auf. Leichte Schatten können die Seite auflockern.

Google Startseite als Beispiel

FrĂŒher nutzte Google ebenfalls eine 3D-Darstellung. Abbildung 1 zeigt die Startseite aus dem Jahr 1997 (links) und 2007 (rechts). Bis heute hat sich nicht nur das Design zum Flat Design verĂ€ndert, sondern auch das User Interface ist minimalistischer geworden.


Abbildung 1: Google Startseite 1997 (links) und 2007 (rechts)

WĂ€hrend hier noch Sucheinstellungen auf der Startseite vorgenommen werden konnten, sind diese bei der aktuellen Version unter „Einstellungen“ in die untere rechte Ecke verschwunden (siehe Abbildung 2). Auf der aktuellen Google-Startseite befindet sich zentral in der Mitte nebem dem Google-Schriftzug eine Suchleiste und zwei Felder, die zum Starten der Suche verwendet werden. Beide Felder sind in Form und Farbe identisch und weisen auf ein Aktionsfeld hin. Auch die Suchleiste hebt sich durch die leichte Schattierung als Eingabefeld und wichtigstes Element der Seite ab.

Typisch ist auch der restliche Aufbau: Oberhalb ist eine MenĂŒleiste, ĂŒber die sich der Nutzer anmelden kann oder aus den Google Apps auswĂ€hlen kann. Unten befindet sich die Fußleiste, in der der Nutzer Unternehmensdaten, Nutzungsbedinungen und weitere Informationen erhalten kann. Unterhalb der Suche befindet sich noch eine Textzeile (neben einem Weihnachtsmann mit Fallschirm) deren Text zum Teil blau unterlegt ist, was dem Nutzer einen Hinweis darauf gibt, dass es sich hier um einen Link handelt.

Abbildung 2: Google Startseite im Flat Design (vom 07.12.2017)

Handlungsoptionen mĂŒssen erkennbar bleiben

Anhand der Google Startseite lassen sich die Empfehlungen der NN GRoup zum Flat Design gut aufzeigen. Leider ist aber nicht ganz klar, warum beispielsweise nicht die gesamte Textzeile oder auch das Bild des Weihnachtsmanns mit Fallschirm verlinkt wurde. Zudem ist eine reine Farbcodierung eines Links zumindest fĂŒr farbenblinde Nutzer problematisch, weil diese den Link voraussichtlich nicht erkennen können, was einen kritischen Usability-Befund im Sinne der SelbstbeschreibungsfĂ€higkeit (gemĂ€ĂŸ DIN EN ISO 9241-110) darstellt.

Quelle: „Making Flat Design Usable“, https://www.nngroup.com/videos/making-flat-design-usable/

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