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

![](./assets/img/erlebniswelt-onlineshop/keyvisual.jpg)

**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.

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

Im E-Commerce haben natürlich viel mehr Faktoren Einfluss auf die Kaufentscheidung, wie beispielsweise Sortiment, Qualität, Verfügbarkeit und Preis.

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.

> 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

## Was kann ich tun um meine Kunden zu begeistern?

Der Grundstein für eine gute User Experience ist eine saubere Usability. 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.**

## Trick Nr. 1 – Einblenden

Es werden heute schon sehr häufig Inhalte dynamisch nach- oder vorgeladen und je nach Bedarf angezeigt. Allerdings werden diese meistens eben einfach „nur“ angezeigt. Leicht wirkt die Seite unruhig und hakelig.

## Trick Nr. 2 – Ladeanimation

Werden Inhalte dynamisch angepasst, nachgeladen oder ausgetauscht, reicht es oft schon einen Platzhalter mit einer Ladeanimation zu versehen.

## Trick Nr. 3 – Von der Konkurrenz abheben

Die folgenden Beispiele sollen als Inspiration dienen.

## Produktfilter bei archiduchesse.com

![Produktfilter bei archiduchesse.com](./assets/img/erlebniswelt-onlineshop/archiduchesse-produktfilter-beispiel.jpg)

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

## Produktslider bei twelvesouth.com

![Produktslider bei twelvesouth.com](./assets/img/erlebniswelt-onlineshop/twelvesouth-produktslider-beispiel.jpg)

Der Produktslider ist intuitiv, smooth und das Produkt erhält den vollen Fokus auf der Bühne.

## Produktübersicht bei mirapodo.de

![Produktübersicht bei mirapodo.de](./assets/img/erlebniswelt-onlineshop/Mirapodo.de-Produktdarstellung-Beispiel.jpg)

Kleine Details tragen zum Joy of Use bei, z. B. das Drehen des Produktbildes beim Überfahren mit der Maus.

## Produktdetail bei archiduchesse.com

![Produktdetail bei archiduchesse.com](./assets/img/erlebniswelt-onlineshop/archiduchesse-produktdetail-beispiel.jpg)

Viele Details auf der Seite unterstützen den Joy of Use.

## Produktdetail bei twelvesouth.com

![Produktdetail bei twelvesouth.com](./assets/img/erlebniswelt-onlineshop/twelvesouth-produktdetail-beispiel.jpg)

Die Produktdetailseite gibt dem Produkt viel Fokus, Storytelling, Produktvideo und Rezensionen.

## Produktkonfigurator bei my-own-bike.de

![Produktkonfigurator bei my-own-bike.de](./assets/img/erlebniswelt-onlineshop/my-own-bike-konfigurator-beispiel.jpg)

Das Produkt lässt sich sehr leicht direkt über die Komponenten konfigurieren.

## Produktkonfigurator bei indochino.com

![Produktkonfigurator bei indochino.com](./assets/img/erlebniswelt-onlineshop/indochino-konfigurator-beispiel.jpg)

Der Konfigurator von Indochino ist sehr simpel und gut umgesetzt.

## Stylefinder bei sOliver.de

![Stylefinder bei sOliver.de](./assets/img/erlebniswelt-onlineshop/Soliver-Stylefinder-Beispiel.jpg)

Das Lookbook von s.Oliver ist eine gute Idee, die noch Potential bietet.

## Storytelling bei Ben the Bodyguard

![Storytelling bei Ben the Bodyguard](./assets/img/erlebniswelt-onlineshop/ben-the-bodyguard-storytelling-beispiel.jpg)

Mit dem Runterscrollen animiert man den gesamten Website Content und erfährt mehr über das Produkt.

## Produktpräsentation bei Apple

![Produktpräsentation bei Apple](./assets/img/erlebniswelt-onlineshop/Apple.com-Produktdarstellung-Beispiel.jpg)

Apple zeigt eindrucksvoll, wie sich Produkte im Web darstellen lassen: maximale Bühne, Fokus auf dem Produkt und den Features.

## Extrembeispiel: tatchies.com

![Extrembeispiel Tatchies](./assets/img/erlebniswelt-onlineshop/tatchies-extremes-beispiel.jpg)

Der Shop von Tatchies ist voll animiert und alles andere als erwartungskonform.

## Extrembeispiel: moma.org

![Extrembeispiel MoMA](./assets/img/erlebniswelt-onlineshop/Moma.org-Extrembeispiel.jpg)

Was heute mit HTML, JavaScript und CSS möglich ist, zeigt moma.org eindrucksvoll.

## Eine runde User Experience bei Zalando

![User Experience bei Zalando](./assets/img/erlebniswelt-onlineshop/Zalando-UX-Beispiel.jpg)

Bei Zalando läuft alles rund ohne Reibungspunkte und fühlt sich gut an.

## Gegenbeispiel: ETT Versand

![Negativbeispiel ETT Versand](./assets/img/erlebniswelt-onlineshop/ETT-Versand-Negativbeispiel.jpg)

Trotz 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.

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

Ganz einfach: bei allen.

## Fazit

**Grundvoraussetzung:** Usability (ohne Hürden zum Ziel kommen)

**Begeisterungsfaktor:** User Experience (mit Spaß, Leichtigkeit oder Effizienz zum Ziel kommen)

Die Beispiele zeigen, dass auch mit wenigen Maßnahmen die User Experience und der Joy of Use verbessert werden können.