- Schaltflächen/Links/Karten so gestalten, dass sie sich leichter klicken/berühren/antippen lassen und Fehlbedienungen seltener passieren
- Für „Zielgröße“ gibt es je nach Kontext unterschiedliche Bezeichnungen: Apple nennt es hit target, Google Material Touch target, WAI target size, Google Lighthouse Tap Target und in der Design-Community Clickable Area
- Nach den WCAG sollte die Zielgröße mindestens 44 x 44 CSS-Pixel betragen (unter Android 48 x 48)
- Ist sie kleiner, können sich Touch-Kreise überlappen und zu Fehlklicks führen
- In Google Design for Driving gilt ein Minimum von 76dp x 76dp
- Es ist sinnvoll, visuelles Feedback für das Ziel zu geben (Rahmen am Element oder invertierter Hintergrund)
- Bei Zielen kleiner als 24 x 24 ist ausreichend Abstand nötig (Line Height: 1.4, Padding: 1rem usw.)
- Auch bei ProgressBars ist es gut, die Höhe zu vergrößern, um genügend Touch-Fläche zu bieten
- Zwischen Objekten mit derselben Aktion sollte Dead Target Area entfernt werden
- Mit Pseudo-Elementen wie
:before und :after lässt sich die Zielgröße vergrößern
- Bei
label unbedingt for verwenden, um die Zielgröße zu erweitern
- Bei Checkboxen lässt sich die Zielgröße mit
padding-block vergrößern
- Auch Schaltflächen/Textlinks sollten Padding erhalten
- Bei Listeneinträgen mit Padding und
display:flex auf die volle Elementgröße erweitern
- Methoden zum Testen der Zielgröße: DevTools verwenden, CSS Outline anwenden, den Browser Polypane nutzen
1 Kommentare
Der Inhalt ist großartig, und als ich nach dem Autor geschaut habe, stellte sich heraus, dass es Ahmad Shadeed ist. Wenn man sich die Artikel ansieht, die er geschrieben hat, kann man wirklich nicht anders, als beeindruckt zu sein.