Wenn ich nur eine einzige Änderung wählen dürfte, um Kundinnen und Kunden das Einkaufen auf dem Smartphone zu erleichtern, würde ich eine mobile Tab Bar hinzufügen. Das ist eine fest verankerte Navigationsleiste am unteren Bildschirmrand, die ein paar Symbole mit Beschriftung zeigt. Kundinnen und Kunden müssen nicht suchen oder ein Menü öffnen — sie blicken nach unten und sehen sofort, wo sie hinmüssen. Genau deshalb nutzt sie fast jede große E-Commerce-App.
Warum es so wichtig ist, sie unten zu platzieren
Die meisten Menschen halten ihr Smartphone mit einer Hand. Die Forschung von Steven Hoober, bei der über 1.300 Personen beobachtet wurden, ergab, dass rund 49 % das Telefon einhändig halten und mit dem Daumen tippen. Wird das Gerät so gehalten, erreicht der Daumen bequem nur den unteren Teil des Bildschirms — den Bereich, der üblicherweise als Daumenzone bezeichnet wird.
Der obere Rand des Bildschirms ist das Gegenteil: Um ihn zu erreichen, muss man den Daumen strecken oder die Hand wechseln. Das klassische Hamburger-Menü sitzt genau in der oberen Ecke, also am weitesten entfernten Punkt. Eine Tab Bar am unteren Rand fällt dagegen direkt in den gut erreichbaren Bereich. Kundinnen und Kunden handeln schneller und vertippen sich seltener, einfach weil sie genau dort liegt, wo der Daumen ohnehin schon ist.
Da große Smartphones immer verbreiteter werden, fällt diese Distanz noch stärker ins Gewicht. Ein Button unten ist immer in Reichweite; ein Button oben ist es nicht immer.
Sofort sichtbar, ohne dass man etwas tun muss
Der größte Unterschied zwischen einer Tab Bar und einem versteckten Menü ist die Sichtbarkeit. Sie ist immer da, 4-5 Symbole mit Beschriftung, und Kundinnen und Kunden müssen nichts öffnen.
Das ist wichtiger, als viele denken. Die Nielsen Norman Group untersuchte 179 Personen auf 6 Websites und kam zu dem Schluss: Das Verstecken der Hauptnavigation senkt spürbar, wie oft Kundinnen und Kunden sie finden, verlängert die Zeit bis zum Abschluss einer Aufgabe und lässt die Bedienung schwerer wirken. Ist ein Menü sichtbar, nutzen Menschen es weitaus häufiger, als wenn sie erst auf ein Drei-Striche-Symbol tippen müssen.
Für einen Shop bedeutet “Kundinnen und Kunden nutzen die Navigation mehr” meist auch “sie sehen sich mehr Produkte an”. Ein Kosmetikshop kann ein Suche-Symbol in der Tab Bar behalten; wer einen ganz bestimmten Lippenstift sucht, tippt einfach einmal, statt sich durch ein Menü zu wühlen. Jeder eingesparte Schritt ist eine Chance, diese Person im Shop zu halten.
Wenn Kundinnen und Kunden sich leicht zurechtfinden, hilft das indirekt auch dem Checkout. Laut der Übersicht des Baymard Institute über zahlreiche Studien liegt die durchschnittliche Warenkorbabbruchrate bei rund 70 % und hat sich seit Jahren kaum bewegt. Die meisten Ursachen liegen im Checkout-Schritt selbst, aber auch eine verwirrende Navigation, die ablenkt oder Kundinnen und Kunden verliert, spielt eine Rolle. Ein Warenkorb-Symbol, das immer unten sichtbar ist, samt Mengen-Badge, erinnert die Kundschaft daran, dass ihr Warenkorb noch wartet.
Die 4-5-Punkte-Regel: nur die Hauptziele behalten
Das Schwierigste an einer Tab Bar ist nicht technisch — es ist die Disziplin bei der Auswahl der Punkte. Der Platz ist sehr knapp, also sollte er nur den Hauptzielen gehören — den Orten, die Kundinnen und Kunden am häufigsten brauchen.
Ein klassischer Aufbau, der für die meisten Shops funktioniert:
- Startseite — zurück zur Homepage
- Kollektionen / Shop — hinein in die Produktkategorien
- Suche — schnelle Suche
- Warenkorb — der Warenkorb, mit Mengenanzeige
- Konto — Konto, Bestellungen oder ein eigener Prioritätspunkt
Der fünfte Punkt ist derjenige, den man gegen das eigene Geschäftsmodell abwägen sollte. Läuft gerade eine große Aktion, könnte man ihn durch Flash Sale ersetzen. Bringt vor allem Content die Kundschaft zurück, wäre Blog denkbar. Ein saisonaler Modeshop könnte vorübergehend Neuheiten dort platzieren. Der entscheidende Punkt: nur ein Prioritätspunkt, kein Vollstopfen.
Warum nicht mehr als 5 Punkte
Diese Grenze ist nicht nur Optik. Auf einem Smartphone-Bildschirm schrumpft jeder Punkt, wenn man 6-7 Symbole hineinquetscht, die Beschriftungen werden schwer lesbar, und die Tippflächen liegen so dicht beieinander, dass es zu Fehltipps kommt. Wenn alles “wichtig” ist, sticht nichts mehr hervor.
Genau diesen Fehler habe ich einmal gemacht: Ich wollte Produkte, Aktionen, Kontakt, Blog, Konto und Warenkorb alle auf dieselbe Leiste packen. Das Ergebnis war eine vollgestopfte Symbolreihe, bei der Kundinnen und Kunden trotzdem nicht wussten, worauf sie tippen sollten. Erst die Reduktion auf 5 klare Punkte gab allem wieder Luft. Eine Tab Bar macht eine Sache gut: Sie bringt Kundinnen und Kunden schnell zu einigen der wichtigsten Orte. Alles andere — Richtlinien, Ratgeber, untergeordnete Kategorien — kann im Slide Menu oder im Footer leben.
Ein Muster, das Kundinnen und Kunden bereits kennen
Es gibt einen Vorteil, den kaum jemand bemerkt: Kundinnen und Kunden wissen schon, wie man eine Tab Bar bedient, bevor sie überhaupt in Ihrem Shop ankommen. Sie sehen sie jeden Tag in Shopping-Apps, Social-Apps, Banking-Apps. Eine Symbolleiste am unteren Rand mit Startseite, Suche, Warenkorb und Konto ist eine Konvention, die fast jeder versteht.
Nutzt ein Shop genau dieses Muster, müssen Kundinnen und Kunden nichts Neues lernen. Sie schauen nach unten und wissen sofort, was zu tun ist. Diese Vertrautheit ist selbst eine Form der Conversion-Optimierung — Sie verringern Reibung, ohne irgendetwas erklären zu müssen.
Für Händlerinnen und Händler auf Shopify liegt der Haken meist im Technischen: Die meisten Themes bringen keine app-artige Tab Bar mit, und sie selbst zu programmieren ist aufwändig und geht leicht kaputt, wenn man das Theme wechselt. Genau hier hilft ein spezialisiertes Tool. Navi+ lässt Sie eine Tab Bar per Drag-and-drop bauen, ohne Code, mit getrennten Einstellungen für Mobil und Desktop, und das Menü bleibt erhalten, wenn Sie das Theme wechseln.
Tauschen Sie sie nicht gegen Seitengeschwindigkeit
Eine letzte Anmerkung. Die Tab Bar erscheint auf jeder Seite, ist sie also schwer, bremst sie den gesamten Shop aus. Und Google bewertet Geschwindigkeit direkt über die Core Web Vitals: LCP sollte unter 2,5 Sekunden liegen, INP unter 200 Millisekunden, CLS unter 0,1. Besonders CLS — der Layout-Shift — gerät leicht aus dem Ruder, wenn die untere Leiste verspätet erscheint und andere Inhalte verschiebt.
Bevorzugen Sie bei der Wahl eines Tools für Ihre Tab Bar eines, das leicht und stabil ist und Ihren Geschwindigkeits-Score nicht nach unten zieht. Navi+ hat hohe Bewertungen im Shopify App Store und trägt das “Built for Shopify”-Abzeichen. Eine gute Tab Bar muss beides sein: leicht antippbar und frei von jeder Wartezeit.
Kurz gesagt: Die Tab Bar ist die wichtigste Alternative zum Hamburger-Menü auf dem Smartphone. Sie liegt in der Daumenzone, bleibt ohne Öffnen sichtbar, beschränkt sich auf einige der wichtigsten Ziele und baut auf einem Muster auf, das Kundinnen und Kunden bereits kennen. Diese wenigen Grundlagen richtig zu machen reicht meist schon aus, um das Einkaufen auf dem Smartphone spürbar zu erleichtern.
Dieser Artikel ist Teil des umfassenderen Leitfadens zur Mobilen Navigation — warum das Hamburger-Menü verschwindet und was stattdessen funktioniert.