UX (E-Commerce)

Definition: UX (User Experience, Nutzererlebnis) im E-Commerce bezeichnet die Gesamtheit aller Erfahrungen, die ein Nutzer beim Besuch, der Navigation und dem Kaufprozess in einem Online-Shop macht. Gute E-Commerce-UX ist intuitiv (Nutzer finden ohne Nachdenken was sie suchen), schnell (Seiten laden in Sekunden), vertrauensbildend (professionelles Design, sichere Zahlung) und reibungsarm (Checkout ohne unnötige Hindernisse). UX ist ein direkt messbarer Conversion-Treiber: UX-Verbesserungen sind Conversion-Rate-Verbesserungen.

Erläuterung

UX und CRO (Conversion Rate Optimization) sind im E-Commerce untrennbar: Jedes UX-Problem ist ein Conversion-Problem. Ein Nutzer, der die Filterfunktion nicht findet, verlässt den Shop. Ein Nutzer, der beim Checkout auf einen Fehler stösst, bricht ab. Jeder Reibungspunkt im Nutzerpfad kostet Umsatz. UX-Optimierung ist deshalb keine ästhetische Frage, sondern eine direkt messbare betriebswirtschaftliche Massnahme.

Navigation und Information Architecture

• Klare Hauptnavigation: Maximal 5–7 Hauptkategorien sichtbar; Megamenü für grosse Sortimente; konsistente Navigationsbegriffe (was Nutzer erwarten, nicht interne Logik); Mobile: Hamburger-Menü übersichtlich
• Suchfunktion: Prominente Platzierung (Header, Mobile: Icon expandiert zu Suchfeld); schnelle Ergebnisse; Autocomplete; für Shops mit 100+ Produkten unverzichtbar
• Filterfunktion (Faceted Navigation): Filterbarkeit nach relevanten Attributen (Grösse, Farbe, Preis, Marke); Filterauswahl im URL reflektiert (teilbarer, bookmarkbarer Link); aktivierte Filter klar sichtbar («Aktive Filter: Blau × | Grösse M ×»)
• Breadcrumbs: Orientierungshilfe in tiefen Kategoriestrukturen; «Startseite › Damen › Jacken › Winterjacken»; Klickbarkeit jeder Ebene; auch SEO-Signal

Produktseiten-UX

• Above-the-fold (sichtbarer Bereich ohne Scrollen): Produktbild, Produktname, Preis, «In den Warenkorb»-Button, Verfügbarkeit; alles Kaufentscheidungsrelevante sofort sichtbar; keine wichtigen Infos hinter Scroll-Wall
• Bildqualität und Galerie: Mehrere Bilder (mind. 3–5); einfach wechselbar; Zoom-Funktion; Mobile: Swipeable Galerie; Bilder als primäres Entscheidungsmedium
• Variantenauswahl: Verfügbare und nicht verfügbare Grössen/Farben visuell unterscheidbar; nicht verfügbare Varianten durchgestrichen oder ausgegraut; bei Hover/Auswahl: Produktbild wechselt zur ausgewählten Variante
• Call-to-Action: «In den Warenkorb»-Button prominent (kontrastreiche Farbe, ausreichend gross); Sticky CTA auf Mobile; kein Zweifel über was der Button macht; kein «Kaufen» der zu Verwirrung führt
• Vertrauenssignale: Bezahlmethoden sichtbar; Rückgaberecht kommuniziert; Bewertungen; Sicherheitssiegel; Lieferzeit klar angegeben

Checkout-UX – häufigste Conversion-Killer

• Pflichtregistrierung: Grösster einzelner Checkout-Abbruchsgrund; Lösung: «Als Gast bestellen» prominent platzieren; Registrierung erst nach Kauf anbieten; Amazon hat Gastcheckout für Millionen Umsatz verantwortlich gemacht
• Versteckte Zusatzkosten: Versandkosten, Steuern, Bearbeitungsgebühren erst am Ende des Checkouts; löst Überraschungseffekt aus; Lösung: alle Kosten früh kommunizieren (Produktseite, Warenkorb)
• Zu viele Formularfelder: Mehr als nötig; «Firma» als Pflichtfeld bei B2C; Adresszeile 2 als auffälliges Pflichtfeld; Lösung: nur wirklich nötige Felder; Adress-Autofill aktivieren
• Schlechte Fehlerbehandlung: Fehlermeldungen unklar («Ungültige Eingabe» ohne Spezifikation); Formular nach Fehler komplett geleert; Fehler erst nach Submit sichtbar statt inline; Lösung: inline Validation, klare Fehlertexte
• Fehlende Zahlungsmethoden: Bevorzugte Zahlungsart nicht verfügbar; besonders Rechnungskauf in DACH; PayPal als Pflicht in DE/AT/CH; Lösung: alle marktrelevanten Zahlungsarten anbieten
• Kein Mobile-optimierter Checkout: Felder zu klein; zu viel Scrollen; Tastaturtypen falsch (Zahlenblock für PLZ nicht aktiviert); Lösung: Mobile-first Checkout-Design, Shopify Checkout hat das gut gelöst

Usability-Testing-Methoden

• Moderierter Usability-Test: 5–8 Testpersonen aus Zielgruppe; Aufgabenstellung («Suchen Sie ein blaues Herren-T-Shirt, Grösse M, und bestellen Sie es»); Beobachtung ohne Eingreifen; Lautes-Denken-Methode; grösste Erkenntnisse pro Testperson
• Heatmaps (Hotjar, Clarity): Wo klicken Nutzer? Wo scrollen sie bis? Welche Bereiche werden ignoriert?; deckt Navigationsprobleme und unsichtbare CTAs auf; günstig und kontinuierlich einsetzbar
• Session Recordings: Einzelne Nutzersitzungen als Video; Beobachtung von Klick-Rage (mehrmaliges Klicken auf nicht klickbare Elemente), U-Turns, Scroll-Verhalten; beste Quelle für qualitative UX-Insights ohne Usability-Test
• A/B-Testing: Zwei Varianten gegeneinander testen; statistisch validierte Aussage über UX-Verbesserung; zeitaufwendig (Signifikanz braucht Traffic); Tools: Google Optimize, VWO, Optimizely
• Funnel-Analyse: Wo steigen Nutzer im Kaufprozess aus? Welcher Checkout-Schritt hat die höchste Abbruchrate?; Google Analytics 4: Funnel-Explorer; gezieltes Beheben von Abbruch-Hotspots