Von Manuel Ressel | Serien | 11 Reaktionen

Konversionsbooster Teil 1: Warenkorb Behavior

In der neuen Serie “Konversionsbooster“ möchte ich mich mit einigen Elementen von E-Commerce-Portalen auseinandersetzen, die die Konversionsrate maßgeblich beeinflussen und einige gute und weniger gute Beispiele näher erläutern.
Für den ersten Teil der Serie habe ich Warenkörbe und deren Verhalten genauer unter die Lupe genommen.
Im Allgemeinen kann man unter drei verschiedenen Verhaltensweisen von Warenkörben nach dem Hineinlegen von Artikeln unterscheiden.

  • Typ I: Anzeige der Produkte im „kleinen“ Warenkorb auf der Seite
  • Typ II: Direkte Weiterleitung zur Warenkorbseite
  • Typ III: Abfrage nach Aktion („Weitershoppen“ oder „Warenkorb anzeigen“)

Wie dies jedoch im Einzelnen umgesetzt wird unterscheidet sich doch um einiges. Doch schauen wir uns doch mal einige Beispiele an.

Typ I: Anzeige im „kleinen“ Warenkorb

 

Abercrombie & Fitch

Wird ein Produkt in den Warenkorb gelegt, so öffnet sich unterhalb des Warenkorbs ein Layer mit der Information, dass man dieses Teil in den Warenkorb gelegt hat. Nach einer kurzen Zeit fährt dieses Layer wieder ein. Bei einem Mouseover klappt ein anderes Layer aus, in dem angezeigt wird, welche Produkte sich im Warenkorb befinden, deren Preis und die Summe. Klickt man auf den Warenkorb oder auf den Button „View Bag“ im Layer wird man zur Warenkorbseite geleitet.

Abercrombie & Fitch: Hineinlegen eines Artikels in den Warenkorb
Abercrombie & Fitch: Hineinlegen eines Artikels in den Warenkorb
Abercrombie & Fitch: Anzeige des Warenkorbs bei Mouse-Over
Abercrombie & Fitch: Anzeige des Warenkorbs bei Mouse-Over

 

Free People

Beim Shop von Free People scheint das Prinzip zunächst ähnlich. Legt man ein Produkt in den Warenkorb erscheint ein Layer beim Warenkorb, der anzeigt, dass man den Artikel in den Warenkorb gelegt hat. Schaut man sich nun allerdings den Warenkorb an, erscheinen lediglich die Bilder der Artikel, die im Warenkorb liegen, allerdings keinerlei Informationen dazu. Das heißt ich habe lediglich einen Überblick darüber wie viele Artikel sich im Warenkorb befinden, allerdings keinerlei Preisinformation.

Free People: Hinzufügen eines Artikels in den Warenkorb
Free People: Hinzufügen eines Artikels in den Warenkorb
Free People: Warenkorbanzeige bei Mouseover
Free People: Warenkorbanzeige bei Mouseover

 

Mediherz

Legt man einen Artikel in den Warenkorb, so bewegt sich das Produktbild in den Warenkorb. Dies stellt eine Analogie zur Realität dar, wenn Sachen in den Warenkorb gelegt werden und zeigt gut, dass hier gerade eine Aktion passiert ist. Neben der Information darüber wie viele Artikel sich im Warenkorb befinden und dem aktuellen Preis bekommt man zusätzlich noch angezeigt, wie viel Euro noch benötigt werden, bis der Versand kostenfrei wird. Dies kann einige Leute noch mal anspornen etwas in den Warenkorb zu legen.

Mediherz: Produktbild bewegt sich in den Warenkorb
Mediherz: Produktbild bewegt sich in den Warenkorb
Mediherz: Warenkorb
Mediherz: Warenkorb

 

Mexx

Der Warenkorb von Mexx ist auf der Seite in einem Kasten mit Logo, Anmelden-, Newsletter- und Hilfe-Link untergebracht. Dieser Kasten verharrt immer an der selben Position auch beim Scrollen. Legt man etwas in den Warenkorb, so klappt der Warenkorb auf und man sieht die Produkte, die sich darin befinden inklusive Preis. Shoppt man weiter, klappt sich der Warenkorb wieder ein ist allerdings grün hinterlegt, so dass er besser sichtbar ist. Durch einen Klick auf den Warenkorb fährt sich dieser wieder aus und inerhalb des ausgefahrenen Layers kommt man über den Button „Zur Kasse“ zur Warenkorbseite.

Mexx: Warenkorb
Mexx: Warenkorb
Mexx: Warenkorb ausgeklappt
Mexx: Warenkorb ausgeklappt

Typ II: Direkte Weiterleitung zur Warenkorbseite

Früher noch relativ üblich wird diese Variante kaum noch genutzt.
Gerade durchaus relativ kreative Shops scheinen doch noch eventuell aufgrund des Shopsystems auf diese Variante zurückzugreifen.

 

Bridge55

Bridge55 ist ein Shop, der auf Kreativblogs gerne postitiv erwähnt wird. Das Design ist auch sehr gut auf die Zielgruppe ausgerichtet, doch die Technik scheint mir veraltet. Keine Details zu den Produkten, anstrengende Navigation etc. Nachdem man einen Artikel in den Warenkorb gelegt hat, wird man direkt weitergeleitet zur Warenkorbseite. Will man noch weitershoppen muss man zunächst wieder die Hauptnavigation bedienen und entweder über die Startseite oder die Kategorieseite zunächst wieder eine Kategorie auswählen. Stellen sie sich ein mal vor sie würden direkt zur Kasse geschickt werden, wenn sie sich einen Artikel ausgesucht haben, obwohl sie noch nach anderen Teilen schauen wollten. Diese Methode trägt nicht gerade zur Kundenbindung bei.

Bridge55: direkte Weiterleitung zur Warenkorbseite
Bridge: direkte Weiterleitung zur Warenkorbseite

 

Tiger of Sweden

Ich freue mich immer über neue Ideen, die sich vom Einheitsbrei absetzen. Doch dieser Shop zeigt, wie Kreativität die Benutzbarkeit einer Seite einschränken kann. Logo, Suche und Warenkorb werden ziemlich unscheinbar unten platziert. Ich musste erst mal eine Zeit lang suchen, bis ich den Warenkorb gefunden habe. Auch hier wird man nach der Bestellung eines Artikels auf die Warenkorbseite geschickt.

Tiger of Sweden: Direkte Weiterleitung zur Warenkorbseite
Tiger of Sweden: Direkte Weiterleitung zur Warenkorbseite

Typ III: Abfrage nach Aktion

Eine Abfrage, ob man weitershoppen möchte oder direkt zum Warenkorb möchte findet man sehr häufig vor. Nahzu alle traditionellen Versandhändler wie Otto, Schwab und Baur setzen auf diesen Typ. Dabei wird eine neue Seite geladen, auf der das Produkt, welches in den Warenkorb gelegt wurde noch einmal gezeigt wird. Diese Seite wird noch mit Cross-Selling Produkten und zusätzlichen Informationen wie z.B. Siegel oder Versandinformationen ganiert.

 

Brands4friends

Auch Brands4friends verwendet diese Methode, wobei nicht exta eine neue Seite geladen wird, sondern die Abfrage mit den Cross-Selling Artikeln in einem Modalfenster gezeigt wird. Der Warenkorb ist ansonsten relativ ähnlich wie der Warenkorb von Mexx. Allerdings kann man direkt zur Kasse gehen ohne extra den Warenkorb noch ein mal ausklappen zu müssen. Ein anderes Element im Warenkorb ist eine Zeitanzeige. Dieses Element hängt mit der Geschäftsidee von brands4friends zusammen. Da die Ware begrenzt ist, wird der Warenkorb nach 25 Minuten gelöscht, damit jeder die gleichen Chancen auf die Markenware hat.

Brands4friends: Abfrage nach Aktion
Brands4friends: Abfrage nach Aktion

 

Braun Herrenausstatter

Der Herrenausstatter Braun bietet die Auswahlmöglichkeit noch etwas dezenter an. Legt man einen Artikel in den Warenkorb, so wird einerseits der Zähler beim Warenkorb erhöht und eine Nachricht wird auf der Produktseite eingeblendet, dass der Artikel in den Warenkorb gelegt wurde. Innerhalb dieser Nachricht gibt es einen direkten Link zur Warenkorbseite, d.h. Über einen Klick ist man direkt auf der Warenkorbseite man hat aber auch die Möglichkeit direkt von der Produktseite aus weiterzushoppen.

Herrenausstatter Braun: Abfrage nach Aktion
Herrenausstatter Braun: Abfrage nach Aktion

Andere Ansätze

 

Icondock / Nerve Music Store

Einige neue Ansätze versuchen den Prozess des Hineinlegen eines Produktes in den Warenkorb noch näher an der Realität zu gestalten. Man kann tatsächlich ein Produkt greifen und in den Warenkorb ziehen. Icondock und der Verve Music Store nutzen so eine Drag&Drop Lösung. Beide Portale richten sich an sehr internetafine Leute. Als Alternative bieten beide Seiten einen „normalen“ Warenkorb-Button auf der Produktseite.
Diese Möglichkeit eignet sich wirklich nur für eine absolut internetafine Zielgruppe. Der durchschnittliche Internetnutzer erwartet diese Art von Warenkorb nicht, nimmt ihn nicht wahr und nutzt ihn nicht intuitiv. Die Analogie zur Realität ist zwar stark, aber im Internet ist es doch noch eher ungewohnt, dass man etwas nehmen kann und an einen anderen Ort ziehen kann.

Icondock: Drag&Drop Warenkor
Icondock: Drag&Drop Warenkor

 

Crate & Barrel

Neue Lösungsansätze können ziemlich schnell nach hinten losgehen, weil sie nicht intuitiv genutzt werden können und vom Benutzer nicht erwartet werden. Auf der Seite von Crate & Barrel bekommt man einen neuen Ansatz eines Warenkorbs präsentiert, der vom Benutzer wahrscheinlich so nicht erwartet wird, aber trotzdem durchaus bemerkt wird und intuitiv benutzt werden kann. Crate & Barrel reserviert am unterem Bildrand eine komplett durchgehende Zeile für den Warenkorb. Fügt man ein Produkt hinzu, wird ein Bild des Artikels und die Anzahl in der Leiste dargestellt. Zusätzlich erhält man die Information über die Summe des Warenkorbs und wieviel noch zum kostenfreien Versand fehlt. Alle nützlichen Hinweise auf einen Blick also. Über den Button „Checkout“ gelangt man zur Warenkorbseite. Dieser Button befindet sich auch noch mal oben rechts auf der Seite, da dort der Platz ist, wo der Benutzer den Warenkorb erwartet.
Nimmt einem der Warenkorb zu viel Platz ein, so gibt es auch die Möglichkeit den Warenkorb zu verkleinern. Dann erscheint nurnoch die Information, wieviel Artikel sich im Warenkorb befinden.

Crate & Barrel: Warenkorbleiste
Crate & Barrel: Warenkorbleiste
Crate & Barrel: Warenkorb minimiert
Crate & Barrel: Warenkorb minimiert
Crate & Barrel: Warenkorb Produktinfo
Crate & Barrel: Warenkorb Produktinfo

Fazit

Der Warenkorb von Abercrombie & Fitch bietet einen sehr nutzerfreundlichen Warenkorb. Legt man einen Artikel in den Warenkorb wird man durch eine Animation auf den Warenkorb aufmerksam gemacht. Ohne die Seite verlassen zu müssen erhält man alle wichtigen Informationen, die man benötigt. Über einen einzigen Klick gelangt man zur Warenkorbseite und muss nicht wie z.B. bei Mexx zunächst den Warenkorb-Layer öffnen. Der Hover-Effekt könnte noch eine kleine Verzögerung vertragen, so dass das Verhalten noch etwas ruhiger wird.
Gut ist es auf jeden Fall dem Benutzer viele Informationen zu bieten, ohne dass die Seite verlassen werden muss.
Auch die Information über den verbleibenden Betrag zur kostenfreien Lieferung kann für Besucher ein Ansporn sein noch einen Artikel mehr in den Warenkorb zu legen, kann aber natürlich auch ausgenutzt werden um die kostenfreie Lieferung zu erlangen, wobei unnötige Ware dann wieder zurückgeschickt wird.
Neue Ansätze können nach hinten losgehen und benutzerunfreundlich sein, aber die Lösung von Crate & Barrel zeigt, dass neue Ideen durchaus intuitiv und nutzerfreundlich sein können und damit die Individualität des Shops und gleichzeitig den Bedienungskomfort erhöhen können.
Welchen Warenkorbtyp erachten sie als nutzerfreundlich? Welche Informationen möchten sie gerne im „kleinen“ Warenkorb angezeigt bekommen? Teilen sie uns ihre Meinung mit.

Manuel Ressel

Manuel Ressel ist Head of UX Design bei konversionsKRAFT. Seine Leidenschaft gilt dem Thema der Emotionalisierung von Kauf-Prozessen in E-Commerce-Portalen. Manuel Ressel ist unentwegt auf der Suche nach einzigartigen Shop-Perlen und neuen Design Trends im E-Commerce und sammelt diese in dem E-Commerce Showcase conversiondesign.de. Folgen Sie ihm auf Twitter, Google+ oder Facebook.
Frage zum Artikel? Frag den Autor

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.