Touch-Ziele in Apps: Wie groß eine Schaltfläche mindestens sein muss

Warum die Größe zählt

Ein Finger ist kein Mauszeiger. Wo eine Maus pixelgenau klickt, deckt eine Fingerkuppe eine Fläche von rund einem Zentimeter ab, und sie verdeckt das Ziel im Moment der Berührung. Ist eine Schaltfläche zu klein, wird das Treffen zum Glücksspiel: Man tippt daneben, löst die Nachbar-Aktion aus oder muss mehrmals zielen.

Für viele Menschen ist das mehr als lästig. Wer Tremor hat, die Hand nicht ruhig halten kann oder die App unterwegs mit einer Hand bedient, ist auf großzügige Tippflächen angewiesen. Größere Ziele senken die Fehlerquote, verringern die nötige Präzision und machen die Bedienung für alle entspannter, nicht nur für Menschen mit Einschränkungen.

Die Mindestmaße: Apple, Material und WCAG

Drei Regelwerke geben Maße vor. Sie nutzen unterschiedliche Einheiten, weil jedes Ökosystem seine eigene dichteunabhängige Maßeinheit hat, meinen aber dasselbe Ziel: Tippflächen, die sich verlässlich treffen lassen.

Die Botschaft dahinter ist einfach: Wer sich in einer App an 44 pt (iOS) beziehungsweise 48 dp (Android) hält, erfüllt die Plattform-Empfehlung und liegt zugleich auf dem strengen AAA-Niveau der WCAG. Die 24 CSS-px aus 2.5.8 sind nur die unterste, gerade noch zulässige Grenze, kein Komfort-Ziel.

Tippfläche ist nicht Symbolgröße

Ein häufiges Missverständnis: Das Mindestmaß bezieht sich auf die Tippfläche, nicht auf das sichtbare Symbol. Ein Icon darf optisch klein sein, etwa 24 dp, solange die unsichtbare, tippbare Fläche darum herum die vollen 48 dp erreicht. Material Design nennt genau dieses Beispiel: ein 24-dp-Icon mit umgebendem Polster, das zusammen die 48-dp-Fläche ergibt.

Abstand statt Größe

Manchmal lässt sich ein Ziel nicht groß genug machen, etwa eine dichte Werkzeugleiste. Die WCAG erlauben darum eine wichtige Ausnahme: Ein kleineres Ziel ist zulässig, wenn rund um es genug Abstand bleibt. Konkret reicht es für 2.5.8, wenn ein gedachter Kreis von 24 CSS-px Durchmesser um den Mittelpunkt kein Nachbarziel berührt. Auf gut Deutsch: Lieber kleine Knöpfe mit Luft dazwischen als kleine Knöpfe Kante an Kante.

Web oder App: derselbe Gedanke, andere Einheit

Touch-Ziele sind kein reines App-Thema. Auch im Web gilt mit WCAG 2.5.8 dasselbe Prinzip, dort gemessen in CSS-Pixeln. Der Unterschied liegt in der Einheit und in den Werkzeugen: In Apps arbeitest du mit pt beziehungsweise dp und den Plattform-Komponenten von Apple und Google, im Web mit CSS und HTML.

Dass dieselbe WCAG-Anforderung auch für native Apps verbindlich werden kann, liegt am europäischen Standard EN 301 549: Er überträgt die WCAG-Erfolgskriterien auf Software und mobile Apps und ist die Brücke zwischen den Web-Richtlinien und der App-Welt.

In der Praxis umsetzen

Beide Plattformen liefern Bausteine, die das Mindestmaß bereits eingebaut haben. Wer Standard-Komponenten nutzt, ist meist auf der sicheren Seite. Bei eigenen, kleinen Steuerelementen musst du die Tippfläche selbst vergrößern.

 // Kleines Icon, aber Tippfläche mindestens 44 x 44 pt 
Button(action: schliessen) {
  Image(systemName: "xmark")
}
.frame(minWidth: 44, minHeight: 44)
.contentShape(Rectangle()) // ganze Fläche tippbar 

 // sizeIn stellt die 48-dp-Tippfläche sicher 
IconButton(
  onClick = { schliessen() },
  modifier = Modifier.sizeIn(minWidth = 48.dp, minHeight = 48.dp)
) {
  Icon(Icons.Default.Close, contentDescription = "Schließen")
}

Ein Mythos

Auf einen Blick

Wenn du Schaltflächen in einer App gestaltest, geh diese Punkte durch:

Damit deckst du die häufigsten Stolperstellen ab. Tiefer steigen die Design-Richtlinien von Apple und Google ein, die auch den Bezug zu Schriftgrößen und Layout erklären.