Marketing Glossar

2.413 Fachbegriffe aus 22 Bereichen des Online Marketings

Thumb Zone

Definition: Die Thumb Zone (Daumenzone; auch: Reachability Zone, Comfortable Thumb Zone) beschreibt den Bereich auf einem Smartphone-Bildschirm der bequem mit dem Daumen einer Hand erreicht werden kann wenn das Gerät mit einer Hand gehalten wird – ein fundamentales mobiles UX-Design-Prinzip für die Platzierung interaktiver Elemente. Thumb-Zone-Klassifizierung (drei Zonen): Grüne Zone (Natural Zone; bequem erreichbar): unterer Bildschirmbereich; Daumen erreicht ohne Veränderung der Handposition; für häufig genutzte Primär-Aktionen, Hauptnavigation, Call-to-Action-Buttons; Gelbe Zone (Stretch Zone; mit Anstrengung erreichbar): mittlerer Bildschirmbereich; Daumen muss sich strecken oder Hand muss verschoben werden; für gelegentlich genutzte Elemente; Rote Zone (Difficult Zone; schwer erreichbar): oberer Bildschirmbereich; Daumen praktisch nicht erreichbar ohne Haltungsänderung oder zweite Hand; für seltene Aktionen, Statusanzeigen, passive Inhalte. Touch-Target-Mindestgrößen: Apple Human Interface Guidelines: 44×44 Points (ca. 7×7mm auf Standard-DPI); Google Material Design: 48×48dp mit 8dp Spacing zwischen Targets; W3C WCAG 2.5.8 Target Size (Minimum): 24×24 CSS-Pixel (Level AA; WCAG 2.2 2023); empfohlen 44×44 CSS-Pixel; zu kleine Tap-Targets führen zu unbeabsichtigten Taps (Fitts' Law: Je kleiner das Ziel desto länger die Bewegungszeit und desto höher die Fehlerrate).

Erläuterung

Steven Hoober (UX-Forscher; Kansas City; MO; «Designing Mobile Interfaces: Patterns for Interaction Design», O'Reilly, 2011; mitgeschrieben mit Eric Berkman) führte zwischen 2010 und 2013 Feldbeobachtungen durch wie Nutzer tatsächlich Smartphones halten und bedienen: die Ergebnisse wurden im vielzitierten Artikel «How Do Users Really Hold Mobile Devices?» (UX Matters; 18. Februar 2013) veröffentlicht und umfassten über 1.333 Beobachtungen von Smartphone-Nutzern in natürlichen Kontexten (Straßen, Cafés, öffentlicher Nahverkehr). Hoobers zentrale Befunde: 49% der Nutzer halten das Smartphone mit einer Hand; 36% cupped hand (Gerät in einer Hand; zweite Hand tippt); 15% zwei-Hände-Querhaltung; die One-Hand-Haltung ist die häufigste und stellt die größten Design-Anforderungen. Hoober entwickelte die Thumb-Zone-Visualisierung als praktisches Design-Tool: für ein 4,7-Zoll-iPhone (damals Standard; 2013) umfasste die grüne Zone das untere Drittel des Bildschirms; für größere Geräte (5,5+ Zoll) verschiebt sich die grüne Zone weiter nach unten und verkleinert sich relativ zur Bildschirmfläche. Luke Wroblewski (Mountain View; CA; Principal Designer bei Google; «Mobile First», A Book Apart, 2011; lukeW.com) hatte bereits 2011 mit «Mobile First» das Prinzip etabliert dass Mobile-Design mit den restriktivsten Constraints beginnen soll: kleinster Bildschirm, schlechteste Verbindung, einhändige Bedienung; Wroblewskis Mobile-First-Philosophie legte konzeptionell die Grundlage für Thumb-Zone-bewusstes Design bevor Hoobers empirische Daten vorlagen. Paul Fitts (Ohio State University; Columbus; OH; US Air Force Aeromedical Laboratory; «The Information Capacity of the Human Motor System in Controlling the Amplitude of Movement», Journal of Experimental Psychology, 1954) entwickelte das Fitts'sche Gesetz als mathematisches Modell für Zeige-Bewegungen: Bewegungszeit = a + b × log₂(2D/W); D = Distanz zum Ziel; W = Breite des Ziels; praktische Implikation für Thumb Zone: Je weiter ein Element von der Daumen-Ruheposition entfernt ist (D erhöht sich) UND je kleiner das Element ist (W verringert sich) desto länger und fehleranfälliger ist das Antippen; Thumb Zone und Fitts' Law zusammen erklären warum der obere Bereich kleiner Elemente die schlechteste Kombination darstellt. Apple's Tab-Bar-Konvention (iOS Human Interface Guidelines seit iPhone OS 1.0; 2007): Tabs werden am unteren Bildschirmrand platziert (5 oder weniger Tabs); direkte Reaktion auf Thumb-Zone-Erkenntnis; iPhone-Tab-Bar-Höhe: 49 Points auf non-Notch-Geräten; höher auf Face-ID-Geräten mit Safe-Area; Googles Material Design Navigation-Entscheidung: Bottom Navigation Bar (Material Design 2; 2018; M3 2021): Tab-Navigation am Bildschirmrand unten als primäres Mobile-Navigation-Pattern; ersetzt älteres Hamburger-Menü-Pattern (das sich typischerweise oben links befand – rote Zone); Kyla Lunde (Nielsen Norman Group; nngroup.com; 2016) dokumentierte empirisch dass Bottom-Tab-Bars signifikant bessere Findbarkeits-Metriken zeigen als Hamburger-Menüs: 30% schnelleres Aufgaben-Abschließen; 15% höhere App-Retention nach ersten 30 Tagen. Die Smartphone-Größen-Entwicklung veränderte die Thumb-Zone-Proportionen erheblich: iPhone SE 1st Gen 2016: 4,0 Zoll; iPhone 6/7/8: 4,7 Zoll (Thumb-Zone-Optimum); iPhone 6+/7+/8+: 5,5 Zoll; iPhone X/11 Pro: 5,8 Zoll; iPhone 15 Pro Max 2023: 6,7 Zoll; je größer das Gerät desto kleiner wird die grüne Zone als Anteil der Gesamtfläche; iOS 15 (2021) und iOS 16 (2022) führten «Reachability» ein (doppeltes Tippen auf Seitenrand in Landscape; oder Wischen auf Home-Indicator senkt Bildschirm-Inhalt) als System-Level-Antwort auf das Thumb-Zone-Problem bei großen Geräten.

Thumb Zone in Navigation, Buttons und App-Design

Thumb Zone Testen und Analytics

Praxistipp: Machen Sie den Thumb-Zone-Test jetzt sofort: Nehmen Sie Ihr Smartphone in eine Hand, öffnen Sie Ihre mobile Website oder App und versuchen Sie alle wichtigen Funktionen nur mit dem Daumen dieser Hand zu erreichen – ohne das Gerät in der Hand zu verschieben. Jede Funktion für die Sie die Hand verschieben oder die zweite Hand hinzuziehen müssen ist ein Thumb-Zone-Problem. Die häufigste Überraschung: Navigation oben links (Hamburger, Back-Button) ist für 49% der Nutzer mit einer Hand praktisch nicht erreichbar. Lösung: primäre Navigation nach unten; häufige Aktionen (Suchen, Hinzufügen, Bestätigen) in die untere Bildschirmhälfte.