Wenn Sie über Shopify verkaufen und mit Ihrem Handy-Menü zu kämpfen haben, gibt es ein Muster, das viele große E-Commerce-Apps verwenden – und es lohnt sich, davon zu lernen. Es ist die Art und Weise, wie Sie eine Tab Bar und ein Slide Menu kombinieren: Lassen Sie die Tab Bar die schnellen Wege übernehmen und das Slide Menu das tiefe Stöbern. In diesem Artikel geht es darum, wie diese beiden zusammenarbeiten und wo der FAB in dieses Bild passt.
Ich habe einmal einen Shop betrieben und den klassischen Fehler gemacht: Ich habe alles in ein einziges Hamburger-Menü gestopft und darauf vertraut, dass „die Käufer schon darauf tippen, wenn sie es brauchen“. In Wirklichkeit sind Käufer weniger geduldig, als wir denken.
Warum eine einzige Menüart nicht ausreicht
Auf dem Handy teilt sich das Verhalten der Käufer in zwei recht klare Gruppen auf.
Die erste Gruppe weiß, was sie will. Sie kommt, um den Warenkorb anzusehen, zu suchen oder zur Startseite zurückzukehren. Diese Käufer müssen sich schnell bewegen und direkt ans Ziel kommen.
Die zweite Gruppe hat sich noch nicht entschieden, was sie kaufen möchte. Sie will durch die Kategorien streifen und sehen, was interessant ist. Diese Käufer brauchen eine vollständige Karte des Shops.
Ein einzelnes Menü hat Mühe, beide gut zu bedienen. Wenn Sie alles in einen Hamburger stopfen, muss die erste Gruppe einen zusätzlichen Schritt für Dinge machen, die nur einen Tipp brauchen sollten. Die Nielsen Norman Group hat herausgefunden, dass das Verstecken der Hauptnavigation hinter einer Schaltfläche sie schwerer auffindbar und langsamer nutzbar macht, als wenn die Punkte offen angezeigt werden. Wenn Sie umgekehrt versuchen, den gesamten Kategoriebaum auf dem Bildschirm darzustellen, ist die erste Gruppe überfordert und der Bildschirm wirkt überladen.
Die Lösung besteht nicht darin, sich für eines zu entscheiden. Sie besteht darin, die Rollen aufzuteilen.
Die Tab Bar übernimmt die wichtigsten Ziele
Die Tab Bar ist eine feste Navigationsleiste am unteren Bildschirmrand, die meist 4–5 Punkte enthält. Sie ist immer sichtbar, sodass Käufer nicht erst tippen müssen, um sie zu öffnen.
Ihre Position am unteren Rand ist kein Zufall. Laut der Forschung von Steven Hoober über mehr als 1.300 Nutzerbeobachtungen werden etwa 75 % der Aktionen auf dem Bildschirm mit dem Daumen ausgeführt. Die untere Bildschirmmitte ist genau dort, wo der Daumen am leichtesten hinkommt, wenn man das Handy mit einer Hand hält. Wichtige Ziele dort zu platzieren bedeutet, dass Käufer genauer und schneller tippen und seltener danebengreifen.
Was sollte also in die Tab Bar? Nur die Ziele, die am häufigsten genutzt werden und am schnellsten erreichbar sein müssen. Zum Beispiel für einen Mode-Shop:
- Startseite
- Suche
- Kategorien (oder „Produkte“)
- Warenkorb
- Konto
Fünf Punkte sind genau richtig. Mehr, und jede Schaltfläche wird gequetscht und schwer zu treffen; weniger, und Sie verschenken wertvollen Platz. Dies ist nicht der Ort, um jede Unterkategorie aufzuzählen – es ist der Ort für ein paar der größten Türen.
Das Slide Menu übernimmt die gesamte Kategoriestruktur
Die Tab Bar hat nur 4–5 Plätze. Aber ein echter Shop hat meist Dutzende von Kategorien und Unterkategorien. Wo kommen die hin?
Hier kommt das Slide Menu ins Spiel. Das Slide Menu öffnet sich vom Bildschirmrand und kann die vollständige, mehrstufige Kategoriestruktur aufnehmen. Ein Käufer möchte von Herren zu Damen wechseln, von Oberteilen zu Unterteilen, von einer Kollektion zur anderen – dafür ist das Slide Menu der richtige Ort.
Das Schöne an diesem Muster ist, wie sich das Slide Menu öffnet. Sie platzieren einen Punkt „Kategorien“ oder ein „Mehr“-Symbol direkt auf der Tab Bar. Der Käufer tippt darauf, und das Slide Menu fährt heraus. So verbinden sich die beiden Menüs: Die Tab Bar ist immer für schnelle Wege da und gleichzeitig die Tür ins Slide Menu für das tiefe Stöbern.
Ein kleines, aber wichtiges Detail: Wenn Sie ein Slide Menu verwenden, beschriften Sie es klar mit Text, statt ein nacktes Symbol stehen zu lassen, und platzieren Sie es dort, wo Käufer es erwarten. NN/G empfiehlt, das standardmäßige Drei-Linien-Symbol zusammen mit einer Beschriftung zu verwenden, damit Käufer erahnen können, was sich dahinter verbirgt. Das Slide Menu ist nicht schlecht – es ist nur dann schlecht, wenn es die Aufgabe der Tab Bar und seine eigene zugleich erledigen soll.
Die Rollenaufteilung läuft auf Folgendes hinaus: Wenn ein Käufer Tempo braucht, nutzt er die Tab Bar; wenn er alles durchstöbern möchte, öffnet er das Slide Menu. Genau das ist die Kombination aus Tab Bar und Slide Menu, die viele große E-Commerce-Apps verwenden, und sie funktioniert für Shopify, ohne dass dramatische Änderungen nötig sind.
Der FAB: eine Ergänzung, kein Ersatz
Der FAB (Floating Action Button) ist eine runde, schwebende Schaltfläche, meist in der unteren rechten Ecke, die über dem Seiteninhalt liegt. Viele finden ihn ansprechend und wollen ihn für die Navigation verwenden. Davon würde ich abraten.
Der FAB sollte genau einer Aktion vorbehalten sein – einer, die wichtig ist und sich wiederholt. Ein paar sinnvolle Beispiele:
- Eine Support-Chat-Schaltfläche, damit Käufer schnell nachfragen können, wenn sie unsicher sind
- „Heutige Angebote ansehen“ während einer Aktion
- Zurück nach oben auf sehr langen Produktlistenseiten
Der Grund, warum der FAB nicht die Hauptnavigation tragen sollte: Er ist nur eine einzige Schaltfläche. Wenn man darauf tippt, muss er ein Menü öffnen – was bedeutet, dass man direkt zu dem Muster der versteckten Navigation zurückkehrt, das wir gerade vermeiden wollten. Die Tab Bar übernimmt die Navigation besser, weil sie immer sichtbar ist und mehrere Plätze hat. Der FAB eignet sich für einen einzelnen, klaren Handlungsaufruf.
Mit anderen Worten: Die Tab Bar und das Slide Menu kümmern sich um das „Wohin“, während der FAB sich um „eine Sache tun“ kümmert. Lassen Sie sie sich nicht gegenseitig in die Quere kommen.
Warum es sich lohnt, dieses Muster richtig hinzubekommen
Es gibt einen praktischen Grund, sich um Ihr Handy-Menü zu kümmern. Laut dem Baymard Institute liegt die durchschnittliche Warenkorbabbruchrate bei etwa 70 %, und auf dem Handy ist sie sogar noch höher, bei rund 80 %. Wenn Käufer schon Mühe haben, sich über das Menü zurechtzufinden, gehen sie, bevor sie überhaupt an den Checkout denken.
Auch die Seitengeschwindigkeit spielt eine Rolle. Ein schweres Menü kann das Laden verlangsamen und Layout-Verschiebungen verursachen. Google setzt die Schwelle für „gut“ bei den Core Web Vitals auf einen LCP unter 2,5 Sekunden, einen INP unter 200 Millisekunden und einen CLS unter 0,1. Je schlanker und leichter das Menü, desto leichter bleibt man innerhalb dieser Schwellen.
Es gibt noch etwas zu bedenken: die Anzahl der Apps. Ein Shopify-Shop installiert meist viele Apps, und jede fügt ein weiteres Stück Code hinzu, das auf der Seite läuft. Wenn ein einziges Menü-Tool die Tab Bar, das Slide Menu und den FAB an einem Ort übernehmen kann, vermeiden Sie es, mehrere separate Dinge zusammenzuflicken.
Dieses Muster ohne Code aufbauen
Der schwierige Teil des kombinierten Musters ist die Konfiguration. Sie brauchen eine separate Tab Bar fürs Handy, ein damit verbundenes Slide Menu und möglicherweise einen FAB für einen CTA – und all das muss zusammenpassen, ohne die Desktop-Version anzurühren.
Genau dafür wurde Navi+ geschaffen. Sie konfigurieren die Tab Bar und das Slide Menu an einem Ort, stellen sie separat fürs Handy ein, per Drag-and-drop, ohne Code. Die mobile und die Desktop-Konfiguration sind getrennt, sodass die Desktop-Version weiterhin ein normales Mega Menu verwendet. Das Menü bleibt außerdem erhalten, wenn Sie das Theme wechseln, und es ist so optimiert, dass es Ihre Core Web Vitals nicht ausbremst.
Was ich Ihnen mitgeben möchte, ist kein bestimmtes Tool, sondern die Denkweise, Rollen aufzuteilen: Lassen Sie nicht ein einziges Menü alles erledigen. Lassen Sie die Tab Bar die schnellen Wege übernehmen, das Slide Menu das tiefe Stöbern und den FAB eine einzelne Aktion. Ihre Käufer werden sich leichter zurechtfinden, und das ist oft der erste Schritt dazu, dass sie länger bleiben.
Dieser Artikel ist Teil des größeren Leitfadens zur Mobilen Navigation — warum das Hamburger-Menü aus der Mode kommt und was man stattdessen verwenden sollte.