Erlebniswelt Onlineshop – 14 Beispiele für mehr Joy of Use im E-Commerce

Begriffe wie User Experience und Joy of Use sind den Meisten geläufig, aber warum ist es wichtig seinen Kunden ein Erlebnis bzw. Freude an der Nutzung des Onlineshops zu bieten?

Anders gefragt, warum kaufen Kunden lieber ein Apple Produkt obwohl doch die Konkurrenz oft viel bessere Features für weniger Geld bieten (den Hype um die Marke mal ausgeklammert).

Weil die Nutzung Spaß macht und sich gut anfühlt!

Ok, auch hier mögen sich die Geister streiten ;-), aber die Idee bleibt richtig. Im E-Commerce haben natürlich viel mehr Faktoren Einfluss auf die Kaufentscheidung, wie beispielsweise Sortiment, Qualität, Verfügbarkeit und Preis um nur einige zu nennen.

Auf die Motivation, ob ich kaufe und ob ich wiederkomme hat die gebotene User Experience und der Joy of Use dagegen einen großen Einfluss. Letztlich ist auch das eine Kundenbindungsmaßnahme. Kann ich meine Kunden nicht „nur“ zufrieden stellen sondern sogar begeistern, ist die wahrscheinlich größer dass sie wieder kaufen.

 

Customers online don’t respond to a brand marketed to them, they respond to the experience they have. If they can accomplish their goal quickly and easily, they return to the site, and tell their friends. It’s that simple.-Mark Hurst

 

Gerade in der Onlinewelt, wo die Konkurrenz nur einen Klick entfernt ist, können bei gegebener Vergleichbarkeit der Produkte und Preise diese Begeisterungsfaktoren den Ausschlag geben.

Soweit zur Theorie.

Was kann ich tun um meine Kunden zu begeistern?

Genau diese Frage sollte Ihnen jetzt durch den Kopf gehen. Der Grundstein für eine gute User Experience ist eine saubere Usability. Jede Demotivation durch schlechte oder komplizierte Bedienbarkeit, undurchsichtige Navigation, Störungen und unnötige Fehlermeldungen ist Gift für eine gute User Experience.

Ist die Basis sauber, kann es daran gehen die Experience zu verbessern. Um Kunden zu begeistern gibt es ein recht simples Rezept:

Eine Hand voll Erwartetes und eine Prise Unerwartetes.

Es gibt viele Möglichkeiten nach diesem Rezept auf den Joy of Use Einfluss zu nehmen. Der einfachste Weg für eine zunächst oberflächliche Optimierung ist die Art und Weise wie sich Elemente darstellen und verhalten. Die folgenden 3 simplen Tricks sollen einen kleinen Einblick in die ersten Schritte geben:

Trick Nr. 1 – Einblenden

Es werden heute schon sehr häufig Inhalte dynamisch nach- oder vorgeladen und je nach Bedarf angezeigt (AJAX). Allerdings werden diese meistens eben einfach „nur“ angezeigt. Leicht wirkt die Seite unruhig und hakelig. Es ist nicht besonders aufwendig diese Elemente weich einzublenden. Im Detail lässt sich hier mit dem richtigen Timing (Verzögerung und Geschwindigkeit) und Übergängen (sog. Easings) das Gefühl bei der Nutzung verbessern. Am häufigsten fällt das Fehlen dieser Detailoptimierung an Dropdown-Menus auf. Mehr Details zu diesem Thema in meinem Artikel Conversion Optimierung mit Mega Drop-downs.

Trick Nr. 2 – Ladeanimation

Keine Große Sache. Seit dem Hype um „Web 2.0“ kennt jeder diese kleinen Ladeanimationen. Aber selbst dieses kleine Detail kann das Gefühl für die User Experience verbessern. Werden Inhalte dynamisch angepasst, nachgeladen oder ausgetauscht, reicht es oft schon einen Platzhalter mit einer Ladeanimation zu versehen. Sehr häufig wird dies außer Acht gelassen und die Inhalte nach und nach ohne Hinweis direkt angezeigt. Die Seite kann dadurch langsam, unvollständig und unruhig wirken.

Trick Nr. 3 – Von der Konkurrenz abheben

Ok, das klingt in der Tat nicht leicht. Wie hebt man sich von der Konkurrenz ab? Die zwei bisher genannten Tricks sind leicht und schnell zu realisieren, ab hier wird es ernst. Die folgenden Beispiele sollen als Inspiration dienen, wie sich mit verbesserten Bedienkonzepten und Features der Joy of Use und damit die User Experience verbessern lassen.

Produktfilter bei archiduchesse.com:

Die Anzeige der verfügbaren Größen auf der Kategorieseite ist gut gelöst. Filtert man rechts die Größe (leicht zu übersehen) passen sich die Angebote "smooth" an.

Die Anzeige der verfügbaren Größen auf der Kategorieseite ist gut gelöst. Filtert man rechts die Größe (leicht zu übersehen) passen sich die Angebote „smooth“ an.

 

Produktslider bei twelvesouth.com

twelvesouth - Produktslider

Der Produktslider ist intuitiv, smooth und das Produkt erhält den vollen Fokus auf der Bühne. So macht das stöbern durch das Sortiment Spaß.

 

Produktübersicht bei mirapodo.de

Mirapodo.de - Produktdarstellung

Kleine Details tragen zum Joy of Use bei, z. B. das Drehen des Produktbildes beim Überfahren mit der Maus oder die einzigartige Ladeanimation beim Nachladen von Inhalten oder Filterung. Die Idee des Schuhkinos ist gut, hier ginge aber mehr (z. B. 360 °C und einfachere Handhabung). Ansonsten bietet der Shop in vielen Details einen guten Joy of Use.

 

Produktdetail bei archiduchesse.com

archiduchesse.com - Produktdetail

Viele Details auf der Seite unterstützen den Joy of Use: z. B. das große Produktfoto und der dazugehörige Wechsler blenden die Bilder smooth über die ganze Breite auf der Produktseite ein, der Warenkorb-Button ist animiert und fügt das Produkt dem Layer im Kopfbereich hinzu (ein Stern fliegt rein), das Layer ist animiert (allerdings etwas hart).

 

Produktdetail bei twelvesouth.com

Twelvesouth.com - Produktdetail

Die Produktdetailseite gibt dem Produkt viel Fokus, smooth animierte Elemente, Storytelling, Produktvideo und Rezensionen. Viele Inhalte, aber stimmig im Gesamtbild.

 

Produktkonfigurator bei my-own-bike.de

my-own-bike.de - Konfigurator

Das Produkt lässt sich sehr leicht direkt über die Komponenten
oder die Übersicht konfigurieren. Man behält gut den Überblick und sieht direkt was konfiguriert wurde und noch ausgewählt werden muss.

 

Produktkonfigurator bei indochino.com

Indochino.com - Konfigurator

Den Konfigurator von Indochino ist sehr simpel und gut umgesetzt. Die Auswahl ist deutlich und die Schrittwechsel sind klar und schnell. Indochino zeigt dass eine gute UX nicht immer bensonders „fancy“ sein muss.

 

Stylefinder bei sOliver.de

sOliver.de - Stylefinder

Das Lookbook von s.Oliver ist eine gute Idee, die noch Potential bietet. Im Detail ist die Bedienung leider etwas hakelig, das ganze fühlt sich noch nicht rund an. Ansonsten bietet der Shop insgesamt eine gute aber eher unauffällige User Experience.

 

Storytelling mal anders bei ben-the-bodyguard.com

Fast schon ein Klassiker: Die App "Ben the Bodyquard" zeigt die Story auf einzigartige Art und Weise: Mit dem runter scrollen animiert man den gesamten Website Content.

Fast schon ein Klassiker: Die App „Ben the Bodyquard“ zeigt die Story auf einzigartige Art und Weise: Mit dem runter scrollen animiert man den gesamten Website Content und erfährt mehr über das Produkt.

 

Produktpräsentation bei apple.com

Apple.com - Produktdarstellung

Apple zeigt eindrucksvoll, wie sich heut zu Tage ohne Flash ein Produkt im Web darstellen lässt: Maximale Bühne, Fokus auf dem Produkt und den Features. „Storytelling on it’s best“. Ähnlich wie bei Ben the Bodyguard wird der Inhalt durch runterscrollen animiert und ausgetauscht. Aber auch Apple macht nicht alles richtig: Es fehlt gänzlich eine Statusanzeige zum Ladefortschritt. Die Website funktioniert je nach Internetleitung erst nach über 15 Sek.

 

Extrem Beispiel Nr 1.: tatchies.com

Tatchies.com - Extremes Beispiel

Der Shop von Tatchies ist voll animiert, zeigt eine übertriebene User Experience und ist alles andere als Erwartungskonform. Nettes Feature: Gegen einen Like oder Tweet werden die Versandkosten erlassen.

 

Extrem Beispiel Nr 2.: moma.org

Moma.org - Extrembeispiel

Was heut zu Tage mit HTML, JavaScript und CSS so geht zeigt moma.org. Fast nicht zu glauben dass hier kein Flash im Spiel ist.

 

Wodurch zeichnet sich eine gute User Experience also aus?

Eine gute User Experience kann sich z. B. durch das gewisse i-Tüpfelchen auszeichnen. Das letzte 1% welches zum Beispiel den Produktbild-Zoom oder Mega-Dropdown nicht „hakelig“ sondern „weich“ einblendet. Aber auch eine Produktkategorieseite, die schnell fertig geladen ist, Produkte beim scrollen dynamisch nachlädt und einblendet kann für eine gute User Experience sprechen. Es muss letztendlich nicht unbedingt auf den Spaß und die Leichtigkeit ankommen, sondern kann auch einfach „nur“ effizient oder leistungsbezogen aufgebaut sein.

In den Beispielen findet sich eine ganze Reihe Features, die meist nicht besonders aufwendig zu realisieren sind, dem Kunden – also dem Mensch mit Bedürfnissen hinter dem Bildschirm – neben den „harten Fakten“ Gründe liefern, zu kaufen und auch wieder zu kaufen.

Allerdings reichen häufig einzelne Features nicht aus. Das Gesamtpaket sollte stimmen. Ein gutes Beispiel für eine gelungene gesamt User-Experience ist neben Mirapodo auch Zalando. Diese ist eher unauffällig weil ohne „Wow-Effekt“. Die meisten Features sind Standard in Fashion-Onlineshops, dennoch läuft die Nutzung rund und fühlt sich gut an. Aber auch hier ließe sich die Experience noch verbessern, wenn an den Details noch gefeilt werden würde. Beispielsweise ließen sich Elemente deutlich angenehmer darstellen.

Eine runde gesamt User Experience bei zalando.de

Zalando.de - UX - Beispiel

Bei Zalando läuft alles rund ohne Reibungspunkte und fühlt sich gut an, bis in die kleinen Details.

Auch zu viel ist nicht gut. Nach dem Relaunch des B2B Direktversenders Electronic Toys Trading weißt der Onlineshop zahlreiche Elemente auf, die den Joy of Use verbessern sollen. Die Bedienkonzepte sind leider stellenweise schwer verständlich, Elemente sind übertrieben animiert.

Gegenbeispiel: User Experience bei ett-online.de

ETT Versand Versand - Negativbeispiel

Trotz des Relaunchs des B2B Direktversender Electronic Toys Trading und offensichtlicher Bemühungen funktioniert die User Experience nicht. Das Bedienkonzept des Produktsliders ist unverständlich und übertrieben animiert.

Bei welchen Zielgruppen macht das Sinn?

Ganz einfach, bei allen. Grundsätzlich gibt es keine Einschränkung, wenn es um die Begeisterung der Kunden geht. Es macht im B2B genau so Sinn, z. B. dem Entscheidungsvorbereiter im Onlineshop für Büromöbel die Nutzung des Shops so angenehm wie möglich zu gestalten, wie einem Couchsurfer der mit dem Laptop beispielsweise nach Kleidung sucht.

Wichtig dabei ist, dass diese Zielgruppen natürlich entsprechend angesprochen und deren Erwartungen und Bedürfnisse abgefangen werden müssen. Bei der User Experience ist eher entscheidend wie weit man bei seiner Zielgruppe gehen kann (Erwartetes vs. Unerwartetes). Eine junge technikaffine Zielgruppe kann wesentlich schneller mit neuen Bedienkonzepten zurecht kommen, während Laien häufig mit neuartigen Sachen schnell überfordert sind (mehr Erwartung als Überraschung).

Es sollte stets für jede Zielgruppe mit entsprechenden Begeisterungsmerkmalen aufgewartet werden.

Die Zutaten „Erwartetes“ und „Unerwartetes“ sollte man bei seiner Zielgruppe so lange mischen, bis das Verhältnis stimmt. Hier lautet die Devise: So lange testen und ausprobieren bis es passt.

Bei welchen Plattformen sollte besonderes auf eine gute User Experience geachtet werden?

Ganz einfach, bei allen. Tatsächlich wird aktuell häufig nur (wenn überhaupt) bei Couch-Commerce auf eine gewisse Erlebniswelt geachtet. Einige Anbieter wie Beispielsweise Amazon haben verstanden, dass Kunden z. B. mit Tablets beim Einkauf auf der Couch anders motiviert sind und angesprochen werden müssen wie zum Beispiel Mobile-Commerce Kunden, welche unterwegs eher schnell zum Ziel kommen wollen. Mein Kollege Dennis Herzberger hat hierzu erst kürzlich einen Artikel veröffentlicht.

Eine Plattform außen vor zu lassen macht hierbei keinen Sinn. Die Ansprache und Darstellung sollte zwar entsprechend getrennt erfolgen, aber auf ein verbessertes Kauferlebnis und Spaß an der Nutzung sollte der Kunde sowohl am PC, Laptop, Tablet als auch Smartphone haben können.

Es sollte keine Arbeit sein etwas im Shop einzukaufen, sondern inspirieren und Spaß machen.

Fazit:

Grundvoraussetzung: Usability (ohne Hürden zum Ziel kommen)  +
Begeisterungsfaktor: User Experience (mit Spaß, Leichtigkeit oder Effiziez zum Ziel kommen).

Die Beispiele zeigen, dass auch mit wenigen Maßnahmen die User Experience und der Joy of Use verbessert werden können. Aktuell machen es Technologien wie HTML5 (z. B. Videos), CSS3 (z. B. Transitions) und hochleistungs JavaScript-Frameworks (Tweener) einfach, beispielsweise Interaktionen, Animationen und den Einsatz von multimedialen Inhalten Cross-Plattform zu ermöglichen.

Eigentlich ist das alles nichts neues, seit dem Hype um „Web 2.0“ sind diese Themen in aller Munde. Doch leider werden diese Faktoren in der Onlineshop-Welt, obwohl häufig leicht zu realisieren, immer noch zu selten berücksichtigt.

P.S.

Übrigens, sollten Zweifel aufkommen, ob denn eine verbesserte User Experience tatsächlich auch die Conversion Rate, den Warenkorbwert oder die Kundenbindung verbessern bzw. die Angst bestehen, dass die Maßnahmen keinen ROI haben könnten:
Wie alle anderen Optimierungsansätze lässt sich auch der Joy of Use im Rahmen von Nutzertests verproben und mit echten Kennzahlen belegen.

 

Ähnliche Artikel

Weiterführende Links