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

11 Reaktionen auf „Konversionsbooster Teil 1: Warenkorb Behavior

  1. Sehr interessanter Artikel. Leider sind wir durch unser Shopsystem auch unflexibel. Ich werde aber mal einen Verbesserungsvorschlag bei Tradoria adressieren…..

    • Ein guter und inspirierender Überblick, vielen Dank!

      • Hallo Herr Ressel, vielen Dank für diesen interessanten Beitrag. Da Sie sich auf diesem Gebiet gut auskennen und sich dem Thema der Emotionalisierung widmen, möchte wir Ihnen folgendes vorstellen:
        http://www.shoptrainer.de/branchen-pr/gefunden-beste-graphische-veranderung-der-startseiten-warenkorbdarstellung-von-hinzugefugten-produkten-in-deutschen-onlineshops.html

        • Hallo Herr Etzel,
          wenn der Betreiber eines Shopsystems auf Wünsche eingeht ist das sehr viel wert.
          Man kann schon einiges an Templates von diversen Shopsystemen in Hinsicht auf Usability und Konversionsoptimierung anpassen. Allerdings kann dies je nach Shopsystem zeit- und kostenintensiv werden und an manchen Stellen kommt man um die Mitarbeit des Shopsystembetreibers nicht herum. Wir haben auf jeden Fall die Erfahrung gemacht, dass sich individuelle Anpassungen des Shopsystems am Ende rechnen.

          • Der Crate & Barrel Warenkorb ist tatsächlich eine typische Designer-Fehlkonstruktion. Hübsch aber unbrauchbar. Ich habe den Warenkorb erst überhaupt nicht entdeckt.

            • Was die Kunden als das beste System errachten läst sich meiner Meinung nach nur durch Tests oder Befragungen herausfinden. Und hängt auch von angebotener Ware sowie der Zielgruppe ab.

              Ich persönliche finde zum Beispiel Variante 2 am Besten. Ich möchte nach jedem Klick auf den Einkaufswagen zur Warenkorbübersicht geleitet werden. Allerdings muss dann dort ein Button sein, mit dem ich sofort wieder auf die letzte Seite zurückgeleitet werde.

              Auf den Tod nicht ausstehen kann ich es, wenn ich auf „In den Warenkorb“ klicke und es passiert scheinbar gar nichts – so daß ich nicht weiß ob überhaupt was passiert ist und ich dann erstmal suchen muss wo den der Kasten mit dem Warenkorb ist. Oder nur dasteht „1 Artikel XY in den Warenkorb“ gelegt.

              Insbesondere bei Artikeln mit Varianten: z.B. Hemd, Farbe rot, Größe 39, Form: Slim-Fit
              möchte ich eigentlich sofort sehen, ob meine Eingabe auch korrekt erfasst wurde. Und nicht in irgendeinem Minikästchen nur die Information „1 x Hemd – 30 EUR).

              • Hallo llamaz,
                welche Informationen angezeigt werden ist auf jeden Fall wichtig. Je mehr Informationen angezeigt werden, desto größer die Sicherheit beim Besucher. Er hat das Gefühl, dass er alles unter Kontrolle hat. Der „kleine“ Warenkorb bei Abercrombie & Fitch zeigt zunächst an, welches Teil man in den Warenkorb gelegt hat mit Artikelname, -größe, -farbe und Preis. Also durchaus alle wichtigen Informationen. Nach einer kurzen Zeit verschwindet diese Meldung und beim Hover über den Warenkorb bekommt man wiederum diese Informationen zu jedem einzelnen Artikel, der sich im Warenkorb befindet und die Summe. Fehlen eigentlich nurnoch die Versandkosten oder den Betrag bis zum kostenlosen Versand und schon hat man alle Informationen, die die Warenkorbseite auch bietet ohne die aktuelle Seite verlassen zu müssen.
                Um das Testen, ob der Warenkorb bei der jeweiligen Zielgruppe ankommt, kommt man natürlich nicht herum. So ist ein Hover-Effekt für die ein oder andere Zielgruppe eventuell etwas zu hektisch.

                • Wirklich dann muss ich mal nochmal nachschauen

                  • So ist ein Hover-Effekt für die ein oder andere Zielgruppe eventuell etwas zu hektisch.

                    Schreibe einen Kommentar

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