Mobile Navigation am unteren Bildschirmrand
Nutzungsstudien zeigen, dass die meisten Nutzer:innen ihr Smartphone einhändig bedienen. Sie halten das Gerät und navigieren mit dem rechten oder linken Daumen — der Daumen ist die Maus am mobilen Bildschirm, aber mit Einschränkungen.
Daumen-Maus mit Einschränkungen
Bei der Benutzung eines Mobiltelefons hat der Daumen eine begrenzte Bewegungsfreiheit. Es gibt Bereiche des Bildschirms, die nicht oder nur schwer erreichbar sind. Welche Bereiche das genau sind, hängt davon ab, mit welcher Hand das Gerät gehalten wird und wie groß der Bildschirm ist.
Abbildung 1: Smartphone Bereiche, die mit dem Daumen erreichbar sind. Basierend auf durchschnittlicher Handgröße und Griffweite.
Bei großen Geräten sind nicht nur die obere Bildschirmkante, sondern auch die untere gegenüberliegende Ecke kaum mit dem Daumen erreichbar — siehe Abbildung 1 und 2.
Abbildung 2: Ein Beispiel, in dem das mobile Menü mit dem Daumen nicht erreichbar ist, außer man nimmt das Handy anders in die Hand.
Mobiler „Sweet Spot"
Die Forschungsstudie beschreibt den sogenannten Sweet Spot für Smartphone-Nutzer:innen so:
„Der ideale Ort, um das Menü zu platzieren, ist die untere Mitte des Telefons. Das ist der Punkt, der für linke und rechte Daumen auf kleinen wie großen Bildschirmen am leichtesten erreichbar ist."
Abbildung 3: Smartphone Sweet Spot und Navigationsposition
Plattform-Konventionen: iOS, Android & Mobile Web
Eine Bottom Navigation folgt auf jeder Plattform leicht unterschiedlichen Regeln:
- iOS Tab Bar: Icon plus Label, immer sichtbar, Safe-Area-Insets unten (Home-Indicator-Bereich aussparen).
- Android Bottom Navigation Bar (Material Design): Drei bis fünf Tabs mit Icon und Label, klares Active-State-Highlight, kompatibel mit der System-Back-Geste.
- Mobile Web: CSS-basiert
position: fixed; bottom: 0;mit Safe-Area-Padding (env(safe-area-inset-bottom)), nur unterhalb des Mobile-Breakpoints einblenden, am Desktop zugunsten einer Top-Navigation ausblenden.
Native Konventionen sollten nicht ohne triftigen Grund gebrochen werden — Nutzer:innen wechseln zwischen Apps und erwarten konsistente Muster.
Wie viele Menüpunkte? Die 3-bis-5-Regel
Eine Bottom-Bar trägt drei bis fünf primäre Ziele. Weniger wirkt leer, mehr macht die Tap-Targets zu schmal und führt zu Choice Paralysis. Sekundäre Funktionen gehören in ein „Mehr"-Tab, ein Hamburger-Menü im Header oder eine kontextuelle Aktion auf der Seite selbst.
Faustregel für die Reihenfolge: das mit Abstand häufigste Ziel zuerst oder mittig — nie am Rand, wo der Daumen es weniger trifft.
Kritische Betrachtung und Best Practice
Dass mobile Apps die Navigation unten platzieren, ist nicht neu. Im Web ist das Muster seltener, aber für mobile-first Projekte mit klarem Aufgaben-Fokus die ergonomischere Wahl.
Die untere Navigation am Desktop ist ungewöhnlich und wir empfehlen sie nicht — bei großem Bildschirm wird sie übersehen.
Konkurriert die Web-App-Bottom-Bar mit der nativen Browser-Toolbar im unteren Bereich, hilft nur sauberes Design mit großzügigen Abständen, damit kein versehentlicher Klick entsteht (siehe Abbildung 4).
Abbildung 4: doppelte Navigationsleiste mit wenig und viel Abstand
Dasselbe Problem tritt beim Scrollen auf — der Daumen bewegt sich ebenfalls im unteren Bereich. Beide Probleme entschärft das Auto-Hide-Pattern: Die Leiste verschwindet beim Scrollen nach unten und kommt beim Scrollen nach oben zurück. In mobilen Apps und Browsern ist das längst Standard.
Abbildung 5: Lösung durch Ausblenden der Navigation beim Nach-Unten-Scrollen
holzweg Conclusio
Ziel einer guten User Experience auf Smartphones ist eine schnelle, reibungslose Navigation. Weil der Daumen primär bedient, sollte er die Navigationsposition diktieren dürfen.
Wir sprechen uns für eine Bottom-Bar mit drei bis fünf Items, ausreichenden Tap-Abständen und Auto-Hide beim Scrollen aus — pro Plattform mit Respekt vor iOS- bzw. Material-Design-Konventionen.
Häufig gestellte Fragen
Walk with us on the holzweg
