Tippbereich: Wie groß muss ein Button auf dem Handy sein?

Kurz gesagt

Der Tippbereich, englisch Touch Target, ist die Fläche, auf die ein Nutzer tippen kann, um ein Element auszulösen. Das W3C definiert das Ziel als Bildschirmbereich, der Zeigeraktionen annimmt. Sie messen also nicht das gezeichnete Icon, sondern die tippbare Fläche samt Umgebung.

Quelle	Maß	Hinweis
Apple (iOS, iPadOS)	44 × 44 pt	Standardgröße für Bedienelemente. Minimum 28 × 28 pt.
Android, Material	48 × 48 dp	Laut Google etwa 9 mm. Größer ist besser.
WCAG 2.2, 2.5.8 (AA)	24 × 24 CSS-Pixel	Mit Abstandsausnahme.
WCAG 2.2, 2.5.5 (AAA)	44 × 44 CSS-Pixel	Das W3C empfiehlt das für wichtige Bedienelemente.

Plattformdetails und den Unterschied zwischen iOS und Android beschreibe ich im Ratgeber zum App-Design. Diese Seite behandelt das Muster selbst. Zuerst trenne ich sichtbare Größe und tippbare Fläche, dann geht es um Abstand und Bildschirmränder.

Warum kleine Ziele ein Problem sind

Je kleiner das Ziel, desto schwerer trifft man es. Das Fittssche Gesetz misst das als Zeit. Auf dem Touchscreen kommt der Fehltipp dazu: Der Finger verfehlt das Ziel und trifft das Element daneben.

Aurora Harley von NN/g zitiert einen Befund des MIT Touch Lab: Eine Fingerkuppe ist meist 1,6 bis 2 cm breit. Die Kontaktfläche des Daumens liegt im Schnitt bei 2,5 cm. Laut Harley sind die eigentlichen Schuldigen die kleinen Ziele.

Das W3C zählt auch auf, wem Kriterium 2.5.5 hilft. Auf der Liste stehen Menschen mit Tremor, Menschen, denen feine Bewegungen schwerfallen, und alle, die das Gerät mit einer Hand bedienen. Dazu gehören auch Nutzer, die im Nahverkehr durchgeschüttelt werden.

Sichtbare Größe und Tippbereich

Ein Icon kann 20 Pixel groß aussehen und trotzdem auf einen Tipp in einer Fläche von 44 Pixeln reagieren. Der Kern des Musters ist, beide Maße getrennt zu denken. Die sichtbare Größe bestimmen Layout und Lesbarkeit, den Tippbereich bestimmt der Finger.

Die Compose-Dokumentation von Android nennt ein Beispiel: Eine anklickbare Checkbox erreicht durch Padding mindestens 48 dp Breite und Höhe. Switch, RadioButton und Slider wenden diese Untergrenze von selbst an. Wenn Sie ein eigenes interaktives Element bauen, müssen Sie die Größe selbst festlegen.

Apples allgemeine Regel für Buttons zeigt in dieselbe Richtung. Der Tippbereich eines Buttons sollte mindestens 44 × 44 pt groß sein. Apple verlangt das, damit Nutzer den Button sowohl mit dem Finger als auch mit dem Zeiger bequem treffen.

Harley nennt Elemente, die groß genug zum Sehen, aber zu klein oder zu eng zum bequemen Antippen sind, „view–tap asymmetry“. Sehen ist leicht, Tippen schwer. Weil der Bereich unsichtbar ist, sollte das Icon selbst ein klarer Signifier sein.

In den zwei Zeilen unten sind die Mengen-Buttons gleich groß. Mit dem Schalter sehen Sie die tippbaren Flächen.

Sichtbare Größe und Tippbereich

Vorher: Bereich so groß wie das Icon

Filterkaffee, 250 g

1

Sichtbarer Kreis 20 px, Tippbereich 20 × 20 px.

Nachher: gleiches Icon, Bereich 44 px

Filterkaffee, 250 g

1

Sichtbarer Kreis 20 px, Tippbereich 44 × 44 px.

Die gestrichelte Linie zeigt den Bereich, auf den der Button reagiert. In beiden Zeilen sind die Icons gleich groß. In der rechten Zeile wurde der Bereich mit einer unsichtbaren Ebene auf 44 Pixel vergrößert.

Die Mengen-Buttons im Warenkorb sind in beiden Zeilen 20 Pixel groß. Um den rechten liegt eine unsichtbare Ebene, die den Bereich auf 44 Pixel vergrößert. Ist JavaScript aus, sind die gestrichelten Linien immer sichtbar.

Abstand zwischen den Zielen

Harleys Reihenfolge ist klar: Ziele müssen zuerst groß genug und dann gut verteilt sein. Zusätzlicher Abstand rettet kein Ziel, das ohnehin zu klein ist.

Die Maße unterscheiden sich je nach Quelle:

• Apple empfiehlt um Elemente mit Rahmen etwa 12 pt Abstand. Bei Elementen ohne Rahmen lässt man um die sichtbare Kante etwa 24 pt frei.
• Die Android-Hilfeseite von Google zur Barrierefreiheit verlangt zwischen den Zielen 8 dp oder mehr.
• WCAG 2.5.8 erlaubt Ziele unter 24 Pixeln über die Abstandsausnahme.

Der Abstandstest des W3C funktioniert so: Sie zeichnen um die Mitte des Begrenzungsrahmens des kleinen Ziels einen gedachten Kreis mit 24 CSS-Pixeln Durchmesser. Berührt der Kreis kein anderes Ziel und keinen Kreis eines anderen kleinen Ziels, besteht das Ziel.

Trotzdem hält das W3C es für gute Praxis, die Untergrenze von 24 Pixeln einzuhalten, auch wenn der Abstand reichen würde. Ich nutze die Abstandsausnahme nur als letzten Ausweg.

Vergrößerte Bereiche dürfen sich nicht überlappen. Die Compose-Dokumentation von Android empfiehlt, einem kleinen Element von Anfang an genug Größe zu geben, um Überlappungen zu vermeiden.

Ränder und Ecken

Nicht jede Stelle des Bildschirms wird gleich gut getroffen. Laut Steven Hoobers Artikel auf UXmatters schauen und tippen Menschen am liebsten in die Mitte des Bildschirms. Dort treffen sie auch besser.

Hoober empfiehlt deshalb Maße nach Position. Ein Ziel in der Mitte kann bis zu 7 mm klein sein, ein Ziel in der Ecke sollte etwa 12 mm groß sein. Laut Hoober decken seine empfohlenen Zielgrößen 95 % der beobachteten Tipps ab.

Im selben Artikel stehen auch Daten zur Haltung. 75 % der Nutzer tippen nur mit einem Daumen. Weniger als 50 % halten das Handy mit einer Hand.

Ich setze das so um: Dem Schließen-, Zurück- oder Menü-Icon in der Ecke gebe ich mehr Fläche als den Buttons in der Mitte. Eine nicht umkehrbare Aktion wie Löschen setze ich auch nicht direkt neben einen häufig gedrückten Button.

Live-Beispiel: Fingertest für Tippziele

Nehmen Sie Ihr Handy und tippen Sie auf den orangen Kreis. Probieren Sie zuerst ein paarmal 16 Pixel mit 2 Pixeln Abstand, wechseln Sie dann zu 44 oder 48 Pixeln. Am Desktop funktioniert das auch mit der Maus, den Unterschied spüren Sie aber am deutlichsten mit dem Daumen.

Fingertest für Tippziele

Dieser Test braucht JavaScript. Ist es an, sehen Sie 16 Kreise im Raster 4 × 4. Einer ist orange, auf ihn tippen Sie. Die Kreisgröße stellen Sie auf 16, 24, 44 oder 48 Pixel, den Abstand auf 2 oder 8 Pixel.

Tippen Sie auf den orangen Kreis, nach jedem Treffer wechselt das Ziel. Ein Tipp auf den Nachbarkreis oder in die Lücke zählt als Fehltipp. Der Test misst nichts, er macht den Unterschied spürbar. Das Ergebnis hängt von Finger, Handy und Haltung ab. Per Tastatur bekommt nur der orange Kreis den Fokus.

Bei kleinen, eng stehenden Kreisen trifft man sehr leicht den Nachbarn. Die Tabelle zählt jede Einstellung getrennt, so sehen Sie verschiedene Größen mit demselben Finger nebeneinander.

Die Ausnahmen von WCAG 2.5.8

Die 24-Pixel-Regel in WCAG 2.2 hat fünf Ausnahmen. Wer sie kennt, schreibt im Audit keine unnötigen Befunde.

• Abstand: wenn das kleine Ziel den Kreistest oben besteht.
• Äquivalent: wenn ein anderes Bedienelement auf der Seite dieselbe Funktion erfüllt und die Regel einhält.
• Inline: wenn das Ziel in einem Satz steht oder seine Größe durch die Zeilenhöhe des Textes begrenzt ist.
• Browser-Steuerelement: wenn der Browser die Größe bestimmt und der Autor sie nicht verändert hat.
• Wesentlich: wenn diese Darstellung für die Information unerlässlich oder rechtlich vorgeschrieben ist.

Die Inline-Ausnahme lege ich eng aus. Ein einzelner Link „Details“ unter einer Karte ist nicht Teil eines Satzes. Für diesen Link gilt die Regel.

Umsetzung: den Tippbereich mit CSS vergrößern

Es gibt zwei Wege, die Fläche zu vergrößern, ohne das Design zu verändern. Der erste ist eine unsichtbare Ebene am Button. Der zweite gibt dem Button selbst eine Mindestbreite und -höhe und zentriert das Icon.

/* 1. Unsichtbare Ebene: Icon 20 px, Tippbereich 44 px */
.icon-button {
  position: relative;
  width: 20px;
  height: 20px;
}
.icon-button::after {
  content: "";
  position: absolute;
  inset: -12px; /* 12 + 20 + 12 = 44 */
}

/* 2. Der Button selbst wächst, das Icon bleibt mittig */
.icon-button--box {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
}
.icon-button--box svg {
  width: 20px;
  height: 20px;
}

/* 3. Auf Touchscreens Abstand dazwischen */
@media (pointer: coarse) {
  .toolbar { gap: 8px; }
}

Beim ersten Weg ist die Ebene ::after Teil des Buttons, ein Tipp darauf landet beim Button. Hat ein Elternelement overflow: hidden, wird die Ebene abgeschnitten und der Bereich schrumpft mit. Das Mengenbeispiel oben ist so gebaut.

Der zweite Weg ist sicherer, weil die Fläche im Layout wirklich Platz einnimmt und nicht über den Nachbarn ragt. Die W3C-Technik C42 nutzt dieselbe Idee: Sie setzt Seitenzahl-Links in Container mit mindestens 24 × 24 Pixeln.

Messen Sie beim Prüfen die tippbare Fläche. Die Größe, die die Entwicklertools beim Auswählen des Buttons zeigen, enthält die Ebene ::after nicht.

Meine Notiz

In Audits finde ich zu kleine Ziele immer an denselben Stellen. Am häufigsten sind es Plus und Minus der Menge im Warenkorb und das Schließen-Kreuz auf Benachrichtigungskarten. Alle werden im Design als Icon gezeichnet und im Code auch nur so groß wie das Icon umgesetzt.

Ich zeichne den Tippbereich in der Designdatei als eigene Ebene. Sieht der Entwickler diese Ebene, muss er die Größe nicht raten. Das als Regel im Designsystem festzuhalten, ist einfacher, als es auf jedem Screen neu zu besprechen.

Fürs Web ist meine Untergrenze 24 Pixel, mein Ziel 44. In mobilen Apps gehe ich nicht unter 44 pt und 48 dp.

Wenn Sie diese Maße in Ihrem Produkt prüfen lassen wollen: Der UX Audit enthält auch eine Barrierefreiheitsprüfung. Für eine breitere Prüfung lesen Sie den Ratgeber zur Barrierefreiheitsprüfung.

Checkliste

1. Messen Sie bei jedem interaktiven Element die tippbare Fläche.
2. Wenden Sie im Web den Abstandstest auf alles unter 24 × 24 CSS-Pixeln an.
3. Peilen Sie bei Haupt-Buttons und häufig genutzten Icons 44 Pixel an.
4. Prüfen Sie, dass vergrößerte Bereiche nicht über ihre Nachbarn ragen.
5. Geben Sie Zielen in den Ecken mehr Fläche als denen in der Mitte.
6. Setzen Sie eine nicht umkehrbare Aktion nicht neben einen häufig gedrückten Button.
7. Gehen Sie den Ablauf einmal komplett auf einem echten Handy mit einem Daumen durch.