Produktseiten-Navigation: Wie sich Käufer zwischen Produkten bewegen

Ein Kunde klickt aus einer Kollektion auf ein Produkt. Er betrachtet die Bilder, prüft den Preis und überfliegt eine Bewertung. Danach möchte er weiterschauen – eine andere Farbe, ein günstigeres Modell oder passendes Zubehör. Genau an dieser Schnittstelle verlieren die meisten Onlineshops ihre Besucher.

Die Produktseite ist keine Sackgasse, wird von vielen Themes jedoch genau so behandelt. Der einzige Ausweg ist oft die Zurück-Taste des Browsers oder das kleine Logo ganz oben. Der Zurück-Button führt jedoch womöglich zu den Google-Suchergebnissen zurück statt in die Kollektion. Das Logo wirft Kunden auf die Startseite zurück. In beiden Fällen erzeugt der Shop unnötige Hürden.

Produktseiten-Navigation bedeutet, Käufern das Weitersurfen mühelos zu machen – zum nächsten Artikel, zurück zur Kategorie oder zu verwandten Produkten.

Die Produktseite ist eine Kreuzung, kein Endpunkt

Usability-Studien des Baymard Institute belegen: Käufer kaufen selten das allererste Produkt, das sie anklicken. Sie vergleichen, prüfen Alternativen und springen mehrfach zwischen Artikeln und Kollektionen hin und her.

Im Ladengeschäft nimmt man ein Hemd von der Stange, hängt es zurück und greift nach dem nächsten. Online ist die Kollektionsseite diese Kleiderstange. Müssen Kunden erst lange danach suchen, entsteht Reibung.

Mehr erfahrenVollständigen Leitfaden lesen → Breadcrumb-Muster, die Käufern wirklich bei der Navigation helfen

Breadcrumbs: Orientierung auf einen Blick

Breadcrumbs (Startseite → Damen → Kleider → Sommerkleider) erfüllen zwei Aufgaben: Sie zeigen den aktuellen Standort in der Hierarchie und erlauben den 1-Klick-Sprung in übergeordnete Ebenen.

Nielsen Norman empfiehlt die Platzierung direkt unter der Hauptnavigation und über dem Produkttitel.

Am Desktop funktioniert das tadellos. Mobil sind Breadcrumbs oft zu lang. Navi+ löst dieses Problem elegant: Statt winziger Textzeilen am oberen Bildschirmrand bietet eine fixierte Bottom Tab Bar mit Zurück- oder Kategorienschalter eine jederzeit mit dem Daumen erreichbare Rückkehrmöglichkeit.

Ähnliche Produkte: Seitwärts navigieren

Während Breadcrumbs vertikal nach oben führen, erlauben ähnliche Produkte die horizontale Bewegung zu Farbvarianten, Alternativen oder Zubehör.

Wichtig ist die direkte Vergleichbarkeit: Laut Baymard fehlen bei 68 % der Shops Preis- oder Variantenangaben in den Produktvorschlägen. Wenn Kunden jeden Vorschlag anklicken müssen, nur um den Preis zu sehen, bricht der Stöberfluss ab.

Platzieren Sie Empfehlungen direkt unterhalb der Kernproduktinformationen und nicht erst hinter Dutzenden Kundenbewertungen am Seitenende.

Mehr erfahrenVollständigen Leitfaden lesen → Ähnliche Produkte und Cross-Selling: Navigation zwischen Artikeln

Mobile Produktseiten-Navigation: Die Daumenzone (Thumb Zone)

Smartphones werden meist einhändig mit dem Daumen bedient (Steven Hoober). Der obere Bildschirmrand ist am schwersten erreichbar – genau dort sitzen jedoch meist Hamburger-Menü, Logo und Breadcrumbs.

Eine persistente Bottom Tab Bar (Startseite, Kategorien, Warenkorb, Zurück) platziert die wichtigsten Navigationsanker direkt in der natürlichen Reichweite des Daumens.

Mehr erfahrenVollständigen Leitfaden lesen → Mobile Produktseiten-Navigation: Zurück-Buttons, Wischen und Sticky Bars

Wo Sie anfangen sollten

SchnellcheckRufen Sie eine Produktseite auf dem Smartphone auf und versuchen Sie, zu einem anderen Produkt derselben Kollektion zu wechseln – ohne Zurück-Taste des Browsers. Benötigen Sie mehr als zwei Fingertipps, besteht Optimierungsbedarf.

Prüfen Sie Ihre Produktseiten: Ergänzen Sie Desktop-Breadcrumbs, rücken Sie Produktempfehlungen weiter nach oben und aktivieren Sie auf Mobilgeräten eine daumenfreundliche Navigationsleiste.