Jeder Shop beginnt am selben Punkt: ein paar Dutzend Produkte, eine Idee und jede Menge Unsicherheit. In dieser Phase muss die Navigation eines neuen Shops nicht kompliziert sein. Sie muss stimmig und ausreichend sein. Das Schwierige ist nicht, das Menü “voll” aussehen zu lassen — es ist die Zurückhaltung, kein Navigationssystem zu bauen, das größer ist, als der Shop es tatsächlich braucht.
In diesem Artikel geht es um die erste Phase: einen neuen Shop mit einem kleinen Sortiment unter 50 Produkten. Ich beschreibe, wie sie aussieht, was die Navigation wirklich braucht, ein paar immer wiederkehrende Fehler und einen Vorschlag für den Einstieg.
Wie diese Phase aussieht
Das Sortiment ist klein, oft nur ein paar Produktgruppen. Manchmal passt der ganze Shop in “alle Produkte”, ohne dass es schon Kategorien braucht.
Der Traffic ist noch gering und ungleichmäßig. Besucher kommen über ein paar Beiträge, ein paar geteilte Links oder einen Freundeskreis. Ein paar Dutzend bis ein paar Hundert Aufrufe am Tag sind normal.
Am wichtigsten: Du experimentierst noch. Du probierst aus, welche Artikel sich verkaufen, probierst Preise, probierst, wie du fotografierst, probierst, wie du Kunden ansprichst. Alles ist noch in Bewegung. Eine starre Navigation, die von Anfang an sorgfältig durchgeplant ist, wird zur Last, die du jedes Mal anpassen musst, wenn du die Richtung änderst.
Anders gesagt: Diese Zeit verlangt nach Flexibilität mehr als nach Vollständigkeit.
Was die Navigation eines neuen Shops braucht
Die kurze Antwort: schlicht und klar. Kunden müssen innerhalb weniger Sekunden ihren Weg zum Kauf finden — sie brauchen kein hübsches Menü-Diagramm.
Am Desktop reicht ein aufgeräumter Header mit 3-5 Punkten. Zum Beispiel: Produkte, Über uns, Kontakt. Menschen überfliegen eine Seite üblicherweise von links nach rechts und von oben nach unten, deshalb sollten die wichtigsten Punkte links stehen und sichtbar bleiben, nicht versteckt sein.
In dieser Phase brauchst du kein Mega Menu. Ein Mega Menu passt zu Shops mit vielen Unterkategorien, die sich auf einmal entfalten müssen. Solange das Sortiment noch klein ist, wirkt ein Mega Menu leer und sperrig: Du öffnest es und siehst nur ein, zwei Zeilen, die in einem großen Rahmen schweben. Es lässt den Shop größer wirken, als er ist, und die Kunden haben nichts davon.
Mobil nicht vergessen
Das ist der Teil, der am leichtesten vernachlässigt wird — und doch der wichtigste. Im heutigen E-Commerce kommen die meisten Shop-Besuche vom Handy; viele Branchenzahlen liegen bei rund 70-80 %. Anders gesagt: Die meisten deiner Kunden betrachten deinen Shop durch einen kleinen Bildschirm, den sie in der Hand halten.
Wie Menschen ihr Handy halten, entscheidet darüber, was sich leicht antippen lässt. Eine Untersuchung von Steven Hoober (veröffentlicht auf Smashing Magazine) ergab, dass die meisten Aktionen am Handy mit dem Daumen erledigt werden und der am leichtesten erreichbare Bereich die untere Bildschirmhälfte ist — oft als “Daumenzone” bezeichnet. Die obere Ecke ist die am schwersten erreichbare Stelle.
Deshalb ergibt eine Navigationsleiste am unteren Bildschirmrand (eine Tab Bar) Sinn: Sie liegt genau in Reichweite des Daumens. Kunden müssen sich nicht zur oberen Ecke strecken, um das Menü zu finden.
Was das Hamburger-Menü angeht — das Drei-Striche-Symbol, das die gesamte Navigation dahinter verbirgt — hat die Nielsen Norman Group bestätigt, dass es die Punkte schwerer auffindbar und langsamer erreichbar macht, als wenn man sie sichtbar lässt. Für einen kleinen Shop mit nur wenigen Hauptpunkten gibt es keinen Grund, sie zu verstecken. Eine einfache Tab Bar, die ein paar wichtige Buttons sichtbar hält, dient den Kunden weit besser.
Zwei häufige Fehler
Diese beiden Fehler habe ich so oft gesehen, dass ich sie fast als Initiationsritus für Einsteiger betrachte.
Fehler eins: das Menü zu früh kompliziert machen. Verkäufer schauen sich große Shops an, sehen mehrstufige Menüs und wollen, dass ihr eigener Shop sofort “professionell” aussieht. Also legen sie Kategorien für Dinge an, für die sie noch keine Produkte haben, oder sie teilen eine Gruppe von sechs Artikeln in vier Unterkategorien auf, damit das Menü voll aussieht.
Das Ergebnis: Ein Kunde klickt auf “Zubehör” und findet genau zwei Artikel, klickt auf “Neuheiten” und findet es leer. Diese Erfahrung ist viel schlechter als eine ordentliche Kategorie “Alle Produkte”. Ein kleines Sortiment ist keine Schwäche, die man verbergen müsste — Dinge zusammenzufassen macht den Kauf sogar einfacher.
Fehler zwei: sich nur um den Desktop kümmern und das Handy vergessen. Man baut den Shop üblicherweise am Computer, bewundert ihn auf einem großen Bildschirm und vergisst dann, ihn auf dem Handy zu prüfen. Das Desktop-Menü sieht gut aus, aber am Handy drängen sich die Punkte, die Buttons rücken zusammen, oder die Navigation verschwindet hinter einem kleinen Symbol in der Ecke.
Die Lösung ist einfach: Öffne jedes Mal, wenn du das Menü anpasst, den Shop auf deinem eigenen Handy und versuche, wie ein echter Kunde etwas zu kaufen. Wenn sich deine Hand strecken muss oder du dich ein paarmal vertippst, geht es deinen Kunden genauso — und sie sind weniger geduldig als du.
Ein Setup-Vorschlag mit Navi+
Navi+ erlaubt dir, Desktop und Handy getrennt zu konfigurieren, sodass du nicht ein Design auf beide zwingen musst. In dieser Phase rate ich, es wirklich minimal zu halten.
Baue am Desktop einen schlichten Header mit 3-5 Punkten. Wähle genau die Seiten, die Kunden brauchen: die wichtigste Produktkategorie, die Über-uns-Seite, die Kontaktseite. Heb dir das Mega Menu für den Moment auf, in dem das Sortiment tatsächlich wächst.
Nutze am Handy eine einfache Tab Bar mit 4 Punkten. Ein sicheres Layout, das Käufer bereits kennen:
- Home — zurück zur Startseite
- Shop — in die Produktliste
- Warenkorb — der Warenkorb, immer in Reichweite
- Konto — Konto oder Anmeldung
Diese vier Buttons decken fast alles ab, was Kunden tun müssen. Den Warenkorb direkt in die untere Leiste zu legen, hat auch einen praktischen Hintergrund: Laut Baymard Institute liegt die durchschnittliche Abbruchrate im Warenkorb im E-Commerce bei rund 70 %, daher lohnt sich alles, was Kunden hilft, zum Warenkorb zurückzukehren und weiterzumachen. Ein Warenkorb-Button, der immer sichtbar und immer leicht antippbar ist, ist ein kleiner Schritt in diese Richtung.
Noch etwas, das man von Anfang an im Blick behalten sollte, ist die Geschwindigkeit. Google legt die “guten” Schwellenwerte für die Core Web Vitals fest: LCP unter 2,5 Sekunden, INP unter 200 Millisekunden und CLS unter 0,1. Das Menü ist etwas, das früh lädt und auf jeder Seite erscheint, deshalb kann ein schweres Menü den ganzen Shop mit nach unten ziehen. Navi+ ist so gebaut, dass es diesen Werten nicht im Weg steht — das ist eine gute Gewohnheit, die man sich früh aneignen sollte, denn es später zu beheben ist immer schwerer.
In der Phase des neuen Shops schlägt ein schlichtes Menü, das Kunden sofort nutzen können, immer ein schickes Menü, das du ständig korrigieren musst.
Da Navi+ per Drag-and-drop funktioniert und keinen Code braucht, kannst du das obige Layout in wenigen Minuten bauen und es jederzeit anpassen, während das Sortiment wächst. Das Menü bleibt außerdem erhalten, wenn du das Theme wechselst, sodass die Design-Experimente der Anfangsphase die gerade gebaute Navigation nicht zerstören.
Fang klein an. Wenn der Shop wächst, ist es nicht zu spät, die Navigation mit ihm wachsen zu lassen.
Dieser Artikel ist Teil des größeren Leitfadens zur Navigation durch jede Wachstumsphase eines Shops — von 10 bis 10.000 Produkten.