Bewährte E-Commerce-Designpraxis für Startseite, Navigation, Kategorien, Suche, Produktseiten und Mobilgeräte – was dazugehört und welche Fehler Sie vermeiden sollten.
Klare Navigation nach der Denkweise der Käufer, schnelle Seiten, große zoombare Produktfotos, Preis- und Versandangaben nahe der Schaltfläche „In den Warenkorb“, sichtbare Bewertungen, funktionierende interne Suche und ein kurzer Checkout mit Gastkauf. Gestalten Sie zuerst für Smartphones, denn dort stöbern die meisten Shop-Besucher.
Genug, damit Käufer vergleichen können, ohne endlos durch Seiten zu blättern. Viele Shops zeigen 24 bis 48 Produkte pro Seite oder verwenden eine Schaltfläche „Mehr laden“. Wichtiger sind gute Filter nach Eigenschaften, die Käufer auswählen, etwa Größe, Farbe, Preis und Verfügbarkeit.
Produktname, Hauptbild, Preis, wichtige Varianten (Größe, Farbe), Lagerstatus, Schaltfläche „In den Warenkorb“ und ein Hinweis zu Versand oder Lieferzeit. Bei vorhandenen Bewertungen gehören auch Sternebewertung und Zahl der Rezensionen dorthin.
Meistens nicht. Automatisch wechselnde Slider werden oft ignoriert und können Barrierefreiheit und Ladezeit beeinträchtigen. Ein einzelner, starker Titelbereich mit einer klaren Botschaft und Links zu Ihren wichtigsten Kategorien funktioniert meist besser.
Gutes E-Commerce-Webdesign hilft Käufern, drei Dinge schnell zu erledigen: das passende Produkt zu finden, ihm genug zu vertrauen, um es zu kaufen, und ohne Hindernisse zu bezahlen. Dazu gehören Navigation nach der Denkweise der Kunden, schnelle Mobilseiten, große Produktfotos, früh angezeigte Preise und Versandkosten, sichtbare Bewertungen und ein kurzer Checkout.
Dieser Leitfaden listet keine allgemeinen Grundsätze auf, sondern geht Seite für Seite vor – denn die Frage der Käufer ändert sich jeweils.
Die Startseite hat nur wenige Sekunden, um zu bestätigen, was Sie verkaufen und für wen.
Enthalten sein sollte:
Vermeiden: automatisch wechselnde Karussells, Pop-ups vor dem Laden der Seite und Titelvideos, die die erste Ansicht auf Mobilgeräten verzögern.
Hier findet der Großteil der Vergleiche statt.
| Element | Bewährte Praxis |
|---|---|
| Produktkarten | Gleiches Bildformat für alle Produkte, Name, Preis, Bewertung und zweites Bild beim Darüberfahren |
| Filter | An echten Kaufentscheidungen ausrichten: Größe, Farbe, Preis, Material und Lagerbestand. Trefferzahlen anzeigen. |
| Sortierung | Standardmäßig „Empfohlen“ oder „Bestseller“; Preis und Neuheiten anbieten |
| Lagerbestand | Ausverkaufte Artikel ausblenden oder klar markieren |
| Seitennavigation | „Mehr laden“ oder nummerierte Seiten; Filterauswahl bei der Rückkehr beibehalten |
| Mobilgeräte | Filter in einem von unten aufklappenden Feld mit klarer Schaltfläche „34 Ergebnisse anzeigen“ |
Ein häufiger Fehler: Filter werden zurückgesetzt, wenn Käufer ein Produkt öffnen und zurückkehren. Testen Sie die Zurück-Schaltfläche.
Käufer, die suchen, haben oft eine klare Kaufabsicht. Eine schwache Suche kostet deshalb direkt Umsatz.
Die Produktseite verkauft. Arbeiten Sie sie von oben nach unten durch.
Beginnen Sie damit, was das Produkt für den Kunden leistet, und nennen Sie danach die technischen Daten. Maße, Materialien und Pflege passen in eine kurze Tabelle. Größentabellen sollten sich in einem Feld auf derselben Seite öffnen, statt Käufer wegzuschicken.
Ergänzen Sie strukturierte Produktdaten (Name, Bild, Preis, Verfügbarkeit und Bewertungen), damit Suchergebnisse Preis und Bewertungen anzeigen können.
Checkout-Design ist ein eigenes Fachgebiet. Kurz gesagt: Gesamtkosten früh anzeigen, Gast-Checkout erlauben, Formular kurz halten und Express-Wallets wie Apple Pay und Google Pay anbieten. Unser Leitfaden zur Checkout-Optimierung beschreibt jeden Schritt.
Design endet nicht an der Schaltfläche „Bezahlen“. Fast alle Käufer lesen die Bestellbestätigung auf der Website und per E-Mail genau.
Die meisten Shop-Besuche erfolgen über Smartphones. Gestalten und testen Sie zuerst das Handy-Layout und erweitern Sie dann auf den Desktop.
Beides sind Designentscheidungen und nicht nur technische Themen.
Geschwindigkeit: Bilder komprimieren und WebP oder AVIF ausliefern, Breite und Höhe der Bilder setzen, um Layoutsprünge zu verhindern, Drittanbieter-Apps und Skripte begrenzen und Core Web Vitals in Googles PageSpeed Insights prüfen.
Barrierefreiheit: Farbkontrast gemäß WCAG 2.2 AA, Alt-Text für Produktbilder, beschriftete Formularfelder, per Tastatur erreichbare Menüs und Filter sowie Fehlermeldungen, die das Problem erklären. Barrierefreie Shops sind für alle leichter zu nutzen; in vielen Regionen sind sie außerdem gesetzliche Erwartung.
Wenn Sie bei null anfangen, erspart ein guter Ausgangsentwurf viele dieser Entscheidungen. Stöbern Sie in unseren Vorlagen für Shop-Designs oder beschreiben Sie We.Inc im Chat Ihren Shop. Das System erstellt einen Onlineshop mit Produktseiten, Warenkorb und Checkout, den Sie anschließend visuell oder im Code weiter bearbeiten. Hosting und SSL sind enthalten.
Kostenlos starten · Keine Kreditkarte nötig