Schluss mit dem Hamburger-Menü: Warum Bottom-Bars auf Smartphones gewinnen

Der stumme Abschied vom Klick im oberen Displayrand

Smartphones sind größer geworden, die menschliche Hand jedoch nicht. Was auf einem kompakten Gerät noch bequem erreichbar war, liegt bei modernen Displays häufig weit außerhalb der natürlichen Daumenbewegung. Genau hier entsteht ein alltägliches Problem: Das klassische Drei-Strich-Symbol sitzt meist oben links oder oben rechts, obwohl das Gerät mit einer Hand gehalten wird. Für viele Nutzer bedeutet der nächste Navigationsschritt deshalb ein Umgreifen, eine zweite Hand oder eine unkomfortable Streckbewegung.

Das Hamburger-Menü hat im Interface-Design eine lange Geschichte und war lange eine praktische Antwort auf begrenzten Bildschirmplatz. Die Entwicklung lässt sich in der Geschichte des Hamburger-Buttons nachvollziehen. Auf modernen Smartphones stößt das Muster jedoch auf ergonomische Grenzen. Mobile Nutzer wollen nicht erst ein Symbol suchen, ein verborgenes Menü öffnen und anschließend einen kleinen Eintrag auswählen. Sie erwarten, dass zentrale Ziele schnell sichtbar und mit wenigen, sicheren Berührungen erreichbar sind. Für Unternehmen ist das keine Geschmacksfrage, sondern eine messbare Geschäftsfrage: Jede unnötige Hürde kann Seitenaufrufe, Anfragen, Terminbuchungen oder Käufe kosten.

Die Ergonomie der Daumenzone auf modernen Screens

Beim Einhandbetrieb beschreibt der Daumen keine gerade Linie über das Display, sondern bewegt sich in einem begrenzten, leicht gebogenen Bereich. Dieser Bereich liegt typischerweise im unteren bis mittleren Teil des Bildschirms. Besonders bequem sind Bedienelemente, die ohne Veränderung des Griffes erreicht werden können. Mit zunehmender Entfernung vom natürlichen Drehpunkt des Daumens steigt dagegen die Wahrscheinlichkeit, dass Nutzer das Smartphone neu positionieren oder die zweite Hand einsetzen müssen.

Für die Planung einer mobilen Oberfläche hilft eine einfache Einteilung des Displays:

• Mühelose Zone: Der untere und zentrale Bereich ist meist ohne Umgreifen erreichbar.
• Erreichbare Zone: Mittlere Seitenbereiche lassen sich bedienen, erfordern aber bereits eine größere Daumenbewegung.
• Extreme Streckzone: Die oberen Ecken und das obere Viertel verlangen häufig einen Griffwechsel oder eine zweite Hand.

Die genaue Grenze hängt von Displaygröße, Handgröße, Haltung und Nutzungssituation ab. Ein Smartphone wird außerdem nicht immer ruhig am Schreibtisch bedient. Nutzer stehen an einer Haltestelle, tragen eine Tasche, halten ein Kind oder wechseln zwischen kurzen Blicken und längeren Aufgaben. Navigation, die im Alltag nur unter idealen Bedingungen funktioniert, ist keine robuste Navigation. Eine Bottom-Bar platziert die wichtigsten Ziele dort, wo der Daumen ohnehin häufig arbeitet. Das verbessert nicht automatisch jede Website, schafft aber eine deutlich bessere Ausgangslage für schnelle, wiederholte Interaktionen.

Inhalte und Bedienelemente im oberen Viertel werden dadurch nicht unbrauchbar. Das Logo, eine Statusinformation oder ein sekundärer Zurück-Link können dort weiterhin sinnvoll sein. Kritisch wird es, wenn zentrale Aktionen ausschließlich oben liegen. Wer einen Kontakt aufnehmen, eine Leistung auswählen oder den Warenkorb öffnen möchte, sollte nicht erst eine körperlich unkomfortable Bewegung ausführen müssen. Mobile Navigation muss deshalb nicht nur logisch, sondern auch physisch gut erreichbar sein.

Unsichtbare Barrieren im Versteckspiel des Hamburger-Menüs

Ein Hamburger-Menü spart Platz, versteckt aber zugleich Informationen. Der Nutzer sieht zunächst weder die verfügbaren Bereiche noch deren Bedeutung. Erst ein Tipp auf das Symbol öffnet die Navigation, danach folgt häufig ein weiterer Tipp auf einen Menüpunkt oder ein Untermenü. Diese zusätzliche Entscheidungsebene ist besonders problematisch, wenn Besucher nicht genau wissen, wonach sie suchen. Eine sichtbare Beschriftung wie „Leistungen“, „Kontakt“ oder „Warenkorb“ wirkt dagegen als Orientierungshilfe und kann ohne vorherige Interpretation erkannt werden.

Das bedeutet nicht, dass Hamburger-Menüs grundsätzlich falsch sind. Sie können bei umfangreichen, inhaltsorientierten Websites mit vielen Kategorien und Unterseiten sinnvoll bleiben. Auch sekundäre Inhalte lassen sich dort sauber bündeln. Für zentrale Nutzeraufgaben ist ein vollständig verborgenes Menü jedoch häufig die schlechtere Wahl. Eine Bottom-Bar kann die wichtigsten drei bis fünf Ziele dauerhaft sichtbar halten, während ein erweitertes Menü weiterhin Platz für selten benötigte Bereiche bietet. So entsteht eine klare Trennung zwischen häufigen und nachrangigen Aufgaben.

Typische Interaktionskosten lassen sich in einer einfachen Gegenüberstellung verdeutlichen:

Interaktionsmuster	Hamburger-Menü	Bottom-Bar
Kontakt öffnen	Menü finden, öffnen, Eintrag erkennen, auswählen	Kontakt direkt antippen
Hauptleistung erreichen	Verborgene Navigation durchsuchen	Beschrifteten Primärpunkt auswählen
Orientierung	Aktueller Bereich oft erst nach dem Öffnen sichtbar	Aktiver Tab kann dauerhaft markiert werden
Einhandbedienung	Oben häufig schwer erreichbar	Unten meist bequem erreichbar

Für die Bewertung sollten nicht nur Klickzahlen betrachtet werden. Aussagekräftig sind auch Zeit bis zur ersten relevanten Aktion, Abbruchrate, Scrolltiefe, Formularstarts und abgeschlossene Leads. Sinkt die Zahl der Menüöffnungen, kann das zunächst wie ein Nachteil aussehen. Wenn Nutzer stattdessen schneller auf der Kontaktseite landen und dort häufiger ein Formular absenden, ist die vereinfachte Navigation geschäftlich erfolgreicher.

Barrierefreiheit erweitert diese Betrachtung. Mobile Accessibility betrifft nicht nur Menschen mit dauerhaften Behinderungen, sondern auch Nutzer mit eingeschränkter Beweglichkeit, schwacher Sicht, motorischer Unsicherheit oder ungünstigen Umgebungsbedingungen. Die Richtlinien zur Mobile Accessibility am W3C ordnen mobile Zugänglichkeit in Standards wie WCAG, WAI-ARIA sowie Anforderungen an unterschiedliche Eingabemethoden ein. Interaktive Elemente müssen ausreichend groß, klar beschriftet und mit assistiven Technologien sinnvoll nutzbar sein. Ein Symbol allein reicht daher nicht aus. Textlabels, ausreichender Kontrast, sichtbare Fokuszustände und eine verständliche Reihenfolge bleiben entscheidend.

Vier bis fünf Optionen für den perfekten mobilen Workflow

Eine gute Bottom-Bar ist keine verkleinerte Sitemap. Sie bildet die wichtigsten Wege ab, die Nutzer auf einer Website tatsächlich gehen. Als praktikable Orientierung dient die 80-20-Regel: Ein kleiner Teil der möglichen Aktionen erzeugt den größten Teil des Nutzens. Bei einem regionalen Dienstleister können das beispielsweise „Leistungen“, „Referenzen“, „Kontakt“ und „Anrufen“ sein. Bei einem Onlineshop stehen eher „Shop“, „Suche“, „Warenkorb“ und „Konto“ im Mittelpunkt.

Für die Auswahl helfen konkrete Daten statt Bauchgefühl. Web-Analytics zeigen, welche Seiten häufig aufgerufen werden, an welcher Stelle mobile Nutzer aussteigen und welche Aktionen zu Leads oder Käufen führen. Ergänzend liefern Suchdaten, Supportanfragen und Gespräche mit Vertrieb oder Kundenservice wertvolle Hinweise. Meist reichen vier oder fünf dauerhaft sichtbare Punkte. Sekundärinhalte wie Impressum, Karriere, Presseinformationen oder ausführliche Unternehmensdetails gehören in das Footer-Menü oder in ein zusätzliches Menü. Wichtig ist eine klare visuelle Hierarchie: Primäraktionen unten, ergänzende Informationen an anderer Stelle.

• Kontakt: Für Anfragen, Rückrufwünsche oder Terminvereinbarungen.
• Leistungen oder Produkte: Für den wichtigsten inhaltlichen Einstieg.
• Suche: Wenn die Website viele Inhalte oder Produkte enthält.
• Warenkorb oder Konto: Für transaktionsorientierte Angebote.
• Mehr: Als Zugang zu selten benötigten Bereichen, sofern erforderlich.

Icons sollten die Beschriftung unterstützen, aber nicht ersetzen. Ein Briefumschlag kann für Kontakt stehen, wird jedoch nicht von jedem Nutzer gleich interpretiert. Kurze Textlabels reduzieren Missverständnisse und verbessern die Scanbarkeit. Die Navigation bleibt damit klar statt kompliziert, ohne wertvollen Platz mit langen Erklärungen zu füllen.

Praxiserprobte Schritte zur schlanken Bottom-Navigation für KMU

Die Einführung einer Bottom-Bar muss kein vollständiger Relaunch sein. Entscheidend ist eine saubere Bestandsaufnahme und eine schrittweise Validierung. Gerade für kleine und mittlere Unternehmen ist es sinnvoll, zunächst die wichtigsten mobilen Aufgaben zu identifizieren, anstatt die gesamte Informationsarchitektur gleichzeitig umzubauen.

1. Bestandsaufnahme und Analytics prüfen: Erfasse Menüöffnungen, Klickpfade, Ausstiegsseiten, Formularstarts, Anrufe und abgeschlossene Anfragen. Segmentiere die Daten nach Smartphone, Tablet und Desktop, damit die mobile Nutzung nicht in Gesamtwerten untergeht. Ergänzend zeigen Session-Aufzeichnungen oder kurze Usability-Tests, ob Nutzer wichtige Ziele überhaupt erkennen.
2. Informationsarchitektur reduzieren: Begrenze die Bottom-Bar auf maximal vier oder fünf primäre Icons mit verständlichen Textlabels. Ordne die Punkte nach Geschäftsrelevanz und Nutzungshäufigkeit, nicht nach interner Abteilungslogik. Ein Eintrag wie „Unsere Lösungen“ ist oft weniger eindeutig als „Leistungen“ oder „Produkte“.
3. Touch-Flächen und Abstände gestalten: Die sichtbare Grafik eines Icons darf klein sein, die tatsächlich anklickbare Fläche muss ausreichend groß bleiben. Als praxisnahe Orientierung gelten mindestens 44 mal 44 Pixel, bei manchen Designsystemen auch rund 48 Pixel. Zwischen benachbarten Elementen braucht es genügend Abstand, damit keine Fehlbedienungen entstehen. Die Bar muss außerdem den Abstand zur unteren Systemleiste berücksichtigen. Auf Geräten mit Gestensteuerung darf die Navigation nicht mit dem sicheren Bedienbereich kollidieren.
4. Technisch sauber umsetzen: Verwende semantische Navigationselemente, aussagekräftige Beschriftungen und einen sichtbaren Status für den aktiven Bereich. Die Bottom-Bar sollte beim Scrollen nicht den Inhalt verdecken und auf kleinen Displays nicht unnötig viel Höhe verbrauchen. Ladezeiten, Kontrast, Tastaturbedienbarkeit und Screenreader-Unterstützung gehören von Anfang an zur Umsetzung, nicht erst in eine spätere Korrekturrunde.
5. A/B-Tests durchführen: Vergleiche die bestehende Navigation mit der Bottom-Bar zunächst auf klar definierten Zielseiten. Beobachte nicht nur Verweildauer und Klickrate, sondern vor allem qualifizierte Leads, abgeschlossene Formulare, Anrufe, Käufe und Fehlklicks. Eine Testdauer muss ausreichend sein, damit Wochentage und unterschiedliche Traffic-Quellen abgebildet werden. Danach sollten die Ergebnisse nach Gerätetyp und Nutzerquelle ausgewertet werden.

Bei der technischen Bewertung lohnt außerdem ein Blick auf die Reaktionsgeschwindigkeit. Google berücksichtigt Nutzererfahrung über verschiedene Signale, darunter Ladezeit und Reaktionsfähigkeit. Eine neue Navigation, die zwar gut erreichbar ist, aber beim Öffnen ruckelt oder den Inhalt verschiebt, löst das Grundproblem nicht. Auch interne Verlinkung bleibt wichtig: Die Bottom-Bar führt zu den wichtigsten Bereichen, während kontextbezogene Links innerhalb von Texten Nutzer auf den nächsten sinnvollen Schritt bringen.

Ein begrenzter Rollout kann Risiken reduzieren. Zunächst lässt sich die neue Navigation auf stark besuchten mobilen Einstiegsseiten testen. Danach folgen weitere Seitentypen, sofern die Daten einen klaren Vorteil zeigen. Bei komplexen Websites bleibt das Hamburger-Menü als ergänzende Ebene bestehen. Die Bottom-Bar ersetzt also nicht zwingend jede andere Navigation, sondern ordnet die wichtigsten Wege neu und macht sie dort sichtbar, wo sie am leichtesten erreichbar sind.

Mit daumenfreundlicher Benutzerführung messbar mehr erreichen

Eine Bottom-Bar schafft unmittelbare Orientierung, weil zentrale Ziele nicht erst gesucht werden müssen. Sie reduziert körperliche Belastung, verkürzt Interaktionswege und macht den nächsten Schritt sichtbar. Für KMU kann daraus ein konkreter Mehrwert entstehen: mehr Kontaktaufnahmen, schnellerer Zugang zu Leistungen, weniger Abbrüche in Formularen und eine klarere mobile Markenwahrnehmung.

Der entscheidende Schritt ist nicht das bloße Verschieben eines Menüs an den unteren Bildschirmrand. Erfolgreich wird die Lösung erst durch Priorisierung, verständliche Beschriftungen, ausreichend große Touch-Flächen, technische Stabilität und eine Messung der tatsächlichen Geschäftsergebnisse. Eine zeitnahe Prüfung der eigenen mobilen Nutzerführung beginnt mit drei Fragen: Welche Aktionen sind für Besucher am wichtigsten, wie viele Schritte benötigen sie heute und welche dieser Schritte liegen außerhalb der natürlichen Daumenzone? Wer diese Fragen mit Analytics und kurzen Nutzertests beantwortet, kann die Navigation ohne unnötigen Ballast verbessern und digitale Sichtbarkeit in nutzbare Interaktion übersetzen.

2026-10-05