Während alle 2022 auf Erholung hoffen, werden Unternehmen mit ihren Strategien mutiger und innovativer. Um im E-Commerce konkurrenzfähig zu bleiben, präsentieren wir dir eine Liste der angesagtesten E-Commerce-Designtrends, auf die du 2022 ein Auge werfen solltest.

Die größten E-Commerce-Designtrends 2022

    1. Vertikal ausgerichtete Menüs
    2. Ungewöhnliche Layouts
    3. Die Grenzen verschwimmen lassen: physisch vs. digital
    4. Ausgefeilte Voice User Interfaces
    5. Das ganzheitliche E-Commerce-Erlebnis
    6. Stärkere Personalisierung
    7. Die Sinne ansprechen
    8. Von E-Commerce zu nachhaltigem E-Commerce
    9. Moderne Unternehmen setzen auf Headless Commerce

1.  Vertikal ausgerichtete Menüs

Jahrzehntelang haben alle ein horizontales Menü auf ihren Webseiten verwendet. Schließlich wurden E-Commerce-Plattformen nur auf großen Bildschirmen wie Desktops oder Laptops genutzt. Dies ändert sich rasend schnell, da mittlerweile überwältigende 68 % der User Webseiten über ihr Handy besuchen. Heutzutage müssen E-Commerce-Plattformen auch mobilfreundlich sein. Während Unternehmen damit begannen, responsive Webseiten zu erstellen, die sich an verschiedene Bildschirmgrößen anpassen, wurde schnell deutlich, dass einige horizontale Menüs nicht so gut auf den kleinen Bildschirmen von Mobilgeräten funktionieren. Daher ist dir vielleicht eine wachsende Anzahl von E-Commerce-Webseiten mit vertikal ausgerichteten Menüs aufgefallen.

Eine Website mit einem Vintage-Grammophon in der Mitte und einer Gitarre und einer Geige am Rand der Seite.
Eine Website, die Musikinstrumente verkauft. Von AR Shakir via Dribbble

Da ein vertikales Menü sowohl auf der rechten als auch linken Seite platziert werden kann, benötigt es nicht viel Platz und lässt sich besser anpassen. Wenn man es auf einem Desktop betrachtet, kann man einem vertikalen Menü Navigationslinks hinzufügen, ohne dass ein Dropdown-Menü deine Seite verdeckt. Und da es einer Liste ähnelt, dient ein vertikales Menü als wirkungsvoller Guide für User, wie sie deine Seite unkompliziert entdecken können. Vereinfacht gesagt sind vertikal ausgerichtete Menüs intuitiv und praktisch. Mittlerweile werden auf Webseiten sogar horizontale und vertikale Menüs miteinander kombiniert, wobei die horizontalen Menüs die primären Navigationslinks enthalten und die vertikalen Menüs die sekundären Links. Diese Herangehensweise sorgt für mehr Platz und bietet eine einprägsame Alternative zu den Standardnavigationen, an die wir so gewöhnt sind.

a website’s product page preview containing horizontal and vertical menus. In the middle of the page stands a man wearing black clothes and boots.
Vorschau einer minimalistischen Website. Via dribbble.com
A chef is holding a seashell over a tray of seafood
Rechtsbündiges, vertikales Menü, via Laurie Raphael

2. Ungewöhnliche Layouts

Ein Layout hilft dabei, Informationen auf einer Website auf attraktive und funktionale Weise anzuordnen. Viele Unternehmen verlassen sich dazu auf E-Commerce-Plattformen wie Shopify. Diese Plattformen bieten in der Regel eine Reihe von Standard-Designvorlagen an, die einer kleinen Anzahl von Strukturen wie dem einspaltigen Layout oder dem F-Layout folgen. Das Problem dabei ist, dass sie sich zwar leicht erstellen lassen, Usern aber keinerlei Überraschung mehr bieten. Mithilfe ungewöhnlicher Layouts gehen einige Unternehmen neue Wege. Ihre Webseiten, Apps und Online-Seiten integrieren Themen in ihr Layout, wie eine gut kuratierte, anspruchsvolle Kunstgalerie mit unendlichem Scrollen. Manche kombinieren auch mehrere Elemente, beispielsweise interaktive Videos und animierte Fotos, was zu einem interessanten Erlebnis führt. Die wahrscheinlichen Folgen? Längeres User Engagement, größerer Wiedererkennungswert und eine höhere Conversion Rate.

Zwei Smartphones geben eine Vorschau auf die Website von Christian Louboutin.
Christian Louboutins Webdesign für Mobilgeräte. Von Yana Pronina via Behance

Tipp: Unterscheide dich von anderen, indem du mit klassischen Vorgehensweisen brichst und deine kreativen Grenzen auslotest. Ein Layout ist nicht einzig und allein für die Ästhetik da. Betrachte dein Layout-Design als Gelegenheit, um die Geschichte deines Unternehmens zu erzählen.

OMBIA Studio website incorporating an asymmetrical layout.
Von Ben Mingo, Jason Bradley und Mouthwash Studio, via Behance
art ecommerce design
Design mit einem der größten E-Commerce-Designtrends dieses Jahres. By Julia Rusina via Behance

3. Die Grenzen verschwimmen lassen: physisch vs. digital

Da die Pandemie viele Menschen zu Hause gefangen hielt, haben Unternehmen auf E-Commerce-Plattformen gesetzt, um die Kundschaft zu erreichen, die sonst in physischen Geschäften einkauft. Und auch mit der langsamen Rückkehr der Normalität ist der Ruf nach Plattformen, die Platz für digitale und physische Interaktion schaffen, ungebrochen.

Kaffee-E-Commerce-App
Mockups von Ruby Lin, Dustin Kummer, Daniel Martin und Nicole Chen via Behance

Zusätzlich zu Onlineshops und E-Commerce-Webseiten entstanden Apps aller Art, um den Bedürfnissen der Menschen nach Bequemlichkeit und herausragendem digitalen Kundenservice gerecht zu werden. Diese Plattformen ersparen der Kundschaft einige Schritte, die sie unternehmen müssten, würden sie in einem Geschäft einkaufen. Ein physischer Laden würde es beispielsweise erfordern, dass man zu ihm fährt, mit vielen Menschen um sich herum einkauft und in der Schlange steht, um zu bezahlen. Mit diesem neuen E-Commerce-Designtrend geben Unternehmen den Leuten die Möglichkeit zu schauen, welche Produkte im Geschäft in ihrer Nähe auf Lager sind, Termine zu vereinbaren und ihre Rechnung online zu begleichen. Sie können auch ihren Kundenservice integrieren, indem sie Live Support über Chat oder Videoanrufe anbieten. In einem von Smartphones abhängigen Markt können Apps Wunder für ein Unternehmen und seine Endnutzer bewirken.

Die Startseite von Simple Showing, einer Immobilien-App, wird auf zwei Smartphones in der Vorschau angezeigt.
App von Simple Showing, designt von Typelab D
Five white smartphones display different pages of an on-demand manual labor app.
Render, eine App für Handwerksarbeiten, designt von AleksandarCucu

4. Ausgefeilte Voice User Interfaces

Du möchtest ein neues Level der Bequemlichkeit einbringen? Dann nutze die Kraft der künstlichen Intelligenz (KI).

Eine dunkelblaue und eine hellblaue Sprechblase in Form von Smartphones, die sich überlappen.
Illustration von Musique!

Unternehmen realisieren nun, welche Vorteile es hat, KI-Technologie durch eine sprachgesteuerte Benutzeroberfläche in ihren E-Commerce-Plattformen zu integrieren. Den Usern jemanden zur Seite zu stellen, der ihnen assistiert und mit dem sie sich unterhalten können, schafft ein personalisiertes und höchst effizientes Nutzererlebnis: Stell dir vor, man hätte sein persönliches Verkaufspersonal oder seine eigene Assistenz zu Hause. Um dies zu erreichen, kannst du damit beginnen, sprachgesteuerte Benutzeroberflächen in dein UX Design zu integrieren und in die Optimierung der Sprachsuche für deine E-Commerce-Website zu investieren. Suchen via Text werden in der Regel mit Phrasen durchgeführt, wohingegen Menschen, die die Sprachsuche verwenden, ganze Sätze sprechen. Genau wie bei der Suchmaschinenoptimierung musst du Stichwörter und Content einbauen, der „verbal“ sichtbar ist. Du kannst Stichwörter in Form von Fragen einbringen oder Stichwörter nutzen, die in den Featured Snippets von Google erscheinen – diese werden manchmal auch Position Zero genannt und sind die kleinen Infos, die über den ersten Suchergebnissen gezeigt werden. Und mit der fortschreitenden Entwicklung der KI-Technologie wird diese auch von immer mehr Menschen genutzt. Produkte und Dienstleistungen werden mit einem einzigen Sprachkommando oder einer Sprachsuche besonders gut zugänglich. Umfragedaten von Microsoft bekräftigen dies. 72 % der Befragten nutzen digitale Assistenten wie Siri, Alexa, Google Assistant und Cortana. Einkaufen, Termine machen und andere Alltagsdinge wurden dank künstlicher Intelligenz ebenfalls automatisiert.

Ein Homepod mini, drei iPhones und eine Apple Watch mit Siri-Funktionen.
Screenshot von Apples Siri via Apple

5. Das ganzheitliche E-Commerce-Erlebnis

Bei über 500.000 Marken und Milliarden von E-Commerce-Plattformen weltweit ist es schwierig, einen Markt für sich zu gewinnen. Um also konkurrenzfähig zu bleiben, müssen große Unternehmen zu One-Stop-Shops werden, indem sie ihr Angebot ausweiten. Größere E-Commerce-Marken können sich dabei an Facebook orientieren. Nachdem sie zusätzlich zu Facebook noch weitere Social-Media-Plattformen gekauft haben, expandieren sie nun in den Bereich der Social Technologies. Daher auch ihr Rebranding zu Meta. Durch ihre Expansion steigt die Wahrscheinlichkeit, dass immer mehr User Meta für ihre sozialen Medien und Social Technology nutzen.

Meta landing page
Metas Landingpage, via Meta

Die gleiche Expansion vollzieht Amazon, das größte E-Commerce-Unternehmen der Welt, welches sich vom Verkauf von Produkten in verschiedenen Kategorien hin zum Anbieter von Amazon Web Services entwickelt hat. Eine Diversifizierung durch neue Produkte und eine Expansion in verwandte Märkte ermöglicht es E-Commerce-Unternehmen, zu wachsen und einen größeren Markt für sich zu gewinnen.  

6. Stärkere Personalisierung

Die Pandemie hat bei vielen Unternehmen eine Bewegung ausgelöst, um den Kampf gegen COVID-19 zu unterstützen. Viele Unternehmen legen nicht mehr nur Wert auf finanzielle Gewinne, sondern wollen auch etwas für die Gesellschaft tun. Beispiele dafür sind Unternehmen, die Spendengalas veranstaltet und Ernährungsprogramme ins Leben gerufen haben sowie riesige Rabatte geben. Wie heißt es so schön: Gutes tun ist gut für’s Geschäft. Einer unserer größten E-Commerce-Designtrends in diesem Jahr ist die Schaffung eines personalisierten Erlebnisses, bei dem Rücksichtnahme und Sensibilität im Vordergrund stehen. Nimm zum Beispiel Bloom & Wild Flower Delivery. Sie bieten ihrer Kundschaft die Möglichkeit, sich von Newslettern abzumelden oder Inhalte nicht anzeigen zu lassen, bei denen es um bestimmte Gedenktage geht, die sie nicht feiern möchten. Diese Handlungsweise vermittelt Usern authentische Markenwerte, stärkt das Vertrauen, indem ihr Erlebnis stärker personalisiert wird, und zeigt die menschliche Seite deines Unternehmens.

Eine Liste von Marken, darunter Trouva, The Telegraph, Motley, Papier und SilkFred
Screenshot von allen Marken, die an der Marketingkampagne von Bloom & Wild teilgenommen haben. Via LVLY
Auf der Seite wird eine Überschrift angezeigt, die lautet: „Möchtest du keine Erinnerungen an den Muttertag? Kein Problem." und einen begleitenden Text, der erklärt, wie sie sich abmelden können.
Screenshot einer Seite, auf der man sich von allem, was mit dem Muttertag zu tun hat, abmelden kann. Via Bloom & Wild

7. Die Sinne ansprechen

E-Commerce-Plattformen können zwar in hohem Maße von fortschrittlicher Technik wie virtueller Realität profitieren und mit ihr ein stärkeres, digitales Erlebnis schaffen, das mehrere Sinne anspricht, aber es gibt auch weniger komplexe Methoden, die du implementieren kannst. Eine gekonnte Kombination aus Farbtönen, Farbverläufen, hervorragenden Fotos, stilisierten Schriften und die Verwendung abstrakter oder sogar interaktiver Formen in deinem Layout sorgen für die richtige Stimmung.

Kerzen-E-Commerce-Site
Design von  Karina Apukhtina via Behance

Du könntest Soundeffekte hinzufügen, um dein UI Design zu verbessern, zum Beispiel ein befriedigendes „ding“, wenn man auf einen Button klickt, um eine Bestellung zu bestätigen. Du könntest auch Hover-Effekte animieren. Sagen wir, du hast ein Bild vom Meer als Hintergrundbild auf deiner Website. Wenn ein User mit dem Mauszeiger über das Bild fährt, könntest du das Geräusch und die Bewegung der Wellen implementieren. Dies ist besonders hilfreich für die Barrierefreiheit, da du Ton und Bild so gestalten kannst, dass sie die User durch die Seite führen. Darüber hinaus kannst du erläuternden und spannenden Text einarbeiten, der zum Nachdenken anregt, um deinen visuellen Content zu untermauern und deine User in das Design eintauchen zu lassen.

E-Commerce-Site für Hautpflegemarken
Von  Hrvoje Grubisic via Behance

Bei der Wahl der Fotos achtest du am besten darauf, hochwertige Bilder zu wählen, die vermitteln, wie die Kundschaft auf deine Marke reagieren soll. Eine Food-Website mit einer appetitlichen Soße und einem Teller voll gebratenem Fleisch kann ziemlich hungrig machen. Die cremige und weiche Textur eines Hautpflegeprodukts, das auf das Gesicht einer Frau aufgetragen wird, kann jemanden ansprechen, der auf der Suche nach einem sanften und feuchtigkeitsspendenden Hautpflegeprodukt ist. Wie du oben sehen kannst, kann das minimalistische Layout einer Website ein sauberes, authentisches und zeitgemäßes Gefühl erzeugen, das zur Produktverpackung passt.  

8. Von E-Commerce zu nachhaltigem E-Commerce

Onlineshopping gibt dir die Möglichkeit, überall zu kaufen und so Zeit und Geld für den Weg zum Geschäft zu sparen. Scheinbar ist es also eine gute Sache für die Umwelt. Laut den Vereinten Nationen ist in Regionen wie Südostasien die Luftverschmutzung um ganze 40 % zurückgegangen, da die Menschen weniger draußen unterwegs sind. Doch auch wenn die Umwelt von der zurückgegangenen Luftverschmutzung während des Lockdowns profitiert hat, ist die Nachfrage nach Einwegplastik gestiegen.

Vier Kraftkartons mit dem Text auf der Oberseite des Kartons, der "our way around" sagt.
Umweltfreundliches Verpackungsdesign von TikaDesign

Um dem entgegenzuwirken, gibt es eine anhaltende Verschiebung auf dem Markt, bei der die Kundschaft umweltbewusster wird und von den Marken, die sie kaufen, erwartet, dass sie für ihre Auswirkungen auf die Umwelt Verantwortung übernimmt. Über 60 % der Amerikaner kaufen bewusst bei umweltfreundlichen Marken und diese Nachfrage hat zur Entstehung des nachhaltigen E-Commerce geführt. Dies bezieht sich auf eine Reihe von Marken, die umweltfreundliche Lösungen in ihre Prozesse einbinden. Das bedeutet, mit weniger umweltschädlichen Materialien, Bioplastik, wiederverwendbaren Verpackungen, Papierutensilien und anderen ungiftigen Materialien zu arbeiten. Marken ermutigen ihre Kundschaft auch aktiv, auf eine Lieferung noch am selben Tag zu verzichten, und fassen ihre Bestellungen zusammen, um Verpackungsmaterial zu sparen. Du kannst damit rechnen, dass immer mehr Lieferdienste elektrische Fahrzeuge und Fahrräder nutzen werden, um Pakete auszuliefern. Und die Regierungen ziehen mit, indem sie ihre Bemühungen intensivieren, den Verkauf von Benzin- und Dieselfahrzeugen zu verbieten, was zwischen 2030 und 2035 umgesetzt werden soll.

Eine weiße Leinentasche mit einem grünen Kreis, der an einem Zweig mit Blättern befestigt ist, wird gegen eine grüne Wand gehalten.
Wiederverwendbarer Beutel von Bojana

Ein weiteres Problem stellen Rücksendungen von Onlinehändlern dar. Daten von Statista zeigen, dass die Kosten für Warenrücksendungen mittlerweile bei über 500 Milliarden Dollar liegen, da die gelieferten Waren laut der Website nicht den Erwartungen der Menschen entsprechen. Daher werden Marken verantwortungsvoller und posten vollständige Produktbeschreibungen, detaillierte Produktfotos und integrieren Feedback- und Kommentarbereiche auf ihren Webseiten. Dadurch geben sie der Kundschaft alle vor dem Kauf benötigten Informationen, was wiederum die Wahrscheinlichkeit senkt, dass die Ware zurückgeschickt wird.  

9. Moderne Unternehmen setzen auf Headless Commerce

Technische Innovationen wie Sprachassistenten und Virtual Reality haben den Weg für verschiedene großartige Plattformen und Funktionen bereitet. Mehrere Plattformen zu haben kann zwar dabei helfen, mehr Menschen zu erreichen, aber sie in ein System zu integrieren, kann nicht nur zeitaufwändig und komplex sein, sondern auch die Verwaltung deines Servers beeinträchtigen. An dieser Stelle kommt Headless Commerce ins Spiel. Headless Commerce ist ein Prozess, bei dem diverse User Interfaces (Frontend) von der Server-Seite (Backend) entkoppelt werden. Dies ermöglicht es dir, die wichtigsten Funktionen in deinem digitalen Ökosystem – Webseiten, Microsites, mehrere Apps und VR- oder AR-Funktionen – übereinander zu legen und auf effiziente Weise anzupassen, während dein Backend intakt bleibt. Jede wichtige Komponente kann auch problemlos unabhängig bearbeitet und aktualisiert werden, ohne auf Software Developer angewiesen zu sein. Infolgedessen bietet Headless Commerce Flexibilität, um zu wachsen und den grenzenlosen Bedürfnissen deiner User gerecht zu werden, was zu einem nahtlosen Nutzererlebnis über alle Kanäle hinweg führt. Bekannte Marken wie Nike, Target, Redbox und Annie Selke setzen bereits auf Headless Commerce.

Ein Mann mit schwarzer Mütze richtet seine iPhone-Kamera auf ein SNKRS-Poster, um ein Paar schwarze Nike-Schuhe zu kaufen.
Nikes AR-App via engadget
Three iPhone screens displaying a camera scanning a person’s feet and showing a pair of white Nike shoes with a 9.5 shoe size.
Nikes AR-App via Engadget

Vor allem Nike hat React SPA und Node,js genutzt – Tools zur Erstellung von Benutzeroberflächen – um eine AR-App zu entwickeln, die Bots fern hält, welche von Wiederverkäufern verwendet werden, um an limitierte Produkte zu kommen. Das Feature erhöht auch ihre Marktreichweite unter Usern von Mobilgeräten und bietet ein interaktives Erlebnis. In Zusammenarbeit mit Chefkoch David Chang und über die Nike-App können die Menschen in Changs Restaurant Momofuku mit der Kamera auf eine physische Speisekarte zeigen und das gewünschte Modell kaufen. Diejenigen, die nicht ins Restaurant gehen können, können dennoch die limitierten Schuhe kaufen, indem sie die Kamera auf die Webversion der Speisekarte halten oder über Poster von SNKRS. Nike hat zudem eine weitere AR-App, die genau deinen Fuß vermisst, und du so problemlos die richtige Größe bekommst. Das bedeutet auch weniger Warenrücksendungen für Nike, was definitiv keine schlechte Sache ist.

Schöpfe dein volles Potenzial im E-Commerce aus

Die sich ständig verändernde E-Commerce-Landschaft mag überwältigend wirken. Aber eine Sache ist sicher: Die Zukunft des E-Commerce sieht rosig aus. Bei einem prognostizierten E-Commerce-Umsatz von über 1 Billion Dollar bis 2022 allein in den USA kann der Wettbewerb hart aber lohnend sein. Lege einen Gang zu und bahne dir mit diesen E-Commerce-Designtrends deinen Weg zum Erfolg.

Du möchtest die perfekte E-Commerce-Website für dein Unternehmen?
Dann arbeite mit unserer talentierten Design-Community.