Wie groß muss ein Touch-Knopf sein?
Ein Touch-Ziel ist die Fläche, auf die ein Finger tippt, etwa ein Knopf oder ein Link. Ist sie zu klein, trifft die Nutzende daneben und ärgert sich.
Darum messen Entwickelnde die Größe und den Abstand jedes Ziels. In dieser Lektion lernen Sie die gängigen Maße und prüfen die Knöpfe einer kleinen App.
Am Ende dieser Lektion
Notiz
Ich kann Bedienelemente so groß und so weit auseinander setzen, dass man sie mit dem Finger trifft.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Touch-Ziel | die Fläche, auf die ein Finger tippt | |
| Mindestgröße | die kleinste Seitenlänge, die ein Touch-Ziel haben sollte | 44 px |
| Abstand | der freie Raum zwischen zwei Touch-Zielen | |
| Innenabstand | Platz im Inneren eines Elements, in CSS padding | |
| Daumenzone | der Teil des Bildschirms, den der Daumen bei einer Hand leicht erreicht | |
| Hover | das Zeigen mit der Maus ohne Klick, auf einem Touchscreen gibt es das nicht |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Eine Fingerspitze ist breiter als ein Mauszeiger
Eine Fingerspitze ist ungefähr einen Zentimeter breit. Sie verdeckt dabei, was sie berührt. Ein Mauszeiger ist dagegen ein Pixel genau.
Viele Gestaltungsrichtlinien für Telefone nennen darum eine Mindestgröße von 44 bis 48 Pixeln für jedes Ziel. Das Lab verwendet 44 Pixel als Grenze.
Zu kleine Ziele in einer Liste finden
groessen = [30, 32, 36, 44, 48]
for groesse in groessen:
if groesse < 44:
print(groesse, "px: zu klein")
else:
print(groesse, "px: in Ordnung")
# Ändern Sie die Grenze 44 auf 48 und starten Sie noch einmal.
Ein Beispiel: Größen und ihr Urteil
| Größe in px | Urteil bei Grenze 44 | Was fehlt |
|---|---|---|
| 30 | zu klein | 14 px |
| 36 | zu klein | 8 px |
| 44 | in Ordnung | nichts |
| 48 | in Ordnung | nichts |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Das Lab misst die Größen der Web-App
Das Skript des Labs liest das Stylesheet der App und listet jede Größe von Width und Height auf, die einer Klasse gehört. Es nennt UNDER 44, wenn sie unter 44 Pixeln liegt, sonst ok, und am Ende under 44 px: mit der Zahl.
Die Ausgabe ist englisch. Lesen Sie nur hin und notieren Sie, welche Klassen zu klein sind. Ändern Sie hier noch nichts.
Die Größen der Knöpfe messen
docker exec jupyter python3 steps/touch.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Auch der Abstand zwischen Zielen zählt
Zwei große Knöpfe, die sich berühren, werden trotzdem verwechselt. Lassen Sie zwischen zwei Zielen etwa 8 Pixel Platz.
Die Tippfläche darf größer sein als das, was man sieht. Mit Innenabstand wächst die Fläche, ohne dass das Symbol größer wird.
Zwei Knöpfe: mit und ohne Innenabstand
<button class="klein">OK</button>
<button class="gross">OK</button>Die Daumenzone liegt unten und in der Mitte
Die meisten halten ein Telefon mit einer Hand und tippen mit dem Daumen. Unten und in der Mitte kommt der Daumen leicht hin. Die oberen Ecken sind schwer zu erreichen.
Legen Sie darum die Hauptaktion nach unten und seltene Aktionen nach oben. Auf großen Telefonen gilt das umso mehr.
Ein Beispiel: was in welche Zone gehört
| Zone | Erreichbarkeit | Gehört hierher |
|---|---|---|
| Unten, Mitte | leicht | Hauptaktion, etwa Hinzufügen |
| Mitte | gut | Liste und Inhalt |
| Oben, Ecken | schwer | Selten genutzt, etwa Einstellungen |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Kein Hover auf dem Touchscreen
Tipp
Ein Finger kann nicht schweben. Verstecken Sie darum keine wichtige Funktion hinter einem Hover, etwa ein Menü, das nur beim Zeigen erscheint. Auf dem Telefon käme niemand dorthin.
Ein häufiger Fehler
Warnung
Viele denken, die sichtbare Größe eines Knopfes sei auch seine Tippfläche. Ein kleines Symbol darf aber eine große Fläche haben. Messen Sie darum die Fläche, die reagiert, nicht das Symbol.