Sechs Stellen im Checkout unter der Lupe

Wie ist dieser Beitrag einzuordnen?

Die Abbildungen sind eigene schematische Illustrationen für diesen Beitrag.

Sie zeigen keinen realen Shop und keinen durch Nutzertests belegten Vorher-nachher-Erfolg. Die linke Variante enthält bewusst festgelegte Bedienprobleme; die rechte zeigt einen redaktionellen Lösungsvorschlag. Preise, Produkte und Lieferzeit sind Illustrationswerte, getrennt von den Nettowerten der wirtschaftlichen Modellfallstudie.

1 Wie wird der Kauf ohne Konto sichtbar?

In der Ausgangsvariante: Eine Anmeldung steht im Vordergrund.

Der Gastzugang folgt erst darunter. Wer nur bestellen möchte, muss zunächst verstehen, ob ein Konto erforderlich ist.

Im Vorschlag: „Als Gast fortfahren“ steht direkt am Einstieg. Die Anmeldung für bestehende Kunden bleibt erreichbar. Ein optionales Konto kann später angeboten werden, wenn der eigentliche Kauf abgeschlossen ist.

So lässt es sich prüfen: Geben Sie einer Person ohne bestehendes Konto die Aufgabe, den Kauf zu beginnen. Beobachten Sie, welchen Einstieg sie wählt und ob sie eine Registrierung für notwendig hält. Auf dem Mobilgerät darf eine automatisch geöffnete Tastatur den Gastzugang nicht verdecken.

Baymards kommentierte Beispiele zur Kontoauswahl zeigen dieses Thema an realen Oberflächen. Unsere Illustration verwendet eigene Elemente und Texte.

Beleg: Baymard: Account selection examples

2 Was kostet die Bestellung insgesamt?

In der Ausgangsvariante: Der Warenwert ist sichtbar, Versandkosten bleiben bis später offen.

Die Darstellung beantwortet damit noch nicht, welchen Gesamtbetrag die Person zahlen soll.

Im Vorschlag: Für das gewählte Lieferziel stehen Warenwert, Versand und Gesamtbetrag nebeneinander. Im Bild sind das 89 Euro für die Ware und 4,90 Euro Versand, zusammen 93,90 Euro als angenommener vollständiger Zahlbetrag.

So lässt es sich prüfen: Ändern Sie Lieferziel und Versandart. Kontrollieren Sie, ob die Rechnung konsistent aktualisiert wird. Falls ein Preis erst nach weiteren Angaben bestimmbar ist, muss genau das verständlich erklärt werden. Eine unbestätigte Schätzung darf nicht wie ein endgültiger Betrag erscheinen.

3 Wann kommt die Bestellung und wie geht es weiter?

In der Ausgangsvariante: Es steht lediglich „Standardversand“.

Für einen zeitkritischen Einkauf fehlen Informationen zur erwarteten Zustellung.

Im Vorschlag: Die gewählte Versandart erhält eine belegbare Zeitangabe. Der Button beschreibt die nächste Handlung, hier „Weiter zur Zahlung“. Er löst in dieser Darstellung noch keine Bestellung aus.

So lässt es sich prüfen: Stimmen Lagerstatus, Lieferziel und Versandart mit der angezeigten Zeit überein? Wird nach Ablauf einer Bestellfrist neu gerechnet? Eine verständliche Angabe muss aus den tatsächlichen Abläufen des Shops kommen. Der Illustrationswert „2–4 Werktage“ ist keine Empfehlung für eine allgemeine Lieferzusage.

4 Welche Angaben sind nötig?

In der Ausgangsvariante: Firmenname und abweichende Rechnungsadresse beanspruchen Raum, bevor klar ist, ob sie gebraucht werden.

Die Person muss zusätzliche Entscheidungen treffen.

Im Vorschlag: Die Lieferadresse wird zunächst auch als Rechnungsadresse verwendet. Eine abweichende Rechnungsadresse lässt sich ausdrücklich ergänzen. Der Firmenname ist als optional gekennzeichnet. Sichtbare Beschriftungen bleiben auch bei ausgefüllten Feldern erhalten.

So lässt es sich prüfen: Durchlaufen Sie einen Privatkauf und einen Kauf mit abweichender Rechnungsadresse. Beide müssen möglich bleiben. Verkleinern Sie das Formular nicht durch das Entfernen notwendiger Angaben oder durch unlesbar kleine Hinweise. Prüfen Sie außerdem die Tastaturbedienung und den Wechsel zurück zu bereits ausgefüllten Schritten.

5 Wie lässt sich der Fehler ohne Datenverlust korrigieren?

In der Ausgangsvariante: „Eingabe ungültig“ erscheint ohne klare Zuordnung.

Nach der Korrektur müssen andere Felder erneut ausgefüllt werden.

Im Vorschlag: Der Hinweis steht direkt bei der Postleitzahl und nennt die passende Korrektur. Für das im Bild ausgewählte Lieferland Deutschland lautet er: „Bitte geben Sie eine fünfstellige Postleitzahl ein.“ Bereits erfasste Adressdaten bleiben erhalten.

So lässt es sich prüfen: Senden Sie das Formular mit absichtlich unvollständiger Adresse ab. Ist das betroffene Feld erkennbar und per Tastatur erreichbar? Wird der Fehler auch ohne rote Farbe verständlich? Bleiben gültige Angaben erhalten? Bei anderen Ländern muss die Prüfung zu deren Adressformat passen.

Die W3C-Anleitung zu Formularmeldungen erläutert die Zuordnung von Fehlern und verständliche Rückmeldungen. Baymard behandelt ergänzend das Erhalten bereits eingegebener Daten. Zahlungsdaten gehören dabei weiterhin in die dafür vorgesehenen sicheren Zahlungsfelder.

Beleg: W3C WAI: User notifications

Beleg: Baymard: Checkout UX

6 Ist die Zahlung tatsächlich bestätigt?

In der Ausgangsvariante: Nach einer Rückkehr vom Zahlungsdienst steht pauschal „Vielen Dank“.

Das lässt offen, ob die Zahlung bestätigt wurde oder noch bearbeitet wird.

Im Vorschlag: Die Bestellseite unterscheidet bezahlte, ausstehende und fehlgeschlagene Vorgänge. Wenn die Bestätigung noch fehlt, nennt sie den nächsten sinnvollen Schritt und vermeidet die Aufforderung, dieselbe Bestellung unkontrolliert erneut zu bezahlen.

So lässt es sich prüfen: Testen Sie eine sofort bestätigte Zahlung, eine verzögerte Bestätigung, eine Ablehnung und einen abgebrochenen Rücksprung. Die Anzeige muss zum serverseitig bestätigten Zustand passen. Dass ein Browser eine Seite erreicht, ist dafür nicht ausreichend.

Beleg: Stripe: Post-payment events

Wie werden aus Markierungen überprüfbare Aufgaben?

Notieren Sie für jeden Punkt den konkreten Fundort, die beobachtete Schwierigkeit, die geplante Änderung und die Abnahme.

„Checkout einfacher machen“ lässt sich schwer prüfen. „Eine falsche Postleitzahl löscht keine gültigen Adressdaten“ ist dagegen ein klares Ziel.

Die visuelle Prüfung zeigt Bedienprobleme und technische Widersprüche. Wie stark eine Änderung auf Bestellungen wirkt, muss gesondert untersucht werden. Die Modellfallstudie zur Wirtschaftlichkeit zeigt, wie sich dafür nachvollziehbare Szenarien rechnen lassen.