Praxisguide
In diesem Praxisguide beschäftigen wir uns mit dem ersten Schritt des Checkouts im Online-Shop: der Warenkorb-Seite. Diese Seite dient dazu, Besuchern einen Überblick über den Inhalt des Warenkorbs zu verschaffen. Außerdem muss sie Besucher überzeugen, in den Checkout einzusteigen und die Produkte letztendlich zu kaufen.
Autor
Julian Kleinknecht
Autor
Marc Bohlen
auf die einzelnen Schritte als auch auf übergreifende Themen wie Formulare ein.
In diesem Praxisguide beschäftigen wir uns mit dem ersten Schritt des Checkouts: der Warenkorb-Seite. Diese Seite eines Online-Shops muss gleich zwei Anforderungen erfüllen:
Zusätzlich zu diesen beiden Themen erläutern wir im fünften Kapitel die Frage der Reservierung von Artikeln im Warenkorb.
Die Warenkorbseite informiert den Nutzer über ausgewählte Artikel. Modifikationen der Auswahl sind ebenfalls Bestandteil einer guten Warenkorbseite – ebenso wie das Erzeugen einer guten Übersicht über den Einkauf. Doch das ist nicht alles.
Die Warenkorbseite ist ein Closer. Zudem ist sie Startpunkt für den Checkout. Dort entscheiden Nutzer, ob sie zur Kasse gehen oder nicht. Und so trennt die Seite aus Sicht des Online-Händlers die Spreu vom Weizen. Die Aufmachung der Seite entscheidet mit, ob der Warenkorb verwaist oder Besucher zu zahlenden Kunden werden.
Die Anforderungen an die Seite sind dadurch mannigfaltig und beinhalten unter anderem:
Kurz gesagt: Die Aufgabe der Warenkorbseite ist in zwei Funktionsgruppen aufgeteilt.
Wie beide Aufgaben erfüllt werden können, beschreiben wir in den folgenden Kapiteln.
Auf das Thema Cross-Sellling im Warenkorb und den restlichen Checkout-Seiten gehen wir in einem separaten Praxisguide ein (im Erscheinen).
Um die für eine gute Conversion Rate förderliche Funktionalität des Warenkorbs zu implementieren, hat sich in der Praxis die Umsetzung der folgenden drei Schritte bewährt:
Diese dienen dazu Artikeln zu löschen, zum Ändern der Artikelmenge und bieten Links zum Aufrufen der Produktdetails sowie gegebenenfalls Elemente zum Modifizieren von Produktoptionen an.
Besonders gut sind dabei Gestaltungen, die mit passenden und vertrauten Elementen und Symbolen arbeiten. Dies ist beispielsweise ein Mülleimer-Symbol oder ein rotes X zum Löschen eines Artikels.
Denken Sie daran, Links zum Produkt in neuen Tabs zu öffnen.
Symbole beim beck-shop.de
Weiterbildung per eLearning.
Keine Anmeldung notwendig
Diese Punkte sollten Sie beachten:
Auf der Warenkorbseite sollten die „Nebeninformation“ Lieferbarkeit sowie Nachlass oder Rabatt ebenfalls dargestellt werden. Dazu eignen sich farbige Visualisierungen gut. Für Streichpreise und Rabatte ist rot eine erprobte Wahl. Für lieferbare Produkte entsprechend ein grüner Schriftzug.
Für viele Käufer sind Rabatte und Nachlässe hochgradig kaufrelevant. Ohne eine Visualisierung in der Postenliste verpufft die Kraft der beliebten und effektiven Hebel zur Steigerung der Abverkäufe nach der Produktdetailseite. Und die Kaufentscheidung wird de facto erst im Warenkorb getroffen. Daher sollte sich der Käufer nicht an diese Vorteile erinnern müssen, sondern in der Übersicht leicht erkennen, welche Rabatte oder Ersparnisse er beim Kauf einstreicht.
Für den Lagerbestand gilt Vergleichbares. Auch dort sollte dem Kunden nicht abverlangt werden, die Informationen von der Produktdetailseite beim Anblick des Warenkorbes im Kopf zu haben. Dies würde mit dem Paradigma der Optimierung des Checkouts brechen, das fordert, den Prozess einfach und übersichtlich zu gestalten.
Die Best-Practice-Lösung, die auch als guter Conversion-Hebel gilt, ist die Anzeige der „Lieferung bis“-Anzeige. Diese gibt wieder, wann das Produkt bei einer definierten, zeitnahen Deadline für die Bestellung voraussichtlich geliefert wird. Ein Beispiel: „Lieferung bis Donnerstag den xx.xx.2014 bei Bestellung bis 18 Uhr am heutigen Tage“.
Als Basis des Warenkorbs sind zwei unterschiedliche technische Ansätze gängig:
Reine HTML-Formulare sind Relikte aus den Anfängen des Internet-Zeitalters. Bei diesen gibt es gravierende Usability-Probleme. Nach Eingaben erfordert die Seitenaktualisierung einen Reload. Bei Buttons kann dies durch die Code-Gestaltung automatisiert werden.
Bei Text-Eingabefeldern, Radiobuttons und Pull-Down-Menüs erfolgt jedoch keine automatische Aktualisierung. Zur Übernahme der geänderten Daten ist bei diesen die zusätzliche Betätigung eines Buttons nötig. Leicht stimmen so angezeigte Daten nicht mit den auf dem Server vorhandenen überein und beispielsweise Preisberechnungen sind nicht länger aktuell. Das führt schnell zu Verwirrungen beim Kunden und stellt eine schlechte Usability dar.
Hinzu kommt, dass in allen Fällen für diese Lösung vergleichsweise hohe Ladezeiten zum Aktualisieren des Warenkorbs bei Änderungen anfallen. Dies führt bei reger Nutzung durch die Kunden nicht nur zu einer erhöhten Serverlast, bei einem wenig performanten Hosting kann es zu Verzögerungen beim Reload der Seite kommen. Diese wiederum erhöhen die Abbruchwahrscheinlichkeit bei den Warenkörben.
Für die Usability und die Conversion ist die JavaScript-basierende AJAX-Webtechnologie ein Segen. Viele kennen diese Technologie von den beliebten Single-Page Webseiten, die zurzeit nicht nur bei Startups beliebt sind.
Der Vorteil bei AJAX: Es entkoppelt den Seiten-Reload von den Datenmanipulationen im Browserfenster und von der Aktualisierung der Serverdaten. Damit lassen sich Warenkorbseiten realisieren, die eine gute User Experience schaffen.
In der Praxis sieht das so aus: Aus Sicht des Nutzers aktualisieren sich so Preise automatisch bei Änderungen von Optionen, Menge oder Eigenschaften. Auch ein Löschen von Produkten ist ohne Reload der Website möglich. Dazu werden HTML-Elemente wie Links, Buttons, Pull-Down-Menüs oder Radio-Buttons mit definierten Events verknüpft. Dies kann ein Klick, Überfahren eines Bereiches oder auch das Verlassen der Website sein. Viele Usability-Konzepte lassen sich zudem mit JavaScript implementieren.
Ein weiteres Plus für AJAX: Die Ladezeiten fallen ebenfalls günstig aus. Es werden per XML oft nur Teildaten der Website ausgetauscht. Manche Änderungen erfolgen zudem lediglich client-seitig. AJAX spart vielfach so Traffic und verlagert gleichzeitig benötigte Rechenleistung auf den Client. Der Webseitenbesucher leidet dadurch nicht, im Gegenteil. Zur Optimierung der Performance lassen sich gezielt Operationen auf den Server oder Client verlagern. Das sorgt für funktionsreiche und performante Webseiten.
Erprobt sind AJAX-Lösungen seit Jahren. Für zahlreiche Anwendungsfälle existieren bereits fertige Lösungen in Form von Modulen oder Frameworks. Das verspricht schnelle Entwicklungszeiten, günstige Einführungskosten und eine gute Wartbarkeit. Mit HTML5 greift AJAX praktisch Hand in Hand, so dass diese Technologie auch zukunftssicher ist.
Neben der Warenkorb-Manipulation benötigt eine gute Seite die Ausrichtung auf den Checkout. Dies gelingt durch Berücksichtigung wichtiger Eigenschaften einer guten Einstiegsseite für den Conversion-Funnel. Der lässt sich durch die Berücksichtigung der folgenden zentralen Punkten entwickeln:
Dieses Ziel wird in der Praxis leicht durch Umsetzung der folgenden Punkte erzielt:
Achtung: Wichtig ist, dass der angehende Käufer die Warenkorbseite eindeutig dem Shop zuordnen kann. Er sollte sich nicht zu einem anderen Anbieter umgelenkt fühlen. Die CI ist trotz gefordertem Minimalismus einzuhalten.
Transparenz ist für das Grundvertrauen des Käufers wichtig. Diese ist insbesondere durch Angaben in Verbindung mit einer günstigen Visualisierung zu schaffen. Dabei sollten folgende Angaben auf der Warenkorbseite nicht fehlen, auch wenn die Informationen an anderer Stelle in der Customer Journey bereits dargestellt wurden.
Kostenfreier Versand auch im Warenkorb
Ist der Versand kostenfrei, stellen Sie das auch auf der Warenkorbseite hervorgehoben dar. Dies ist ein Conversion-Hebel und die fehlende Angabe kann sogar zum Conversion-Killer werden. Dann nämlich, wenn der Nutzer aufgrund der fehlenden Information auf die Suche nach den Versandkosten geht.
Transparenz ist die Basis des Nutzervertrauens. Durch Trust-Elemente lässt sich dies noch steigern. Zu den Trust-Elementen gehören Logos von Versanddienstleistern, Payment-Anbietern und Gütesiegel. In der Praxis haben sich folgende Positionierungen bewährt:
Die Integration der Trust- und USP-Elemente kann an mehreren Stellen erfolgen. Es sollte jedoch an den Positionen immer nur ein Set dargestellt werden – ausgenommen vom Footer. Dieser kann konzeptbedingt meist alle Elemente aufnehmen.
Die Anzahl der Element-Gruppen im Header sollte jedoch auf 2-3 Elemente beschränkt werden. So wird dieser nicht überladen. Die Positionierung neben dem Zur-Kasse-Button lohnt für A/B-Tests.
Kleine, aber auf der Warenkorbseite offen gelassene Fragen, vereiteln oft den Checkout. Diese Kaufabbrüche sind jedoch in vielen Fällen vermeidbar. Dazu genügt es häufig, die Kontaktinformationen prominent zu platzieren.
Praxiserprobte Locations für die Kontaktdaten sind vor allem Header und ggf. der Footer. Darüber hinaus ist die Sidebar eine gute Zone für Telefonnummer und Live-Chat – vorausgesetzt, die Daten landen im Sichtbereich des Kunden – also above the fold bis zum Umfeld des Zur-Kasse-Buttons.
Der Kunde sollte leicht erkennen, wie der Checkout gestartet wird. Dazu ist der Zur-Kasse-Button gut erkennbar zu gestalten und zu platzieren. Die Farbwahl und Beschriftung für den Button oder Link sind klassische Aufgaben für A/B-Tests.
Auch kann es sich lohnen, mit der Integration mehrerer Elemente zu experimentieren. Eine zusätzliche Positionierung der Buttons über dem Warenkorb ist ein Beispiel dafür. Andere Shops versuchen es mit Zur-Kasse-Buttons, die an einer Position fixiert sind und beim Scrollen so immer above the fold bleiben.
Zeigen Sie dem Nutzer, wie es nach dem Warenkorb weitergeht und wie viele Schritte noch folgen. Das gibt ihm ein Gefühl der Kontrolle und Transparenz. Und es baut Hemmungen ab, den Checkout zu starten.
Vermeiden Sie zweideutige Beschriftungen und nicht erwartungskonforme Positionierungen von Schaltelementen. Eine leicht misszuverstehende Kommunikation sorgt schnell für Verwirrung vor dem Checkout. Als Ziel gilt: Am besten ist, der potenzielle Käufer muss nicht nachdenken, dann kommen auch keine Zweifel auf.
Für das Basiskonzept ist auf Bewährtes zu setzen, also Produktbilder links, dann Produktname und Produkt-Meta-Informationen horizontal gefolgt von Produktoptionen und Menge sowie abschließend dem Preis. Der erwähnte Löschen-Button kommt am Zeilenanfang, -ende oder unterhalb des Produktes. Variationen können die Conversion liften. Dies herauszufinden ist Aufgabe der Tests.
Klassisch schick, übersichtlich und somit intuitiv zu erfassen: Otto macht keine Experimente und liefert Nutzern einen erwartungskonformen Warenkorb. Auf Modifikationsmöglichkeiten verzichten die Kunden dabei nicht. Das stützt eine gute Conversion.
Der Apple Online-Shop setzt auf ein frisches Layout. Die Aktionselemente zur Modifikation des Warenkorbes sind horizontal und vertikal angelegt. Das macht bei mehreren Änderungsoptionen Sinn. Trotz Gravur und unterschiedlichen Varianten für eine Geschenkverpackung bleiben klare Strukturen und die Übersichtlichkeit erhalten.
In diesem letzten Kapitel möchten wir noch auf ein weiteres Thema eingehen, das nicht nur die Darstellung der Warenkorb-Seite betrifft. Das Reservieren von Waren und die Lagerverwaltung stellen ein klassisches Optimierungsproblem dar: Der Kunde legt ein als verfügbar deklariertes Produkt in den Warenkorb. Er erwartet die Verfügbarkeit, wenn die Bestellung in den Checkout geht. Der Händler wiederum ist bemüht, Lagerbestände zu optimieren und den Absatz zu maximieren.
Grundsätzlich gibt es zwei Prinzipien für die Produktreservierung:
(1) Die reelle Verfügbarkeit wird nach dem Checkout geprüft
Bei dieser droht jedoch eine hohe Frustration und negatives Empfinden beim potentiellen Kunden, wenn beim Checkout oder danach das gewünschte Produkt doch nicht mehr lieferbar ist. Der Kunde hat in der Regel Zeit für die Bestellung und Energie für die Kauf- und Anbieterentscheidung investiert. Diese gehen so verloren.
Die negative Wahrnehmung, die eine späte Mitteilung der nicht vorhandenen Lieferbarkeit auslöst, überträgt der Neukunde leicht auf den gesamten Online-Shop. Darüber hinaus kann diese Praxis den Nutzer aus dem Checkout zurück in die Produktauswahlphase werfen – in ungünstigen Fällen und bei geduldigen Kunden sogar mehrfach. Sofern logistisch und technisch möglich, sollte von dieser Lösung Abstand genommen werden.
(2) Die Ware wird bereits beim Hinzufügen des Produktes in den Warenkorb reserviert
Diese Variante verhindert, dass der Kunde beim Checkout eine böse Überraschung erlebt. Mit dem Hinzufügen der Produkte zum Warenkorb werden diese reserviert. Was beim Hinzufügen verfügbar ist, kann der Kunde auch kaufen. Das gibt ihm Sicherheit.
Diese Praxis können sich nur wenige Händler erlauben. Die Warenbestände sind endlich: Webseitenbesucher bringen nicht jeden Warenkorb durch den Checkout. So entsteht schnell ein beachtlicher Overhead für die Lagerhaltung oder eine lediglich virtuell bestehende Knappheit der Waren. Letztere verhindert wiederum den Kauf der Angebote durch weitere Kunden, die den Warenkorb tatsächlich auschecken.
Bei Eventim tickt prominent im Warenkorb platziert der Timer, der anzeigt, wie lange das Ticket für den potenziellen Käufer noch reserviert ist. Böse Überraschungen sollte es so nach der Kasse nicht geben.
Für die Praxis ist in den meisten Fällen ein Mittelweg zu wählen: Variante 2 wird zeitlich begrenzt. Anschließend fällt die Session in den Modus von Variante 1.
Die Reservierung erfolgt bei der Kombi-Lösung mit dem Hinzufügen in den Warenkorb – aber nur zeitlich begrenzt. Zumindest für eine Dauer von einer halben Stunde oder mehr. Checkt der Interessent bis dahin nicht aus, wird die Reservierung aufgehoben. Die Verfügbarkeit der Waren ist dann Risiko des Kunden. Das ist ungünstig für langsame oder unentschiedene Online-Shopper, es ermöglicht aber eine praxistaugliche Lagerhaltung.
Technisch ist die Umsetzung verhältnismäßig einfach. Auf dem Server erhält ein zum Warenkorb hinzugefügter Artikel ein Timeout. Alternativ kann auch der komplette Warenkorb ein Timeout für die Reservierung erhalten, der bei Inaktivität des Kunden zu laufen beginnt.
Ist in beiden Fällen der Timeout erreicht, werden die Produkte wieder dem Lagerbestand hinzugefügt. Die primäre Herausforderung ist die Kommunikation mit dem Kunden. Möglich sind ein Countdown oder eine „reserviert bis“-Angabe. Diese kommuniziert der Shop im Warenkorb oder als Hinweis beim Hinzufügen von Produkten.
Bei der Umsetzung dieser Lösung sollten diese beiden Anforderungen beachtet werden:
Erstens muss dem Kunden die Verfahrensweise verständlich gemacht werden, ohne dass er sich dadurch unter Druck gesetzt fühlt. Fühlt sich ein potenzieller Käufer unter Zeitdruck gesetzt, nimmt dieser eventuell Abstand vom Anbieter oder führt den Einkauf vorzeitig zum Checkout, ohne weitere Produkte in den Warenkorb zu legen. Dies hat negative Folgen für den Umsatz und den durchschnittlichen Warenkorb des Kunden. Experimentieren Sie also mit verschiedenen Darstellungsarten des Timers.
Zweitens sollte der Warenkorb nicht gelöscht werden. In der Praxis ist es leider weitverbreitet, dass der Warenkorb nach dem Timeout einfach gelöscht wird. Dieser Ansatz schadet jedoch sowohl der Conversion Rate als auch der Nutzererfahrung. Der Kunde verliert aufgrund einer Pause oder Ablenkung den Warenkorb. Wendet er sich dem Shop nach einer Unterbrechung wieder zu, muss der Einkauf von neuem begonnen werden. Die Wahrscheinlichkeit eines Absprungs ist dann sehr hoch.
Apple löst das Time-Out im Checkout-Prozess vorbildlich. Anstelle gleich den ganzen Warenkorb zu löschen, wird die Session beendet. Der Warenkorb bleibt erhalten und lässt sich durch einen Klick aufrufen.
