Webdesign-Trend Flat Design und Stolpersteine im E-Commerce

Der Webdesign-Trend Flat Design kann wahrscheinlich jetzt schon als der einflussreichste Designtrend des Jahres 2013 angesehen werden. Kaum zu glauben, dass der sonst so angestaubte Softwareriese Microsoft einen maßgeblichen Einfluss an dem Erfolg des Designtrends hat. Mit Modern UI (oder Metro-Design) hat Microsoft eine Designsprache entwickelt, die sich vom angestaubten Skeuomorphism Design von Apple klar absetzt und besser den Zeitgeist trifft.


Die Gerüchteküche, dass auch Apple im neuen Design für iOS wahrscheinlich eine flachere Designsprache wählt und sich vom Skeuomorphism Design weiter distanzieren wird, heizen den Hype um den Trend weiter an.

Generell bringt der Trend einige Vorteile mit sich, allerdings gibt es vor allem im E-Commerce einige Stolpersteine, die es zu beachten gilt.

Die Vorteile von Flat Design

Schon vor knapp drei Jahren hat Ronald Grimminger für einen moderateren Einsatz von Spiegeleffekten und Farbverläufen appelliert und sich für die Rückbesinnung auf eine flachere Gestaltung ausgesprochen.

Der übermäßige Einsatz von Farbverläufen und Spiegeleffekten führt dazu, dass nahezu jedes Element auf einer Seite hervorsticht und damit um die Aufmerksamkeit des Nutzers buhlt. Webseiten-Layouts wirken schnell überladen und können das Auge des Nutzers nicht mehr zielgerichtet führen. Wichtige Inhalte können so nicht mehr schnell genug erfasst werden und verlieren so an Bedeutung.

Zudem leidet die Authentizität, wenn nahezu jedes Element einen Spiegelreflex erhält, egal ob Schweizer Uhr, Turnschuh oder Kartoffelsalat. Effekte werden nicht mehr eingesetzt, weil man damit ein bestimmtes Gefühl auslösen möchte, sondern weil man es kann.

Durch die Zurücknahme dieser Effekte kann die visuelle Gewichtung wieder stärker auf Bild- und Textwelten gelenkt werden. Vor allem verkaufsfördernde Texte erhielten lange Zeit eine untergeordnete Rolle. Mit einer stärkeren Fokussierung auf Typographie und Reduktion von Verzierungselementen, können diese nun wieder stärker in den Fokus gerückt werden. Auch Bildwelten können wieder ihre ganze Wirkungskraft entfalten.

Die Stolpersteine von Flat Design (im E-Commerce)

Design-Trends sollten nie zu einsichtig betrachtet werden. Mögliche Schwachstellen nicht in Erwägung zu ziehen ist einfach zu kurzsichtig und schlichtweg falsch. Gefährlich wird es vor allem dann, wenn die Website einen wirtschaftlichen Background hat und Geld einbringen muss. An der Entwicklung des Designs von TUI.com sieht man ganz gut, was die Stolpersteine des Flat Designs im E-Commerce sein können.

Nach dem Relaunch hat TUI.com ein durchweg flaches Design. An sich wirkt das Design sehr stimmig und große Bildwelten schaffen es eine schöne Urlaubsstimmung zu erzielen. Doch mittlerweile ist TUI.com ein Stück weggerückt vom Flat Design zu einem "Nearly Flat Design". Ursprünglich waren alle Elemente gemäß des Flat Designs flach. Nach der Anpassung des Designs hat TUI.com für Buttons und Eingabefelder auf die durchweg flache Gestaltung verzichtet und hier wieder leichte Verläufe und Schatten eingeführt.

2012: Die Elemente auf tui.com kommen ohne Schatten und Verläufe aus.

2012: Die Elemente auf tui.com kommen ohne Schatten und Verläufe aus.

2013: Buttons erhalten wieder einen leichten Farbverlauf und Formularfelder einen inneren Schatten.

2013: Buttons erhalten wieder einen leichten Farbverlauf und Formularfelder einen inneren Schatten.

Dies zeigt sehr gut die Schwachstellen des Flat Designs. Wenn alle Elemente auf einer Ebene sind, woran soll noch erkannt werden, welches Element ein Interaktionselement ist? Button mit leichten Verläufen weisen hingegen eindeutig darauf hin, dass dieses Element klickbar ist. Ist dem Nutzer nicht klar, wo er weiter kommt oder wo er seine Eingaben tätigen kann, kann dies ein schwerwiegender Conversion-Killer sein. Also sollte immer überprüft werden, inwieweit die Zielgruppe Eingabefelder und Buttons als Interaktionselemente wahrnimmt.

Mit den Anpassungen an das "Nearly Flat Design" hat TUI.com aus meiner Sicht den Fokus nicht verloren, für den Nutzer ist es lediglich offensichtlicher, wie er zu seinem Ziel gelangt.

Flat sein oder nicht flat sein – das ist hier die Frage

Der Designtrend Flat Design schafft es aus meiner Sicht, dass sich wieder verstärkt auf das Wesentliche konzentriert wird. Wurden durch zu viele Gestaltungselemente oftmals wichtige Elemente in den Hintergrund gedrängt, so haben diese wieder Luft zum Atmen und können ihr volles Potenzial entfalten. Die Seite, Inhalte und Intention kann schneller vom Nutzer wahrgenommen und aufgefasst werden. Wenn man bedenkt, dass Menschen bereits nach 50 Millisekunden eine emotionale Beurteilung der Website abgeben können, ist dies durchaus ein entscheidender Faktor.

Doch die Nachteile des Flat Design sollten nicht außer Acht gelassen werden. Häufig kann es durchaus eine sinnvolle Entscheidung sein, im Sinne seiner Nutzer einen Schritt kürzer zu treten und auf ein Nearly Flat Design zurückzugreifen. Ein Nearly Flat Design kann Interaktionsmöglichkeiten und Verhalten der Seite deutlich besser darstellen. Doch wieso ist das wichtig? Eine Website ist nun mal kein Poster, welches wir uns einfach ansehen und schön finden. Eine Website ist eine dynamische Seite mit der der Nutzer interagieren kann. Wenn die Seite tolle Funktionen bietet, macht das dem Nutzer sogar Spaß. Doch wenn er nicht sehen kann, was er alles auf der Seite erleben kann und keine Designelemente ihn darauf hinweisen, dann wird er diese Funktionen nicht nutzen und der Joy of Use ist dahin.

Ich gehe stark davon aus, dass in den Gerüchten, dass auch Apple ein flacheres Design anstrebt, viel Wahrheit steckt. Doch denke ich nicht, dass Apple ein durchgehendes Flat Design entwickeln wird. Auch Apple wird höchstwahrscheinlich z.B. ähnlich wie bei iTunes ein Nearly Flat Design ausarbeiten, bei dem Schatten und leichte Verläufe das Verhalten der Seite unterstützend andeuten. Das heißt diese Elemente werden gezielt eingesetzt, um Verhaltensweisen für den Nutzer darzustellen, die sich ohne diese nicht erschließen lassen.

Der Schatten der oberen Navigationsleiste signalisiert, dass die Leiste stehen bleibt und der Inhalt darunter verschwindet. Eingedrückte Elemente zeigen die aktuelle Auswahl und hervorstehende Elemente verdeutlichen klickbare Elemente.

Der Schatten der oberen Navigationsleiste signalisiert, dass die Leiste stehen bleibt und der Inhalt darunter verschwindet. Eingedrückte Elemente zeigen die aktuelle Auswahl und hervorstehende Elemente verdeutlichen klickbare Elemente.

Für diejenigen, die keine Kompromisse eingehen möchten, sei noch ans Herz gelegt, zumindest mit bereits erlernten Elementen, wie Textunterstreichung oder Pfeilen zu arbeiten, um den Nutzer klar zu zeigen, wo es weiter geht.

Als weiterführende Lektüre möchte ich noch mal explizit den Artikel "Flat Pixels" von Sacha Greif hervorheben, der sehr schön die Probleme von Skeuomorphism Design betrachtet und das Kontrastprogramm Flat Design ebenfalls differenziert betrachtet.

Showcase: Flat Design im E-Commerce

Aria

aria

Budnitz Bycicles

budnitzbicycles

Combadi

combadi

Concrete Matter

concretematter

Dolbeau

dolbeau

Fresh

fresh

Hard Graft

hardgraft

La Carotte

lacarotte

Lazy Made

lazymade

Rdio

rdio

The Look

thelook

The Windmill Club

thewindmillclub

Van Moof

vanmoof

Visual Supply Co

visualsupplyco

Weiterführende Quellen:

  • E-Commerce Design Trends für 2013
  • Spiegeln sucks – ein Plädoyer für flache Gestaltung
  • Flat Pixels
  • The Wall Street Journal - Apple Design Teams Get Cozier
  • Why I’m No Metrosexual
  • Flat UI is not the only way forward
  • Flat Design: Webdesign-Trend setzt auf Einfachheit und Reduktion
    • Teilen
    • Send to Kindle
    • http://www.konversionskraft.de/?p=16987
    Manuel Ressel Manuel Ressel ist Head of UX Design bei der Web Arts AG. Seine Leidenschaft gilt dem Thema der Emotionalisierung von Kauf-Prozessen in E-Commerce-Portalen. Manuel Ressel ist unentwegt auf der Suche nach einzigartigen Shop-Perlen und neuen Design Trends im E-Commerce und sammelt diese in dem E-Commerce Showcase conversiondesign.de. Folgen Sie ihm auf Twitter, Google+ oder Facebook.

    Frage zum Artikel? Fragen Sie den Autor!


    Please leave this field empty.

    16 Reaktionen auf  “Webdesign-Trend Flat Design und Stolpersteine im E-Commerce”

    Kommentare

    1. Heiko Heiko

      Bei TUI wird man sich wohl von den Konversionsraten in Boxhorn jagen lassen. Meiner Meinung nach weist lediglich die Suchmaske in der 2012er Schwachstellen auf, weshalb man sich wahrscheinlich für ein Facelift entschieden hat. In der 2012 Variante wird das Call-to-Action Element nicht als Einheit mit der Suchmaske empfunden und nicht als das wahrgenommen was es ist.

    2. Manuel Ressel Manuel Ressel

      Die CTA steht in dem Beispiel tatsächlich abseits des Formulars. Allerdings waren nicht auf allen Seiten die Platzierung so unglücklich. Auf der Startseite waren alle Eingabefelder auf weißem Hintergrund und direkt darunter die CTA. 😉

    3. Holger Holger

      Also wer auf der ersten Version der Tui.com die gelben Call-to-Action Eemente nicht als solche erkannt hat, sollte sich vielleicht überlegen seine Reisen wieder im Reisebüro zu buchen.

      Die 2. Version ist für mich nur eine Verwässerung einer schönen, schlichten und klaren Design-Idee, und ich kann mir auch schon sehr gut vorstellen, wie diese zustande gekommen ist 🙂

    4. Rene Walter Rene Walter

      Das TUI Beispiel ist sehr gut gewählt, gerade die Neu-Einsteiger der älteren Generation, die das erste Mal im Internet surfen und teilweise nicht mehr so gut sehen können, müssen ganz klar und deutlich die Buttons vom restlichen Inhalt unterscheiden können.

    5. Nils Kattau Nils Kattau

      Zitat: „Also wer auf der ersten Version der Tui.com die gelben Call-to-Action Eemente nicht als solche erkannt hat, sollte sich vielleicht überlegen seine Reisen wieder im Reisebüro zu buchen.“

      Holger, es geht doch darum, die Website für die größtmögliche Masse bedienbar zu machen. Aussagen wie deine können sich finanziell sehr übel auswirken. Die Preis“buttons“, in der Flat TUI Version beispielsweise finde ich absolut nicht als solche erkennbar, da sie aussehen wie simple Preisschilder ohne Interaktionsmöglichkeit.

      Zwar bin ich ein Freund von (innovativem) Design, aber wenn die Usability darunter leidet, sollte man imho in Hinblick auf eine bessere CR lieber Abstriche machen.

    6. André Morys André Morys

      Nils, wolltest Du heute nicht die Buchhaltung machen? :-)))

    7. Susanne Angeli Susanne Angeli

      Hallo, ich finde die Beispiele zwar schon ganz gut, doch sind diese ja meist aus dem amerikanischen Handel.. ein Beispiel für einen weiteren deutschen Anbieter ist brands4friends.de Meines Erachtens schlicht, übersichtlich und intuitiv bedienbar..

    8. Manuel Ressel Manuel Ressel

      Hallo Susanne,

      wenn man einen Designtrend betrachtet, ist es schwierig sich dabei auf ein Land zu beschränken. Brands4friends ist eventuell schlicht, übersichtlich und intuitiv, aber eigentlich kein Beispiel für „Flat Design“. Brands4friends verwendet Störer mit Schatten und Buttons mit Farbverläufen und fällt von daher aus dem Muster des „Flat Designs“ heraus.

      Übrigens sind die Seiten international gewählt und beschränken sich keineswegs nur auf den amerikanischen Handel… So sind Shops aus Niederlande (Vanmoof, Concrete Matter), Schweiz (The Look), Slowakei (lazy made), Belgien (La Carotte), Kanada (Dolbeau), Griechenland (combadi) und England (Aria) dabei.

    9. Susanne Angeli Susanne Angeli

      Hallo Manuel,
      gut, jetzt hab ich einiges dazu gelernt in Sachen Flat-Design. Kann man das Design von Brands4friends in eine Art nearly-Flatdesign stecken oder ist es einfach keine bestimmte Art von Design.. danke übrigens für deine tollen Artikel zum Thema.
      LG susanne

    10. Manuel Ressel Manuel Ressel

      Hallo Susanne,

      Nearly Flat Design trifft es schon eher, ja. 😉

    11. Pedro Pedro

      Ausgerechnet das Eingangsbeispiel finde ich abscheckend. Dabei finde ich das Windows 8 Style Flat Design sehr toll. Mir mangelt es oft an Inhalten auf Webseiten und diese Flatdesigns treiben auch dazu an viele Textblöcke zu Positionieren, auch mit Bildern und Links.
      An sich steckt in einem guten Flat Webdesign viel Kraft – angefangen von der Optik die man für jeden gut arangieren kann, über den Informationsfluss und das anstacheln zum weiterlesen als großes Plus für den Besucher, als auch für die SEO sind Flat Designs eine schöne sache – meine persönliche Meinung, natürlich.

    12. Phillip Phillip

      Ich selbst arbeite als Webdesigner und finde das Flat-Design super. Es ist übersichtlich und frei von jedem störbarem Schatten. Allerdings ist mir aufgefallen, dass Schatten und Rundungen bei vielen Kunden angesagter sind „tristes“ Flat-Design (Kundenaussagen).

    13. networkers-berlin.de networkers-berlin.de

      Schöne neue Design Anregungen, aber auch meine Kunden wünschen sich schatten.

    Trackbacks/Pingbacks

    1. […] Flat Design entspricht der Rückbesinnung auf das Wesentliche, ganz im Sinne altbekannter Prinzipien wie „Form follows function“. Auch im E-Commerce hat der Webdesigntrend Fuß gefasst. Vor allem kleinere und exklusive Onlineshops präsentieren ihre Waren im schlichten Gewand. Große Player wie TUI.com haben hingegen Probleme, den Ansatz ganzheitlich umzusetzen. Woran das liegt, erklärt Manuel Ressel von der Web Arts AG in seinem Beitrag „Webdesign-Trend Flat Design und Stolpersteine im E-Commerce“. […]

    2. […] Flat Design und Stolpersteine im E-Commerce […]

    3. […] hat das Thema Flat Design auch noch mal aus der Sicht des e-Commerce betrachtet. Dazu gibt es auch tolle Beispiele für die […]

    Hinterlassen Sie einen Kommentar

    Du hast Fragen?

    Gerne stehen wir Dir jederzeit für Fragen zur Verfügung. Du erreichest uns unter 06172-68097-0 oder per E-Mail unter training@konversionskraft.de.

    Deine Referenten