Ein Shop kann einen großartigen Katalog, faire Preise und saubere Fotos haben — und trotzdem gehen Kunden, weil sie nicht finden, was sie brauchen. In solchen Momenten liegt das Problem meist nicht am Produkt, sondern an der Navigation. Dieser Artikel geht jeden gängigen Shopify-Menü-Typ durch und vor allem den Engpass, den jeder davon lösen soll. Der technische Teil bleibt minimal, der Fokus liegt darauf, wo es Kunden hilft, leichter zu kaufen.
Vor den Details eine Zahl, die man sich merken sollte: Laut dem Baymard Institute liegt die durchschnittliche Warenkorbabbruchrate bei rund 70 % und ist seit Jahren stabil. Nicht alles davon geht auf die Navigation zurück, aber ein Teil sind Kunden, die die gewünschte Seite nicht erreichen oder zu spät erreichen und aufgeben.
Mega Menu: Kunden den gesamten Katalog auf einen Blick zeigen
Ein Mega Menu öffnet ein großes Panel, das viele Kategorien auf einmal anzeigt, oft mit Bildern. Es löst einen bestimmten Engpass auf dem Desktop: Kunden wissen nicht, was der Shop verkauft oder wie tief das Sortiment reicht.
Stellen Sie sich einen Modeshop mit ein paar hundert SKUs vor. Wenn das Menü nur „Herren / Damen / Accessoires” auflistet, müssen Kunden klicken, auf das Laden der Seite warten und sehen erst dann, was darin steckt. Jeder Klick ist eine Gelegenheit, es sich anders zu überlegen. Ein Mega Menu lässt sie mit einem einzigen Hover über „Hemden, Jeans, Jacken, Schuhe …” schauen, mit ein paar Bildern, die Interesse wecken.
Das funktioniert, weil Kunden dazu neigen, ein breites Menü mit klaren Gruppierungen zu überfliegen, um sich zu orientieren, statt sich durch Ebene um Ebene zu tasten. Für einen Shop mit vielen Produktlinien ist das oft der erste Shopify-Menü-Typ, der für die Desktop-Version in Frage kommt.
Eine Anmerkung: Ein Mega Menu ist stark, wenn der Katalog breit genug ist, um ihn zeigen zu müssen. Wenn Sie nur 15 Produkte haben, genügt ein normales Menü; sie in ein Mega Menu zu stopfen, wirkt leer und unaufgeräumt.
Tab Bar: weg mit dem Hamburger, wichtige Aktionen an den Daumen bringen
Auf dem Smartphone verstecken viele Shops standardmäßig die gesamte Navigation hinter dem Drei-Striche-Symbol (dem Hamburger-Menü). Hier hilft eine Tab Bar — eine fixe Navigationsleiste am unteren Bildschirmrand — am meisten.
Dafür gibt es zwei Gründe. Erstens zeigt die Usability-Forschung der Nielsen Norman Group, dass Navigation, die hinter einem Hamburger versteckt ist, weit weniger wahrgenommen und genutzt wird als sichtbar gehaltene Navigation; Aufgaben dauern außerdem länger. Kurz gesagt: Was versteckt ist, wird seltener angetippt.
Zweitens, wie Menschen ihr Telefon halten. Eine Untersuchung von Steven Hoober, bei der mehr als 1.300 Personen beobachtet wurden, ergab, dass die meisten ihr Telefon mit einer Hand halten und es hauptsächlich mit dem Daumen bedienen. Der Bereich, den der Daumen am leichtesten erreicht, ist die untere Bildschirmhälfte. Der Hamburger sitzt in der oberen Ecke — genau im schwer erreichbaren Bereich. Eine Tab Bar platziert Start, Kategorien, Suche und Warenkorb direkt am unteren Bildschirmrand, genau dort, wo der Daumen ruht.
Für viele Händler, bei denen fast jede Bestellung vom Telefon kommt, kann ein einziges Tippen, um den Warenkorb oder die Suche zu öffnen, den Unterschied zwischen einer Bestellung und einer geschlossenen App ausmachen. Das ist diejenige, die ich auf dem Smartphone meist als Erstes auszuprobieren empfehle.
Slide Menu: einen mehrstufigen Kategoriebaum darstellen, ohne zu überfordern
Eine Tab Bar ist gut für ein paar Hauptpfade, aber sie kann keinen ganzen tiefen Kategoriebaum fassen. Das ist die Aufgabe des Slide Menu — ein Panel, das vom Bildschirmrand hereingleitet.
Der Engpass hier ist ein Shop mit mehrstufiger Struktur: große Abteilungen, Unterkategorien und dann Unterkategorien davon. Alles auf einmal auszubreiten überfordert Kunden; es zu gut zu verstecken bedeutet, dass sie es nie sehen. Ein Slide Menu löst das, indem es eine Ebene nach der anderen öffnet — ein Tippen auf „Haushalt” gleitet hinüber zur Ebene der darin enthaltenen Artikel.
Ein vertrautes Beispiel ist ein Online-Lebensmittelshop oder ein Ersatzteilhändler, wo es Dutzende von Produktgruppen gibt. Kunden folgen dem Kategoriebaum, ohne durch eine endlos lange Liste zu scrollen. Ein Slide Menu hält den Bildschirm bei jedem Schritt aufgeräumt und lässt Kunden in ihrem eigenen Tempo tiefer gehen.
Slide Menu und Tab Bar schließen sich nicht gegenseitig aus. Ein gängiges Setup ist, die Tab Bar die heißesten Pfade übernehmen zu lassen, während ein „Kategorien”-Tab ein Slide Menu für die vollständige Struktur öffnet.
FAB: eine wichtige Aktion stets in Reichweite halten
Ein FAB (Floating Action Button) ist ein fixer runder Button, meist in der unteren Ecke, der über dem Inhalt schwebt, während Kunden scrollen. Er löst einen kleinen, aber häufigen Engpass: Kunden lesen bis zur Mitte einer Produktseite, und der wichtige Button ist bereits aus dem Blick gerückt.
Während Kunden nach unten scrollen, um Beschreibung, Fotos und Bewertungen anzusehen, ist der Button „In den Warenkorb”, „Auf Zalo chatten” oder „Zum Bestellen anrufen”, der oben noch da war, verschwunden. Sie müssen wieder nach oben scrollen, und jeder zusätzliche Schritt ist eine Gelegenheit zu gehen. Ein FAB verankert die eine Aktion, die Kunden ausführen sollen, ist immer da und sitzt in der daumenfreundlichen Zone.
Entscheidend ist Zurückhaltung: Ein FAB sollte nur einen CTA enthalten. Drei oder vier schwebende Buttons hineinzustopfen, verdeckt den Inhalt und schlägt nach hinten los. Ein Button, eine Aufgabe.
Ladegeschwindigkeit: ein schönes, aber langsames Menü ist schlimmer als ein hässliches
Dieser Abschnitt ist genauso wichtig wie die vier Typen oben. Ein Menü, das elegant aussieht, aber die Seite ruckeln und langsam laden lässt, verliert Kunden, bevor sie es überhaupt nutzen können.
Google misst das Nutzererlebnis über die Core Web Vitals, mit folgenden „guten” Schwellenwerten: LCP unter 2,5 Sekunden (wie schnell der Hauptinhalt erscheint), INP unter 200 Millisekunden (Reaktionsfähigkeit beim Antippen) und CLS unter 0,1 (Stabilität, also dass das Layout nicht herumspringt). Ein schweres Menü kann alle drei nach unten ziehen — besonders CLS, wenn ein spät ladendes Menü den Inhalt darunter springen lässt und Kunden auf das Falsche tippen.
Das ist erwähnenswert, weil Shops oft viele Apps installieren und jede zusätzliche App Ladezeit hinzufügen kann. Eine nachlässig geschriebene Menü-App verlangsamt still und leise jede Seite.
Hier versucht Navi+, es anders zu machen. Navi+ ist ein No-Code-Navigations-Builder, der eine Tab Bar, ein Mega Menu, ein Slide Menu, einen FAB und ein Grid Menu erstellen, Mobil- und Desktop-Ansicht getrennt konfigurieren kann und so optimiert ist, dass er die Core Web Vitals nicht nach unten zieht. Das Menü bleibt außerdem erhalten, wenn Sie das Theme wechseln, sodass Sie es nicht jedes Mal von Grund auf neu aufbauen müssen, wenn Sie den Look erneuern. Mehr dazu erfahren Sie unter naviplus.io. Ich erwähne es hier, weil Geschwindigkeit das Kriterium ist, das Händler bei der Wahl einer Menü-App gerne vergessen — und es beeinflusst die Conversion stärker, als wir denken.
Zusammengefasst
Jeder Menü-Typ passt zu einem anderen Engpass. Es gibt kein absolutes „Bestes” — nur das, was dazu passt, wie sich Ihre Kunden verirren:
- Mega Menu — Kunden sehen den ganzen Katalog auf dem Desktop nicht.
- Tab Bar — wichtige Aktionen sind auf dem Smartphone hinter dem Hamburger versteckt.
- Slide Menu — ein mehrstufiger Kategoriebaum, der überfordert.
- FAB — der wichtigste CTA rückt aus dem Blick, während Kunden scrollen.
- Geschwindigkeit — das Fundament, das die vier Typen oben überhaupt sinnvoll macht.
Der praktische Ansatz ist, die Customer Journey in Ihrem eigenen Shop noch einmal zu betrachten, zu erkennen, wo Kunden tendenziell hängen bleiben, und dann den Menü-Typ zu wählen, der genau diese Stelle behebt — statt etwas zu installieren, nur um es installiert zu haben.
Dieser Artikel ist Teil des größeren Leitfadens Warum Kunden Ihren Shop besuchen, aber nicht kaufen — und welche Rolle die Navigation spielt.