Flat 2.0 und wie es die Usability-Probleme von Flat Design löst

Flaches Design gibt es bereits seit den 1950er Jahren, als der internationale typografische Stil entwickelt wurde. In letzter Zeit hat es seit der Einführung von Microsofts neuem Bekanntheitsgrad an Popularität gewonnen geometrie- und typografieorientiertes Metro-Design zuerst im neuen Windows Phone 2010, dann in Windows 8 im Jahr 2012.

Flaches Design zeichnet sich durch die Mangel an dreidimensionalen Effekten und glänzenden visuellen Elementen um zu erreichen Sauberkeit, Minimalismus, und Klarheit. Dies steht im Gegensatz zu dem vorherrschenden Designstil Skeuomorphismus, bei dem glänzende Knöpfe und Illustrationen verwendet werden, die reale 3D-Objekte imitieren.

Flaches Design zielt im Wesentlichen darauf ab, Websites zu rationalisieren, den Fokus auf Inhalte zu richten, intuitivere Interaktionen zu ermöglichen und eine schnellere und funktionalere Benutzererfahrung zu bieten. Einfache, schachtelartige Elemente und gitterbasierte Layouts für das responsive Design sind einfach zu verwenden.

Usability-Probleme von Flat Design

Flaches Design gibt uns enorme Hilfe und ein großartiges Toolkit, mit dem wir unseren Benutzern schnelle und unkomplizierte Websites zur Verfügung stellen können. Dies kann jedoch zu Problemen bei der Benutzerfreundlichkeit führen, insbesondere wenn diese übermäßig genutzt werden.

Keine visuellen Signifikanten für die Klickbarkeit

Wenn wir dreidimensionale Effekte verwenden, wird unseren Entwürfen natürlich eine Illusion von Tiefe vermittelt. Dies hilft Benutzern schnell Finden Sie interaktive Elemente, diejenigen, die entweder angeklickt werden können (wie Schaltflächen und Symbole) oder ausgefüllt werden können (wie Formularfelder). Ein Hauptanliegen bei flachen Designs ist, dass dies für Benutzer schwierig ist anklickbare Elemente erkennen.

Vor dem flachen Zeitalter gaben Webdesigner gewöhnlich die Klickfähigkeit an, indem sie visuelle Lösungen wie Farbverläufe, Texturen, erhöhte Kanten oder Schlagschatten um Schaltflächen und andere anklickbare Objekte so aussehen zu lassen, als könnten sie gedrückt werden.

Dem flachen Design fehlen diese visuellen Signifikanten und müssen dieselbe Aufgabe mit einem viel kleineren Toolset lösen: Farben, Formen, Nähe, und kontextuelle Elemente.

Warum ist das ein Problem? Lass uns ein Experiment versuchen.

Sehen Sie sich diesen Screenshot unten an. Erraten Sie anhand dieses Screenshots, welche Elemente anklickbar sind. Es sind nicht die, an die Sie zuerst denken würden. Wir können viele ähnliche Usability-Probleme überall im Web finden.

Reduzierte Auffindbarkeit durch keine Z-Achse

Menschen im wirklichen Leben finden Objekte und bewegen sich in drei Dimensionen: der X-, Y- und Z-Achse. Wenn sie auf eine minimalistisch gestaltete, flache Website ohne 3D-Effekte stoßen, erhalten sie eine andere Erfahrung als gewohnt, was sie hauptsächlich kennen.

Das bedeutet, dass sie müssen Verwenden Sie mehr Aufwand, um Beziehungen zwischen Objekten zu entdecken, und die visuelle Hierarchie verstehen Der Seite. Beispielsweise müssen wir mehr Zeit auf der Homepage des Microsoft Developer Network verbringen, um die Informationen und den Zweck der verschiedenen Elemente auf der Website visuell zu decodieren.

Im UX-Design gilt als Faustregel, stets die kognitive Belastung des Benutzers zu minimieren, um die Benutzerfreundlichkeit zu maximieren. Wie wir in vielen Fällen sehen können, ist dies bei flachem Design nicht immer der Fall.

Niedrige Informationsdichte

Das flache Design wurde auch vom UX-Experten Nielsen-Norman Group für das Risiko einer geringen Informationsdichte kritisiert.

In ihrer Kritik an der Benutzerfreundlichkeit von Windows 8 benutzten sie Beispiele für Windows Store-Apps und die Website der Los Angeles Times, um die Probleme zu zeigen niedrige Informationsdichte (Wenige Storys auf dem Startbildschirm haben, Überschriften ohne Zusammenfassungen, kaum erkennbare Gruppierung usw.) können aus Sicht der Benutzerfreundlichkeit führen.

Unter einem anderen Aspekt kann auch weniger Information als Ablenkung angesehen werden, so dass Benutzer sich nur auf wichtige Dinge konzentrieren können. Wenn jedoch der Minimalismus übertrieben wird, kann dies leicht das Hauptziel einer Website, d.

Der Aufstieg von Flat 2.0

Da immer mehr Designer die Usability-Mängel von Flat Design erkennen, ist eine neue, ausgereiftere Version davon entstanden, genannt “Flach 2.0” oder “Fast flach” Design. Während der Wechsel vom Skeuomorphismus zur Ebene radikal war, ist die Entwicklung des flachen Designs viel schwieriger.

Der neue Stil ist immer noch flach, aber es ist fügt den Designs ein wenig dreidimensional zurück in Form von subtile Schatten, Highlights, und Schichten. Flat 2.0 - wenn es gut genutzt wird - kann die zuvor genannten Probleme mit der Benutzerfreundlichkeit beheben, indem es etwas Realismus (Skeuomorphismus) zurückbringt und Tiefe und Details hinzufügt, während die Vorteile von Minimalismus beibehalten werden, z.

Material Design

Die neue Designsprache von Google, Material Design genannt, ist wahrscheinlich das bemerkenswerteste Beispiel für den Flat 2.0-Stil. Google hat Material Design mit Android L im Jahr 2014 veröffentlicht. Während Material Design die Hauptmerkmale des flachen Designs beibehält, verwendet es bestimmte Metaphern aus der Physik, um Benutzern zu helfen, Analogien zwischen der realen Welt und der digitalen Welt schnell zu finden.

Material Design verwendet die Z-Achse, gibt an subtile Tiefe zum Design und nutzt Ebenen schlau aus trennt sie mit Schlagschatten und Animationen. Google hat eine supercoole Beschreibung, wie es funktioniert, und es lohnt sich wirklich, es durchzulesen, um seine wichtigsten Prinzipien und Regeln zu verstehen.

Fazit

Da gute Designer stets darauf abzielen, die Erfahrung ihrer Benutzer zu verbessern, ändert sich die Webdesignbranche ständig. Flaches Design hat den Skeuomorphismus schnell ersetzt, was zur Folge hat gitterbasierte, minimalistische Layouts und vereinfachende Elemente dass das Web in letzter Zeit überlaufen wurde (dies hat zu einigen Diskussionen über das langweilige oder sogar sterbende Webdesign geführt, aber es könnte nicht weiter von der Wahrheit entfernt sein).

Flat 2.0 gibt Antworten auf die wahrgenommenen Probleme des Flat Design. Es ist ein intelligenter Kompromiss zwischen Funktionalität, Ästhetik und Benutzerfreundlichkeit. Natürlich müssen wir die Material UI-Kits nicht verwenden überall, Aber die Philosophie dahinter zu verstehen, kann uns einen soliden Hintergrund vermitteln wie wir unseren eigenen Stil entwickeln können in Übereinstimmung mit den neuesten Erkenntnissen im User Experience Design.