E-Commerce Design Trends 2015

Am Ende des Jahres ist es mal wieder Zeit den Blick nach vorne zu richten und zu schauen, welche Designtrends im E-Commerce für das nächste Jahr eine wichtige Rolle spielen werden.

Nach wie vor wird das Thema Mobile einen entscheidenden Einfluss auf Entwicklungen im E-Commerce haben.

Neben dem Thema Mobile sehe ich allerdings auch einen Trend zu mehr Persönlichkeit im E-Commerce. Nutzer, die Ihren Onlinekauf mit der Preissuchmaschine einleiten und bei dem günstigsten Anbieter die Bestellung abschicken, wird es wahrscheinlich immer geben. Daneben entsteht aber auch eine starke Bewegung, die mehr Persönlichkeit und damit auch Sicherheit verlangt. Was steckt hinter dem Shop? Welche Geschichte hat der Shop? Bin ich hier gut aufgehoben? Das sind Fragen, die ein Shop zukünftig verstärkt beantworten muss, um sich von anderen Shops abzuheben und eben nicht nur über den Preis zu verkaufen.

Aber kommen wir zu den Designtrends im Detail, die aus meiner Sicht den E-Commerce im Jahr 2015 prägen werden.

ecommerce-design-trends

Mobile Patterns verbreiten sich auch auf dem Desktop

Mobile UX-Patterns werden aufgrund der starken Verbreitung von Smartphones und Tablets relativ schnell erlernt und akzeptiert. Das Smartphone ist ein ständiger Begleiter und immer griffbereit. Kein Wunder also, dass Gestaltungsgrundsätze und Patterns aus dem mobilen Bereich sich auch auf dem Desktop wiederfinden. Auch in diesem Kontext können mobile Patterns ihre Vorteile ausspielen, doch nicht jedes Pattern muss auch zwangsläufig in der Desktop-Umgebung funktionieren.

Beispiele:

ETQ

ETQ nutzt den Off-Canvas für die Vorschau des Warenkorbs. Wichtig ist, dass der Nutzer dieses Pattern kennt und damit umgehen kann. Ansonsten könnte es für den Nutzer seltsam wirken, wenn der eigentliche Inhalt zur Seite geschoben wird.

ETQ nutzt den Off-Canvas für die Vorschau des Warenkorbs. Wichtig ist, dass der Nutzer dieses Pattern kennt und damit umgehen kann. Ansonsten könnte es für den Nutzer seltsam wirken, wenn der eigentliche Inhalt zur Seite geschoben wird.

Satorisan

Satorisan Desktop

Ungewöhnlich ist die Buy-Box am unteren Seitenrand. Dafür steht das Produkt vollkommen im Fokus.

Detaillierter bin ich zu dem Thema schon in dem Artikel „5 Mobile Patterns, die neue UX-Trends im E-Commerce prägen“ eingegangen.

Nearly Flat Design

Die Weblandschaft wird flach. 2012 hat Microsoft mit dem Modern-UI-Ansatz eine Bewegung in Gang gesetzt, die sich rasend schnell verbreitet hat. Im UI-Design hat sich Apple ebenfalls von ihrem Skeumorphism Design entfernt und ist seit iOS 7 in der Designsprache flacher geworden. Auch Google hat mit seinem Material Design eine flache Sprache gewählt.

Doch schaut man sich vor allem die Designansätze von Apple und Google an, so sieht man, dass man sich noch nicht ganz von dreidimensionalen Räumen und Schatten trennen kann, sondern diese nach wie vor dezent einsetzt.

So können Elemente in Googles Material Design in verschiedenen Höhen im Raum verteilt sein. Die unterschiedliche Höhe wird durch Schatten dem Nutzer verdeutlicht.

Quelle: http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation

Quelle: http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation

Dieses Vorgehen ist gerade im E-Commerce ein sinnvoller Ansatz. Nicht alle Elemente sind gleich wichtig und interessant für den Nutzer. Im Flat Design ist man allerdings beschränkt auf Farben, Größe und Kontrast, um Elemente von anderen Elementen visuell abzuheben. Durch eine Auflockerung des Flat Designs erweitern sich diese Möglichkeiten, so dass man auch farblich gleichwertige Elemente visuell priorisieren kann.

Beispiele:

Swiss.com

Modernes flaches Design doch für einzelne Elemente werden nach wie vor Schatten oder Hervorhebungen genutzt.

V76.com

vaughn-productpage

Skinny Ties

skinny-ties-productpage

Weiterführende Quellen zum Thema Flat Design:

Responsive Webdesign ist nicht der heilige Gral

Gerade mal 22% der Top 100 Onlineshops aus Deutschland setzen auf ein Responsive Layout. Bei Responsive Webdesign steht eine flexible Anpassung des Layouts und der Informationsaufbereitung über alle erdenklichen Bildschirmgrößen im Vordergrund. Das Gerät an sich ist zunächst nebensächlich. Zunächst mal klingt das natürlich sehr gut. Denn damit ist man für die stetigen Änderungen der Geräte gewappnet und muss sich keine Gedanken machen, dass auf einem Gerät die Inhalte nicht richtig dargestellt werden.

Per Definition finden bei Responsive Webdesign die Anpassungen an den jeweiligen Viewport rein mit clientseitigen Techniken statt. Letztendlich heißt das, dass man den gleichen Inhalt und den gleichen Code für alle Auflösungen und Viewports hat. Schaut man sich also ein Layout auf dem Desktop an, so wird trotzdem der Code für die Tablet-Ansicht mit geladen, obwohl dieser gar nicht benötigt wird. Umgekehrt werden auf dem Smartphone die gleichen physischen Bildergrößen verwendet, wie in der Desktop-Variante. Das heißt der ausgespielte Code ist nicht auf das jeweilige Gerät hin optimiert und bietet deshalb dem Nutzer nicht die beste Usability.

Um dem Nutzer eine optimale Usability zu bieten, haben sich andere Ansätze entwickelt. Häufig im Einsatz befindet sich ein Adaptive Design, bei dem das Layout auf bestimmte Geräte hin optimiert wird, wie z.B. Desktop, iPad und iPhone. Die Breakpoints werden entsprechend für diese Geräte optimiert, aber auch Inhalte und Dateigrößen werden je nach Gerät angepasst ausgespielt (Stichwort: Conditional Loading - Laden von Inhalten nach Bedarf, z. B. wenn Retina > Bildauflösung x 2). Andere Geräte werden dabei natürlich ebenfalls berücksichtigt, nutzen aber unter anderem nicht die komplette Breite aus. Der Vorteil von Adaptive Design ist also die optimierte Darstellung für das jeweilige Gerät. Zudem ist die Konzeption und Entwicklung nicht so komplex, wie bei einem Responsive Design. Für die Breakpoints können noch feststehende Wireframes und Designs entwickelt und abgestimmt werden. Bei einem Responsive Design hingegen ist es notwendig, recht früh schon in die Entwicklung zu gehen, da man das Verhalten von mehreren Breakpoints nicht mehr sinnvoll als Wireframes abbilden kann.

So kann es also durchaus vorkommen, dass Vertreter des Responsive Design Ansatzes eine wesentlich höhere Investition hatten, während die Conversionrate auf mobilen Geräten im Vergleich zur Konkurrenz geringer ausfällt.

Als Zwischenweg zwischen den beiden Ansätzen entwickelt sich zudem der Ansatz Responsive Design + Server Side Components (RESS). RESS liegt ein Responsive Layout zugrunde, dass sich an jeden Viewport anpasst. Allerdings werden gerätespezifisch Layoutelemente serverseitig ausgeliefert. Der Ansatz verbindet also die Vorteile von beiden Welten. Lediglich der Aufwand ist nach wie vor sehr hoch.

Überblick Responsive Design, RESS und Adaptive Design

uebersicht-responsive-adaptive

Beispiel Responsive Design: Hannover 96

Der Onlineshop von Hannover 96 passt sich kleinteilig an verschiedene Auflösungen an.

Der Onlineshop von Hannover 96 passt sich kleinteilig an verschiedene Auflösungen an.

Beispiel Adaptive Design: boozt.com

Boozt hat für Tablet, Laptop und Desktop nur eine Variante mit einer festen Breite. Lediglich für Smartphones wird eine flexible Variante ausgespielt mit angepasstem Layout und Content für mobile Geräte.

Boozt hat für Tablet, Laptop und Desktop nur eine Variante mit einer festen Breite. Lediglich für Smartphones wird eine flexible Variante ausgespielt mit angepasstem Layout und Content für mobile Geräte.

Weiterführende Quellen:

Branding, Brand Experience und Kundenbindung

Es ist ja so einfach im Web zu verkaufen. Vom Neffen mal eben schnell ein Logo zimmern lassen, bei einem Web-Baukasten einen Shop gemietet, Design ausgesucht, Logo hochgeladen, Produkte eingestellt und schon können die Kunden kommen. Naja, ganz so einfach ist es eben dann doch nicht.

Es gibt so viele Onlineshops und der Konkurrent ist nur einen Klick entfernt. Nur über den Preis zu verkaufen, ist aus wirtschaftlicher Sicht ein kostspieliges Vorgehen. Man beschränkt immer weiter seine eigene Marge und sobald ein Konkurrent den Preis unterbietet, ist man gezwungen darauf zu reagieren. Zudem ist der Preis alleine keine Maßnahme, über die man Kunden langfristig an sich binden kann. Neukunden gewinnen ist allerdings aufwändig und teuer. Ohne ein Branding – das Auftreten als Marke – wird der Besuch nur ein flüchtiger Kauf bleiben, der nicht in Erinnerung bleibt.
Deshalb entsteht ein Bewusstsein dafür, sich als Marke im Kopf des Nutzers festzusetzen und ein einheitliches Markenerlebnis über alle Touchpoints des Nutzers mit der Marke zu etablieren. Denn letztendlich bleibt nur ein positives Einkaufserlebnis im Kopf des Nutzers als Erinnerung erhalten und nicht unbedingt der günstige Preis.

Beispiel „Virgin America“:

„Spaß“ wird bei Virgin America als einheitliches Markenerlebnis auch auf den Buchungsprozess übertragen. Bei der Platzwahl kann man z.B. sein eigenes lustiges Avatar für die Reservierung auswählen.

„Spaß“ wird bei Virgin America als einheitliches Markenerlebnis auch auf den Buchungsprozess übertragen. Bei der Platzwahl kann man z.B. sein eigenes lustiges Avatar für die Reservierung auswählen.

Weitere Beispiele zu dem Thema Brand Experience hat mein Kollege Marcel Licht in dem Artikel „Wer die Conversion Rate steigern will, muss die Brand Experience optimieren.“ zusammengefasst.

Unternehmenswerte und -geschichte treten stärker als Alleinstellungsmerkmal in den Vordergrund

Mit der stärkeren Ausrichtung auf die Marke stellt sich für den Nutzer die Frage, was hinter der Marke steht. Für welche Werte steht das Unternehmen ein und welche Geschichte hat das Unternehmen? Sind diese Elemente bisher auf Unternehmensseiten oder Landingpages außerhalb des Shops nur einsehbar, werden diese verstärkt auch im Shop selbst kommuniziert. Ziel ist es dadurch eine Alleinstellung gegenüber Konkurrenten zu etablieren. Eine Unternehmensgeschichte kann kein anderes Unternehmen einfach kopieren. Auch die Werte eines Unternehmens können nicht einfach mal eben schnell übernommen werden. Sie müssen in der DNA des Unternehmens verankert sein und benötigen Zeit, um sich auch fest zu etablieren.

Beispiele:

hessnatur

hessnatur nutzt den Off-Canvas um die Unternehmenswerte zu kommunizieren – ein wichtiges Alleinstellungsmerkmal für hessnatur.

hessnatur nutzt den Off-Canvas um die Unternehmenswerte zu kommunizieren – ein wichtiger Alleinstellungsmerkmal für hessnatur.

Lexi Miller

Lexi Miller nutzt auf der Startseite eine große Fläche, um die Besonderheiten der Produkte zu erläutern und sich im Bereich Sportmode für Frauen deutlich von anderen Marken abzugrenzen.

Lexi Miller nutzt auf der Startseite eine große Fläche, um die Besonderheiten der Produkte zu erläutern und sich im Bereich Sportmode für Frauen deutlich von anderen Marken abzugrenzen.

Born Shoes

Born shoes hat eine separate Seite, auf der dem Nutzer die handgearbeiteten Schuhe aus hochwertigen Materialien und mit besonderen Details dem Nutzer näher gebracht werden.

Born shoes hat eine separate Seite, auf der dem Nutzer die handgearbeiteten Schuhe aus hochwertigen Materialien und mit besonderen Details dem Nutzer näher gebracht werden. Im Shop selbst integriert Born shoes Elemente, die auf die Seite verlinken. (Klick auf Bild für komplette Ansicht)

Alfredo Gonzales

Alfredo Gonzales nutzt seine Geschichte in Form von Bild, Text und Video, um den eigenen Lebensstil auf seine Socken zu übertragen.

Alfredo Gonzales nutzt seine Geschichte in Form von Bild, Text und Video, um den eigenen Lebensstil auf seine Socken zu übertragen.

Mehr zu dem Thema werteorientierter Vorteile hat mein Kollege Ronald Grimminger auch in dem Artikel „Mit werteorientierten Unique Value Propositions zu einer effizienteren Conversion-Strategie“ zusammengefasst.

Fazit

Der Nutzer rückt im E-Commerce noch stärker in den Mittelpunkt. Eine persönlichere Ansprache und stärkere Annäherung und Ausrichtung auf den Nutzer wird aus meiner Sicht deshalb im nächsten Jahr deutlicher sichtbar werden. Ein Shop sollte Gesicht zeigen und sich als Marke positionieren, um den Nutzer langfristig an sich zu binden.

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

P.S.: Noch mehr Design-Inspiration aus dem Bereich E-Commerce von Landingpage bis Checkout finden Sie auch auf meiner E-Commerce Design Gallery conversiondesign.de.

  • Teilen
  • Send to Kindle
  • http://kKrft.ly/MIi
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.

, ,

12 Reaktionen auf  “E-Commerce Design Trends 2015”

Kommentare

  1. Dirk Dirk

    Gerade die Mobile Optimierung wird in den nächsten Monaten sehr entscheidend sein. Auch weil Google diesbezüglich die Daumenschrauben weiter anziehen wird. Dass Mobile Design nicht immer auf dem Desktop funktionieren muss, habt ihr ja schon an anderer Stelle geschrieben. Die Frage ist, ob es überwiegend gut oder überwiegend schlecht funktioniert, wenn man das Mobil Design auf den Desktop überträgt. Habt ihr hier Erfahrungswerte?

  2. Niels Niels

    Vielen Dank für den ausführlichen Ausblick. Besonders erstaunt war ich, dass nur ein kleiner Teil der großen Shops für mobile Anwendungen optimiert ist. Was aber (so denke ich) auch in 2015 wichtig sein wird, ist neben dem Design, die Geschwindigkeit und Übersichtlichkeit.

  3. Fabs Fabs

    Sehr gute Beispiele und Hinweise, aber ich muss sagen, dass ich ein großer Freund von Responsive Design bin. Beim Foundation Framework (V5) gibt es auch Interchange-Elemente out of the box, also ist das Problem die gleichen Elemente auf Desktop und Mobile zu laden einfach nicht existent. Das Problem am Responsive Design ist aus meiner Sicht nicht, dass es fixe & Geräteunabhängige Breakpoints hat (das finde ich sogar gut), sondern, dass Entwickler und Designer es einfach nahezu nicht hinkriegen responsiv zu denken bzw umzudenken.

    Ich bin der festen Überzeugung, dass responsive Shops und Websites 2015 – 2018 dominieren werden. Es ist effektiver eine Lösung zu entwickeln und diese auf allen Geräten zu spielen statt einzeln zu entwickeln, die Features sind die gleichen und das Shopping-Erlebnis ist stringent.
    Noch dazu bin ich der Überzeugung, dass der Nutzer sich wahnsinnig schnell gewöhnt, da Google, Facebook, Apple,… alle mit responsiven Seiten arbeiten.

    MFG

  4. LPunkt LPunkt

    Ich suche schon seit einiger Zeit ein paar Infos zum Thema zentrierter Content. Ich weiss, Studien/Test etc. sagen immer wieder der User ließt in F-Form, also links-gerichtet. Das hatten wir am Anfang auch alles und eine Abruchrate von 56%. Wir hatten jetzt einige Zeit einen A/B-Test durchgeführt, gleicher Inhalt, gleiche Grafik und alles zentriert. Die Abbruchrate ist seitdem auf 19% gesunken, was sich auch sehr positiv auf das Bestellvolumen ausgewirkt hat. Weiterhin ist die Durchschnittszeit von 2:59 Minuten auf 5:31 gestiegen (Desktop) und Mobil sind die Zeiten ähnlich. Gibt es dazu irgendwelche Berichte, Erfahrungen usw.?

  5. Max Max

    Servus!
    Im Abschnitt „Responsive Webdesign ist nicht der heilige Gral“ schreibst du 2x von Breakpoints. In meinen Augen macht das in dem Kontext wenig Sinn. Kann es sein dass du stattdessen Viewports meinst?

    Schöne Grüße
    Max

  6. Strelow Strelow

    Wir sind gerade dabei unseren Shop komplett neu zu gestalten, dieser Artikel hat uns einige Entscheidungen erleichtert, vielen Dank!

  7. Thorsten Thorsten

    Ein sehr übersichtlicher Artikel, der uns hilft, bei unserer Shopüberarbeitung das Thema responsive richtig umzusetzen. Vielen Dank!

Trackbacks/Pingbacks

  1. […] erwartet uns 2015 im Hinblick auf Design? Konversationskraft gibt Einblicke zu denDesigntrends von […]

  2. […] Auch für eCommerce-Anwendungen werden zunehmend Design Patterns und Gestaltungstrends wichtig – konversionskraft.de fasst dafür die wichtigsten Trends fürs nächste Jahr zusammen. […]

  3. […] Welche Design-Trends gibt es 2015 im E-Commerce?  – Konversionskraft berichtet. […]

Hinterlassen Sie einen Kommentar