So kreierst Du einzigartige User Experiences

To the English article

Ob es zu einer Transaktion kommt, ist oft eine unterbewusste Entscheidung, die von der Darstellung der Produkte sowie der Umgebung, in der das Produkt präsentiert wird, beeinflusst wird.

Das gilt sowohl für Kaufentscheidungen im stationären Handel als auch online – wenn sich der Kunde von der Atmosphäre angesprochen und wohl fühlt, ist es wahrscheinlicher, dass es zu einem Kauf kommt. Stationäre Händler erzeugen dies durch gutes Licht, ansprechende Dekoration der Ladenfläche und natürlich eine optimale Positionierung der Produkte. Doch wie erzeugst Du das im Onlineshop?

Gerade im Onlinehandel sind User Experience und Usability essenziell, um ein optimales Einkaufserlebnis zu schaffen. Ein gutes UX-Design ist dabei entscheidend. Wir zeigen Dir, worauf es bei der Gestaltung Deines Onlineshops ankommt – und zwar anhand von Onlineshops basierend auf Shopware 6.

Warum ist UX Design wichtig und wie hilft es Dir für Dein Business

Die User Experience (UX) beschreibt das Nutzererlebnis, das während des Surfens durch den Onlineshop erzeugt wird. Das geschieht sowohl auf funktionaler als auch besonders auf emotionaler Ebene und trägt zu einer guten Customer Journey bei. Durch eine einschlägige User Experience bauen Deine Kunden eine emotionale Beziehung zu Deinen Produkten und zu Deiner Marke auf. Es entsteht ein Vertrauen, das gleichzeitig Deinem Business zu Gute kommt und Dir hilft, User als Kunden zu gewinnen. Beim UX Design werden die User in den Mittelpunkt der Gestaltung. Hingegen beschäftigt sich das User Interface (UI) mit der Benutzeroberfläche. Es beschreibt die Benutzerschnittstelle, mit der die User eine Software steuern können. Das Ziel ist es, die Verwendung der Software, aber auch des Onlineshops, so simpel und intuitiv zu gestalten. Mit Hilfe von UI Design wird der gesamte Look der Brand samt Schrift, Farbe, usw. transportiert.
Ein gutes User Interface führt dazu, dass sich Deine Besucher schnell und einfach im Shop zurechtfinden. Die optimale Customer Journey erreichst Du durch das harmonische Zusammenspiel von User Experience und User Interface – es ist das Look and Feel Deines Onlineshops. Finde die perfekte Symbiose aus beiden für Dein Onlinebusiness und transportiere Deine Markenwerte und die Corporate Identity, um Dich von Deinen Mitbewerbern abzuheben.

Planung Deines UX Designs

Vor der Umsetzung Deines UX Designs gilt es vorab genau zu planen, welche Botschaft Du in Deinem Onlineshop transportieren möchtest und wie das eigene Unternehmen, die Marke und die Werte präsentiert werden. Dabei spielen diese Aspekte eine zentrale Rolle:

• Wer ist die Zielgruppe und wie kannst Du sie am besten ansprechen
• Wie kann der User aktiviert und in die Journey interaktiv eingebunden werden
• Worauf soll der Fokus liegen
• Wie kannst Du den User sinnvoll durch den Shop führen

Ist die strategische Ausrichtung von Anfang an klar, kann die Journey aufgebaut werden. Wenn Du das richtige Shopsystem gefunden hast, kann das Nutzungserlebnis Deiner Kunden starten.
Mit Shopware 6 hast Du die optimale Basis, um eine attraktive User Experience mit Hilfe des Features Erlebniswelten unkompliziert aufzubauen. Wir zeigen Dir Best Practices zum Thema UX Design anhand gut gelungener Shopware 6 Shops.
Gemeinsam mit Marie Reckendrees, Product Owner CMS bei Shopware, möchten wir Dir Tipps für ansprechendes UX Design geben: “Wenn Du herausragende Einkaufserlebnisse schaffen möchtest, die Kunden mit der Marke interagieren lassen, musst Du Dich auf die Verschmelzung von Content und Commerce konzentrieren. Genau an dem Punkt muss Branding stattfinden – an dem Punkt, wo Geschichten erzählt werden und der Shop mehr wird als der Verkauf von Produkten. Mit unserem starken Headless-CMS wollen wir Dir genau das ermöglichen.“

1. Die Macht der Bilder

Emotionale Einkaufserlebnisse helfen dabei, Deine Besucher von Deiner Marke zu überzeugen. Bekanntlich sind Bilder dabei unverzichtbar. Doch Bild ist nicht gleich Bild.
Durch die Macht des Bildes kannst Du Deine Produkte optimal in Szene setzen, eine eigene Geschichte erzählen und das Produkt für Deine Besucher greifbar machen. Dadurch kann sich der Betrachter an die dargestellte Situation aus seinen eigenen Erfahrungen erinnern und verbindet im besten Fall ein positives Gefühl, Geruch, Geschmack und Haptik damit. Generell gilt: Menschen betrachten Menschen. Durch Personen können Emotionen noch besser transportiert werden und der Zuschauer kann sie leichter in die abgebildete Person hineinversetzten.
Ein gutes Beispiel dafür findet sich im Onlineshop von Yope, der von dem Shopware Solution Partner Divante umgesetzt wurde:

Hier wird die Haarpflege der Produktlinie “Orientalny ogród” - auf Deutsch “Orientalischer Garten” - vorgestellt. Das Headerbild der Kategorie besteht aus drei Bildern. Durch die Kombination der drei Bilder können sich die User in die dargestellten Situationen hineinversetzten. Wir alle kennen das gute Gefühl einer erholsamen Dusche oder eines entspannenden Bades. Die Darstellung des Produktes, das im Wasser umgeben von schwimmenden Blumen steht und auch der Name der Produktlinie lassen auf den Geruch des Produktes schließen und den persönlichen Nutzen erkennen. Das Zusammenspiel der Bilder entfacht ein positives Gefühl und der Betrachter möchte mehr über das Produkt erfahren.

2. Herausragendes Zusammenspiel aus Bild und Text

Nicht nur emotionale und aussagekräftige Bilder spielen eine wichtige Rolle für die User Experience, sondern auch der Text auf und neben den Impressionen. Dieser sollte inhaltlich eine sinnvolle Ergänzung zum Dargestellten sein. Ein harmonisches Zusammenspiel aus Bildsprache, Text und Schrift führt zu einem stimmigen Gesamtbild und macht die Markenwerte erlebbar.

Das lässt sich hervorragend im ames Shop erkennen:

Hier wird keine Standardschrift verwendet. Im Gegenteil: Die Schrift fügt sich hervorragend in das Gesamtbild ein. Mehr noch, es schmiegt sich an die Form der Produkte an. Gleichzeitig verweist der Text auf die verwendeten Materialien. Ames verbindet traditionell kolumbianische Handwerkskunst mit modernem und zeitlosem Design. Ohne die Marke zu kennen, lässt sich direkt auf die Produkte und die Werte der Marke schließen.

3. Durch Farben Akzente und Highlights setzen

Im ames Shop lässt sich auch das Thema Farben gut erkennen. Die kolumbianische Kultur ist bunt und vielfältig. Genau das spiegelt sich auch in der Farbwelt des Shops wider. Die verwendeten Farben sind sehr kräftig und mutig und bilden einen angenehmen Kontrast zu den Produkten. Außerdem werden durch Key-Farben Highlights gesetzt. Das in diesem Fall verwendete Rosa dient als Eyecatcher und führt den Blick automatisch zum hervorgehobenen Text.
Durch das ausgewogene Zusammenspiel von Formen, Farben, Schrift und Text wird die Geschichte der Marke sehr gut transportiert. Es wird eine herausragende User Experience kreiert, wodurch sich ames von der Masse unterscheidet.

4. Keep it simple – versuch’s mit Weißraum

Eine herausragende User Experience zeichnet sich durch eine gute Führung durch den Shop aus – wie ein roter Faden in einer Geschichte. Dabei helfen Farben, Formen und Schrift. Doch sollte es nicht zu überladen sein, um Deine Kunden nicht zu überfordern. Grundsätzlich gilt: Weniger ist mehr. Um mehr Struktur in Deinen Shop zu bringen, hilft der bewusste Einsatz von Weißraum. Er hilft dabei, Elemente voneinander zu trennen und so eine bessere Übersicht im Shop zu gewährleisten, um das Auge zu unterstützen. Dadurch grenzt Du Deine Produkte und Informationen besser voneinander ab.

Ein Beispiel für bewussten Einsatz von Weißraum ist der Shop ZURIGA, der mit unserem Solution Partner WIZMO umgesetzt wurde.

Durch das Freistellen der Kaffeemaschine, dem Text und vor allem dem Weißraum zwischen Produkt und Beschreibung liegt die Kaffeemaschine und die Funktionalität im Fokus. Das Produkt wirkt durch diese Platzierung sehr hochwertig und edel. Der Text fordert durch Schlagwörter und dem Call-to-Action dazu auf, mehr Details über das Produkt zu erfahren und die Marke zu erleben.

5. Einsatz von Icons

Neben einer guten Struktur kann auch der Einsatz von Icons bei der Führung durch den Shop die Usability optimieren. Im Onlineshop von YOURS TRULY lässt sich gut erkennen, dass die Icons sowohl helfen, einen besseren Überblick im Shop zu behalten, aber sie auch kurz und anschaulich die Werte der Marke erläutern. Neben der großen Headline erklären die Icons durch clevere Kombination aus Bild und Text, woraus die Produkte bestehen und was sie besonders macht.

Durch Erfahrungen von Verpackungen, Broschüren, Websites und Co. hat sich das Auge bereits an den Einsatz von Icons gewöhnt und weiß, dass es dort wichtige Informationen auf einen Blick erhält. Simple und aussagekräftige Icons zeugen außerdem von Qualität und Hochwertigkeit.
YOURS TRULY wurde mit Hilfe des Shopware Enterprise Partners elio umgesetzt. 

6. Interaktives Storytelling

Führe Deine User auf interaktive Weise durch Deinen Onlineshop und kreiere so eine erlebbare Brand. Im Onlineshop von Vintageria der gemeinsam mit unserem Solution Partner HCE umgesetzt wurde, passiert sehr viel und User können einiges entdecken: Neben Produkten auch die speziellen Features im Shop wie beispielsweise den Einhorn-Ladebalken. Nicht nur die Farben, Bilder und Formen sind ansprechend, denn durch die vielen bewegten Aktionen im Shop interagiert der User automatisch mit der Seite und bekommt das Gefühl, als shoppe er in einem Game aus den 90ern, was die Story perfekt zusammenfasst.

Fazit

Es gibt unendlich viele Möglichkeiten, eine herausragende User Experience und somit einzigartige Shopping-Erlebnisse zu schaffen. Wichtig ist vor allem, dass Du die Werte Deiner Marke bestmöglich in Bild, Sprache, Text, Form und Farben transportierst. Stelle den Menschen in den Mittelpunkt und zeige, welchen Nutzen er von Deinen Produkten und Leistungen hat, um Deine Kunden langfristig zu überzeugen.