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.

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

Satorisan

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.

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

V76.com

Skinny Ties

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

Beispiel Responsive Design: Hannover 96

Beispiel Adaptive Design: boozt.com

Weiterführende Quellen:

• Infografik: Mobile Commerce Deutschland – die TOP 100 Shops im Benchmark
• 9 basic principles of responsive web design

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“:

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

Lexi Miller

Born Shoes

Alfredo Gonzales

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.