Conversion Optimierung

10+1 Tipps zur Optimierung der Progress Bar im Checkout

Marcel Licht
 Lesezeit: 7 Minuten    
10
arrow_down
10

Hat sich der Shopbesucher erstmal dazu entschlossen, ein Produkt in den Warenkorb zu legen, soll der Kauf dann natürlich auch möglichst schnell und unkompliziert zu erledigen sein.

So ist es auch nichts Neues, dass Shopbetreiber ihren Checkout-Prozess so einfach und komfortabel wie möglich gestalten sollten.

Doch anhand welcher Kriterien und vor allem zu welchem Zeitpunkt entscheidet ein Onlinekäufer, ob er diesen abschließenden Kaufprozess als leicht und oder eben als anstrengend und aufwendig empfindet?

Kasse - CheckoutDie Idee über dieses Thema zu schreiben kam mir Anfang dieser Woche beim Einkauf im Baumarkt. Nachdem ich mich nach langem hin und her für einen Grill entschieden hatte und auch die passende Holzkohle ihren Weg in den Einkaufswagen gefunden hat, machte ich mich auf den Weg zur Kasse. Dort angekommen zeigten sich drei Warteschlangen mit jeweils mindestens 15 wartenden und teilweise wohl schon sehr frustrierten Kunden.

Es ging auch nur sehr langsam voran, und nach ein paar Minuten hat sich rum gesprochen dass alle Barcode-Scanner defekt seien und daher die Codes jedes einzelnen Artikels mühselig von Hand eingetippt werden müssen. Da stand ich also nun als Letzter in der Schlange und fragte mich wie wahrscheinlich auch viele andere:

„Wie lange wird das wohl noch dauern?“

Die ersten Kunden begannen damit, den Kassierern die Artikelnummern zu diktieren, damit es hoffentlich ein bisschen schneller geht. In zahlreichen Köpfen entstand da sicherlich die Frage:

„Wie kompliziert und anstrengend wird das werden?“

Und zu guter Letzt führen all diese Zweifel zu der entscheidenden Frage:

„Lohnt sich der Aufwand hier überhaupt?“

Für ein paar wenige Kunden in der Warteschlange lautete die Antwort wohl ganz klar „nein“ – und sie liefen an den Kassen vorbei zum Ausgang hinaus.

Ich für meinen Teil nahm die Viertelstunde Wartezeit und den „Mehraufwand“ beim Nummern Vorlesen aber in Kauf. Hauptsächlich weil für mich der empfundene „Verlust“, an diesem schönen sonnigen Abend nicht grillen zu können weitaus größer gewesen wäre als einfach ein paar Minuten in der Warteschlange zu verbringen.

Der Weg zum nächsten Baumarkt hätte sicherlich mindestens genauso viel Zeit gekostet – und da ist es noch lange nicht gesagt dass ich dort auch fündig werde.

Was bedeutet das für den E-Commerce?

Ähnlich wie im stationären Handel versuchen auch Onlinekäufer den Komfort eines Checkouts zu bewerten – und machen davon nicht selten den Kauf abhängig.Entscheidung

Ein solcher Prozess bietet im Gesamtverlauf natürlich viele Elemente und Ansatzpunkte, welche dem Nutzer theoretisch in jedem Schritt aufs Neue ermöglichen ein Urteil über die Qualität zu fällen.

Sei es bei der Adresseingabe, bei der Wahl der Zahlungsmethode oder auf der Bestätigungsseite.

Wie auch im obigen Beispiel aus dem Baumarkt ist diese Bewertung in der Onlinewelt allerdings in erster Linie davon abhängig, wie komfortabel und einfach der bevorstehende Prozess erwartet wird. So versuchen Onlinekäufer anhand von bestimmten Merkmalen bereits im Ersteindruck zu antizipieren, welcher Aufwand auf sie zu kommen wird. Eine tragende Rolle spielt dabei die grafische Prozessleiste (engl.: Progress Bar).

Im Folgenden möchte ich einige Hypothesen vorstellen, welche über die Prozessleiste schon während des stark prägenden Ersteindrucks eine „gefühlte Einfachheit“ vermitteln können, um die Motivation auch für den eher unangenehmen Teil des Onlinekaufs aufrecht zu erhalten.

1. Reduzieren Sie die Anzahl der Prozessschritte

In vielen Shops werden Nutzer im Checkout mit bis zu 10 einzelnen Steps konfrontiert, welche alle konsistent in der Navigation mitgeführt werden. Erst kürzlich fiel mir in einem recht großen deutschen Onlineshop die folgende Leiste auf:

  1. Warenkorb
  2. Anmeldung
  3. Rechnungsadresse
  4. Lieferadresse
  5. Zahlungsart
  6. Versand
  7. Geschenkeservice
  8. Rabatt/Gutschein
  9. Übersicht
  10. Fertig

Der Anblick dessen lässt den Prozess im ersten Moment weitaus komplizierter und aufwendiger erscheinen, als er tatsächlich ist. Besser machen das Anbieter wie Babywalz oder Görtz, die ihre Nutzer schon nach drei Steps ans Ziel bringen.

Progress Bar im Checkout - Baby Walz

Progress Bar im Checkout - Görtz

Objektiv betrachtet werden bei diesen beiden Shops annähernd die gleichen Daten abgefragt wie im zehnschrittigen Prozess. Würde man allerdings eine repräsentative Anzahl an Nutzern explizit danach fragen, welcher Prozess denn einfacher und schneller zu absolvieren ist, würden die Antworten mit Sicherheit zu Gunsten der kürzeren Varianten ausfallen.

2. Machen Sie die aktuelle Position deutlich

Zur Wahrung der Nutzerkontrolle ist es natürlich auch sehr wichtig, die aktuelle Position optisch ausreichend hervor zu heben. DocMorris macht es vor:

Progress Bar im Checkout - DocMorris

3. Nutzen Sie klare und kurze Bezeichner

Zum einfachen Verständnis und zur schnellen Orientierung sollten die Titel der Schritte sprechend formuliert und zügig erfassbar sein. Im Checkout von Mister Spex wird sofort klar, welche Abfragen hinter den einzelnen Seiten zu erwarten sind.
Progress Bar im Checkout - Mister Spex

4. Nummerieren Sie die einzelnen Steps

Eine Nummerierung wie im Shop von Bonprix kann die Orientierung des Besuchers noch weiter verbessern.

Progress Bar im Checkout - Mister Spex

5. Gestalten Sie die grafische Leiste optisch „leicht“

Neben der Anzahl der Schritte kann auch die optische Wirkung einen großen Einfluss auf die empfundene Leichtigkeit haben. Farblich kontraststarke und dunkle Flächen können schnell einen „schweren“ Eindruck hinterlassen. Das minimalistische und durch viel Weißraum luftige Design bei Asos wirkt sich hingegen sehr positiv auf diesen Aspekt aus.

Progress Bar im Checkout - Asos

6. Suggerieren Sie Schnelligkeit über textliche Hinweise

Bei Neckermann wird dem Besucher die Frage, wie lange das ganze wohl dauern wird, direkt durch einen Hinweis an der Progress Bar beantwortet. Die Glaubwürdigkeit und Wirksamkeit dieser Aussage wird aber höchstwahrscheinlich von Shop zu Shop sehr unterschiedlich sein.

Progress Bar im Checkout - Neckermann

7. Integrieren Sie den Warenkorb als voran gestellten Step

Wird die Progress Bar wie beispielsweise im t-online.de Shop bereits im Warenkorb angezeigt, kann der Besucher schon an dieser Stelle abschätzen was auf ihn zukommt.

Diese Abwägung kann abhängig von der gegebenen Situation durchaus die Bereitschaft erhöhen, in den Checkout einzusteigen bzw. „zur Kasse“ zu gehen. Zudem behält der Besucher insofern die Kontrolle, als dass er jederzeit die Möglichkeit behält zurück zum Warenkorb zu gelangen.

Progress Bar im Checkout - t-online

8. Liefern Sie implizite Codes für erfolgreiche Zwischenziele

Bekannte Symbole können das mentale Abhaken für den Besucher stark erleichtern und darüber hinaus die Motivation für den nächsten Schritt steigern. Im Onlineshop vom Haufe Verlag werden die bereits abgeschlossenen Zwischenziele sehr ansprechend mit grünen Häkchen markiert.

Progress Bar im Checkout - Haufe

9. Arbeiten Sie mit leicht erfassbaren Icons

Einen positiven Einfluss auf die Conversion können auch Piktogramme für die jeweiligen Schritte haben. Voraussetzung ist dabei aber, dass die Icons zügig erfassbar sind und keinen unnötigen Kognitionsaufwand erfordern. Ein gutes Beispiel dazu liefert otto.de, hier werden die Textbezeichner visuell durch Paketicons unterstützt.

Gleichzeitig vermittelt diese Form der Visualisierung noch eine gewisse Dynamik – sodass es auf der letzten Seite schon so wirkt, als sei das Paket ab diesem Zeitpunkt bereits unterwegs.

Progress Bar im Checkout - Otto

10. Gestalten Sie die Navigationselemente klickbar

Insofern es das Shopsystem technisch erlaubt, sollte der Nutzer die Möglichkeit haben über die Prozessleiste zumindest zurück zu navigieren. Dies gestaltet sich für den Besucher weit komfortabler, als wenn er ständig nach Zurück-Buttons suchen muss.

11. Vermeiden Sie Ausstiege, Sprünge oder Umbenennungen

In vielen Checkouts kommt es dazu, dass Nutzer für bestimmte Aktionen aus dem dargestellten Prozess gerissen werden. Ein Beispiel sind Registrierungen oder Logins, welche häufig außerhalb des Checkouts auf gesonderten Seiten stattfinden.

Ohne die Progress Bar hat der Besucher nur noch eine beschränkte Orientierung und verliert gleichzeitig die Kontrolle darüber, was als nächstes geschieht. Aus diesem Grund sollten alle relevanten Aktionen in die Leiste integriert werden.

Zu vermeiden sind außerdem Sprünge über mehrere Schritte sowie wechselnde Bezeichner. Beides kommt in vielen Checkouts nach Registrierungen oder Logins vor.

Fazit

Wie aus den gelisteten Hypothesen deutlich wird, bietet im Checkout-Prozess allein die Progress Bar immens viele Optimierungsmöglichkeiten. Mal ganz davon abgesehen, dass noch immer viele Shops eine solche Leiste überhaupt garnicht erst implementiert haben.

Sicherlich sind die vorgestellten Ideen nicht für jeden Shop pauschal anwendbar und erfolgversprechend. Die Wirksamkeit einer jeden Änderung sollte daher in jedem Fall zunächst mittels Testing überprüft werden.

Fest steht generell jedoch, dass sich eine im Ersteindruck empfundene „gefühlte Einfachheit“ sehr positiv auf den Weg zur Dankeseite auswirken kann.

Sehr interessant ist dabei, dass sich der Ersteindruck oft so tief und nachhaltig einprägt, dass diese Bewertung auch auf alle folgenden Schritte projiziert wird. So stellen wir in Nutzertests immer wieder fest, dass sich das während der ersten Sekunden gefällte Urteil (egal ob positiv oder negativ) in den darauf folgenden Schritten kaum noch ändert.

Was macht in Ihren Augen die perfekte Prozessleiste aus, wie bewerten Sie das Potenzial? Über Kommentare freue ich mich.

Über den Autor

Marcel Licht

Vorstand

Marcel Licht ist Vorstand bei konversionsKRAFT. Er beschäftigt sich seit 2009 mit der Conversion Optimierung von Websites namhafter Unternehmen aus den Bereichen Finanzen, Telekommunikation, Tourismus und Onlinehandel. Weiterhin ist Marcel Licht Dozent für Conversion Optimierung an der Hochschule Darmstadt. Seine Artikel erschienen bisher in Publikationen wie iBusiness, Website Boosting, t3n, Chip und weiteren Magazinen.
Frage zum Artikel? Frag den Autor!

Welche Frage hast du an den Autor?

15 [contact-form-7 id="53320" title="Autorkontakt"]

10 Kommentare

  1. Gravatar

    Kevin,

    Ein sehr guter Artikel.

    Ich habe eine Frage zum ersten Punkt:
    Es ist sicher richtig, dass die Nutzer nach dem ersten Blick meinen, sie hätten einen einfacheren Bestellprozess vor sich, wenn die üblichen 6 bis 10 Schritte visuell auf 3 Schritte eingekürzt werden.

    Aber wie verhalten sich die Nutzer, wenn sie im Prozess merken, dass sie nach mehrmaligem Klicken immer noch in Schritt 2 festhängen und sich die Anzahl der Klicks/Schritte von den erwarteten Klicks/Schritten deutlich unterscheidet?

    Sehen Nutzer über fehlende Transparenz einfach so hinweg, oder beeinflusst das die Absprungraten der einzelnen Unterschritte eher negativ?

  2. Gravatar

    Gian Marc,

    Sehr Starker Artikel!

  3. Gravatar

    Holger Maassen,

    Ordentlicher Artikel – Gut zusammengestellt jedoch heißt es wie so oft “alles machen” ist NICHT “alles richtig machen”
    In jedem Punkt steckt etwas korrektes – aber für alle gilt prüft dies an euren Kunden, an euren Services, eurem Brand und an eurem Kunden.
    Zwei weiterführende Links…
    http://ux4dotcom.blogspot.de/2011/01/shopping-carts-check-out-there-is-often.html
    und …
    E-Commerce Checkout Usability – http://baymard.com/checkout-usability

  4. Gravatar

    Marcel Licht,

    Zunächst einmal vielen Dank für das positive Feedback! 🙂

    @Kevin
    Sehr guter Einwand. Natürlich kann es nicht damit getan sein, einfach die angezeigten Schritte auf das Minimum zu reduzieren – dahinter aber alle Schritte unangetastet zu lassen. Auch in Nutzertests stellen wir häufig fest, dass Differenzen zwischen den suggerierten und tatsächlichen Schritten die empfundene Transparenz und damit die Motivation stark mindern können. Mehrere Seiten innerhalb eines Schritts sollten daher möglichst vermieden werden. Stattdessen sollten verschiedenen Inhalte geschickt in einem Schritt untergebracht werden.

    Besonders negativ wirken sich auch plötzlich hinzukommende Prozesselemente aus. So kommt es z.B. durchaus vor, dass ein fünfschrittiger Prozess

    1 – 2 – 3 – 4 – 5

    nach Abschluss von Step 3 plötzlich zu einem siebenschrittigen wird:

    1 – 2 – 3a – 3b – 3c – 4 – 5

    An dieser Stelle entstehen beim Besucher natürlich große Zweifel darüber, wie schnell und einfach der Abschluss denn tatsächlich zu bewältigen sein wird. Gepaart mit der Vermutung, dass hinter Schritt 4 wieder mehrere Unterseiten auftreten werden, kann diese fehlende Tranparenz die Abbruchrate durchaus erhöhen.

    @Holger Maassen
    Es ist völlig richtig, dass nicht alle Hypothesen pauschal auf alle Shops anwendbar und erfolgversprechend sind. Daher sollten solche Änderungen möglichst feingranular getestet werden. Danke auch für die 2 weiterführenden Links – sehr interessante Artikel.

  5. Gravatar

    Eduard Bauer,

    old school rocks 🙂
    Super Beitrag!

  6. Gravatar

    Mario,

    …hin zum konsumentengerichteten Einkaufserlebnis im Autorentext gefällt mir sehr gut. Beziehung zum Kunden finde ich da A und da Z. Wie ich bereits schon gesagt habe, bin ich alles andere als ein Fachmann im Bereich Onlineshops. Jedoch erkenne ich hier eindeutige und klare Parallelen zum Verkaufsprozess in einem Direkt Mailing. Der Bestellschein sollte nicht von der Sprache des Fließtextes abweichen. Also nicht plötzlich förmlich und sachlich werden, wenn der Haupttext emotional geschrieben ist.

    Man sollte den Kunden nochmal daran erinnern, was er bekommt und den Prozess den Bestellschein auszufüllen zu einfach und übersichtlich wie möglich zu gestalten.

    Es ist praktisch extakt das Gleich wie hier.

    Grundsätzlich ist eine deutlichere Zuwendung zum Konsumenten einfach wieder sehr wichtig geworden. Beziehung eben.

    Ich finde dieser Beitrag drückt das aus. Hat der Kunde den Weg im Bestellprozess einfacher, wirkt sich das positiv für beide Seiten aus.

  7. Gravatar

    Hannes,

    Wie bereits die Vorgänger geschrieben sind in den aufgeführten Links die angeblich 3 Steps benötigen Zwischensteps vorhanden, wie 1 – 1a – 2 – 2a – 3
    Schaut man sich die deutsche Rechtssprechung an, so sind 3 Steps zwingend, die 4. Seite ist meistens dann die Danke / trusted-Shop Versicherungsseite. Daher wäre eine Überarbeitung des Berichtes mit “echten” 3 Steps Link-Lösungen sinnvoll.

  8. Gravatar

    Angelika,

    Super-Artikel! Schade, dass ich ihn nicht schon früher gelesen habe.
    Wer ist den der geeignete Warenkorb-Tester?

  9. Gravatar

    Meyra,

    Sehr guter Artikel! Kann der hier hervorgehobenen Bedeutung der “Progress Bar” nur vollumfänglich zustimmen. Einen One-Page-checkout empfinde ich persönlich auch als angenehmer.

  10. Gravatar

    Tobias,

    Sehr gute Liste!
    Konntet Ihr die Aussagen in Punkt 6 und 7 per A/B-Tests belegen?
    Bei Punkt 7 könnte ich mir noch eher vorstellen, dass es Auswirkungen auf Conversion hat.

    Die Icons bei Otto sind auf jeden Fall zu klein und spiegeln den Inhalt der Schritte auch nicht wirklich wieder.
    Bei Kombinationen von Icons und Zahlen ist auf jeden Fall auf das Größenverhältnis zu achten, um nicht zu viele konkurriende Elemente anzubieten, die die Wahrnehmung der Punkte erschweren.

Schreibe einen Kommentar

Teile diesen Artikel

Kostenlos anmelden