E-Commerce Design Trends 2014

Das Jahr neigt sich dem Ende zu und somit ist mal wieder der perfekte Zeitpunkt gekommen, um zurück zu blicken und zu schauen, welche Designthemen den E-Commerce im letzten Jahr bewegt haben und welche Design Trends im nächsten Jahr interessant werden.

Rückblickend war das Jahr überwiegend von einem Thema geprägt – Flat Design. Mit der Vorstellung des Modern UI in Windows 8 hatte Microsoft einen maßgeblichen Anteil am Erfolg von Flat Design und der durch und durch digitalen Designsprache (Authentically Digital). Dass Apple mit iOS7 ebenfalls in eine flache Gestaltung übergegangen ist, hat dann sein Übriges getan.

Doch welche Themen sind für das nächste Jahr neben den ständigen Wegbegleitern wie Responsive Design und Flat Design interessant? Ein wichtiges Thema im Onlinemarketing, mit dem sich Unternehmen aus meiner Sicht auseinandersetzen müssen, ist Content-Marketing. Für mich ist Content-Marketing nicht irgendein neuer Trend oder Hype. Vielmehr ist es aus meiner Sicht ein Schritt weg von minderwertigen Verkaufs- und SEO-Inhalten und eine Rückbesinnung auf geilen Inhalt, der die Bedürfnisse des Nutzers erfüllt, Mehrwert bietet und einfach Spaß macht. Doch was hat das mit Design zu tun? Das Design spielt auch beim Content-Marketing eine wichtige Rolle. Denn letztendlich muss das Design den Inhalten gerecht werden. Das Design muss den Inhalt unterstützen, den Nutzer in die Seite ziehen und nicht vom Inhalt ablenken. Die Frage ist also mit welchen Designtechniken man Inhalte optimal unterstützen oder sogar verstärken kann.

Clarity

Mit Clarity meine ich nicht zwangsläufig ein minimalistisches Design. Viel mehr geht es darum, dass für den Nutzer Inhalt und Zweck der Seite schnell und leicht erfassbar ist. Dem Nutzer ist also innerhalb von Bruchteilen einer Sekunde klar, um was es auf der Seite geht und was er hier tun kann. So kann ein minimalistisches Design durchaus dazu beitragen, dass die Botschaft der Seite besser transportiert wird. Aber auch eine minimalistische Seite kann die eigentliche Botschaft so stark verstecken und andere Elemente hervorheben, so dass die Klarheit darunter leidet und der Nutzer eben nicht erkennt, welchen Zweck die Seite hat.

airbnb

airbnb

Finde eine Unterkunft. Durch die Headline und die dazugehörigen Formularfelder mit Call-to-Action wird bei airbnb schnell die Funktion der Seite klar.

Long Form Page

Abgesehen von einzelnen Bildern oder Videos lässt sich guter Inhalt mit Mehrwert nur schwierig auf kleinem Raum unterbringen. Zudem sollte man gutem Inhalt auch genügend Raum geben, um die nötige Aufmerksamkeit zu erhalten. Die logische Folge sind Long Form Pages, also lange Seiten mit genügend Platz für Bilder und Texte. Ich sage bewusst nicht Long Copy Pages, denn eine lange Seite muss nicht zwangsläufig mit viel Text arbeiten, sondern kann auch mit einer stark visuellen Sprache umgesetzt werden, wie zum Beispiel die Website von Nest Protect.

bellroy

bellroy

Auf der Landing Page von bellroy erhält der Besucher nützliche Tipps, wie man seinen Geldbeutel schlanker macht. Erst am Ende werden dann die zusätzlichen Vorteile der Geldbeutel von bellroy erläutert und zum Kauf angeboten. (Klick auf Bild für ganze Ansicht)

Nest Protect

nest protect

Bei Nest Protect wird durch die visuelle Sprache das Design des Produktes schön präsentiert. Knappe Texte erläutern dabei, warum man überhaupt einen Feuermelder benötigt und welche Vorteile Nest Protect mit sich bringt. (Klick auf Bild für ganze Ansicht)

Fixed Elements

Vor allem bei Long Form Pages, auf denen längere Scroll-Strecken zurückgelegt werden, bietet es sich an, Bedienelemente fest auf der Seite zu platzieren. So können Sprungmarken und eine Übersicht angeboten werden, wo sich der Nutzer aktuell auf der Seite befindet. Zudem kann die Navigation angezeigt werden, damit bei einem Seitenwechsel nicht erst wieder ganz nach oben gescrollt werden muss, sondern direkt zur nächsten Seite gesprungen werden kann.

Apple iPad Air

iPad Air

Beim Scrollen verschwindet die Hauptnavigation. Die Navigation für das Produkt bleibt allerdings am oberen Bildschirmrand bestehen. Seitliche Punkte an der Seite sind ebenso auf der Seite fixiert und zeigen, wo sich der Nutzer auf der Seite gerade befindet.

Pure Fix Cycles

Pure Fix Cycles

Die Seiten von Pure Fix Cycles können mitunter schon etwas länger sein. Damit die Navigation trotzdem zugänglich ist, wird diese etwas schmaler und am oberen Bildschirmrand fixiert.

Parallax Scrolling

Parallax Scrolling ist natürlich kein neuer Designtrend, aber sollte im Zusammenhang mit Content-Marketing nicht unerwähnt bleiben. Durch die Animationsmöglichkeiten während des Scrollens ergeben sich für Designer die Möglichkeit mit einer Website eine Geschichte zu erzählen. Damit kann man den Nutzer allerdings nicht nur unterhalten, sondern auch zusätzliches Bildmaterial für Story-Telling oder Erläuterung der Funktionsweise bieten. Hier hat Apple mit der Website für den Mac Pro ganze Arbeit geleistet und durch die Animationen den neuen Aufbau des Mac Pros und dessen Vorteile schön dem Nutzer näher gebracht.

Apple Mac Pro

Apple Mac Pro

Animationen während des Scrollen erläutern sehr simpel den Aufbau und die Funktionen des Mac Pro.

weitere Beispiele

Masonry-Layout

Masonry-Layouts (masonry, aus dem Englischen für Mauerwerk) sind vor allem durch die Content Curation Plattform Pinterest bekannt geworden. Masonry-Layouts bieten sich für visuell inspirierende Seiteneinstiege an. Das Layout ist dominiert von Bildern, die im Stil eines Mauerwerks zusammengesetzt sind. So passen viele Bilder auf wenig Raum. Die Bilder können vom Nutzer schnell überflogen werden. Dabei kann der Nutzer schnell Inspiration sammeln.

Aufgrund des schnellen Überfliegen eignet sich das Layout allerdings eher als inspirierender Einstieg und zum Beispiel weniger als Layout für eine Kategorieseite, auf der der Nutzer eventuell schon eine genauere Vorstellung hat und weitere Details neben dem Bild als Entscheidungsgrundlage benötigt.

ebay

ebay

Masonry-Layout auf der Startseite von ebay.

Stylight

stylight

Inspirativer Einstieg bei Stylight.

United Pixelworkers

united pixelworkers

Weniger ein Mauerwerk und mehr eine Kacheloptik ähnlich wie bei Windows 8 findet man bei United Pixelworkers auf der Startseite.

Off Canvas

Off Canvas-Layouts finden vor allem beim Responsive Webdesign schon häufig Verwendung. Da der Platz gerade auf mobilen Geräten sehr beschränkt ist, werden Seitenelemente wie zum Beispiel die Navigation außerhalb des Bildschirmbereichs platziert und per Klick in den sichtbaren Bereich eingeschoben.

Der Einsatz von Off Canvas-Layouts kann aber nicht nur für mobile Seiten sinnvoll sein, sondern kann sich auch für Desktop-Websites bezahlt machen.

So können Informationen, die nur sekundär oder bei Bedarf wichtig sind außerhalb des Sichtbereichs ausgelagert werden, aber zeitgleich leicht zugänglich gemacht werden. Zudem bietet der Off-Canvas Bereich viel Platz, um die Informationen übersichtlich und gut lesbar darzustellen.

Indochino

indochino

Typisches Off Canvas-Menü bei der mobilen Ansicht von Indochino.

kai USA

shun kai usa

Die Firma kai USA hat drei verschiedene Messershops, für die der selbe Warenkorb verwendet werden kann. Der Off Canvas-Bereich wird für den Wechsel zwischen den Shops genutzt.

The Greats Brand

the greats brand

Bei The Greats Brand wird per Klick auf den Warenkorb eine Warenkorb-Vorschau von oben ins Bild geschoben.

Whipping Post

whipping post

Auch bei Whipping Post wird der Off Canvas-Bereich für einen Warenkorb-Vorschau genutzt – hier allerdings als seitliche Variante.

Fazit

Content ist King. Mit den Design Trends für 2014 kann das Design diesem Ausspruch auch gerecht werden.
Letztendlich ist es der Inhalt der Seite, der das Produkt verkaufen muss. Ein schickes Design alleine reicht in den seltensten Fällen aus, was nicht heißen soll, dass das Design unwichtig ist.
Vielmehr muss das Design die Aussage und Stimmung des Contents widerspiegeln und visuell dem Nutzer vermitteln. Steht das Design im Widerspruch mit der Aussage des Textes, kann dies Unsicherheiten verursachen. Das Design sollte den Content optimal unterstützen, so dass die Botschaft der Seite optimal transportiert wird.

Welche Design Trends sehen Sie als wichtige Treiber im E-Commerce? Hinterlassen Sie einen Kommentar mit Ihren wichtigsten Trends.

  • Send to Kindle
  • https://www.konversionskraft.de/?p=20091
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.

, ,

14 Reaktionen auf  “E-Commerce Design Trends 2014”

Kommentare

  1. Thorsten Wilhelm Thorsten Wilhelm

    Vielen Dank, ein toller Post.
    Teile den Ausblick voll und ganz.

  2. Axxl Axxl

    „form follows function“ und function ist genau das was Du als geilen Inhalt bezeichnest. Er muss den Leser begeistern. Beeindruckend das Beispiel des Mac Pro.
    Ein gelungener Beitrag, interessant zu lesen und voller Anregungen.

  3. Geldpirat Geldpirat

    Wow, klasse Artikel.

    Ich sehe es auch so, dass der „Artikel zur Webseite passen muss“ und vice versa. Apple ist hier meiner Meinung nach -wie so oft- Vorreiter.

    Liebe Grüße

  4. Holger Maassen Holger Maassen

    Trends sind was sie sind Trends – ein Versprechen in die Zukunft, diese zu offenbaren und erfreuen sich deshalb in den Medien einer gewissen Popularität – bleibt zu fragen welche Rolle und Bedeutung sie haben – diese zu betrachten ist wichtig, sie auszutesten schon zu prüfen und abzuwägen und ob, wann und wie sinnführend sind steht auf einem anderen Blatt.
    Besten Dank für diese Zusammenfassung.
    Zum Thema Parallax Scrolling und Effekt hätte ich einen weiterführenden Artikel für den interessierten Leser:
    http://ux4dotcom.blogspot.de/2013/08/ux-considerations-about-parallax_12.html

  5. Markus Wild Markus Wild

    Schöner Post mit tollen Beispielen. Design soll den Inhalt inszenieren und nicht umgekehrt. Mehr Klarheit hilft bei der Gestaltung genau so wie beim Konsumieren. Ich denke, wir werden Fortschritte machen in 2014 und hoffe, dass Apple’s Monokultur in Sachen Designvorbild weiter herausgefordert wird.

    Wenn es euch interessiert, wie die selben Strömungen sich auf’s Produktdesign auswirken werden, so schaut euch einmal diese Zusammenstellung von 14 Designtrends für 2014 an -> http://bit.ly/1chNOgm

    Einen guten Rutsch wünsche ich allen …

  6. Teehaus Otterndorf Teehaus Otterndorf

    Sehr schöner Artikel, der noch einmal viel Ideen liefert. Mir schwirren gerade noch zahlreiche Veränderungsmaßnahmen im Kopf herum, die bei uns im Shop durchgeführt werden können – Danke für die Inspiration!

  7. Nicola Straub Nicola Straub

    Apple als Vorbild bezüglich Konversion zu setzen, sehe ich immer kritisch. Denn Apple kann es sich schlicht leisten, „Schönheit“ vor Nutzungsfähigkeit zu setzen. Seit Jahren merke ich bei meinen seltenen Besuchen der Apple-Seiten, dass sie vom Nutzer richtig „Arbeit“ einfordern – für Apple Markenkern, für normale Shops dagegen aber ein absolutes No-Go.
    Und gerade bei der obengenannten Seite des Mac Pro fühle ich mich als Nutzer mit Desktopcomputer „reingelegt“ – obwohl links und rechts haufenweise (Leer-)Raum ist, muss ich mich mühsam durch eine unendlich lange Seite scrollen. Für unterm Stich relativ wenig Information. Mein erster Eindruck war „Mist, die Mobilweiche hat nicht funktioniert und ich hab hier die iPhone-Ansicht“.
    Insofern: Apple MUSS – aus der Marke des „quer denkenden“ heraus unkonventionell anders sein. Wegen der starken Nutzerbindung kann die Usability dagegen im Grunde völlig vernachlässigt werden, solange es eben unkonventionell aussieht. Allen anderen Shops würde ich davon ganz stark abraten!

  8. Manuel Ressel Manuel Ressel

    Hallo Frau Straub,

    danke für das Feedback.

    Ich denke, man sollte hier etwas differenzieren. Die vorgestellte Seite von Apple zum Thema Parallax Scrolling ist ja keine Produktseite bzw. Verkaufsseite im Shop, sondern eine Informationsseite. Zudem handelt es sich nicht um einen grauen rechteckigen „normalen“ Desktop-Rechner, sondern um einen Desktop-Rechner der weitergedacht wurde. Die ungewöhnliche Form hat ja einen Hintergrund. Und diesen Hintergrund und den Aufbau des Rechners durch Parallax Scrolling zu visualisieren, kann auch letztendlich aus Konversionssicht sinnvoll sein (wohlgemerkt auf einer Informationsseite), um den Mehrwert des Rechners deutlicher zu kommunizieren.

    Das Beispiel ist mit Sicherheit nicht auf alle Shops übertragbar. Das ist auch nicht die Idee hinter einem Artikel über neue Trends. Hier werden Trends aufgeführt und nicht im Detail Vor- und Nachteile analysiert.
    Pauschal aber die Methode für ALLE Shops auszuschließen, ist aus meiner Sicht der falsche Ansatz. Je nach Zielgruppe, Produkt und Aufstellung kann diese Methode durchaus Sinn machen. Bleibe ich immer nur bei bestehenden Konzepten, ist es schwierig sich von der Konkurrenz zu differenzieren und sich positiv herauszustellen. Das schadet auf lange Sicht gesehen definitiv der Konversionsrate. Gerade mit der Methode des Testings haben wir ja ein Mittel, um Auswirkungen solcher Umstellungen zu verproben und nicht ins Blaue hinein irgendwas zu ändern.

    Aber zu beiden Themen wird es auch noch ausführlichere Artikel geben, die das ausführlicher beleuchten, als ich es in einem Kommentar leisten kann. 😉

Trackbacks/Pingbacks

  1. […] Das Jahr neigt sich dem Ende zu und somit ist mal wieder der perfekte Zeitpunkt gekommen, um zurück zu blicken und zu schauen, welche Designthemen den E-Co  […]

  2. […] Das Jahr neigt sich dem Ende zu und somit ist mal wieder der perfekte Zeitpunkt gekommen, um zurück zu blicken und zu schauen, welche Designthemen den E-Commerce im letzten Jahr bewegt haben und welche Design Trends im nächsten Jahr interessant…  […]

  3. […] guten Überblick über Designer Trends bietet uns der Beitrag von Manuel Ressel auf konversionskraft.de an. Hier findet man ebenso andere spannende Vorträge zu […]

  4. […] Tipp: Denkt über Eure Webseiten nach. Es gibt klarer Design-Trends, die auch für touristische Seiten gelten. Zudem sind die Ansprüche Eurer Kunden andere […]

Hinterlassen Sie einen Kommentar