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!

Ein Fundstück aus dem Dropbox-Interface. »Kick out« heißt der Button, der damit treffend ausdrückt »Diesem Nutzer den Zugriff auf diesen gemeinsamen Ordner entziehen, alle Rechte und Dateien löschen.«

Das klassische Label (a) steht vor dem Textfeld und hat hoffentlich auch einen Label-Tag, so dass man es anklicken kann.

Das nett gemeinte (b) zeigt den Labeltext innerhalb des Textfelds, löscht einem dan aber die eigene Eingabe, wenn man erneut in das Textfeld klickt.

Das macht das gute (c) besser, in dem es auch den Fall abdeckt, bei dem Nutzer mit und ohne eigener Eingabe mehrfach in die Textfelder klicken und vielleicht sogar farblich zwischen Hilfetext (Grau) und Eingabe (Rot) unterscheidet.

Bisher war ich damit auch glücklich und zufrieden. Bis 37signals jetzt noch einen drauf setzt und für die Anmeldemaske in ihrem Launchpad zwei sehr schöne Details umsetzt und damit (d) sehr gut ist:

• Der Hilfetext verschwindet erst bei der Zeicheneingabe. Nicht wie sonst üblich beim Klick in das Textfeld.
• Sie verwenden eine zweiten helleren Grauton dafür um zu signalisieren, dass jetzt getippt werden kann.

Natürlich machen sie auch all die anderen Details richtig, die ich oben erwähnt habe.

Hier kommt das ganze als kurzer Screencast. Und wer jetzt nochmal sehen möchte, wo genau die Unterschiede sind zum heute sonst üblichen Verhalten (c), dem empfehle ich den A List Apart Artikel zu diesem Thema mit  seiner Demo und dieses jQuery Plugin.