Nachdem viele die Artikel zu den einzelnen Menütypen gelesen haben, bleiben sie trotzdem beim letzten Schritt hängen: Was soll mein Shop denn nun tatsächlich verwenden? Dieses Gefühl ist völlig normal. Die Theorie über Tab Bars, Mega Menus oder Slide Menus wird erst dann nützlich, wenn du sie auf deine eigenen Zahlen anwendest.
Dieser Artikel beschreibt einen Prozess zur Menüauswahl in 5 Schritten, den du in etwa einem Nachmittag durcharbeiten kannst. Es gibt keine einzelne Formel, die zu jedem Shop passt, aber es gibt eine Vorgehensweise, die dir hilft, auf Basis echter Daten statt aus dem Bauch heraus zu entscheiden. Zu diesem Ansatz bin ich gekommen, nachdem ich selbst ein paar kleine Shops betrieben und mich ein paarmal verschätzt habe.
Schritt 1: Schau dir deinen eigenen Mobile-vs.-Desktop-Anteil an
Verlass dich nicht auf den Satz „alle sagen, mobil ist die Mehrheit”. Öffne deine eigenen Zahlen und sieh nach.
Geh in Google Analytics (Kategorie Technologie / Gerät) oder in Shopify Analytics (Online store sessions by device type). Zieh die letzten 30 bis 90 Tage heran, damit die Stichprobe groß genug ist. Du siehst dann den Anteil der Sitzungen, die vom Smartphone gegenüber dem Computer kommen.
Diese Zahl entscheidet, für welchen Bildschirm du zuerst gestaltest. Wenn 80 % der Besucher über das Smartphone kommen, ist das Smartphone die Hauptbühne, und Desktop ist zweitrangig. Wenn du B2B verkaufst und die meisten deiner Kunden den Computer im Büro nutzen, dreht sich die Geschichte um.
Sieh dir außerdem die Conversion-Rate nach Gerät an, nicht nur den Traffic. Laut dem Baymard Institute liegt der Warenkorbabbruch auf dem Smartphone bei rund 80 % und damit höher als auf dem Desktop (etwa 66 %). Wenn dein Shop viele mobile Besucher hat, die mobile Conversion aber niedrig ist, könnte eine schwer bedienbare Navigation ein Teil des Grundes sein.
Schritt 2: Zähle deine Kategorien auf Ebene 1 und Ebene 2
Öffne den Bereich Navigation in Shopify und zähle ehrlich nach.
- Kategorien der Ebene 1: die größten Gruppen. Bei einem Modeshop zum Beispiel: „Damen”, „Herren”, „Accessoires”, „Sale”.
- Kategorien der Ebene 2: die Unterzweige innerhalb jeder Kategorie der Ebene 1. „Damen” könnte „Oberteile”, „Unterteile”, „Kleider”, „Schuhe” enthalten.
Diese Zahl grenzt deine Optionen ein. Ein Shop mit nur 3 bis 4 Kategorien auf Ebene 1 und fast keinen Kategorien auf Ebene 2 braucht kein Mega Menu – das Mega Menu existiert, um mehrstufige Strukturen aufzunehmen. Ein Shop mit 8 Kategorien auf Ebene 1, jede mit 5 bis 6 Unterzweigen, würde Kunden hingegen scrollen lassen, bis die Hand schmerzt, wenn man alles in ein einziges Slide Menu stopft.
Eine grobe Faustregel, die ich oft nutze: Je flacher und kleiner deine Struktur, desto eher solltest du ein immer sichtbares Menü bevorzugen (wie eine Tab Bar am unteren Rand). Je tiefer und verzweigter deine Struktur, desto mehr brauchst du ein Menü, das gruppiert und aufklappt (ein Mega Menu auf dem Desktop, ein Slide Menu auf dem Smartphone).
Schritt 3: Bestimme die 3 bis 5 Seiten, die Kunden am häufigsten erreichen müssen
Das ist der Schritt, der am häufigsten übersprungen wird – und doch ist er wichtig.
Geh zurück in Google Analytics oder Shopify Analytics und öffne den Bericht der meistbesuchten Seiten (Top pages / Landing pages). Notiere die 3 bis 5 Ziele, die Kunden wirklich brauchen. Meist fallen sie in folgende Kategorien: die Startseite, ein paar wichtige Collections, die Suchseite, der Warenkorb und manchmal eine Sendungsverfolgung oder Kontaktseite.
Warum nur 3 bis 5? Weil das die vernünftige Anzahl an „Abkürzungen” ist, die du an den am leichtesten antippbaren Stellen platzieren kannst. Eine Tab Bar am unteren Rand eines Smartphone-Bildschirms kann in der Regel nur 4 bis 5 Elemente aufnehmen, bevor es zu eng wird. Wenn du die 4 wichtigsten Ziele richtig bestimmst, weißt du genau, was in die Tab Bar gehört.
Sei in diesem Schritt ehrlich. Was du dir wünschst, dass Kunden sehen (etwa deine Markengeschichte), ist nicht zwangsläufig das, was sie brauchen, um zu kaufen. Folge den Verhaltensdaten, nicht den Wünschen.
Schritt 4: Wähle deine Menükonfiguration anhand von vier Faktoren
Kombiniere nun die drei Schritte oben mit den vier Faktoren, die in den vorherigen Artikeln besprochen wurden: das dominierende Gerät, die Kategorietiefe, die Anzahl der wichtigen Ziele und die Besonderheiten deiner Produktkategorie. Gleiche das mit den Vergleichstabellen in jenen Artikeln ab. Im Folgenden ein paar häufige Kombinationen.
| Deine Situation | Vorgeschlagene Konfiguration |
|---|---|
| Überwiegend mobile Besucher, flache Struktur, 4 klare Ziele | Tab Bar am unteren Rand + Slide Menu für den Rest |
| Viele Kategorien, viele Unterzweige, nennenswerter Desktop-Traffic | Mega Menu auf dem Desktop + Slide Menu auf dem Smartphone |
| Eine herausstechende Aktion nötig (Chat, Buchung, Anruf) | FAB für diese Aktion, kombiniert mit dem Hauptmenü |
| Bildlastiger Katalog, wenig Text (Kosmetik, Lebensmittel) | Visual Grid Menu |
Eine Anmerkung dazu, wie Menschen ihr Smartphone halten. Laut Steven Hoobers Forschung hält etwa die Hälfte der Nutzer ihr Smartphone in einer Hand und erledigt das meiste mit dem Daumen. Der bequem erreichbare Bereich des Daumens liegt in der unteren Hälfte des Bildschirms. Deshalb ist eine Tab Bar am unteren Rand meist leichter anzutippen als ein Hamburger in der oberen Ecke – die obere Ecke fällt in die „kaum erreichbare” Zone.
Das ist auch der Moment, über versteckte Navigation nachzudenken. Die Nielsen Norman Group hat gemessen und festgestellt, dass immer sichtbare Menüs etwa 1,5-mal so oft entdeckt und genutzt werden wie Menüs, die hinter einem Hamburger-Symbol versteckt sind. Das heißt nicht, dass der Hamburger falsch ist – er ist nach wie vor nützlich, um zweitrangige Elemente aufzunehmen –, sondern: Verstecke deine wichtigsten Ziele nicht dahinter.
Schritt 5: Installiere Navi+, baue einen Prototyp und sieh ihn dir auf einem echten Gerät an
Inzwischen hast du eine Hypothese. Die verbleibende Aufgabe ist, sie zu bauen und mit eigenen Augen zu sehen.
Mit Navi+ baust du Tab Bars, Mega Menus, Slide Menus, FABs und Grid Menus ohne Code – einfach per Drag-and-drop – und konfigurierst Smartphone und Desktop getrennt. Du richtest genau die Konfiguration ein, die du in Schritt 4 gewählt hast, einen Stil pro Gerät, und schaltest dann den Vorschaumodus ein. Da das Menü unabhängig vom Theme erstellt wird, bleibt es erhalten, selbst wenn du später dein Theme wechselst.
Den Punkt, den ich betonen möchte: Sieh es dir auf einem echten Smartphone an, nicht nur in einem Emulator.
Der Emulator in deinem Browser gibt dir die richtige Bildschirmgröße, kann aber nicht nachbilden, wie ein echter Finger einen Button antippt – ob der Button zu klein ist oder ob die Tab Bar von der Tastatur oder der Navigationsleiste des Smartphones verdeckt wird. Manche Probleme zeigen sich erst, wenn du das Smartphone in die Hand nimmst und versuchst, wie ein echter Kunde etwas zu kaufen.
Achte während der Vorschau auch auf die Geschwindigkeit. Google setzt die Schwelle für „gut” bei den Core Web Vitals auf LCP unter 2,5 Sekunden, INP unter 200 Millisekunden und CLS unter 0,1. Ein schweres Menü kann die Seite ruckeln lassen oder das Layout verschieben. Navi+ ist darauf optimiert, seinen Einfluss auf diese Kennzahlen gering zu halten, aber du solltest es trotzdem in deinem eigenen Shop überprüfen.
Und schließlich: Hab keine Angst davor, nachzujustieren. Die Konfiguration, die du in Schritt 4 gewählt hast, ist ein Ausgangspunkt, kein Urteil. Ein Navigationselement hinzuzufügen oder zu entfernen, ist keine große Sache. Baue einen Prototyp, schau dir die Zahlen nach ein paar Wochen an und passe dann an. Genau so zahlt sich dieser Prozess wirklich aus.
Kurz gesagt: Ein guter Prozess zur Menüauswahl beginnt nicht mit dem Menütyp, der dir gefällt, sondern mit den Zahlen: deinem Mobile-vs.-Desktop-Anteil, der Kategorietiefe und den Zielen, die Kunden wirklich brauchen. Die vier Faktoren plus ein Prototyp auf einem echten Gerät geben dir eine Antwort, die deinem Shop näher ist als jeder allgemeine Ratschlag.
Dieser Artikel ist Teil des größeren Leitfadens Wie du den richtigen Menütyp für deinen Shopify-Shop auswählst.