2.2.4 Machen Sie Klickflächen groß

Hintergrund

Große Klickflächen können schneller und leichter bedient werden. Nach Fitts´s Law, einer Formel des Psychologen Paul Fitts, kann dies sogar mathematisch berechnet werden: die Zeit, die benötigt wird, um ein Ziel zu erreichen, ist die Funktion aus Entfernung zum Ziel und Größe des Ziels.

Große Klickflächen kommen besonders – aber nicht ausschließlich – NutzerInnen mit motorischen Einschränkungen zugute, die häufig auch altersbedingt sind. Zittern, Versteifungen, Parkinson, ALS, spastische Bewegungsstörungen usw. bedingen erschwerten Umgang mit Maus und Tastatur. Dies betrifft auch NutzerInnen mit geringer Übung in der Nutzung einer Maus oder unter erschwerten technischen Bedingungen: Touchpad, verschmutzte Maussensorik, ungeeignete Mausunterlage. Auch sehbehinderte NutzerInnen können größere Klickflächen leichter wahrnehmen.

Analog dazu erwarten Web-NutzerInnen, dass Navigationsleisten über die volle Breite von Navigationselementen klickbar sind.

Logos, Bilder, Buttons und der Zurück-Button des Browsers werden u.a. auch deshalb häufig genutzt, weil ihre Klickflächen größer sind als jene von Textlinks.

Große Buttons sind darüber hinaus bei wichtigen Elementen als Blickfang geeignet.

Maßnahmen

• Verlinken Sie den gesamten Text eines Navigationselements (z.b. auch die verfügbare Stückanzahl).
• Machen Sie die gesamte Breite und Höhe eines Navigationspunktes klickbar, nicht nur den Text (Verwenden Sie dafür display:block und Padding für die einzelne Links).

• Verwenden Sie Hover- und Focus-Effekte – z.B. Änderung der Hintergrundfarbe – für die gesamte Navigationsbreite, nicht nur für den Link.

• Gestalten Sie Buttons mit ausreichender Größe.
• Erhöhen Sie bei kleinen Icons und Buttons die Klickfläche durch Padding.
• Vergrößern Sie die Klickfläche bei Formularen, insbesondere bei Radiobuttons und Checkboxes durch LABEL: die Beschriftung wird damit klickbar, der Cursor springt durch Klicken auf den Text ins Eingabefeld oder markiert Checkboxen und Radiobuttons.

Wer profitiert davon

• Alle NutzerInnen
• NutzerInnen mit Seheinschränkungen
• NutzerInnen mit motorischen Einschränkungen
• NutzerInnen mit kognitiven Einschränkungen

Beispiele

quelle.at: Trotz einiger Hürden war es auch einem blinden Nutzer möglich, den Quelle Checkout zu durchlaufen. Eine bessere semantische Struktur würde das allerdings wesentlich erleichtern.

quelle.at: Im Submenü links ist nur der Linktext selbst klickbar, nicht die Stückanzahl. Besser ist es, wenn ein Menüpunkt in der gesamten Navigationsbreite klickbar ist.