ux·zentrisch diskutierte vor einiger Zeit:

Ein Klassiker bei Formularen im Web ist es, dass Nutzer gezwungen werden, zur Auswahl einer Checkbox oder eines Radio-Buttons exakt auf die kleine Fläche des Kontrollelements (in der Abbildung rot markiert) zu klicken.

Dabei ist es von vielen Plattformen bekannt, dass bei dieser Anordnung auch die Beschriftung der Checkbox oder des Radio-Buttons anklickbar ist.

Auch HTML gibt uns die Möglichkeit, das entsprechend umzusetzen. Alle modernen Browser interpretieren das <label>-Tag so, dass der Inhalt dieses Tags als Klickfläche dient. Dadurch reicht es meist schon, eine Checkbox bzw. einen Radiobutton einfach in ein Label-Tag zu »verpacken«.

Der Vorteil durch die vergrößerte Klickfläche vergrößert sich, je länger die Beschriftung wird. Das gilt insbesondere dann, wenn Beschriftungen mehrzeilig sind und sich dadurch nicht nur die Breite, sondern auch die Höhe des Klickziels vergrößert.

Wer es noch nicht kennt und gerne auf die wissenschaftliche Ebene wechseln möchte: Hier geht es um Fitt’s Law.

Auf mobilen Geräten mit Touchscreen ist die Größe des Klickziels besonders wichtig, denn dort zeigt der Nutzer nicht mit einem kleinen, spitzen Mauszeiger auf das Kontrollelement, sondern mit dem Finger. Und der ist in der Regel größer als die eigentliche Checkbox bzw. der Radio-Button (»fat finger problem«).

iPhone und Android sehen daher standardmäßig in vor, dass in Formularen genau ein Formularelement pro Zeile steht. Der Nutzer kann die gesamte Zeile antippen und damit ein Element auswählen bzw. aktivieren/deaktivieren. Die nachstehende Abbildung zeigt einen Screenshot von Android 2.1. Links ist der am Gerät angezeigte Zustand zu sehen. Rechts ist die gesamte klickbare Fläsche des Checkbox-Elements hervorgehoben.

Diese Anordnung ist beim iPhone und bei Android – anders als in den Weiten des Web – ziemlich konsequent umgesetzt worden, so dass Ausnahmen hier besonders unerwartet sind.

Eine solche Ausnahme ist die Einstellungen-Seite von Foursquare, die ausgerechnet direkt über den Einstellungen-Dialog aus der Android-Applikation verlinkt wird (foursquare.com/settings).

Wer hier eine Option aktivieren oder deaktivieren möchte, muss – je nach aktuellem Zoom im Browser – ziemlich geschickt sein oder viel Glück haben. Denn die Beschriftungen sind leider nicht als <label> anklickbar. Und um die Schwierigkeit noch etwas zu erhöhen hat man noch zusätzliche Hyperlinks direkt unter die Checkboxen gesetzt (Hype-Thema »Game-Design« in der Formulargestaltung?).

Also: <label> nicht vergessen!

Kommentieren