Daumenzone im Mobile Design: Was ist die Thumb Zone?

Was ist die Daumenzone im Mobile Design?

Die Daumenzone, auch Thumb Zone genannt, ist der Bereich des Smartphone Displays, den Ihr Daumen bei einhändiger Haltung bequem erreicht. Sie liegt daher meist im unteren und mittleren Teil des Bildschirms. Die oberen Ecken und die gegenüberliegende Kante erreichen Sie nur mit Mühe. Wichtige Buttons gehören deshalb in diesen Bereich.

Der Grundgedanke wirkt einfach. Trotzdem bauen viele Teams mobile Seiten noch mit Desktop Gewohnheiten. Das Menü sitzt ganz oben, und der Hauptbutton geht mitten im Text unter. Die Folge: Nutzer scrollen, greifen um und brechen deshalb oft ab.

In diesem Leitfaden betrachten wir die Daumenzone anhand veröffentlichter Forschung. Danach zeigen wir, wie Sie CTAs, Menüs und Formulare platzieren. Am Ende stehen Test und Messung.

Woher stammt das Konzept der Daumenzone?

Die Idee entstand, als Oberflächen auf Touchscreens wechselten. Gestalter merkten zunächst, dass ein Finger nicht die Präzision eines Mauszeigers hat. Deshalb besitzt nicht jeder Punkt auf dem Bildschirm den gleichen Wert.

Anfang der 2010er Jahre machten Gestalter wie Josh Clark Reichweitenkarten für den Daumen bekannt. Diese Karten teilten den Bildschirm in grüne, gelbe und rote Bereiche. Grün stand also für leichte, Rot für schwere Erreichbarkeit.

Allerdings zeichnete man diese Karten für die Gerätegrößen von damals. Heutige Smartphones sind größer, daher haben sich die Grenzen verschoben. Kopieren Sie also keine Karte, sondern behalten Sie das Prinzip: Legen Sie die am häufigsten genutzten Elemente dorthin, wo sie am leichtesten erreichbar sind.

Außerdem kennt Touch keinen Hover Zustand. Nutzer tippen einfach, und ein falscher Tipp kostet einen Schritt zurück. Deshalb kostet ein schlecht platzierter Button mobil mehr als am Desktop.

Wie halten Menschen ihr Smartphone tatsächlich?

Eine der meistzitierten Quellen zum Thema ist die Beobachtungsstudie von Steven Hoober. Er beobachtete dafür 1.333 Fälle von mobiler Nutzung auf Straßen, in Flughäfen, Cafés und im Nahverkehr. In 780 Fällen interagierte die Person mit dem Display.

Laut Hoobers Studie auf UXmatters verteilten sich die Haltungen so:

• Einhändige Nutzung: 49 Prozent, meist mit dem Daumen.
• Das Gerät in einer Hand tragen und mit der anderen tippen: 36 Prozent.
• Das Gerät mit beiden Händen halten und mit zwei Daumen bedienen: 15 Prozent.

Fast die Hälfte der beobachteten Nutzer arbeitete also mit einem Daumen. Hoober warnt zudem: Menschen wechseln ihre Haltung teils im Sekundentakt. Deshalb gibt es keine einzige richtige Haltung.

Beachten Sie auch, dass diese Daten aus dem Jahr 2013 stammen. Damals waren die Displays zudem deutlich kleiner. Lesen Sie die Prozentwerte daher als Richtung und nicht als aktuellen Festwert.

Wie zeichnet man die Daumenzone auf dem Display ein?

Bei einer Rechtshänderin oder einem Rechtshänder mit einhändiger Haltung können Sie den Bildschirm grob in drei Bereiche teilen. Für die linke Hand spiegeln Sie die Karte also einfach. Die Tabelle fasst die drei Bereiche und passende Elemente zusammen.

Verstehen Sie diese Karte als Ausgangspunkt, nicht als Regel. Gerätegröße, Handgröße und sogar die Hülle verändern daher die Zonen. Außerdem wechseln Nutzer manchmal auf beide Hände. Dennoch gilt der Kerngedanke: Die untere Hälfte ist leichter als die obere.

Zwei Details sind wichtig. Erstens haben die Zonen weiche Grenzen. Zweitens verschieben sie sich je nach Gerät. Prüfen Sie daher in Ihrer Analytics, welche Bildschirmgrößen Ihren Traffic tragen. Planen Sie dann für zwei oder drei typische Größen statt für eine.

Wie haben größere Displays die Daumenzone verändert?

Als Smartphones wuchsen, rückte der obere Rand mit einer Hand fast außer Reichweite. Ein Bereich, der früher als schwer galt, ist für viele Nutzer heute somit unerreichbar. Deshalb erzeugen Menüsymbole und Zurück Buttons oben echte Reibung.

Das Display ist zudem breiter, also leidet auch die horizontale Reichweite. Für einen Button am gegenüberliegenden Rand greifen Nutzer um oder nehmen die zweite Hand. Somit wird aus einer kleinen Aktion eine Bewegung mit zwei Schritten.

Die Folge für das Design ist klar. Legen Sie die Hauptaktion nach unten und in die Nähe der dominanten Hand. Reservieren Sie den oberen Bereich dann für Informationen und seltene Aktionen. Hilfreich ist es, das zusammen mit Mobile First Design zu denken.

Größere Displays machen einhändiges Design allerdings nicht überflüssig. Nutzer wählen weiterhin den leichtesten Weg, und der liegt meist unten. Sie können zum Beispiel in der unteren Leiste einen Suchtab ergänzen. Diese kleine Änderung nimmt den Weg in die obere Ecke ab.

Wie wirkt sich die Daumenzone auf Linkshänder aus?

Die meisten Karten zeichnet man für die rechte Hand. In Hoobers Daten erfolgte die einhändige Nutzung jedoch zu 67 Prozent mit dem rechten und zu 33 Prozent mit dem linken Daumen. Jeder dritte einhändige Nutzer arbeitete also mit links.

Dieser Anteil liegt deutlich über dem Linkshänderanteil der Gesamtbevölkerung von etwa 10 Prozent, den Hoober nennt. Er vermutet, dass der Kontext eine Rolle spielt, etwa eine belegte zweite Hand. Mit anderen Worten: Menschen wechseln die Hand unabhängig von ihrer Gewohnheit.

Das praktische Ergebnis ist einfach. Schieben Sie den Hauptbutton deshalb nicht ganz an eine Seite. Breite Buttons über die ganze Displaybreite funktionieren zum Beispiel für beide Hände. Gleichmäßig verteilte Elemente in der unteren Leiste leisten dasselbe.

Ein weiterer Ansatz: Bündeln Sie wichtige Elemente nahe der horizontalen Mitte. Ein Button in der Mitte liegt für beide Daumen in vernünftiger Distanz. Wischgesten in beide Richtungen fühlen sich zudem für jede Hand natürlich an.

Wie groß sollte ein Touch Target sein?

Die Größe zählt ebenso wie die Position. Ein Daumen ist breiter als eine Fingerspitze, daher trifft man winzige Links schlecht. Offizielle und halboffizielle Quellen nennen allerdings unterschiedliche Schwellen.

Diese Zahlen widersprechen sich nicht. WCAG sieht 24 Pixel als akzeptable Untergrenze. web.dev empfiehlt für die reale Nutzung 48 Pixel. In unserer Arbeit streben wir beim Haupt CTA und bei der unteren Leiste 48 Pixel oder mehr an.

Auch der Abstand zählt. Stehen zwei kleine Links nebeneinander, trifft der Daumen leicht den falschen. Mehr vertikaler Raum in Linklisten senkt daher die Fehlerquote schon allein. Außerdem müssen sichtbare Größe und tippbare Fläche nicht identisch sein. Mit unsichtbarem Innenabstand vergrößern Sie die Tippfläche eines kleinen Symbols. Links im Fließtext bilden in WCAG eine eigene Ausnahme.

Wo platzieren Sie den CTA Button auf dem Smartphone?

Halten Sie den Haupt CTA im Moment der Entscheidung in Daumennähe. Das ist meist also die untere Bildschirmhälfte. "In den Warenkorb" auf der Produktseite und "Angebot anfordern" auf der Leistungsseite folgen dieser Logik.

Drei Platzierungen stechen hervor:

• Ein Button in voller Breite im Seitenfluss, direkt nach dem Inhalt.
• Alternativ ein einzelner Hauptbutton, der am unteren Rand fixiert bleibt.
• Ein Button, der am Ende des Inhalts direkt nach dem Entscheidungsmoment wiederkehrt.

Welche Variante gewinnt, entscheiden Sie deshalb per Test und nicht per Annahme. Zu Text und Gestaltung lesen Sie unseren Beitrag zum Call to Action. Dort gehen wir zudem auf Text, Farbe und Kontrast ein.

Als Regel gilt: Rücken Sie den CTA an die Stelle, an der der Nutzer überzeugt ist. Auf einer langen Leistungsseite wirkt ein Button direkt nach den Preisinfos besser als einer ganz oben. Außerdem sollte der Buttontext das Ergebnis nennen. Wählen Sie "Angebot anfordern" statt "Senden". Breite Buttons verringern zudem Fehltipper, weil ein größeres Ziel weniger Spielraum für Fehler lässt.

Untere Navigationsleiste oder Hamburger Menü?

Ein Hamburger Menü sitzt meist oben links oder oben rechts. Das ist der schwierigste Punkt der Daumenzone. Eine untere Navigationsleiste liegt im leichten Bereich. Dieser Unterschied erzeugt daher spürbare Reibung beim Wechsel zwischen häufig genutzten Seiten.

Allerdings passt eine untere Leiste nicht zu jeder Website. Sie funktioniert sehr gut bei appähnlichen Produkten mit wenigen Hauptzielen, etwa Bestellungen, Konto und Warenkorb. Eine Firmenwebsite mit Dutzenden Seiten hat dagegen ein komplexeres Menü, denn sie braucht mehr Ebenen.

Wählen Sie dann eine zweistufige Lösung. Legen Sie die drei oder vier meistgenutzten Ziele nach unten. Lassen Sie dann den Rest im Menü. Bei der Struktur hilft unser Leitfaden zur Navigation und Menüführung.

Schauen Sie bei der Entscheidung auf das Ziel der Nutzer. Springen sie oft zwischen Seiten, spart die untere Leiste den Schritt des Öffnens und Schließens. Landen sie nur, handeln und gehen, bleibt das Menü ohnehin im Hintergrund. Zeigen Sie neben Symbolen auch Beschriftungen, denn reine Symbolleisten sind mehrdeutig. Markieren Sie außerdem den aktiven Tab mit Farbe und einem zweiten Signal.

Funktionieren fixierte CTAs und untere Leisten auf jeder Seite?

Nein. Ein fixierter unterer Button verdeckt dauerhaft einen wertvollen Teil des Displays. Auf kleinen Smartphones kann er zum Beispiel die Hälfte des Inhalts überdecken. Halten Sie deshalb die Höhe fixierter Elemente gering.

Beachten Sie diese Risiken:

• Bei geöffneter Tastatur kann ein fixierter Button das Eingabefeld verdecken.
• Cookie Banner und fixierter Button können sich zudem überlagern.
• Eine spät ladende fixierte Leiste kann die Seite verschieben und den CLS Wert verschlechtern.
• Die Systemleiste am unteren Rand kann den Button teilweise verdecken.

Bringen Sie diese Muster nicht ohne Test auf echten Geräten live. Ein falsch eingesetzter fixierter Button erschwert das Lesen, statt die Conversion zu steigern.

Ein Weg zum Ausgleich: Zeigen Sie die Leiste nur bei Bedarf. Blenden Sie den Button zum Beispiel erst ein, wenn der Nutzer eine bestimmte Stelle passiert. Oder verstecken Sie ihn beim Hochscrollen und holen ihn beim Runterscrollen zurück. Lassen Sie außerdem unter der letzten Inhaltszeile genug Platz. Vergleichen Sie vor und nach der Änderung mobile Performance und Conversion, dann sehen Sie, ob die Leiste nützt oder schadet.

Wie nutzen Sie die Daumenzone in Formularen und im Checkout?

Das Formular ist die empfindlichste Stelle der mobilen Conversion. Der Nutzer tippt und versucht zugleich, mit dem Daumen zu navigieren. Öffnet sich die Tastatur, verdeckt sie bereits einen großen Teil des Displays.

Einige praktische Regeln helfen:

• Halten Sie den Senden Button direkt über der Tastatur an einer sichtbaren Stelle.
• Ordnen Sie die Felder in einer Spalte an, denn zwei Felder nebeneinander führen zu Fehltippern.
• Geben Sie Feldern eine Höhe von mindestens 48 Pixeln.
• Öffnen Sie die passende Tastatur: numerisch für Telefon, mit @ Zeichen für E-Mail.

Diese Regeln wenden Sie gemeinsam bei Termin, Angebots und Demoformularen an. Details finden Sie in unserem Beitrag zur Formularoptimierung.

Im Checkout gilt dieselbe Logik. Der Button, der durch die Schritte führt, sollte immer an derselben leichten Stelle bleiben. Niemand sollte ihn also bei jedem Schritt suchen. Außerdem sollte die Zurück Aktion optisch schwächer wirken als die Vorwärts Aktion. Auch Autofill und klare Fehlermeldungen entlasten den Daumen. Eine Fehlermeldung gehört zum Beispiel direkt unter das fehlerhafte Feld, in einem kurzen Satz.

Welche E-Commerce Seiten profitieren am meisten von der Daumenzone?

Im E-Commerce stechen drei Seiten hervor: Produktseite, Warenkorb und Checkout. Auf der Produktseite sollte der Button "In den Warenkorb" in Daumennähe bleiben, während der Nutzer Fotos und Details prüft. Deshalb fixieren viele Shops diesen Button am unteren Rand.

Im Warenkorb brauchen Mengen und Löschen Sorgfalt. Winzige Plus und Minus Symbole laden nämlich zu Fehltippern ein, daher sind sie riskant. Machen Sie diese Elemente daher breit und mit Abstand. Im Checkout hält ein fixierter Weiter Button den Nutzer im Ablauf.

Auch Filter sind auf Produktlisten wichtig. Öffnet ein fixierter Button unten das Filterpanel, erreichen Nutzer es leicht. Lesen Sie dazu auch, wie die Ladezeit im Onlineshop den Umsatz beeinflusst.

Wie verhalten sich Karten und horizontales Scrollen in der Daumenzone?

Horizontales Wischen ist für den Daumen eine natürliche Bewegung. Der Daumen gleitet in der Bildschirmmitte mühelos nach links und rechts. Deshalb funktionieren Produktkarussells und Story Leisten meist gut.

Der scrollbare Bereich muss aber erkennbar sein, denn sonst übersehen Nutzer ihn. Ein Stück der nächsten Karte am Rand gibt einen klaren Hinweis. Vermeiden Sie außerdem Konflikte zwischen horizontalem Wischen und vertikalem Scrollen.

Achten Sie auf kleine Buttons im Karussell. Eine Hauptaktion pro Karte vergrößert die Ziele und senkt Fehltipper. Oft ist es zum Beispiel am sichersten, die ganze Karte tippbar zu machen.

Hängt die Daumenzone mit mobiler SEO zusammen?

Ein direkter Rankingfaktor ist sie nicht, aber es gibt indirekte Verbindungen. Google nutzt für die Indexierung die mobile Version einer Seite. Daher prägt die Qualität Ihrer mobilen Erfahrung den Gesamterfolg Ihrer Website.

Reibung beeinflusst außerdem Verweildauer und Conversion. Ein schlechtes Layout vertreibt Besucher und senkt den Wert Ihres Traffics. Anders gesagt: Sie können Besucher per SEO gewinnen und per mobilem Design verlieren.

Auch die Interaktionsgeschwindigkeit zählt. Eine Seite, die spät auf einen Tipp reagiert, hebt den Vorteil eines gut platzierten Buttons auf. Das behandeln wir in unserem Beitrag zu den Core Web Vitals. Unser Artikel zu UX und SEO im Einklang rundet das Bild ab.

Welche Fehler machen Teams bei der Daumenzone?

Die Fehler, die wir in der Praxis sehen, ähneln sich stark. Die meisten entstehen allerdings aus guten Absichten. Unsere Liste fasst zusammen, was das Team bei Audits am häufigsten markiert.

• Den Haupt CTA nur ganz oben auf der Seite platzieren.
• Den Schließen oder Zurück Button in die obere linke Ecke setzen.
• Zwei Buttons so dicht nebeneinander setzen, dass Nutzer den falschen treffen.
• Eine nicht umkehrbare Aktion wie Löschen ohne Bestätigung in die leichte Zone legen.
• Eine fixierte Leiste über den Inhalt legen, sodass der Text unlesbar wird.

Die letzten beiden Punkte sind besonders wichtig. Leichte Erreichbarkeit erleichtert nämlich auch versehentliche Tipper. Fügen Sie daher bei zerstörerischen Aktionen einen Bestätigungsschritt ein. Unser Beitrag zu UX Fehlern, die Umsatz kosten, liefert weitere Beispiele.

Ein weiterer häufiger Fehler ist der Test auf nur einem Gerät. Ein Designer hält ein Layout auf seinem eigenen Smartphone für bequem. Nutzer haben aber andere Hände, Geräte und Hüllen, daher reicht ein Gerät nicht. Testen Sie mindestens zwei Bildschirmgrößen. Auch der Schluss "alles nach unten" ist falsch. Das überfüllt den unteren Bereich und erzeugt neue Fehler, also priorisieren Sie.

Wie passt die Daumenzone zur Barrierefreiheit?

Die Daumenzone ist nicht nur Ergonomie. Sie ist Teil der Barrierefreiheit. Große Ziele mit gutem Abstand sind deshalb für Menschen mit eingeschränkter Motorik sehr wichtig. Das Kriterium zur Zielgröße in WCAG 2.2 antwortet genau auf diesen Bedarf.

Einhändige Nutzung ist außerdem eine zeitweilige Einschränkung. Wer ein Kind trägt, Einkaufstüten hält oder einen Gips am Arm hat, arbeitet ebenfalls mit einer Hand. Ein gutes Design für die Daumenzone hilft also allen.

Beachten Sie: Daumenergonomie allein löst nicht den Bedarf von Screenreader Nutzern. Fokusreihenfolge, Beschriftungen und Kontrast brauchen eigene Arbeit. Dennoch nützen Ihre Schritte bei Zielgröße und Abstand der motorischen Barrierefreiheit direkt.

Für das größere Bild lesen Sie unseren Leitfaden zu WCAG und BFSG. Zur Prüfung von Farbkontrasten ist unser Kontrastrechner praktisch.

Sollten Sie den oberen Bereich komplett leeren?

Nein. Eine schwere Zone ist keine nutzlose Zone. Der obere Bereich eignet sich sogar für Elemente, bei denen ein versehentlicher Tipp schadet. Kontoeinstellungen, Abmelden oder das Löschen von Hinweisen passen zum Beispiel hierher.

Denken Sie an eine Banking App. Läge "Abmelden" in der unteren Leiste, würden Nutzer ihre Sitzung versehentlich beenden. Die Platzierung in der oberen Ecke ist daher eine bewusste und richtige Entscheidung. Kurz gesagt: Die schwere Zone kann Nutzer schützen.

Auch Logos, Seitentitel und Statusinfos bleiben oben gut aufgehoben. Niemand tippt sie an, denn man schaut nur kurz darauf. Preis, Lagerstatus und Bestellstatus brauchen keinen Tipp, also verursachen sie kein Erreichbarkeitsproblem. So bleibt der wertvolle untere Bereich echten Aktionen vorbehalten.

Die Regel lautet: Häufige und sichere Aktionen nach unten, seltene oder riskante nach oben. Machen Sie diese Trennung klar, lernen Nutzer also schnell, wo was liegt.

Gilt die Daumenzone auch für Tablets und faltbare Geräte?

Nein. Auf Tablets halten Menschen das Gerät meist mit beiden Händen, und die Daumen ruhen nahe den beiden unteren Ecken. Die Erreichbarkeit sammelt sich dann an den unteren Seitenrändern.

Faltbare Smartphones bieten zwei Bildschirmverhalten. Zugeklappt wirken sie wie ein schmales Telefon, aufgeklappt wie ein kleines Tablet. Deshalb brauchen Sie ein flexibles Layout.

Haben diese Geräte auf Ihrer Website nur einen kleinen Anteil, bleibt das normale Smartphone das Hauptziel. Zeigt Ihre Analytics jedoch einen klaren Anteil, testen Sie diese Geräte zusätzlich. Entscheiden Sie daher anhand Ihrer eigenen Daten.

Wie testen Sie ein Design für die Daumenzone?

Der verlässlichste Test nutzt ein echtes Gerät und eine echte Hand. Ein Screenshot im Designtool vermittelt nämlich kein Daumengefühl. Laden Sie den Prototyp daher auf ein Smartphone und geben Sie Nutzern eine Aufgabe für eine Hand.

Sie können einen einfachen Testablauf aufsetzen:

• Lassen Sie drei bis fünf Nutzer dieselbe Aufgabe einhändig lösen.
• Notieren Sie, wo sie zögern und wo sie umgreifen.
• Probieren Sie mindestens ein kleines und ein großes Smartphone.
• Nehmen Sie mindestens eine linkshändige Testperson auf.

Steuern Sie die Nutzer beim Test nicht. Sagen Sie nicht "Tippen Sie auf den Button", sondern nennen Sie ein Ziel wie "Legen Sie dieses Produkt in den Warenkorb". So zeigen Nutzer ihr echtes Verhalten. Mit einer Aufzeichnung sehen Sie zudem später, wohin der Daumen ging.

Technisch erledigt unser Mobile Friendly Test die Grundprüfungen. Auch Heatmaps und Klickkarten helfen. Erhält ein Menü in der oberen Ecke zum Beispiel sehr wenige Tipper, kann das auf ein Erreichbarkeitsproblem hindeuten. Eine Heatmap erklärt jedoch nie das Warum, also lesen Sie sie zusammen mit Beobachtung.

Wie messen Sie die Wirkung einer Änderung für die Daumenzone?

Begründen Sie die Änderung mit Messung, nicht mit Bauchgefühl. Halten Sie zuerst den Ist Zustand fest: mobile Conversion Rate, CTA Klickrate und Formularabschlussrate. Nehmen Sie dann genau eine Änderung vor und starten Sie einen A/B Test.

Beispielrechnung: Sie haben 10.000 mobile Sitzungen und eine Conversion Rate von 1,5 Prozent. Das sind 150 Conversions. Hebt ein fixierter unterer CTA die Rate auf 1,8 Prozent, sind es 180. Diese Zahlen sind hypothetisch, testen Sie also mit Ihren eigenen Daten.

Dafür nutzen Sie unseren A/B Test Rechner. Ist das Ergebnis nicht signifikant, erhöhen Sie die Stichprobe. Entscheiden Sie nicht, bevor Sie genug Daten haben, um kleine Unterschiede vom Rauschen zu trennen.

Wie sieht eine praktische Checkliste für die Daumenzone aus?

Die Liste fasst die Schnellprüfung zusammen, die unser Team vor dem Livegang einer mobilen Seite durchläuft. Prüfen Sie jeden Punkt auf einem echten Smartphone.

• Liegt der Haupt CTA in der unteren Hälfte und erreicht ihn der Daumen?
• Sind alle Touch Ziele mindestens 48 Pixel groß und haben sie Abstand?
• Legt das Menü häufige Ziele in die leichte Zone?
• Verdecken fixierte Elemente Inhalt oder Tastatur?
• Fragen zerstörerische Aktionen nach einer Bestätigung?
• Fühlt sich das Layout auch für Linkshänder bequem an?
• Stehen Formularfelder in einer Spalte und öffnen die richtige Tastatur?

Wiederholen Sie diese Liste für jede neue Seitenvorlage. Eine kleine Gewohnheit schafft mit der Zeit einen spürbaren Conversion Unterschied.

Wo beginnen Sie mit der Arbeit an der Daumenzone?

Wählen Sie zuerst Ihre drei mobilen Seiten mit dem meisten Traffic. Prüfen Sie auf jeder Seite, wo der Haupt CTA sitzt. Danach gehen Sie diese Seiten einhändig auf einem echten Smartphone durch. Notieren Sie jede Reibung, die Sie spüren.

Ordnen Sie die Funde dann nach Priorität. Der schnellste Gewinn entsteht daher meist, wenn Sie CTA und Navigation in die leichte Zone holen. Die meisten dieser Änderungen setzen Sie in wenigen Tagen um, ohne kompletten Relaunch.

Möchten Sie Ihre mobile Oberfläche von Grund auf neu denken, sprechen Sie mit unserem Team über unsere Webdesign Leistung. Wir von Talha Aslan und Team bewerten mobiles Verhalten gemeinsam mit Design und Conversion Daten.