Die Daumenzone (Thumb Zone): Wohin gehören Buttons auf dem Smartphone?

Kurz gesagt

Die Daumenzone, englisch Thumb Zone, ist eine Karte für die einhändige Bedienung am Smartphone. Sie teilt den Bildschirm in drei Teile: den leicht erreichbaren Bereich, den Bereich, für den man sich strecken muss, und den Bereich, den man ohne Haltungswechsel nicht erreicht. Designer nutzen diese Karte, wenn sie entscheiden, wo Buttons auf dem Smartphone stehen.

Die Karte ist nützlich, aber keine Regel. Menschen halten das Smartphone oft anders und tippen in der Mitte des Bildschirms genauer. Meine Regeln zur Buttonplatzierung unten beruhen auf diesen beiden Beobachtungen.

Hoobers Beobachtungen: Wie halten wir das Smartphone?

Die Daten, auf die ich mich hier stütze, stammen von Steven Hoober. In seinem Artikel bei UXmatters von 2013 beobachtete er Menschen auf der Straße, am Flughafen, an Haltestellen, im Café und in öffentlichen Verkehrsmitteln. In zwei Monaten bis zum 8. Januar 2013 sammelte er 1.333 Beobachtungen. In 780 davon berührte die Person den Bildschirm.

Unter denen, die den Bildschirm berührten, sah die Verteilung so aus:

Hoober schreibt, er sei sich selbst nicht sicher, wie er die Anteile von rechter und linker Hand deuten soll. Außerdem erfasste er Angaben wie Alter, Gerät und Tätigkeit nicht, und Tablets kamen in der Stichprobe kaum vor. Deshalb lese ich die Tabelle nicht als „alle halten es so“, sondern als „die Haltungen sind gemischt“.

Der wichtigste Befund des Artikels betrifft für mich die Haltung. Laut Hoober ändern Nutzer die Art, wie sie das Smartphone halten, sehr oft, manchmal alle paar Sekunden. Viele, die das Smartphone mit einer Hand hielten, trugen gleichzeitig eine Tasche oder hielten sich im Bus fest.

In seinem Artikel von 2017 nennt Hoober neuere Zahlen. Danach tippen 75 % der Nutzer nur mit einem Daumen auf den Bildschirm. Mit einer Hand halten das Smartphone weniger als 50 %.

Die Grenzen der Daumenzonen-Karte

Die Zeichnungen im Artikel von 2013 waren grün, gelb und rot markiert. Grün stand für leichte Erreichbarkeit, Gelb für Strecken, Rot für einen Haltungswechsel. Schon damals schrieb Hoober, diese Bereiche seien ungefähr und hingen von der Person, der Haltung und der Größe des Smartphones ab.

Später ging er weiter. In einem Kommentar unter demselben Artikel bat er 2017 die Leser, diese Zeichnungen zu ignorieren. Auch eine Anmerkung der Redaktion zum Artikel sagt, Hoober habe seine Empfehlungen nach neuer Forschung aktualisiert.

Im Artikel von 2017 nennt Hoober die Zeichnung des Daumenschwungs „bekannt, aber falsch“. Er sagt, Designer glaubten noch immer, jede Berührung müsse unten auf dem Bildschirm liegen. Dabei können Nutzer ihre Finger bewegen und so den Bereich verändern, den der Daumen erreicht.

Hoobers Ersatz-Befund lautet: Menschen schauen und tippen am liebsten in die Mitte des Bildschirms. Dort ist auch die Treffgenauigkeit hoch, deshalb darf ein Ziel bis auf 7 mm schrumpfen. In der Ecke braucht es etwa 12 mm. Die Einzelheiten zu den Maßen beschreibe ich auf der Seite Tippbereich.

Hoobers Beispiel ist der Zurück-Button. Im Feld sieht er, wie Menschen ihn ständig benutzen. Selbst wenn er in der oberen rechten Ecke steht, ist er meist der meistgenutzte Button des Bildschirms. Eine ferne Ecke ist keine ungenutzte Ecke.

Live-Beispiel: Wie ändert sich die Karte mit der Haltung?

Unten sehen Sie einen fiktiven Warenkorb-Bildschirm. Ändern Sie die Haltung und verschieben Sie dann den primären Button nach oben und unten. Der Ergebnistext sagt, in welchen Bereich der Button fällt.

Wechseln Sie von der rechten zur linken Hand, wird die Karte gespiegelt. Der breite Button unten bleibt bei beiden Händen größtenteils im leichten Bereich, nur seine Enden ändern sich. Hält man das Smartphone mit beiden Händen, wird auch der obere Button bequem. Deshalb gestalte ich nicht nach einer einzigen Karte.

Untere Navigation

Die sichtbarste Anwendung der Daumenzone ist für mich die untere Navigation. Apple schreibt, dass die Tab-Leiste auf dem iPhone unten auf dem Bildschirm über dem Inhalt schwebt. Die Compose-Dokumentation von Android empfiehlt die Navigationsleiste für drei bis fünf gleich wichtige Ziele. Die Beispielleiste in der Dokumentation steht unten auf dem Bildschirm.

Apple zieht auch eine Grenze: Die Tab-Leiste dient der Navigation, nicht Aktionen. Steuerelemente, die mit den Elementen auf dem Bildschirm arbeiten, gehören in die Symbolleiste. Apple verlangt außerdem, dass die Tab-Leiste beim Wechsel zwischen Bereichen sichtbar bleibt, sonst vergessen Menschen womöglich, wo sie in der App sind.

Laut Hoober ermöglichen Tabs am oberen oder unteren Rand des Inhaltsbereichs den Wechsel zwischen Ansichten. Auch Nebenaktionen gehören an diese Ränder, der Hauptinhalt steht in der Mitte. Die genauen Unterschiede der Plattformen habe ich im Ratgeber Unterschiede zwischen iOS und Android zusammengetragen.

Der schwebende Aktionsbutton (FAB)

Laut Android-Dokumentation ist der schwebende Aktionsbutton ein stark hervorgehobener Button, mit dem man die primäre Aktion einer App ausführt. Er stellt die eine, fokussierte Aktion heraus, die Nutzer am häufigsten ausführen, und ist meist unten rechts verankert. Die Beispiele der Dokumentation sind eine neue Notiz anlegen, jemanden zu einem Chat hinzufügen und die Karte auf den eigenen Standort zentrieren.

In meiner Beispielkarte liegen die untersten Ecken für die rechte wie für die linke Hand im schweren Bereich. Für jemanden, der mit der linken Hand hält, liegt die untere rechte Ecke auf der anderen Seite des Daumens. Deshalb setze ich keinen weiteren Button unter oder neben den FAB und halte ihn etwas vom Rand entfernt.

Dazu kommt das Problem des Verdeckens. Weil der FAB über dem Inhalt schwebt, kann er die letzte Zeile einer Liste oder den Button der letzten Karte verdecken. Ich lasse unter der Liste einen Abstand in Höhe des FAB. So liegt das letzte Element nicht unter dem Button, wenn Nutzer ganz nach unten scrollen.

Ferne Aktionen oben auf dem Bildschirm

Die oberen Ecken sind der fernste Bereich, müssen aber nicht leer bleiben. Hoober empfiehlt, tertiäre Funktionen in Menüs zu legen, die Nutzer meist über eine Ecke öffnen. Für Aktionen wie Suchen und neue Inhalte erstellen empfiehlt er Aktionsbuttons.

Es gibt eine Falle. Laut dem Artikel von 2013 schließen manche Designer aus den Tabellen zur Einhandbedienung, sie sollten unwichtige oder gefährliche Funktionen in die obere linke Ecke legen. Hoober rät davon ab. Wer oben einen Button sieht, wechselt vielleicht in den Wiegegriff, um alles zu erreichen, oder hält das Smartphone ohnehin immer so. Eine ferne Ecke ist keine Sicherheitsmaßnahme.

Am anderen Ende gibt es auch einen Fehler. Eine häufige Aktion nur deshalb nach unten zu verlegen, damit sie erreichbar ist, kann die Logik des Bildschirms zerstören. Steht das Suchfeld oben, suchen Nutzer es dort. In so einem Fall vergrößere ich lieber den Tippbereich, statt die Aktion zu verschieben.

Eine Aktion, die sich nicht rückgängig machen lässt, wie das Löschen des Kontos, verstecke ich nicht in einer Ecke, sondern schütze sie mit einem Bestätigungsschritt oder einer Rückgängig-Funktion. Icons in den Ecken gebe ich außerdem eine größere Fläche als denen in der Mitte. Hoober schreibt in einem anderen Artikel von 2013, dass die Treffgenauigkeit an den Rändern des Bildschirms gering ist. Das Fitts-Gesetz erklärt, warum ein fernes, kleines Ziel langsam getroffen wird.

Meine Notiz

Das Problem, das ich in mobilen Audits am häufigsten sehe: Der primäre Button steht ganz am Ende des scrollbaren Inhalts. Nutzer füllen das Formular aus und scrollen dann nach unten, um den Button zu finden. Ein einziger Button, der im unteren Streifen fixiert ist, löst das.

Das zweithäufigste Problem ist eine untere Leiste, in der Aktionen und Navigation gemischt sind. Stehen „In den Warenkorb“, „Teilen“ und „Startseite“ in derselben Reihe, können Nutzer nicht abschätzen, welcher Button die Seite wechselt.

Die Daumenkarte nutze ich nicht wie ein Gesetz, sondern wie eine Checkliste. Zuerst prüfe ich, ob die häufige Aktion nahe der Mitte oder unten liegt. Dann probiere ich den Ablauf auf einem echten Smartphone mit der rechten Hand, der linken Hand und beiden Händen aus. Wie ich diesen Test in den Prozess einbaue, beschreibe ich im Ratgeber App-Design.

Wollen Sie diese Platzierung in Ihrer eigenen App prüfen lassen, sieht sich das UX Audit einen Ablauf von Anfang bis Ende an.

Checkliste

1. Liegt die primäre Aktion des Bildschirms im mittleren oder unteren Streifen?
2. Bleibt der primäre Button in einem langen Formular sichtbar, oder steht er am Ende des Inhalts?
3. Stehen in der unteren Leiste nur Navigationsziele, oder sind Aktionen dazwischen?
4. Gibt es auf dem Bildschirm nur einen FAB, und steht kein anderer Button darunter?
5. Ist der Tippbereich der Icons in den Ecken größer als in der Mitte?
6. Ist eine unumkehrbare Aktion durch Bestätigung oder Rückgängig-Funktion geschützt?
7. Wurde der Ablauf auf einem echten Smartphone mit rechter Hand, linker Hand und beiden Händen getestet?