Das Hamburger-Menü — drei übereinanderliegende Striche in der Ecke des Bildschirms — geht auf die frühen Tage des mobilen Webs zurück. Die Bildschirme waren damals klein, die Verbindungen langsam und die Gestaltungsmöglichkeiten begrenzt. Alles hinter einem kleinen Symbol zu verstauen, war eine vernünftige Art, Platz zu sparen. Das war nicht falsch. Falsch wird es erst, wenn man es für jede Situation einsetzt.
Wenn du einen Shop mit mehr als zehn Kategorien betreibst, ist die mobile Navigation oft eine stille Quelle für entgangenen Umsatz, die kaum jemand bemerkt. Kunden kommen auf dem Smartphone an, sie wollen stöbern, doch der Weg zu deinen Kategorien liegt hinter einem Symbol, das sie erst antippen müssen. Dieser Artikel beleuchtet, warum dem Hamburger-Menü im mobilen E-Commerce die Puste ausgeht, und stellt praktischere Alternativen vor: die Tab Bar, die Daumenzone und wie du mehrere Menüarten so kombinierst, dass sie zu der Art passen, wie Menschen ihr Handy tatsächlich halten.
- Hamburger-Menüs verstecken die wichtigsten Wege.
- Die Daumenzone verschiebt wichtige Navigation nach unten.
- Tab Bar plus Slide Menu ist oft das praktische mobile Setup.
Das eigentliche Problem mit dem Hamburger-Menü im mobilen E-Commerce
Das größte Problem ist nicht, dass das Hamburger-Menü schlecht aussieht — es ist, dass es deine Navigation versteckt. Kunden müssen erst tippen, bevor sie wissen, was sich dahinter verbirgt. Das klingt nach einer kleinen Handlung, doch multipliziert über Tausende von Besuchen entsteht daraus eine echte Lücke zwischen „deine Kategorien sehen” und „sie nicht sehen”.
Die Nielsen Norman Group hat das gemessen. In einer Studie mit 179 Nutzern über sechs Websites hinweg stellten sie fest, dass das Verstecken der Hauptnavigation die Wahrscheinlichkeit, dass Menschen sie überhaupt wahrnehmen und nutzen, um fast die Hälfte senkte — bei gleichzeitig längeren Bearbeitungszeiten und einem als schwieriger empfundenen Erlebnis. Das Ergebnis galt sowohl auf dem Smartphone als auch auf dem Desktop.
Noch ein Detail, das Beachtung verdient: Das Drei-Striche-Symbol ist heute den meisten Menschen vertraut, aber laut NN/g ist es trotzdem nicht für jeden eindeutig, besonders nicht für weniger technikaffine Nutzer. Wenn deine Kunden nicht alle jung sind, lohnt es sich, das im Hinterkopf zu behalten.
Im E-Commerce sind die Kosten eines einzigen zusätzlichen Schritts höher, als man annimmt. Die durchschnittliche Warenkorbabbruchrate liegt bei rund 70 % — das Baymard Institute beziffert sie auf Basis von 50 Studien auf 70,22 %. Das meiste davon passiert an der Kasse, aber auch der Weg dorthin spielt eine Rolle. Jedes kleine Hindernis unterwegs kostet ein paar weitere Kunden. Ein verstecktes Menü ist eines der am leichtesten zu beseitigenden Hindernisse.
Das heißt nicht, dass der Hamburger immer schlecht ist. Für ein einfaches Blog oder eine Landingpage mit nur wenigen Links ist er weiterhin in Ordnung. Das Problem ist nur, dass ein E-Commerce-Shop selten so einfach ist.
VertiefungVollständigen Leitfaden lesen → Das eigentliche Problem mit dem Hamburger-Menü im mobilen E-Commerce
Daumenzone — verstehen, wie Menschen ihr Handy halten
Um zu wissen, wo du dein Menü platzieren solltest, musst du zuerst verstehen, wie Menschen ihr Handy halten. Das Konzept der Daumenzone stammt vom Interface-Experten Steven Hoober, der es vorschlug, nachdem er mehr als 1.300 Interaktionen in realen Situationen beobachtet hatte.
Die Kernerkenntnis ist einfach: Die meisten Aktionen auf dem Smartphone werden mit dem Daumen ausgeführt. Hoober hielt fest, dass etwa die Hälfte der Menschen ihr Handy einhändig hielt und den Daumen das gesamte Tippen erledigen ließ. Und der Daumen hat physische Grenzen — manche Stellen erreicht er mühelos, für andere muss er sich strecken, und einige erreicht er ohne Umgreifen kaum.
Üblicherweise teilt man den Bildschirm in drei Zonen ein:
- Leicht erreichbar: der untere und der mittlere Bereich des Bildschirms, wo der Daumen natürlich ruht. Hierhin gehören die wichtigen Aktionen.
- Mit Strecken erreichbar: die Seiten in Richtung Bildschirmmitte, erreichbar, aber mit etwas Mühe.
- Schwer erreichbar: die oberen Ecken, die meist ein Umgreifen oder den Einsatz beider Hände erfordern.
Sieh dir nun das Hamburger-Menü noch einmal an: Es sitzt genau in der oberen Ecke — der am schwersten erreichbaren Stelle. Das bedeutet, dass das einzelne wichtigste Navigationselement dort platziert ist, wo der Daumen am meisten Mühe hat, es zu erreichen. Je größer der Bildschirm, desto deutlicher wird diese Distanz.
Das ist der eigentliche Grund, das Menü nach unten zu verlagern. Nicht, weil unten „schöner” ist, sondern weil der untere Bereich in der natürlichen Reichweite des Daumens liegt. Wenn du diesen Punkt einmal verstanden hast, lassen sich die daraus folgenden Designentscheidungen viel leichter erklären.
VertiefungVollständigen Leitfaden lesen → Daumenzone — verstehen, wie Menschen ihr Handy halten
Tab Bar — die wichtigste Alternative
Eine Tab Bar ist eine fest verankerte Navigationsleiste am unteren Bildschirmrand mit einigen wenigen, stets sichtbaren Symbolen. Wenn du eine Banking-App, eine Mitfahr-App oder ein soziales Netzwerk nutzt, kennst du sie bereits. Start, Suche, Warenkorb, Konto — jedes bekommt seinen eigenen Platz, immer sichtbar, immer in Daumenreichweite.
Die Stärke der Tab Bar lässt sich auf zwei Gedanken zurückführen: Sie ist bereits sichtbar und sie ist in Reichweite. Kunden müssen sie nicht erst antippen, um zu wissen, was darin steckt. Die wichtigsten Wege liegen direkt vor ihnen. Und weil sie unten sitzt, landet sie genau im leicht erreichbaren Teil der Daumenzone.
Eine Faustregel, die es sich zu merken lohnt: Die Tab Bar funktioniert am besten mit 3 bis 5 Elementen. Sowohl Googles Material Design als auch Apples Human Interface Guidelines empfehlen das. Bei mehr als fünf Elementen liegen die Tippziele zu eng beieinander und der Daumen trifft leicht das falsche. Vier Elemente sind für die meisten Shops oft der angenehme Mittelweg.
Ein kurzer Vergleich der beiden Ansätze:
| Hamburger-Menü | Tab Bar | |
|---|---|---|
| Sichtbarkeit | Versteckt bis zum Antippen | Immer sichtbar |
| Position auf dem Bildschirm | Obere Ecke (schwer erreichbar) | Unten (leicht erreichbar) |
| Geeignete Anzahl an Optionen | Viele, in einer Liste | 3–5 Hauptwege |
| Am besten geeignet für | Nachrangige, selten genutzte Elemente | Die wichtigsten Wege |
Eine Sache, auf die du beim Wechsel zu einer Tab Bar achten solltest: Lass sie die Seite nicht verlangsamen oder das Layout verschieben. Google legt recht klare Schwellenwerte bei den Core Web Vitals fest — LCP unter 2,5 Sekunden, INP unter 200 Millisekunden, CLS unter 0,1. Eine fest verankerte Leiste am unteren Rand kann, wenn sie unbedacht eingebaut wird, Layoutverschiebungen verursachen (was den CLS beeinträchtigt) oder die Seite verlangsamen. Achte bei der Wahl eines Tools also darauf, dass es Wert auf die Ladegeschwindigkeit legt.
Genau hier hilft auch Navi+: Es baut eine Tab Bar per Drag-and-drop, ohne Code, separat für Mobilgeräte konfiguriert und so gebaut, dass deine Core-Web-Vitals-Werte nicht darunter leiden.
VertiefungVollständigen Leitfaden lesen → Tab Bar — die wichtigste Alternative
Tab Bar + Slide Menu kombinieren
An diesem Punkt fragst du dich vielleicht: Wenn eine Tab Bar nur 3–5 Elemente fasst, wohin kommen dann die Dutzenden anderer Kategorien? Das ist ein häufiges Missverständnis. Die Tab Bar ersetzt nicht deine gesamte Navigation — sie übernimmt nur die wichtigsten Wege.
Der praktische Ansatz besteht darin, mehrere Menüarten zu kombinieren, von denen jede eine Aufgabe erfüllt:
- Die Tab Bar hält die 3–5 zentralen Wege: Start, Kategorien, Suche, Warenkorb, Konto.
- Das Slide Menu (im Grunde der ausgeklappte Hamburger) hält den Rest — die vollständige Kategorienliste, Richtlinienseiten, Kontakt. Diese Elemente sind wichtig, werden aber nicht jedes Mal gebraucht.
- Der FAB (Floating Action Button) ist für eine einzelne herausgehobene Aktion gedacht, falls dein Shop sie braucht, etwa einen Support-Chat oder ein schnelles In-den-Warenkorb-Legen.
So betrachtet wird der Hamburger nicht abgeschafft — ihm wird die richtige Rolle zugewiesen. Seine Aufgabe ist es, nachrangige Informationen zu halten, nicht die gesamte Navigation zu tragen. Die Hauptwege wandern nach unten in die Tab Bar, wo der Daumen sie leicht erreicht und das Auge sie sofort erfasst.
Der knifflige Teil dieser Kombination ist, dass du Mobil- und Desktopansicht getrennt konfigurieren musst. Auf dem Desktop ergibt ein über mehrere Spalten verteiltes Mega Menu weiterhin Sinn, weil ein Mauszeiger keine „schwer erreichbare Zone” kennt. Auf dem Smartphone aber wird genau dieses Menü erdrückend. Zwei Umgebungen, zwei unterschiedliche Logiken.
Navi+ kann all diese Menüarten an einem Ort umsetzen — Tab Bar, Slide Menu, Mega Menu, FAB, Grid Menu — und lässt dich Mobil- und Desktopansicht getrennt konfigurieren. Die Menüs bleiben außerdem erhalten, wenn du das Theme wechselst, sodass du nicht jedes Mal von vorn anfangen musst, wenn du deine Oberfläche änderst.
VertiefungVollständigen Leitfaden lesen → Tab Bar + Slide Menu kombinieren (und die Rolle des FAB)
Wo du anfangen solltest
Wenn du eine Sache zuerst tun musst, dann öffne deinen Shop auf deinem eigenen Smartphone und gehe einen Kauf einhändig durch. Halte das Handy ganz normal, ohne umzugreifen. Achte darauf, wie weit sich der Daumen strecken muss, um in eine Kategorie zu gelangen.
Ein paar Fragen, um dich selbst zu prüfen:
- Ist der wichtigste Weg bereits sichtbar, oder musst du erst antippen, um ihn überhaupt zu sehen?
- Wie viele Antipper braucht ein Kunde, um die gewünschte Kategorie zu erreichen?
- Liegen die am häufigsten genutzten Schaltflächen in bequemer Daumenreichweite?
- Verlangsamt das Menü die Seite oder verschiebt es beim Laden das Layout?
Einhand-TestÖffne den Shop auf dem Smartphone und gehe einen Kauf durch, ohne die Hand zu wechseln.
Du musst nicht alles auf einmal überarbeiten. Meist reicht es schon, einfach die 3–5 Hauptwege nach unten in eine Tab Bar zu verlagern und den Rest in einem Slide Menu zu bündeln, um den Unterschied zu spüren. Das ist die Art von Veränderung, die wenig Aufwand kostet, aber das alltägliche Erlebnis deiner mobilen Kunden unmittelbar berührt.
Das Hamburger-Menü ist nicht der Feind. Für nachrangige, selten genutzte Elemente hat es weiterhin seinen Platz. Doch in einem Mobile-First-Shop wie heute üblich ist es nicht mehr die beste Standardlösung, ihm die gesamte Navigation aufzubürden. Die wichtigen Wege vom Hamburger in eine Tab Bar zu verlagern, ist eine der günstigsten und lohnendsten Verbesserungen, die du an deinem Shop vornehmen kannst.
Themen entdecken
Dieser Leitfaden verlinkt auf gezielte Artikel — vertiefen Sie jedes Thema.