Warenkörbe mit „Ablege“-Animation – Die bessere Lösung?

Jeder Online-Shop bzw. jede Website, auf der Produkte oder Dienstleistungen jeglicher Art (Mode, Wein, Musik, Reisebuchungen, Hotelbuchungen) angeboten werden, bietet einen Warenkorb an. In diesem sammelt der Nutzer seine ausgesuchten Produkte/Dienstleistungen, bevor er die Bestellung abschließt. Der Warenkorb ist also eines der zentralen Elemente eines Online-Shops und der Zwischenstop auf dem Weg zum Kaufabschluss.

Erwartungskonforme Positionierung des Warenkorbs (Imagery III)

Daher sollte dieser auch für den Nutzer erwartungskonform und gut sichtbar positioniert werden. Laut der Imagery III Studie erwarten Internetnutzer den Warenkorb oben rechts oder zumindst im Header einer Seite. Es empfielt sich also diesen auch dort zu positionieren, damit ihn Nutzer schnell finden.

Klick man sich im Internet durch verschiedene Online-Shops, so wird sehr schnell klar, dass es in Bezug auf Design und Funktionalität eine Vielzahl an unterschiedlichen Ausgestaltungen des Warenkorbs gibt. Manche sind für den Nutzer sofort zu erkennen und verständlich, andere müssen erst gesucht und gefunden werden.

Hierzu zunächst ein kleines Video…

Die Website verdeutlichte dem Nutzer in keinster Weise, dass er das ausgesuchte Produkt bereits in den Warenkorb abgelegt hat. Aus Unsicherheit klickte er ein zweites mal, konnte aber wieder nicht erkennen, dass er das Produkt ein erneut abgelegt hat. Nach längere Suche wurde der Warenkorb doch gefunden und der Nutzer erkannte, dass er das Produkt 2mal abgelegt hatte.
Im worst Case lässt ein Nutzer vielleicht auch einfach mal den Warenkorb „stehen“, weil er diesen nicht findet.

Ein Warenkorb sollte also erwartungskonform platziert sein und vom Nutzer als solcher möglichst schnell erkannt werden. Ebenso sollte dem Nutzer verdeutlich werden, dass er ein Produkt in den Warenkorb abgelegt hat.

Ein gutes Beispiel hierzu findet man auf musicload.de.

Legt der Nutzer ein Produkt in den Warenkorb, so wird dieses „Ablegen“ durch ausklappen des Warenkorbs deutlich visualisiert. Spätestens jetzt hat jeder Nutzer den Warenkorb wahrgenommen und macht sich mit diesen vertraut. Zudem ist das Wording der einzelnen Beidenelemente aussagekräftig, so dass sofort klar wird, was bei einem Klick passiert. In diesem Fall dürfte dem Weg zur Kasse eigentlich nichts mehr im Wege stehen.

Mich würde Ihre Meinung hierzu interessieren.
Wie gefällt Ihnen die Gestaltung bzw. Animation des Warenkorbs? Oder kennen Sie weitere gute oder eher schlechte Beispiele?

8 Gedanken zu „Warenkörbe mit „Ablege“-Animation – Die bessere Lösung?

  1. Christian

    Ein weiteres gutes Beispiel gibt es auf http://www.cyberport.de
    Die Positionierung des Warenkorb ist zwar etwas gewöhnungsbedürftig, jedoch im Konzept her ähnlich wie bei MusicLoad.

    Leider gibt es immer noch viele Shops, welche nach dem in den Warenkorb legen keine gut sichtbare Bestätigung einblenden. Entscheidend ist auch die Position dieser Meldung. Auf http://www.petshop.de ist der Warenkorb auf der linken Seite. Legt man einen Artikel in den Warenkorb, blinkt die Box lediglich kurz auf. Die Gefahr dies zu übersehen ist ebenfalls relativ groß.
    Negativ ist übrigens auch, dass das Feld für die Anzahl/Menge leer und nicht (z.B. mit 1) vordefiniert ist.

    Die beste Lösung meines Erachtens ist ein Hinweis unmittelbar über / neben dem Warenkorb-Button, z.B. in Form eines Tooltips. Am besten mit den Optionen „Weiter einkaufen“, „zum Warenkorb“ oder alternativ „zur Kasse“. Dieses Prinzip wird auch auf otto.de oder neckermann.de verfolgt.

    Antworten
  2. Martin Beschnitt

    Ich bin genau Ihrer Meinung, auf manchen Seiten wird der Hinweis, dass das Produkt in den Warenkorb gelegt wurde, völlig übersehen, da er entweder nicht im Sichtfokus liegt und oder einfach zu unaufmerksam gestaltet. Meines Erachtens macht es http://www.notebooksbilliger.de derzeit recht gut. Hier sieht man eine Kombination aus einer Warenkorbzwischenseite und einer Lightbox. Besonderheit hier, der Warenkorb wird zusätzlich mit „gehighlighted“. Alle anderen Elemente werden ausgegraut. Somit erkennt man eindeutig den Zusammenhang.
    Probieren Sie es einmal selber aus.

    Antworten
  3. Steffen Heim Beitragsautor

    @Christian: Das mit dem leeren Mengenfeld ist schon eine kuriose Sache. Vor allem die Fehlermeldung (falls man sie sieht) „Stückzahl muss größer 0 sein“ find ich sehr nett. Das kann man sicherlicher eleganter und besser lösen. 😉

    Die Lösung von Cyberport ist wirklich mal was anderes. Hat aber den riesen Vorteil, dass der Warenkorb, die Vergleisliste und der Merkzettel immer im sichtbaren Bereich sind. Ich könnte mir vorstellen, dass Nutzer nach kurzer Eingewöhnungsphase gut damit zurecht kommen.

    @Martin: Die Lösung mit Lightbox auch nicht schlecht, nur find ich die Einblendung etwas sehr grau und wirkt etwas unübersichtlich finde ich.

    Antworten
  4. Pingback: Twitter Trackbacks for Warenkörbe mit „Ablege“-Animation - Die bessere Lösung? | usabilityblog.de [usabilityblog.de] on Topsy.com

  5. Pingback: Warenkorb-Konversionsraterate optimieren | Tipps zur Web-Usability

  6. Tobias

    Also soooo schlecht finde ich den Warenkorb bei petshop nun nicht……!

    Die Lösung von Redcoon zu dem Thema finde ich dagegen aber deutlich besser!

    Antworten

Schreibe einen Kommentar

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