Customer Experience

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

Manuel Brückmann
 Lesezeit: 7 Minuten    
8
arrow_down
8

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.

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 und weiterführende Links

Über den Autor

manu-brueckmann

Manuel Brückmann

Principal Technology Consultant

Manuel Brückmann, Jahrgang 1982, ist als Principal Technology Consulting bei konversionsKRAFT – Deutschlands führende Agentur für Conversion Optimierung – für den Bereich Technologie Beratung verantwortlich.

Sein Werdegang begann 2007 im Bereich Design & Usability. Mit dem Abschluss als Dipl. Ing. (FH) Medieninformatik sammelte er als Consultant und Projektmanager in den darauf folgenden 2 Jahren Erfahrungen, bis er 2009 in den Bereich Interaction Design & Interface Development wechselte. Zwei Jahre später sammelte er in der Rolle des Senior User Experience Engineer Erfahrungen im UX-Bereich. In den folgenden Jahren übernahm er seit Anfang 2012 die Verantwortung für den Bereich Conversion Engineering bei konversionsKRAFT und führte eine interdisziplinäre Business Unit. Seit Anfang 2016 gehörte er zur Geschäftsleitung und übernahm dort die Führung der Technologie im Unternehmen. Seit 2019 konzentriert er sich als Principal Technology Consultant auf die technischen Beratungsthemen im Unternehmen.

Neben umfangreichen Kenntnissen aus dem Bereich Technologie und Webentwicklung (Web Oberflächentechnologien, Medien, User Experience, Mobile, SEO) weist er 15 Jahre Erfahrung in den Bereichen Conversion Optimierung, E-Commerce, Lead-Generierung, Konsumpsychologie, Usability, Projekt-, Account -und Team-Management vor.

Frage zum Artikel? Frag den Autor!

8 Kommentare

  1. Gravatar

    Marion,

    Prüft mal die Links auf die Beispielseiten. Da fehlt ziemlich oft ein ‘t’ bei http.

    Die Fehlermeldung, die man dort kriegt, senkt die User Experience des sonst sehr interessanten Beitrags 😉

    • Gravatar

      Manuel Brückmann,

      Hallo Marion,

      Danke für Dein Feedback! Ein klassischer Copy & Paste Fehler… 😉

      Peinlich…

  2. Gravatar

    Martin,

    Ich finde den Artikel super. Vor allem, dass ich jetzt auf so kleine entscheidende Details wie das Drehen eines Schuhs achte 😉

  3. Gravatar

    MB,

    im übrigen sind es “Rezensionen” und nicht “Rezessionen” …

    • Gravatar

      Manuel Brückmann,

      Danke für das Feedback!

      @Martin: Freut mich zu hören. Manchmal sind es die kleinen “unbewussten” Details…
      @MB: Danke, ist wohl durch die Qualitätskontrolle gerutscht? 😉
      @Anne-Katrin: Vielen Dank! Bezüglich des ROIs, CR & Neukundengewinnung sehe ich genau so!

  4. Gravatar

    Anne-Katrin Böhme,

    Wichtiger Hinweis am Ende – klar ist die User Experience eines Onlineshops ROI-relevant! In allerhöchstem Maße sogar. Und messbar in handfesten Kennzahlen sowieso. Gerade, was die Conversion Rate betrifft, macht sich eine durchdachte und sorgfältig umgesetzte User Experience stark bemerkbar – aber auch die Auswirkungen auf Kundenzahlen bzw. Neukundengewinnung sind gar nicht zu unterschätzen.
    Wirklich schöner Artikel, nicht zuletzt aufgrund der vielen Fallbeispiele. Danke dafür – wird direkt weitergetwittert. 🙂

  5. Gravatar

    Maurice,

    Wow. Wirklich guter Artikel. Umfangreich und dennoch verständlich, einfach perfekt. Ich werde versuchen einige Dinge in meinen Shop zu integrieren. Spannend wäre es wohl, wenn man einen Vorher / Nachher-Vergleich macht und dabei schaut wie sich das Kaufverhalten / die Conversion ändert.

    Besten Dank und Grüße!

    • Gravatar

      Manuel Brückmann,

      Hallo Maurice,

      vielen Dank für Dein Feedback. Freut mich dass Dir der Artikel weiterhilft. Mit gefällt Deine Idee mit dem Vergleich, allerdings würde ich einen Schritt weitergehen und die Verbesserung A/B testen. Der Vorher / Nachher – Vergleich birgt das Risiko, dass weitere Faktoren Einfluss auf das Ergebnis nehmen. Es könnten z. B. saisonale Einflüsse, Aktionen etc. den Vergleich verfälschen. Bei einem A/B Test erhält man dagegen im direkten Vergleich im gleichen Zeitraum bei gleichen Rahmenbedingungen eindeutigere Ergebnisse.

Schreibe einen Kommentar

Teile diesen Artikel

Kostenlos anmelden