Hier ist ein kleines Experiment, das du sofort ausprobieren kannst. Halte dein Smartphone in einer Hand, so wie du scrollst, wenn du in der Schlange wartest oder im Bus sitzt. Versuche dann, mit dem Daumen die obere linke Ecke des Bildschirms zu berühren, ohne deinen Griff zu verändern. Schwierig, oder? Dieses wacklige, gestreckte Gefühl ist der Ausgangspunkt für die Daumenzone — den Bereich, den ein Daumen bequem erreichen kann, wenn man das Smartphone einhändig hält.
Die Daumenzone zu verstehen ist nicht bloß Theorie. Sie entscheidet darüber, ob ein Käufer leicht auf „In den Warenkorb” tippen kann, ob er das Menü findet und ob er die Bestellung abschließt oder auf halbem Weg abspringt. In diesem Artikel geht es um die Reichweite des Daumens auf dem Bildschirm, warum sie für das mobile Einkaufserlebnis wichtig ist und warum eine Navigation am unteren Rand zu der Art passt, wie Menschen ihr Smartphone tatsächlich halten.
Was die Daumenzone ist und warum sie real ist
Das Konzept der Daumenzone wurde von Steven Hoober bekannt gemacht, nachdem er mehr als 1.300 Smartphone-Nutzer in der realen Welt beobachtet hatte. Ihm fielen drei Hauptgriffe auf: das Halten mit einer Hand, das Halten mit einer Hand bei gleichzeitigem Tippen mit der anderen sowie das Halten mit beiden Händen. Die einhändige Nutzung machte etwa die Hälfte aller Beobachtungen aus — die häufigste von allen. Mit anderen Worten: Sehr oft bedienen Menschen ihr Smartphone mit nur einem Daumen.
Wenn du ein Smartphone einhändig hältst, bewegt sich der Daumen entlang eines Bogens, dessen Mittelpunkt nahe am Ballen der Handfläche liegt. Daraus folgt:
- Der am leichtesten erreichbare Bereich ist der mittlere und untere Teil des Bildschirms. Hier liegt der Daumen ganz natürlich auf, ohne Anstrengung.
- Der Streckbereich sind die Seitenränder in der Bildschirmmitte. Erreichbar, aber die Hand verspannt sich ein wenig.
- Der schwierigste Bereich sind die beiden oberen Ecken, vor allem die, die diagonal zur haltenden Hand liegt. Sie zu erreichen bedeutet meist, den Griff zu ändern oder die andere Hand zu nehmen.
Du musst mir das nicht einfach glauben. Tippe „thumb zone” bei Google ein, und du siehst die vertraute dreifarbige Karte — Grün für leicht erreichbar, Gelb für eine Streckung, Rot für schwer erreichbar —, die Samantha Ingram auf Smashing Magazine auf Basis von Hoobers Forschung beschrieben hat. Das ist eine der am häufigsten wiederholten Ideen im UX, und der Grund, warum sie Bestand hat, ist: Sie folgt der Anatomie der Hand, nicht einem vorübergehenden Trend.
Das Paradox: das Wichtigste sitzt an der am schwersten erreichbaren Stelle
Daran lohnt es sich kurz innezuhalten. Auf vielen Shop-Websites sitzt das Hamburger-Symbol (drei waagerechte Striche) — hinter dem sich die gesamte Hauptnavigation verbirgt — in der oberen Ecke. Das heißt, der Eingang zu jeder Produktkategorie landet ausgerechnet im am schwersten erreichbaren Teil der Daumenzone.
Das Problem hört bei der ermüdeten Hand nicht auf. Der Hamburger verbirgt außerdem Inhalte. Die Nielsen Norman Group hat das auf Smartphones und Desktops untersucht und kam zu dem Schluss: Navigation hinter einem Hamburger-Symbol zu verstecken macht es Nutzern schwerer, das Gesuchte zu finden, kostet mehr Zeit und fühlt sich anstrengender an. Zusammengenommen: Du hast das Menü dort platziert, wo die Hand sich schwertut, es zu erreichen — und es vor den Augen des Nutzers versteckt.
Für einen Händler bringt das ganz konkrete Kosten mit sich. Laut dem Baymard Institute liegt die durchschnittliche Warenkorbabbruchrate seit über einem Jahrzehnt bei rund 70 %, und auf dem Smartphone ist sie oft noch höher. Jeder etwas schwierigere Schritt ist ein weiterer Grund für einen Kunden zu gehen. Wenn jemand zwischen Kaufen und Nicht-Kaufen schwankt, ist es eine kleine Reibung, den Griff nur ändern zu müssen, um ein Menü zu öffnen — aber solche Reibungen summieren sich.
Gut für Mobilgeräte gestalten: die wichtigen Aktionen in Daumenreichweite bringen
Das Prinzip ist einfach, auch wenn die Umsetzung Disziplin erfordert: Platziere die wichtigen Interaktionen in der Daumenzone und dränge sie nicht an die Ränder.
Speziell für einen Shop:
- Der Hauptaktionsbutton — „In den Warenkorb”, „Jetzt kaufen”, „Zur Kasse” — sollte in der unteren Bildschirmhälfte sitzen, wo der Daumen ruht. Viele gute Themes verankern den Kaufbutton aus genau diesem Grund fest am unteren Rand der Produktseite.
- Die Hauptnavigation sollte im leicht erreichbaren Bereich sichtbar sein, statt hinter einem Symbol in der Ecke versteckt.
- Selten genutzte und etwas riskante Aktionen — löschen, abmelden, schließen — können in den schwerer erreichbaren Bereich. Dass sie hier schwer zu treffen sind, wird sogar zu einer Schutzschicht gegen versehentliches Tippen.
Ein vertrautes Beispiel: Wenn du Lebensmittel oder Mode verkaufst und Kunden deinen Shop meist unterwegs durchstöbern, das Smartphone einhändig in der Hand, dann kann ein „In den Warenkorb”-Button in Daumenreichweite der Unterschied sein zwischen einer abgeschlossenen Bestellung und einem schnellen Weiterscrollen, das danach in Vergessenheit gerät.
Das ist auch der Grund, warum die Daumenzone oft im selben Atemzug mit Lesemustern wie dem F-Muster oder Z-Muster genannt wird. Beim F-Muster und Z-Muster geht es darum, wie das Auge Inhalte abtastet; bei der Daumenzone darum, wie weit die Hand reichen kann. Ein gutes mobiles Layout muss beides berücksichtigen: das Wichtige dort platzieren, wo das Auge hinschaut und die Hand hinkommt.
Warum eine Tab Bar am unteren Rand zu der Art passt, wie Menschen ihr Smartphone halten
Wenn der am leichtesten erreichbare Bereich der untere Teil des Bildschirms ist, dann ist eine Navigationsleiste am unteren Rand eine direkte Antwort auf diese anatomische Realität. Das ist die Tab Bar — ein Streifen aus einigen wenigen fixierten Symbolen am unteren Bildschirmrand, wie die untere Leiste in den Apps von Shopee, Lazada oder Instagram, die jeder kennt.
Die Tab Bar ist auf dem Smartphone beliebt, weil sie mehrere Dinge auf einmal vereint:
- Sie ist immer sichtbar — du musst sie nicht öffnen, um sie zu sehen — und löst damit das Problem der versteckten Navigation, auf das NN/g hingewiesen hat.
- Sie sitzt direkt in der Daumenzone, sodass der Daumen sie ohne Anstrengung erreicht.
- Sie begrenzt die Anzahl der Einträge (meist 3–5) und zwingt dich, die wichtigsten Pfade auszuwählen: Startseite, Kategorien, Suche, Warenkorb, Konto.
Die Tab Bar ersetzt nicht alles. Ein tiefer, mehrstufiger Produktkatalog braucht womöglich weiterhin ein Slide Menu. Aber als Rückgrat der mobilen Navigation passt die Tab Bar weit besser zu der Art, wie Menschen ihr Smartphone halten, als ein Hamburger in der oberen Ecke.
Das ist einer der Menütypen, die Navi+ ohne Code erstellen kann, neben einem Mega Menu für den Desktop und einem Slide Menu. Du konfigurierst Mobil und Desktop getrennt — eine Tab Bar unten für Smartphones, ein Mega Menu für Computer — und das alles per Drag-and-drop. Ein Punkt, der für Händler erwähnenswert ist: Eine Navigationsleiste hinzuzufügen kann die Seite leicht schwerer machen, und Googles „gute” Schwellenwerte für die Core Web Vitals sind ziemlich streng (LCP unter 2,5 Sekunden, INP unter 200 Millisekunden, CLS unter 0,1). Navi+ ist so optimiert, dass diese Werte nicht darunter leiden — so bekommst du eine Navigation, die genau in der Daumenzone platziert ist, ohne Geschwindigkeit aufzugeben.
Ein paar Dinge zum Merken
Die Daumenzone ist kein dekorativer Trick. Sie ist eine Art, eine einfache Wahrheit zu respektieren: Sehr oft bedient ein Käufer alles mit nur einem Daumen.
Ein paar Fragen, die du dir stellen kannst, wenn du deinen eigenen Shop auf dem Smartphone noch einmal anschaust:
- Sitzt der Haupt-Kaufbutton in der unteren Bildschirmhälfte?
- Wird das Hauptmenü offen gezeigt, oder ist es in der oberen Ecke versteckt?
- Gibt es eine wichtige Aktion, die den Kunden zwingt, in eine ferne Ecke zu greifen?
Du musst nicht alles auf einmal umbauen. Halte einfach das Smartphone in einer Hand, gehe deine eigene Einkaufsreise durch und lass deinen Daumen dir zeigen, wo es noch hakt.
Dieser Artikel ist Teil des umfassenderen Leitfadens zu Mobile Navigation — warum das Hamburger-Menü veraltet und was du stattdessen verwenden solltest.