Fehlende Tiefe: Usability-Sünden in Flat Designs erkennen und vermeiden

„Wieso passiert denn nichts, wenn ich hier klicke?“ oder aber „Ach, man kann hier klicken, damit was passiert?!“ – haben Sie das auch schon erlebt? Vor etwa eineinhalb Jahren begann mit der Veröffentlichung von Windows 8 der große Hype um Flat Design. Es ist kein Geheimnis, dass mit der Reduktion gestalterischer Effekte auf ein Minimum zahlreiche Probleme mit der Benutzbarkeit einher gehen können. Die Kritik der Norman Nielsen Gruppe an Windows 8 und auch an iOS 7 sind populäre Beispiele dafür. Der Ästhetik der modernen, klaren und oft farbenfrohen Gestaltung können sich trotzdem sehr viele Menschen nicht entziehen.

Auch ich empfinde viele der neuen Websites und Benutzungsoberflächen als visuell ansprechend. Gleichzeitig ärgere ich mich seit vielen Monaten über die scheinbare Ignoranz, mit der fundamentale Gestaltungsgrundsätze der Software-Ergonomie über Bord geworfen werden: Links lassen sich oft schwer von normalem Text unterscheiden, Eingabefelder sind kaum als solche zu erkennen, Schaltflächen und Symbole wirken deaktiviert. Doch muss das so sein? Oder gibt es vielleicht neue Kniffe zu erlernen, um Flat Design und exzellente Usability zu vereinen? Es gibt! Zahlreiche Stellschrauben wie erwartungskonformes Layout, der geschickte Einsatz von Typografie oder Almost Flat Design trennen die Spreu vom Weizen.

Was ist Flat Design und (warum) sollte ich es anwenden?

Da Flat Design mittlerweile kein wirklich neuer Trend mehr ist, gibt es bereits eine Menge Artikel, welche die zugrunde liegenden Prinzipien detailliert darstellen. Ich möchte es daher an dieser Stelle bei einer knappen Erläuterung belassen: In Flat Design gehaltene Websites und Anwendungen verzichten auf gestalterische Mittel wie Schatten, Farbverläufe oder Texturen, die zur Erzeugung von räumlicher Tiefenwirkung eingesetzt werden können. Stattdessen spielen andere Aspekte wie die verwendete Typografie eine besonders starke Rolle.

Es gibt eine Menge Gründe, die dafür sprechen, eine Website oder eine Anwendung mit Flat Design zu gestalten:

• Der Fokus auf den Inhalt reduziert die kognitive Last zum Erfassen der wesentlichen Inhalte. Dies ist besonders vor dem Hintergrund der weiter steigenden Menge an Informationen, mit denen wir tagtäglich konfrontiert werden, sinnvoll.
• Die Umsetzung als Responsive Design wird erleichtert. Flat Design kommt damit der Anforderung an Benutzungsoberflächen, die sich an die verschiedenen Anzeigegrößen mobiler Geräte anpassen, entgegen.
• Der Verzicht auf viele Grafiken und Texturen kann die Ladegeschwindigkeit erhöhen und damit zu einer verbesserten User Experience beitragen.

Dies sind nur ein paar der Argumente, die durchaus für die Gestaltung in neuer, flacher Optik sprechen können. Die besondere Ästhetik – die sicherlich Geschmackssache ist – kommt dann noch dazu.

Außen hui, Bedienung pfui?

Die tatsächliche Umsetzung vieler Flat Designs zeigt leider, dass die Vorteile häufig mit Nachteilen in der Benutzbarkeit erkauft werden. Dabei gleichen sich manche Vor- und Nachteile – vereinfacht gesagt – quasi aus: Es ist wenig erstrebenswert, die kognitive Last zum Erfassen der Inhalte zu verringern, wenn gleichzeitig mehr kognitive Ressourcen benötigt werden, um interaktive von nicht interaktiven Elementen zu unterscheiden. Ein möglicher Fehler ist es, die reduzierten Schaltflächen ohne Tiefenwirkung in Form und Farbe genauso zu gestalten, wie rein dekorative Elemente. Ein Beispiel dafür findet man auf der Startseite von geckoboard.com (siehe Abb. 1).

Abb. 1: Dekorative und interaktive Elemente sehen hier fast identisch aus

Ähnlich Verwirrendes findet sich auf builtbybuffalo.com: Hier werden große, rote, kreisrunde Elemente mit Symbolen deutlich aufmerksamkeitsstärker dargestellt als beispielsweise eine zugehörige und darunter platzierte Schaltfläche (siehe Abb. 2). Diese steht durch ihren sehr niedrigen Kontrast nicht im Fokus. Das Resultat: Die Kreise besitzen eine Affordanz, sie zu klicken, um dahinter liegende Inhalte und Funktionen aufzurufen. Bei den ersten beiden der drei Elemente funktioniert dies auch. Es handelt sich somit um einen alternativen Weg zum selben Ziel. Leider funktioniert das gerade erst gelernte Verhalten (Bunte Kreise mit Symbolen sind klickbar) beim dritten Kreis dann schon nicht mehr. Hier kann zum Erreichen des Ziels lediglich das Eingabefeld unter dem Kreis verwendet werden. Dieses wiederum tritt durch besonders niedrigen Kontrast in den Hintergrund – nicht gerade Best Practice für die Anmeldung zu einem Newsletter.

Abb. 2: Dekorative Elemente und Call to Action-Elemente sind schwer zu identifizieren

Was mir während der Recherche zu diesem Artikel besonders auffiel: Gerade die Seiten mit besonders niedrigen Kontrasten und schlecht zu identifizierenden, interaktiven Elementen, verwenden meist kontraststarke Mouseover-Effekte. So wird die Schaltfläche aus dem Beispiel in Abbildung 2 beim Überfahren mit der Maus auffällig Blau. Es ist fast, als ob sich die Gestalter dieser Seiten der negativen Aspekte durchaus bewusst wären und als kleines Zugeständnis zumindest ein paar helfende Mouseover-Effekte einbauen wollten. Definitiv ein Schritt in die falsche Richtung: Die weiter steigende Anzahl von Tablet-Nutzern hat von dieser Maßnahme rein gar nichts und leidet damit besonders unter der verbesserungswürdigen Benutzerbarkeit solcher Oberflächen. Des Weiteren sollten Mouseover-Effekte auch für Nutzer mit Mauszeiger lediglich als zusätzlicher Effekt eingesetzt werden. Als Maßnahme, um die Interaktivität von Elementen verlässlich anzuzeigen sind sie ungeeignet – wer will schon die gesamte Oberfläche abtasten müssen, um zu erfahren, wo er klicken kann?

Doch selbst die Elemente, die zum Beispiel durch vertraute Symbolik leichter als klickbar wahrgenommen werden können, sind vor aktuellen Gestaltungstrends nicht sicher: Eine Vielzahl moderner Web-Anwendungen setzt auf hellgraue Symbole – mal auf dunkelgrauem, mal auf weißem Hintergrund (siehe als Beispiel feedly.com in Abb. 3). Ich will nicht behaupten, dass das Deaktivieren von Funktionen zu den Best Practices gehört. Dennoch stellen deaktivierte Menüpunkte und Symbole ein weit verbreitetes und über Jahre erlerntes Konzept in Benutzungsoberflächen dar. Wie kann man also auf die Idee kommen, zentrale Elemente zur Bedienung so zu gestalten, dass sie deaktiviert aussehen?

Abb. 3: Hellgrau auf Weiß – die Symbole oben rechts sehen deaktiviert aus

Ein letztes Negativ-Beispiel zeigt, dass auch der Einsatz von Farbe bzw. guten Kontrasten nicht zwangsläufig davor schützt, Nutzern die Trennung zwischen interaktiven und nicht interaktiven Elementen schwer zu machen. Es kommt ausgerechnet von Microsoft, mit denen der ganze Hype um Flat Design ja erst so richtig begann. Auf einer Seite der Xbox-Sparte fällt es schwer, intuitiv zu erahnen, welche Elemente klickbar bzw. verlinkt sind (siehe Abb. 4). Dafür gibt es gleich mehrere Gründe: Einerseits gibt es sowohl Textelemente in Dunkelgrau als auch in Grün, welche nicht klickbar sind. Der einzige Link auf der Seite („Und noch mehr!“) ist ebenfalls im selben Grün gehalten. Er ist weder unterstrichen noch gibt es einen Pfeil oder einen ähnlichen Hinweis darauf, dass auf Klick weitere Inhalte verfügbar sind. Viel gewichtiger ist allerdings die Tatsache, dass es für jeden Bereich im selben Abschnitt der Seite ein kreisförmig umrandetes Symbol gibt. Diese Art der Darstellung folgt der aktuellen Designsprache im Modern UI von Microsoft. Nur sind diese umrandeten Symbole im Betriebssystem Windows und vielen eigenen Web-Anwendungen ein Hinweis auf interaktive Elemente. In diesem Fall sind sie jedoch nicht verlinkt und dienen als rein dekorative Elemente – das gilt auch für den Kreis mit Daumen-Symbol direkt neben dem einzigen Link.

Abb. 4: Reiner Text und der einzige Link haben dieselbe Farbe, Symbole sind nicht klickbar

Das letztgenannte Beispiel zeigt eines der gegenwärtigen Kernprobleme vieler Flat Designs auf: Elemente wie Schaltflächen werden bis auf ihre Form (z. B. Rechteck, Kreis) reduziert. Dabei werden diese Formen über verschiedene Seiten und Anwendungen – selbst vom selben Hersteller – hinweg nicht einheitlich eingesetzt: In einer Oberfläche bilden sie dekorative bzw. strukturierende Elemente, in einer anderen dienen sie als Indikatoren für Interaktivität. So kann jedoch kein übergreifender Lerneffekt eintreten und erwartungskonforme Gestaltung wird wesentlich erschwert.

Richtig Reduzieren bedeutet, die verbleibenden Elemente besonders sorgfältig zu gestalten

Was kann man also tun, um die Nutzer des eigenen Angebots beim Erfassen und Verstehen der Oberfläche zu unterstützen? Zunächst einmal lassen sich viele Probleme durch sorgfältige Auswahl von Schrift, Formen, Farben und Anordnung vermeiden.

Auf die bedeutende Rolle der Typografie im Flat Design wird in zahlreichen Artikeln hingewiesen. Schade, dass die Gestalter vieler Seiten dies scheinbar eher als Einladung verstehen, möglichst viele, unterschiedliche Stile zu integrieren ohne auf eine konsistente Semantik zu achten. Wie man es besser machen kann, zeigt Plover. Obwohl es im oberen Bereich der Startseite drei unterschiedliche Ausgestaltungen interaktiver Elemente gibt, teilen sich alle eine Eigenschaft: Sie verwenden ausschließlich Großbuchstaben. Zumindest innerhalb einer Seite kann so der Einsatz von Typografie zur besseren Unterscheidung zwischen Inhalten, dekorativen Elementen und interaktiven Elementen helfen.

Abb. 5: Alle interaktiven Elemente in diesem Bereich verwenden Großbuchstaben

Ein weiterer sinnvoller Hinweis auf ein interaktives Element bzw. einen Link mit dahinter liegenden Inhalten stellen Pfeilsymbole – häufig kreisförmig umrahmt – dar. Diese Hinweise finden sich zum Beispiel auf der Seite eines Greenpeace Projektes – einmal ganz groß als Call-to-Action in der Mitte und drei mal wesentlich kleiner als ergänzender Hinweis neben drei textuellen Links (siehe Abb. 6).

Abb. 6: Pfeile deuten auf verlinkte Inhalte hin

Ein Klassiker unter den Good Practices ist die Verwendung einer gesonderten Farbe für Links. Besonders auffällige Links mögen dem Ideal des visuellen Minimalismus entgegenstehen – Links in einer einheitlichen Farbe, zu kennzeichnen, erleichtert das Verständnis einer Oberfläche jedoch erheblich. Ganz einheitlich sind die Links auf der Startseite von fitbit zwar auch nicht, es werden allerdings für alle interaktiven Elemente gute Indikatoren zur Verfügung gestellt: Gesättigte Farben für Schaltflächenbeschriftung oder –hintergrund, blaue Farbe für Links oben rechts, Pfeilsymbole für Dropdown und verlinkte Inhalte auf der Themenbühne (siehe Abb. 7).

Abb. 7: Eingefärbte Links und andere Indikatoren bei fitbit

Dass flache, minimale Designs überhaupt als Benutzungsschnittstellen funktionieren, liegt auch und maßgeblich an den Erwartungen und dem Vorwissen der Benutzer: Wer dutzende Websites einer bestimmten Branche gesehen hat, deren Layout und Navigation sich sehr ähnlich sind, versteht eine solche Seite auch dann noch, wenn die einzelnen Elemente sehr reduziert dargestellt sind. Wer bereits tausende Dropdown-Felder gesehen hat, versteht auch ein kleines Dreieck neben einem Wort. Wichtig ist: Die Elemente müssen erwartungskonform platziert und angeordnet sein, minimale visuelle Hinweise müssen konsistent verwendet werden.

Ein Weniger an Flach für ein Mehr an Benutzbarkeit

Es sollte allerdings auch die Frage gestellt werden, ob das eigene Design denn unbedingt restlos flach sein muss, oder ob auch ein fast flaches Design die eigenen Ansprüche an die visuelle Ästhetik erfüllen kann. In einem sehr lesenswerten Artikel beschreibt Felix Winkelnkemper einige grundlegende Eigenschaften der menschlichen Wahrnehmung von Objekten und ihrer Anordnung zueinander im Raum. So werden beispielsweise hellere Elemente auf einem dunkleren Hintergrund als Vordergrundobjekte wahrgenommen. Auch einen leichten Schlagschatten auf den unter einem Objekt liegenden Bereich interpretiert das menschliche Hirn intuitiv als Höhenunterschied. Aus diesen Eigenschaften lassen sich visuelle Hinweise ableiten, die – richtig eingesetzt – beim Verständnis von Benutzungsoberflächen äußerst hilfreich sind.

Neue Erkenntnisse sind das eigentlich nicht – es gibt einen Grund, warum zum Beispiel Schaltflächen über zwanzig Jahre zumindest ein bisschen wie ein dreidimensionaler Knopf aussahen. Allerdings: Das Wissen über die menschliche Wahrnehmung wieder in Erinnerung zu rufen scheint heute absolut notwendig zu sein. Glücklicherweise gibt es Designer, die es verstehen, dieses Wissen mit der modernen und klaren Ästhetik des Flat Designs zu vereinen. Sie bieten durch dezenten Einsatz von Gradienten oder Schlagschatten wertvolle visuelle Hinweise auf interaktive Elemente.

Die Gestaltung vieler Anwendungen von Google folgt diesem Almost Flat Design-Stil. So lassen sich beispielsweise in Google Mail Schaltflächen durch den dezenten Einsatz von Gradienten besser erkennen (siehe Abb. 8), in Google Maps werden Bedienelemente von der Karte durch einen leichten Schatten getrennt (siehe Abb. 9) – aus unerfindlichen Gründen gilt dies nicht für die Schaltfläche zum Anmelden.

Abb. 8: Dezenter Einsatz von Gestaltungsmitteln zur Tiefenwahrnehmung bei Google

Abb. 9: Verwendung leichter Schlagschatten bei Google Maps

Die Website von USA Today vereint moderne, an Flat Design angelehnte Optik mit sinnvoll eingesetzten Gestaltungsmitteln (siehe Abb. 10): Ein leichter Schlagschatten trennt den Kopfbereich der Seite vom Inhaltsbereich, ein aktiver Tab wirkt leicht eingesunken und eine leichte Struktur als Hintergrund trennt die Bereichs-Navigation gut wahrnehmbar von den Nachrichtenmeldungen. Zusätzlich wird durch den Einsatz von Pfeilsymbolen und einer selbstbeschreibenden Aufschrift unter jedem Bild verdeutlicht, dass sich auf Klick der zugehörige Bericht öffnet.

Abb. 10: News-Bereich auf USA Today

Fazit: Auf die Details kommt es an!

Die zu Beginn dieses Artikels angeführten Motivationen für einen reduzierten Design-Stil sind zeitgemäß und verdienen Beachtung. Es steckt viel Gutes im Flat Design. Alte Zöpfe sollten in vielen Fällen hin und wieder abgeschnitten werden – Design lebt und das ist gut so. Aspekte der Benutzbarkeit sollten jedoch keinesfalls leichtfertig einem puristischen Design untergeordnet werden. Es erfordert Erfahrung und Fingerspitzengefühl, mit subtilen visuellen Hinweisen elementare Eigenschaften menschlicher Wahrnehmung anzusprechen.

Des Weiteren entscheidet die Erwartungshaltung der eigenen Zielgruppe maßgeblich darüber, welche Oberfläche intuitiv verstanden wird. Nicht zuletzt gibt der eigene Brand häufig wichtige Rahmenbedingungen für die Gestaltung vor. Ob also Flat Design das Richtige für ihre nächste Website oder Anwendung ist und welche Gestaltungsdetails dabei besonders wichtig sind ist eine sehr individuelle Frage. Experten-Reviews und Studien mit Teilnehmer aus der Zielgruppe können bei ihrer Beantwortung äußerst hilfreich sein.

Wie stehen Sie zu Flat Design? Hatten Sie selbst schon frustrierende Nutzungserlebnisse oder steht für Sie die moderne Ästhetik im Vordergrund? Ich freue mich über Ihre Kommentare!