Flat Design für Onlineshops
Das sog. Flat Design wurde erstmals in Windows Phone 7 eingesetzt. In der breiten Öffentlichkeit vor allem aber durch das Kacheldesign von Windows 8 und dem Apple iOS7 Betriebssystem 2013 wahrgenommen.
Was zeichnet das Flat Design aus?
Wichtige Kennzeichen des Flat Designs sind:
- Reduktion – typisches Beispiel ist das neue iOS Design
- Vereinfachung – Verzicht auf Texturen, Verzierungen, Schlagschatten und dreidimensionale Elemente
- oft intensiver Einsatz von Farben – siehe Windows 8 Kacheln
- große Flächen und deutlich erkennbare Raster schaffen einen aufgeräumten Look
- Flat Design bietet schnelle Ladezeiten und eine bessere Anpassungsmöglichkeit bei unterschiedlichsten Bildschirmgrößen.
Beispiele für Webseiten mit Flat Design
Nichts gibt eine bessere Vorstellung für den Einsatz des schicken Designs, als einige Webseiten, die darauf setzen. In t3n wurden einige aufgeführt. Wir haben sechs davon für Sie ausgewählt:
- Nextr
Nextr kennt alle Haltestellen und Verkehrsmittel in deiner Nähe und in ganz Deutschland. Die Seite zur App demonstriert mit Device-Mockups die Funktionsweise der App und hat sich bis auf wenige Stimmungsbilder ganz der Flat-Design-Ästhetik verschrieben - Ghost Studio
Das Electronic-Arts-Studio Ghost stellt sich und den Standort Gothenburg mit Flat-Design-Illustrationen, Parallax-Scrolling und bildschirmfüllenden Fotos vor. - Online Portfolio von Daniel Perales
Der Designer Danyel Perales stellt sein Portfolio im Flat-Design vor. Dabei setzt die Seite neben typisch flachen Elementen und Icons auf den Einsatz von Mockups, die durch die neutralen Hintergründe zum angenehmen Gesamtbild beitragen. - SAP Mobile Consumer Trends
Diese Website von SAP ist eine interaktive Infografik, die die Nutzung von mobilen Diensten auf der ganzen Welt visualisiert. Eine spannende Möglichkeit weniger spannende Daten gekonnt in Szene zu setzen. - A day in Big Data
Auf „A Day In Big Data “ erklärt Ogilvy One Worldwide, was es mit Big Data auf sich hat und wie das Konzept eingesetzt werden kann.
Insbesondere die letzte Seite von Ogilvy überzeugt mit extremer Reduktion in Kombination mit einem Onepage Aufbau. Gerade in Zeiten von Mobile Commerce und mobilem Surfen kommt das endlose Scrollen der Nutzung von Touch Displays mehr entgegen, als mehrfache Klicken bisheriger Navigationsmodelle.
Flat Design im E-Commerce
Als E-Commerce Agentur interessiert uns natürlich auch der Einsatz im elektronischen Handel. Ausgehend von einigen weiteren Beispielen zeigen wir Vor- und Nachteile auf.
- Microsoft Onlineshop
- myownbike
- Nixon
Die Vorteile von Flat Design
- Reduktion von visuellen Effekten und Farbverläufen legt den Fokus auf Bild- und Textwelten
- verkaufsfördernde Texte werden wieder besser wahrgenommen. Dies unterstützt die Renaissance des Storytelling und Content Marketing.
- mit einer stärkeren Fokussierung auf Typographie und Reduktion von Verzierungselementen, können diese nun wieder stärker in den Fokus gerückt werden.
- Produktbilder und Bildwelten können wieder neu ihre Wirkungskraft entfalten.
Gefahren und Schwierigkeiten
- Flat Design ist durch seine Eindimensionalität weniger intuitiv.
- Wenn alle Elemente auf einer Ebene sind, woran soll noch erkannt werden, welches Element ein Interaktionselement ist? Buttons mit leichten Verläufen weisen hingegen eindeutig darauf hin, dass dieses Element klickbar ist.
„Aus unzähligen Nutzertests lässt sich immer wieder ableiten: Das Gehirn ist faul“, so Manuel Ressel im Gespräch mit t3n.de. Es entscheide bestimmte Situationen auf Basis bisheriger Erfahrungen. „Beim Flat Design ist es häufig so, dass Interaktionselemente wie Buttons und Eingabefelder schlecht erkennbar sind, weil sie typische Erkennungsmerkmale nicht aufgreifen. Dies erhöht den kognitiven Aufwand des Nutzers. Er muss die Interaktionselemente neu erlernen.“ Eine mögliche Folge: Sinkende Klickraten, Verkäufe und Umsätze. (Quelle)
In Folge der aufgezeigten Gefahren sollten Sie Folgendes beachten:
- Setzen Sie Farbabstufungen gezielt und bewusst ein, aber überfordern Sie den Nutzern nicht!
- Achten Sie auf eine markante Typografie und klare Markierungen, um dem Nutzer die Orientierung zu erleichtern!
- Setzen Sie klare Call-to-Actions ein und führen Sie den potentiellen Käufer durch Ihren Onlineshop bis zum Kaufabschluss!
- Buttons und Interaktionsflächen sollten durch Schatten oder Farbverläufe klar erkennbar sein.
- Achten Sie auf bekannte und vom Kunden erwartete Platzierung der Elemente, um bewährte Usability Elemente zu bewahren!
Im Gegensatz zu Webseiten, die auch Raum für grafische Spielereien und extreme Design-Spielarten bieten, zählt im E-Commerce unter dem Strich nur die erzielte Konversionsrate. Mittel der Wahl ist vom Pure Flat zum Nearly Flat Design zu wechseln, um für den Käufer bekannte Elemente zu erhalten und Handlungsaufforderungen markant herauszustellen.