Tap-Target-Größe: Warum 24 px zu klein sind und die 44-pt- und 48-dp-Regel, die du brauchst
Ein 24-px-Icon ist in Ordnung, eine 24 px große Tippfläche nicht. Apple verlangt 44 pt, Android 48 dp, und die 24 px der WCAG sind nur eine Untergrenze. Vier Fixes im direkten Vergleich und der Code für deine Entwickler.
Ein 24-px-Icon ist in Ordnung. Eine 24 px große Tippfläche nicht. Menschen benutzen eine Fingerspitze, oft einhändig und unterwegs, und ein so kleines Ziel wird verfehlt oder trifft den Nachbarn. Zeichne das Icon klein und das Ziel groß, und halte dich an die Zahlen unten.
Warum 24 px die Zahl ist, die alle zeichnen
Icons werden in 24 gezeichnet. Material Symbols zum Beispiel kommen mit 24 px als bevorzugter Größe. Also liefert ein Designer ein 24-px-Icon, ein Entwickler macht den Button so groß wie das Icon, und die Trefferfläche ist am Ende so groß wie eine Briefmarke.
Die zweite Quelle der Zahl ist Barrierefreiheit. WCAG 2.2 verlangt auf Level AA Zeigerziele von mindestens 24 mal 24 CSS-Pixeln. Das ist ein Minimum, und es kommt mit Ausnahmen. Man liest leicht eine Untergrenze als Ziel, und ein Design, das genau auf der Untergrenze sitzt, besteht den Checker und frustriert trotzdem Menschen.
Die vier Zahlen, die du kennen musst
| Quelle | Größe | Was es ist |
|---|---|---|
| Apple, iOS und iPadOS | 44 mal 44 pt | Die Standardgröße für Steuerelemente |
| Apple, iOS und iPadOS | 28 mal 28 pt | Die kleinste Größe für Steuerelemente |
| Android, Material | 48 mal 48 dp | Das empfohlene Touch-Target |
| WCAG 2.2, 2.5.8 (AA) | 24 mal 24 CSS-px | Das Minimum, mit Ausnahmen |
| WCAG 2.2, 2.5.5 (AAA) | 44 mal 44 CSS-px | Das erweiterte Ziel |
Apples eigene Vorgabe ist unmissverständlich: Ein Button braucht eine Trefferfläche von mindestens 44 mal 44 Punkten. Punkte, dp und CSS-Pixel sind alle dichteunabhängige Einheiten, deshalb nutzen Designer sie nebeneinander auf einem Raster, so wie das Bild es tut.
Eine der WCAG-Ausnahmen ist gut zu kennen. Zwei zu kleine Ziele sind erlaubt, wenn ein 24-px-Kreis, zentriert auf jedem davon, das andere Ziel nicht berührt. Das ist eine Regel über Abstände, und deshalb kann eine Reihe winziger Icons mit viel Abstand bestehen, während dieselben Icons eng gepackt durchfallen.
Fix 1: Das Icon auf 44 auffüllen
24 x 24 Trefferfläche
44 x 44 Trefferfläche
Die Trefferfläche ist der Rahmen des Buttons, nicht das Bild darin. Also ist der Fix, den Button zu dimensionieren, nicht das Icon: Lass das Glyph bei 24 und gib dem Button auf beiden Seiten mindestens 44. Das gilt für jedes kleine Steuerelement, das allein steht: den Zurück-Pfeil, die Teilen- und Mehr-Buttons in einer Toolbar, den Info-Button in einer Zeile, einen Favoriten-Stern, eine Checkbox, Plus und Minus eines Steppers.
Wenn zwei davon nebeneinander sitzen, dürfen sich die Kästen berühren. Das ist in Ordnung, denn berührende Kästen lassen keine Lücke zum Verfehlen.
Fix 2: Die ganze Zeile tippbar machen
Nur der Schalter
Ganze Zeile
Die Zeile ist schon da, schon lesbar und viel größer als 44. Pack Label und Steuerelement in ein einziges tippbares Element, damit die ganze Zeile umschaltet. Das hilft auch Menschen, die einen Screenreader oder Switch Access benutzen, weil es ein Steuerelement mit einem Namen gibt, nicht ein Label und einen einsamen Schalter.
Fix 3: Dem Schließen-Button ein echtes Ziel geben
16 x 16
44 x 44
Dasselbe gilt für den Schließen-Button eines Banners, den Löschen-Button im Suchfeld und das kleine Entfernen-Icon an einem Tag. Zeichne das Zeichen leicht und das Ziel schwer.
Fix 4: Die Hauptaktion nach unten setzen
Obere Ecke
Unten, volle Breite
Das ist eine Designregel, keine gemessene Statistik: Es geht darum, dass die Position eines Steuerelements genauso wichtig ist wie seine Größe. Die Primäraktion kommt nach unten und in die Breite. Abbrechen und andere Sekundäraktionen können in der Leiste oben bleiben.
So baust du es
Im Web dimensionierst du den Button, nicht das Icon:
.icon-button {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
}
.icon-button svg { width: 24px; height: 24px; }
/* one tappable row: label and switch together */
.row { display: flex; align-items: center; min-height: 44px; }
Auf Android empfiehlt Google, android:minWidth und android:minHeight als Untergrenze zu setzen, wenn ein Steuerelement seine Größe aus dem Inhalt bezieht:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="48dp"
android:minHeight="48dp" />
Auf iOS in SwiftUI gibst du dem Steuerelement einen Frame und sorgst dafür, dass der ganze Frame reagiert:
Button(action: close) { Image(systemName: "xmark") }
.frame(minWidth: 44, minHeight: 44)
.contentShape(Rectangle())
Die drei Snippets sind unsere Beispiele für die Regel, kein von einer Plattform kopierter Code.
Prüfe deine eigenen Screens in fünf Minuten
- Zeichne in deiner Design-Datei jedes tippbare Element als 44-mal-44-Kasten über das Icon. Jeder Kasten, der nicht passt, ist ein Ziel, das vergrößert werden muss.
- Listenzeilen, Tabs, Chips und Paginierung: Ist das ganze Element tippbar oder nur der Teil mit dem Wort darin?
- Finde jedes Schließen-, Löschen- und Entfernen-Steuerelement. Jedes braucht seine eigenen 44.
- Finde die eine Primäraktion pro Screen. Liegt sie dort, wo der Daumen ist?
- Geh auf einem echten Handy mit einer Hand durch den Hauptflow. Alles, was du zweimal verfehlst, ist zu klein.
FAQ
Was ist die minimale Tap-Target-Größe?
Auf dem iPhone ist Apples Standard 44 mal 44 Punkte, und die kleinste Größe für Steuerelemente ist 28 mal 28. Auf Android lautet die Empfehlung 48 mal 48 dp. Im Web setzt WCAG 2.2 auf Level AA ein Minimum von 24 mal 24 CSS-Pixeln, mit Ausnahmen.
Wie groß sollte ein Button auf dem Handy sein?
Mindestens 44 mal 44 Punkte auf iOS und 48 mal 48 dp auf Android, jeweils in Breite und Höhe. Ein Primär-Button in voller Breite am unteren Bildschirmrand liegt schon weit über beidem.
Muss das Icon selbst 44 px groß sein?
Nein. Das Icon kann 24 px oder kleiner bleiben. 44 muss die Fläche haben, die auf einen Tipp reagiert, also der Button um das Icon. Füge dem Button Padding oder eine Mindestbreite und -höhe hinzu.
Reicht ein 24-mal-24-px-Ziel für die WCAG?
Für Level AA ja, in den meisten Fällen: Das Kriterium verlangt mindestens 24 mal 24 CSS-Pixel, mit Ausnahmen für Abstände, Inline-Links und ein paar weitere. Das erweiterte Level AAA verlangt 44 mal 44. AA zu bestehen ist ein Minimum für Konformität, keine gute Größe, für die man designen sollte.
Was ist der Unterschied zwischen pt, dp und px?
Sie sind alle dichteunabhängige Einheiten. Ein Punkt ist die Einheit von iOS, ein dp die von Android und ein CSS-Pixel die des Webs. Sie sind physisch nicht identisch, aber Designer legen sie auf demselben Raster aus, deshalb gelten 44 pt und 48 dp als ungefähr gleich groß.
Wohin gehört der Hauptbutton auf dem Handy?
An den unteren Bildschirmrand, in voller Breite, dort, wo der Daumen ruht. Sekundäraktionen wie Abbrechen gehören in die obere Leiste. Das ist eine Layout-Faustregel, keine gemessene Zahl.
Quellen
- Apple Human Interface Guidelines, Accessibility: Standardgröße für Steuerelemente auf iOS und iPadOS 44 mal 44 Punkte, minimale Größe 28 mal 28 Punkte.
- Apple Human Interface Guidelines, Buttons: Ein Button braucht eine Trefferfläche von mindestens 44 mal 44 Punkten.
- Android Accessibility Help, Touch target size: mindestens 48dp breit und hoch, und
android:minWidthundandroid:minHeightals Untergrenze für Steuerelemente, die sich nach ihrem Inhalt dimensionieren. - W3C, WCAG 2.2, 2.5.8 Target Size (Minimum): mindestens 24 mal 24 CSS-Pixel auf AA, einschließlich der Abstandsausnahme, und 2.5.5 Target Size (Enhanced): 44 mal 44 auf AAA.
- Google Fonts, Material Symbols guide: 24 px als bevorzugte Icon-Größe.
- Die Screens oben sind unsere eigenen Beispiele. Der Rat zur Platzierung unten ist eine Designregel, keine Statistik.
- Mehr Ein-Regel-Posts wie dieser auf UX Brainy.
Want every tap in your app to land the first time? Our team designs and builds mobile UI with the hit areas decided once, in the system.
Get Started
