Berührungsziele: Warum 44px zählen

Die Icons zum Archivieren und Löschen sitzen am Ende jeder Zeile in der Mail-App nebeneinander, jedes 24 Pixel groß gezeichnet, jedes auf ein 32px-Ziel gepolstert, ohne Abstand dazwischen. Die Kontaktfläche eines Daumens ist breiter als jedes von beiden. Du zielst auf Archivieren, der Tap landet ein paar Pixel rechts von der Stelle, auf die du geschaut hast, und die Nachricht ist weg. An der visuellen Gestaltung ist nichts falsch — die Icons sind scharf, ausgerichtet, auf dem Raster. Die Trefferflächen haben versagt.

Ein Berührungsziel ist der Bereich, der den Tap annimmt — die Trefferfläche, nicht das sichtbare Bedienelement — und die großen Richtlinien sind sich über den Mindestwert einig: Apples Human Interface Guidelines empfehlen mindestens 44×44pt, Material Design gibt 48×48dp vor, und WCAG 2.2 macht 24×24 CSS-Pixel zu einer Level-AA-Anforderung (Success Criterion 2.5.8), mit Ausnahmen für gut abgesetzte Ziele.

Diese Mindestwerte zu erreichen ist größtenteils Arithmetik — Padding, Abstände und Summen aus demselben Abstände-System, das auch alles andere bemisst. Dieser Artikel behandelt, woher die Zahlen kommen, wie Padding aus einem kleinen Visual ein bequemes Ziel macht und warum der Raum zwischen den Zielen genauso zählt wie die Ziele selbst.

Woher kommen 44px und 48px?

Zuerst die Einheiten: iOS-Points, Android-dps und CSS-Pixel sind allesamt dichteunabhängige Einheiten von vergleichbarer physischer Größe, sodass sich die Zahlen aus den Richtlinien direkt vergleichen lassen, auch wenn sie formal nicht identisch sind. 44pt auf einem typischen iPhone und 48dp auf einem typischen Android-Telefon ergeben beide rund 7mm physischen Bildschirm — in der Größenordnung der Kontaktfläche einer Fingerspitze.

Der Forschungshintergrund ist das Fitts’sche Gesetz, hier als Hintergrund genannt und nicht als anzuwendende Formel: Das Zeigen wird schneller und genauer, je größer und näher die Ziele sind, und Touch-Studien finden durchweg, dass die Fehlerraten steil ansteigen, sobald Ziele unter rund 7mm physischer Größe schrumpfen. Die Plattform-Mindestwerte liegen knapp über diesem Knick, gerundet auf rasterfreundliche Werte in der jeweiligen Plattform-Einheit — 44 und 48 sind keine Magie, sie sind der Punkt, an dem Fehl-Taps aufhören, Routine zu sein, ausgedrückt in Zahlen, die sich mit 4er- und 8er-Abständen zusammensetzen.

Der dritte Mindestwert ist neuer und niedriger. WCAG 2.2 Target Size (Minimum) — Success Criterion 2.5.8, Level AA — fordert Ziele von mindestens 24×24 CSS-Pixeln, mit Ausnahmen: Ein kleineres Ziel ist konform, wenn es so abgesetzt ist, dass ein auf ihm zentrierter 24px-Kreis kein benachbartes Ziel oder dessen Kreis überlappt, wenn dieselbe Aktion über ein größeres Bedienelement verfügbar ist oder wenn das Ziel ein Link innerhalb eines Satzes ist. Weil viele Vorschriften und Beschaffungsregeln auf WCAGs AA-Level verweisen, ist 24px das, was dem Feld einem gesetzlichen Mindestwert am nächsten kommt. Es ist aber ein Mindestwert — bequeme Touch-UI liegt bei 44–48, und die Lücke zwischen „konform“ und „bequem“ ist genau die Lücke zwischen der Frage eines Anwalts und der einer Designerin.

Ist das Berührungsziel dasselbe wie das sichtbare Bedienelement?

Nein — und in dieser Unterscheidung stecken die meisten Lösungen. Das Visual kann klein bleiben; die Trefferfläche wächst durch Padding. Ein 24px-Icon mit 12px Padding auf jeder Seite ist ein 48×48-Ziel (24 + 2 × 12 = 48): Das Icon, das du siehst, ist ein Viertel der Fläche, die du treffen kannst.

Der intuitive Grund, warum Padding funktioniert: Du zielst mit den Augen auf das Visual, aber du landest mit einer Hautfläche, die größer ist als die meisten Glyphen, und Taps streuen um den beabsichtigten Punkt. Das Padding ist dort, wo die Streuung landet. Ein 24px-Visual mit 12px Padding verzeiht eine Abweichung von bis zu 12px in jede Richtung; dasselbe Visual mit 4px Padding bestraft alles jenseits von 4.

Auf der modularen Skala, die in diesen Artikeln durchgängig verwendet wird — Basis 16, Ratio 2, zwei Töne, was 8, 11, 16, 23, 32, 45, 64 erzeugt — ist das Padding der Trefferfläche eine Stelle, an der sich das 4pt-Sub-Raster bezahlt macht. 12 ist kein Schritt der Ratio-2-Skala, aber es liegt auf der 4pt-Ebene und bringt die Summe auf Materials 48. Der eigene 11er-Schritt der Skala funktioniert ebenfalls: 24 + 2 × 11 = 46, deutlich über Apples 44 und weit über WCAGs 24. Beide sind vertretbar; 12 hält die Summe zudem auf dem 8er-Vielfachen, das Toolbar-Höhen meist sind. Die Arbeitsteilung ist die übliche — die Skala liefert die Icon-Größen und die Abstände, die 4pt-Ebene justiert die Summe.

Wie sieht eine antippbare Toolbar in Zahlen aus?

Ein durchgerechnetes Beispiel: vier Bedienelemente in einer Mail-Toolbar auf einem 360px breiten Bildschirm.

Vier 48px-Ziele und drei 8px-Abstände ergeben 216px — bequem auf einem 360px-Bildschirm, mit Platz für einen Titel. Zwei Details tragen die Lehre. Suchen zeichnet seine Glyphe bei 16 (einem exakten Skalenschritt) und polstert mit dem 16er-Schritt auf dieselben 48 gesamt: Visual-Größen dürfen variieren, während die Trefferflächen einheitlich bleiben. Und Löschen sitzt einen 8px-Abstand von Archivieren entfernt — genug, dass ein Beinahe-Fehltreffer im Abstand stirbt; destruktive Aktionen verdienen oft mehr Trennung oder obendrein eine Bestätigung, aber das ist eine Platzierungsentscheidung, keine Größenentscheidung.

Öffne die Skala, aus der diese Zahlen stammen — 8, 11, 16, 23, 32 — und lies die Toolbar daran ab: Der 8er-Schritt ist der Abstand, 16 das kleine Icon und sein Padding, wobei die 4pt-Ebene die 12 liefert.

Zählen Abstände zwischen Zielen?

Ja — Abstand zwischen Zielen erkauft Genauigkeit auf dieselbe Weise wie Größe. Taps streuen um den Zielpunkt, also ist die Naht zwischen zwei benachbarten Zielen der Ort, an dem Fehltreffer aufhören, harmlos zu sein: Zwei 48px-Ziele ohne Abstand dazwischen erzeugen an der gemeinsamen Kante immer noch Taps mit falscher Aktion, denn nahe dieser Kante landet rund die Hälfte der Streuung auf dem Nachbarn. Ein 8px-Abstand verwandelt die Naht in Totraum — ein Fehltreffer dort bewirkt nichts, was sich rückgängig machen lässt, statt das Falsche zu tun, was sich vielleicht nicht rückgängig machen lässt.

WCAG kodiert denselben Handel ausdrücklich: Seine Abstands-Ausnahme lässt ein unterdimensioniertes Ziel konform sein, wenn es ausreichend isoliert ist — das ist der Standard, der einräumt, dass die effektive Zielgröße Größe plus Trennung ist. Das dichteste sichere Layout ist selten die maximale Anzahl sich berührender Ziele — es ist ein Ziel weniger, mit Abständen.

Wann ist ein kleineres Ziel akzeptabel?

WCAGs Ausnahmen skizzieren die ehrliche Antwort: Links innerhalb eines Satzes sind ausgenommen, ein kleines Ziel besteht, wenn dieselbe Aktion an anderer Stelle auf der Seite als größeres Bedienelement existiert, und die Abstands-Ausnahme deckt dichte, aber isolierte Layouts ab. Jenseits der Konformität zählt der Kontext — Mauszeiger tolerieren kleinere Ziele als Finger — aber hybride Laptop-Tablet-Geräte verwischen die Grenze, sodass bei unsicherer Eingabe die Touch-Mindestwerte der sicherere Standard sind.

Die Toolbar dichter machen, ohne den Mindestwert zu verlieren

Manchmal passen 48er wirklich nicht — mehr Bedienelemente, als in die Zeile passen. Der Zug besteht nicht darin, Padding nach Gefühl abzuschneiden, sondern es neu herzuleiten: öffne dieselbe Skala mit einem dritten Ton pro Oktave und das Menü gewinnt Schritte bei 10, 13, 20 und 25. Polstere das 24px-Icon mit dem neuen 10er-Schritt und die Trefferfläche landet exakt auf 44 — Apples Mindestwert — was pro Bedienelement 4px zurückgewinnt, während jede Zahl hergeleitet statt improvisiert bleibt.