UX Design: Im E-Commerce ist Exzellenz keine Option

Wenn jemand eine Bestellung in deinem Shop nicht abschließen kann, denkt er nicht "die Informationsarchitektur könnte klarer sein". Er denkt, die Seite ist kaputt.

Das ist keine Metapher. In der Umfrage des Baymard Institute, warum Menschen ihren Warenkorb abbrechen (reine Schaufensterbummler ausgenommen), sagen 17%, sie seien gegangen, weil die Website Fehler hatte oder abgestürzt ist. Einige davon waren echte Ausfälle. Viele nicht: ein Formular, das die Kartennummer nach einem Tippfehler löschte, eine Fehlermeldung, die oben auf der Seite klebte, während das fehlerhafte Feld unterhalb des sichtbaren Bereichs lag, eine Suche, die für ein Produkt, das du tatsächlich verkaufst, nichts zurückgab, ein Modal, das sie mit dem Daumen nicht schließen konnten.

Du siehst eine Designentscheidung. Sie sehen einen Bug. Und anders als ein echter Bug taucht dieser nie in deinem Fehler-Monitoring auf. Er zeigt sich nur als stiller Rückgang der Conversion.

Zuerst einmal: UX ist nicht UI

Eine Klarstellung, bevor wir weitergehen, denn die beiden Wörter werden ständig verwechselt. UI, user interface, ist das, was dein Kunde sieht: Farben, Buttons, Typografie, Abstände. UX, user experience, ist das, was ihm passiert: ob er das Produkt findet, das Lieferdatum versteht, sich von einem Tippfehler erholt und es schafft zu bezahlen, ohne darüber nachzudenken. Ein Shop kann eine wunderschöne UI und eine kaputte UX haben: ein großartiger Checkout, der deine Kartennummer löscht, bleibt ein kaputter Checkout. Alles in diesem Artikel dreht sich um UX: nicht darum, wie dein Shop aussieht, sondern wie er sich verhält, wenn ein echter Kunde ihn benutzt, einhändig, in Eile.

Der einzige gute Fehler ist der, der nie passiert

Die Usability-Heuristiken von Jakob Nielsen sind dreißig Jahre alt und noch immer die ehrlichste Checkliste im digitalen Handel. Zwei von ihnen wiegen schwerer als der Rest, sobald Geld im Spiel ist:

• Verhindere den Fehler (Heuristik Nr. 5). Einschränkungen, sinnvolle Standardwerte, die richtige Tastatur, eine Bestätigung vor allem Destruktiven.
• Wenn er doch passiert, hilf den Menschen, sich zu erholen (Heuristik Nr. 9). Klare Sprache, das genaue Problem, ein offensichtlicher nächster Schritt.

Ein roter Rahmen ohne Text scheitert an beidem. Eine Meldung wie Invalid input ebenso. Und ein Checkout, der "E-Mail ist erforderlich" in der Millisekunde brüllt, in der jemand das Feld berührt, ebenso: NN/g vergleicht das damit, die Prüfung zu benoten, bevor der Schüler auch nur eine einzige Frage beantwortet hat.

Der Checkout-Benchmark 2025 von Baymard ist unbequeme Lektüre, wenn du annahmst, "die großen Seiten haben das im Griff": 64% der Desktop-Checkouts und 63% der mobilen Checkouts führender US- und EU-Shops werden als mittelmäßig oder schlechter bewertet. Zwei Prozent erhalten ein "gut". Keiner ist perfekt (Baymard).

Wie ein nützlicher Fehler wirklich aussieht

Nehmen wir eine französische Postleitzahl, die nicht zur Stadt passt. Die faule Version ist ein rotes Banner: "Ungültige Adresse". Die nützliche Version steht unter dem Feld, in der Sprache des Kunden, und bietet eine Lösung: "Diese Postleitzahl passt nicht zu Lyon. Meinten Sie 69001 (Lyon 1er)?"

Das ist kein Feinschliff. Es ist die Effizienzregel von NN/g plus WCAG 3.3.3 (eine Korrektur vorschlagen, wenn das System eine kennt). In der Praxis:

• Setze die Meldung neben das Feld, nicht in einen Toast zwölfhundert Pixel entfernt.
• Nutze Symbol + Rahmen + Text. Farbe allein ist für einen erheblichen Teil deiner Kunden unsichtbar, und sie scheitert konstruktionsbedingt an der Barrierefreiheit.
• Gib ihnen nicht die Schuld. "Ungültig", "illegal", "falsch" klingen alle so, als hätte der Kunde etwas falsch gemacht. Das System hat eine Eingabe nicht akzeptiert; der Satz sollte das übernehmen.
• Lösche niemals, was sie bereits eingegeben haben, auch nicht die Kartennummer nach einem Tippfehler bei der CVV. Das Formular zu löschen bedeutet, sie zu bitten, den Kauf ein zweites Mal zu entscheiden.
• Validiere, wenn sie das Feld verlassen (oder wenn eine Postleitzahl, Telefonnummer oder Kartennummer vollständig ist), nicht während sie noch tippen, und niemals beim ersten Fokus.

Baymard fand heraus, dass 31% der Seiten noch immer gar keine Inline-Validierung haben, und ein Teil des Rests setzt sie so aggressiv um, dass Tester dachten, sie hätten die Seite kaputt gemacht. Drei Details entscheiden, auf welcher Seite du stehst: keine verfrühten Warnungen, der Fehler verschwindet in dem Moment, in dem der Wert korrigiert ist, und ein kleines grünes Häkchen bei gültigen Feldern, damit ängstliche Kunden aufhören, das ganze Formular wieder und wieder zu lesen.

Wenn du diesen Monat nur fünf Meldungen umschreiben kannst, miss zuerst. Welche Validierungsfehler treten am häufigsten auf, und welche davon gehen einem Abbruch voraus? Die verdienen einen menschlichen Satz. Baymard nennt das adaptive error messaging. Du darfst es "hör auf, Texte für Fehler zu schreiben, die niemand je erreicht" nennen.

Eine abgelehnte Zahlung ist eine andere Spezies. Der Kunde muss wissen, ob er belastet wurde, ob der Bestand noch für ihn reserviert ist und was er stattdessen versuchen kann. "Zahlung fehlgeschlagen" plus ein Wiederholen-Button, der in einer Schleife hängt, ist der kürzeste Weg von einem UX-Fehler zu einem Chargeback.

Wenn der Shop nichts sagt, halten sie ihn für eingefroren

"Sichtbarkeit des Systemstatus" ist Heuristik Nr. 1, und sie ist im Kern eine Vertrauensregel. Vorhersehbares Feedback ist das, was den nächsten Tipp sicher wirken lässt.

Ein paar Muster, die als Defekt gelesen werden, selbst wenn das Backend völlig gesund ist:

• "In den Warenkorb" ohne Badge, ohne Schublade, ohne Hinweis, sodass sie zweimal tippen und zwei bestellen.
• Ein Bezahlen-Button, der klickbar bleibt, während die Bank nachdenkt, sodass sie zweimal tippen und du eine Doppelautorisierung erzeugst.
• Ein Spinner ohne Timeout bei einer 3-D-Secure-Weiterleitung. Nach ein paar Sekunden ist das, für einen Daumen in der Straßenbahn, ein Einfrieren.
• Ein "Schritt 2 von 4", der dann überraschend eine Kontoerstellung oder einen SMS-Schritt aus dem Hut zaubert.

Passe den Indikator am Einsatz an: eine leise Bestätigung für "in den Warenkorb gelegt", eine Blockade nur, wenn der Nutzer wirklich anhalten muss. Und wenn das Layout bereits bekannt ist, schlägt ein Skeleton-Screen einen endlosen Spinner.

Dein Menü sitzt in der falschen Ecke ihrer Hand

Steven Hoober beobachtete 1.333 Menschen, die ihr Handy in der Öffentlichkeit benutzten. Fast die Hälfte bediente es einhändig; die meisten der übrigen hielten das Handy und tippten trotzdem mit dem Daumen. Sie wechseln den Griff alle paar Sekunden, je nach Aufgabe. Sie sitzen nicht mit einer Maus an einem Schreibtisch.

Ein Hamburger-Menü in der oberen linken Ecke, ein mikroskopisches "X" oben rechts in einem Popup im Vollbild oder ein Hauptbutton, der unter einem Cookie-Banner gefangen ist, sind also nicht "die mobile Version der Desktop-Seite". Es sind Reichweitenfehler. Primäre Aktionen gehören dorthin, wo der Daumen schon ist: Navigation unten, ein sticky "In den Warenkorb", das wirklich antippbar ist, ein Menü in der Daumenzone statt gegen die Statusleiste gedrückt.

Der Desktop-Cousin dieser Idee ist die Akzentfarbe. Eine einzige Farbe sollte bedeuten "das ist die Aktion, die zählt". Wenn Filter, Chips, sekundäre Links und "Jetzt bezahlen" dasselbe Rot teilen, müssen die Menschen die Oberfläche lesen, statt sie wiederzuerkennen. Das ist kein Branding. Das ist Tarnung.

Handys sind seit 2013 nur noch höher geworden. Der obere Rand des Bildschirms ist nicht leichter zu erreichen geworden.

Hör auf, falsche Eingabefelder zu zeichnen

Das Betriebssystem weiß bereits, wie man eine Telefonnummer erfasst. type="tel" öffnet ein Ziffernfeld, type="email" bietet das @ an, und ein nativer Datumsauswahl-Dialog schlägt immer einen maßgeschneiderten Kalender, der Autofill kaputt macht. Das Einfügen in Kartenfeldern zu blockieren, macht dich nicht PCI-konformer; es produziert Tippfehler.

Dieselbe Logik gilt für die Benennung von Feldern. Das HTML-Attribut autocomplete ist ein Vertrag mit dem Browser: shipping street-address, shipping postal-code, email, tel. Fülle es korrekt aus, und Safari, Chrome und der Passwortmanager tippen die Adresse für deinen Kunden. Lass es leer, oder schlimmer, erzwinge autocomplete="off" "aus Sicherheitsgründen", und du hast eine Vierzig-Sekunden-Steuer für jeden wiederkehrenden Kunden erfunden. Das ist außerdem eine Barrierefreiheitsanforderung (WCAG 1.3.5), kein Entwicklertrick.

Eine Ebene höher ist die Adresssuche während des Tippens (die BAN oder La Poste in Frankreich, oder jeder seriöse Anbieter) die erwachsene Version von Autocomplete. Behalte einfach einen manuellen Rückfall für die Tage, an denen die API langsam ist: ein Widget, das ewig dreht, ist, wieder einmal, "die Seite ist kaputt".

Gib ihnen einen Ausgang und einen Weg zurück

Menschen tippen ständig auf das Falsche. Heuristik Nr. 3 ist der klar gekennzeichnete Notausgang: rückgängig machen, abbrechen, außerhalb klicken, die Escape-Taste, ein Schließen-Button, der groß genug ist, um ihn wirklich zu treffen.

Die Regel von NN/g zu Modals ist unverblümt. Nutze sie, um irreversiblen Schaden zu verhindern, oder um Informationen zu erfragen, ohne die der Ablauf nicht weitergehen kann. Nicht für einen Newsletter, nicht für einen Cookie-Upsell und nicht für irgendetwas mitten im Checkout. Ein Modal im Checkout ist der sicherste Weg, einen Kunden, der bereit war zu zahlen, in ein Kaninchenloch der Passwortzurücksetzung zu schicken.

Achte auf Mobil auch auf den umgekehrten Bug: ein etwas zu breiter Finger, der einen Dialog schließt, den sie tatsächlich gebraucht hätten. Destruktive Bestätigungen sollten sich nie durch einen Tipp außerhalb schließen; unkritische Modals sollten sich auf drei Wegen schließen (Button, Esc, Klick außerhalb). Wenn dein Desktop-"Non-Modal" auf einem iPhone zu einer Vollbild-Falle wird, hast du kein responsives Overlay. Du hast eine Geiselnahme.

Fortsetzbarkeit ist dieselbe Heuristik, über die Zeit gestreckt. Ein Warenkorb sollte einen geschlossenen Tab überleben. Ein Checkout mit zwölf Feldern sollte sich nicht zurücksetzen, weil die Postleitzahl abgelehnt wurde. Wenn der Ablauf lang ist, schicke einen Magic Link zum Fortsetzen. Im europäischen E-Commerce ist der Kunde, der mitten im Kauf auf seinem Handy unterbrochen wird, kein Randfall: er ist der Normalfall.

Und die Gastbestellung ist kein Nice-to-have: 18% der Käufer haben abgebrochen, weil die Seite ein Konto verlangte, und 62% der Seiten verstecken "Als Gast fortfahren" noch immer unter einem Label "Neukunde" (Baymard 2025). Wenn sie danach suchen müssen, bietest du es nicht an. Erfasse das Konto nach der Bestellung, mit einem Magic Link, nicht als Mautstelle vor dem Verkauf.

Sprich wie jemand, der auf ein Paket wartet, nicht wie ein ERP

"2 bis 3 Werktage" ist ein Satz, der von der Logistik geschrieben wurde. "Kommt am Donnerstag an" ist ein Satz, der für einen Menschen geschrieben wurde. Laut Baymard lassen fast die Hälfte der führenden Shops den Kunden noch immer die Kalenderrechnung machen, Feiertage inklusive. Ein Countdown bis zum Stichtag ("bestelle in den nächsten 43 Minuten für Lieferung am Donnerstag") schlägt ein statisches "bestelle bis 11:00 PST", das niemand aus einer Zeitzone umrechnen wird, in der er nicht lebt.

Weitere Vokabularfehler, die trivial wirken und sich wie Bugs verhalten:

• Nur optionale Felder markieren, oder nur Pflichtfelder: 61% der Seiten machen das falsch, und in Nutzertests übersprangen 32% der Teilnehmer mindestens ein Pflichtfeld (oft die Telefonnummer), bevor sie gegen eine Wand liefen.
• Passwortregeln, die einer Zentralbank würdig wären, für ein Shop-Konto. Zu strenge Regeln trieben bis zu 19% Abbruch bei Menschen, die bereits ein Konto hatten, und scheiterten dann an der Reset-E-Mail. Ein Minimum von 6 bis 8 Zeichen plus ein Magic Link reicht völlig, um Schuhe zu verkaufen.
• Backoffice-Leaks: SKU, 3PL, "Fulfillment", "Vorautorisierung", "3-D-Secure-Challenge". Übersetze sie. "Wir prüfen deine Karte jetzt, belastet wirst du beim Versand" ist eine Statusmeldung. "RUM" ist keine.

Minimalismus ist derselbe Respekt, angewandt auf die Struktur. Baymard zählt 23,48 Formularelemente im durchschnittlichen US-Checkout, gegenüber einem Ideal von 12 bis 14 (7 bis 8 echte Felder). Fast jeder fünfte Abbrecher sagte, der Checkout fühlte sich zu lang an. Die meisten dieser zusätzlichen Felder waren nie nötig, um ein Paket zu versenden.

Wenn sie es nicht finden, verkaufst du es nicht

Suche ist kein Widget. Für einen Katalog, den man nicht in fünfzehn Sekunden durchblättern kann, ist sie der Shop. Eine "Keine Ergebnisse"-Seite, die mit den Schultern zuckt, ist ein heruntergelassenes Rolltor, und etwa die Hälfte der Seiten bietet noch immer keinen Ausweg. "Prüfe deine Rechtschreibung" ist kein Ausweg; niemand liest diesen Satz. Verwandte Kategorien, eine erweiterte Suche mit fünf Produktvorschauen, zuletzt angesehene Artikel, eine Telefonnummer, Bestseller: das ist ein Ausweg.

Dasselbe gilt für eine Navigation, die auf deinen Lagernamen statt auf den Worten des Kunden aufbaut, und für Empfehlungen, die entweder zufällig oder leicht verstörend sind. "Zuletzt angesehen" und "zusammen gekauft" verdienen ihren Platz; "wir haben bemerkt, dass du dir Eheringe angesehen hast" nicht.

Listen schließlich respektieren die Tatsache, dass der Warenkorb bereits als externes Gedächtnis dient. NN/g beobachtete, dass Menschen alles mit dem Label "Wishlist" meiden (es klingt wie eine Geschenkeliste, und es klingt nach Arbeit) und alles ablehnen, was ein Konto verlangt, um einen Artikel zu speichern. "Für später speichern": sichtbar, ohne Login. Der operative Bonus ist real: eine Liste ist ein legitimer Grund für eine E-Mail "das ist bald ausverkauft", aber in der EU verlangt diese E-Mail noch immer eine ordnungsgemäße Opt-in-Einwilligung. Der UX-Fehler und der DSGVO-Fehler sind oft dasselbe Feld.

Ein letzter unglamouröser Fehler: deine Artikel sind unlesbar

Wenn du einen Blog veröffentlichst, ist der Lesemodus des Browsers ein Test, den dein Markup entweder besteht oder nicht. Echte hierarchische Überschriften, ein echter Seitentitel, Text, der wirklich Text ist. Eine Marketingseite aus Bildern und divs scheitert am Lesemodus, scheitert an assistiver Technologie und scheitert an den Lesern, die den Artikel einfach für später speichern wollten. Es ist eine Kleinigkeit neben dem Checkout. Es ist auch ein Glaubwürdigkeitsleck.

Häufig gestellte Fragen

Prüfe es wie ein Kunde: auf einem Handy, mit einem Tippfehler

Diese Fehler wirst du nicht vom Büro-Desktop aus sehen, als Administrator angemeldet. Du wirst sie in der Straßenbahn sehen, im 4G-Netz, mit einem Buchstaben zu viel in der Postleitzahl und einem Cookie-Banner, das den Bezahlen-Button verdeckt.

Fang diese Woche dort an: Fehlertext neben den Feldern, Eingaben, die ihre Werte behalten, Gastbestellung gut sichtbar, das richtige type und autocomplete in jedem Feld, ein funktionierendes Schließen-Element in jedem Overlay, ein Lieferdatum statt "Werktage", eine Seite ohne Ergebnisse, die einen nächsten Schritt anbietet. Nichts davon erfordert ein Replatforming. Das meiste erfordert nicht einmal einen vollen Sprint.

Die Shops, die die wenigsten Kunden verlieren, sind nicht die mit den meisten Animationen. Es sind die, deren Fehler wie Sätze lesen, deren Buttons dort sitzen, wo der Daumen schon ist, und deren Kunden sich nie fragen müssen, ob die Seite gerade abgestürzt ist.

Bei Saphes IT-Systems prüfen wir diese Reise genau so, wie ein Erstbesucher sie erlebt: Fehler, leere Zustände, Suche, Checkout, bis hin zum nicht schließbaren Modal, das du nicht mehr bemerkst, und wir beheben die Fehlfunktionen, die bereits wie Bugs aussehen. Wenn du wissen willst, welche deiner "Designentscheidungen" deine Kunden schon unter "kaputt" abgelegt haben, lass uns reden.