Zusammenfassung
Selbst bedeutende Websites begehen elementare Fehler bei der Verwendung grundlegender Kontrollelemente der Benutzeroberfläche. Die Hauptrichtlinien dürften allen klar sein, aber es gibt zehn weitere Punkte, auf die man bei der Verwendung von Checkboxen und Radio-Buttons achten sollte.

Neulich bin ich auf der Registrierungsseite einer grösseren Website auf den folgenden Kasten gestossen. Er enthält mindestens zwei Designfehler. Schauen Sie, ob Sie die Fehler finden, bevor Sie weiterlesen.

Fehler Nummer 1 hat mit dem Schwerpunkt dieses Beitrags zu tun: der falschen Verwendung von Checkboxen anstatt Radio-Buttons. Weil die beiden Alternativen oben sich gegenseitig ausschliessen, sollte die Seite den Benutzern Radio-Buttons anbieten, die nur eine Auswahl zulassen.

Fehler Nummer 2 ist es, gleich zwei Fragen auf einmal zu stellen und diese dann auch noch in einen grossen, wortreichen Kasten zu setzen. Eine einzelne, kürzere Frage wäre an dieser Stelle viel passender: "Ja, bitte senden Sie mir Informationen über aktuelle Produkte, Lösungen, Dienstleistungen und Weiterbildungsmöglichkeiten."

Ironischerweise wäre dann für den Fall mit nur einer Frage eine einzelne Checkbox korrekt gewesen, denn dann würde der Benutzer mit Ja oder Nein antworten. Die Empfehlung auf Grund von Benutzertests mit E-Commerce-Sites lautet, die Checkbox in der Grundeinstellung leer zu lassen, damit die Benutzer sie aktiv anklicken müssen, um sich für weitere Informationen anzumelden.

Wann man welche Bildschirmschalter verwendet

Seit der allerersten Ausgabe von Inside Macintosh, 1984, ist die Regel immer gleich geblieben, wann man Checkoxen und wann man Radio-Buttons verwendet. Alle späteren GUI-Standards und die offiziellen W3C-Web-Standards haben die Definition dieser beiden Schalter übernommen:

1. Radio-Buttons verwendet man für Listen mit zwei oder mehr Optionen, die sich gegenseitig ausschliessen, aus denen der Benutzer sich für genau eine Option entscheiden soll. Mit anderen Worten, jeder Klick auf einen leeren Radio-Button löscht die Auswahl, die man in der Liste bereits getroffen hat.
   
2. Checkboxen verwendet man, wenn der Benutzer aus einer Liste von Optionen eine beliebige Anzahl auswählen kann, sei es null, eine oder mehrere. Mit anderen Worten, jede Checkbox ist unabhängig von den anderen Checkboxen in der Liste; wenn man eine davon anklickt, bleibt die vorher getroffene Auswahl bestehen.
   
3. Eine einzelne Checkbox verwendet man für eine einzelne Option, die der Benutzer an- oder abschalten kann.

Hört sich einfach an, oder? - Doch oft stosse ich auf Websites, die Radio-Buttons und Checkboxen falsch verwenden. Auch nach zwanzig Jahren ist es daher angebracht, diese Richtlinien noch einmal festzuhalten.

Weitere Richtlinien

4. Verwenden Sie standardisierte visuelle Symbole. Eine Checkbox sollte ein kleines Quadrat sein, das im angeklickten Zustand ein Häkchen oder ein X hat. Ein Radio-Button sollte ein kleiner Kreis sein, der einen ausgefüllten Kreis in der Mitte trägt, wenn er angeklickt ist.
   
5. Stellen Sie Gruppen von Optionen visuell auch als Gruppen dar, und heben Sie sie deutlich von anderen Gruppen auf der Seite ab. Das Kastenbeispiel oben verletzt diese Richtlinie, weil das Layout den Anschein erweckt, die beiden Checkboxen stünden für verschiedene Themenbereiche, während es in Wirklichkeit alternative Optionen für ein und denselben Gegenstand sind.
   
   • Verwenden Sie Zwischenüberschriften, um eine lange Liste von Checkboxen in logische Gruppen zu gliedern. Dadurch ist die Auswahl schneller zu überfliegen und leichter zu verstehen. Das Risiko besteht, dass die Benutzer jede Untergruppe als eigenständigen Satz von Optionen ansehen, aber für Checkboxen ist das nicht unbedingt fatal - in jedem Fall steht jede Box für eine unabhängige Auswahl. Eine Liste von Radio-Buttons dagegen muss immer einheitlich erscheinen, darf also nicht mit Zwischenüberschriften aufgegliedert werden.
6. Ordnen Sie die Listen senkrecht an, mit einer Auswahl pro Zeile. Wenn Sie eine waagerechte Anordnung mit mehreren Optionen pro Zeile verwenden müssen, stellen Sie sicher, dass die Abstände zwischen den Schaltern und Beschriftungen keinen Zweifel daran lassen, welcher Schalter zu welcher Beschriftung gehört. In der folgenden Liste ist es zum Beispiel schwierig, den richtigen Radio-Button für Option vier auszumachen:

7. Beschriften Sie Checkboxen in positiver, aktiver Sprache, damit eindeutig ist, was passiert, wenn der Benutzer die Checkbox anwählt. Mit anderen Worten, vermeiden Sie Negationen wie "Bitte senden Sie mir keine weiteren E-Mails", bei denen der Benutzer eine Box anklicken muss, damit etwas nicht passiert.
   
   • Formulieren Sie die Checkbox-Beschriftungen derart, dass die Benutzer sowohl wissen, was passiert, wenn sie eine bestimmte Box anklicken, als auch, was passiert, wenn sie sie nicht anklicken.
     
   • Wenn das nicht möglich ist, ist es besser, zwei Radio-Buttons zu verwenden - einen für "Funktion an", einen für "Funktion aus" - und beide Fälle eindeutig zu beschriften.
     
8. Setzen Sie wenn möglich Radio-Buttons anstelle von Drop-Down-Menüs. Radio-Buttons sind oft besser, weil sie alle Optionen permanent sichtbar machen und der Benutzer sich seine Entscheidung besser überlegen kann. Ausserdem sind Radio-Buttons leichter zu bedienen von Nutzern mit Schwierigkeiten, präzise Mausbewegungen auszuführen. (Platzmangel kann Sie gelegentlich zwingen, gegen diese Richtlinie zu verstossen - aber versuchen Sie, wo immer möglich die Optionen sichtbar zu machen.)
9. Bieten Sie für Radio-Button-Listen immer eine Vorauswahl an. Per Definition ist bei Radio-Buttons immer genau eine Option ausgewählt, deshalb sollten Sie sie nicht ohne eine Vorauswahl anzeigen. (Checkboxen dagegen erscheinen meist ohne Vorauswahl.)
   • Falls die Benutzer die Möglichkeit haben sollen, eine Auswahl zu überspringen, müssen Sie einen Radio-Button für diese Option anbieten - etwa einen mit der Aufschrift "Nichts dergleichen". Es ist dabei besser, den Benutzern auch eine ausdrücklich neutrale Option anzubieten als dass sie implizit versuchen, nichts aus der Liste auszuwählen, besonders weil letzteres gegen die Richtlinie verstösst, dass immer genau eine Option ausgewählt sein soll.
10. Weil Radio-Buttons genau eine Auswahl verlangen, müssen Sie sicher stellen, dass die Optionen wirklich alle Fälle abdecken und sich auch eindeutig voneinander unterscheiden. In Tests mit älteren Benutzern zum Beispiel konnten die Leute ein Formular nicht ausfüllen, das von ihnen verlangte, einen Beruf auszuwählen, weil es keine Option "im Ruhestand" gab. Sollte es nicht möglich sein, sämtliche Fälle abzudecken, bieten Sie einen Knopf mit der Aufschrift "Sonstiges" an, mit einem Eingabefeld daneben.
11. Ermöglichen Sie eine Auswahl sowohl durch Anklicken des Buttons bzw. der Box selbst als auch durch Anklicken der dazugehörigen Beschriftung. Gemäss dem Fitts'schen Gesetz ist ein grösseres Ziel schneller anzuklicken. In HTML-Formularen können Sie das leicht erreichen, indem Sie jede Beschriftung mit <label>-Tags kodieren, wie ich es oben bei dem Beispiel mit den waagerechten Radio-Buttons getan habe (klicken Sie auf das Wort "vier", um die Option auszuwählen). Beim Testen von Web-Applikationen in Flash haben wir herausgefunden, dass Benutzerfehler weiter reduziert werden können, wenn man Klickbereiche grosszügig bemisst und ein paar Pixel über das sichtbare Klickfeld hinausragen lässt. (Dieser Effekt ist mit HTML schwer zu erreichen, aber mit ein paar CSS-Tricks liesse sich das implementieren.)
12. Legen Sie Tastaturkürzel für häufig benutzte Checkboxen und Radio-Buttons fest, damit die Benutzer Ihre Auswahl rasch über die Tastatur treffen können. Das steigert die Barrierefreiheit für behinderte Nutzer und beschleunigt zudem die Bedienung für erfahrene Benutzern. (In meinem Beispiel mit den waagerechten Radio-Buttons können Sie ALT-5 eingeben, um die Option "Fünf" auszuwählen.)
    • Wenn es Standards für Tastencodes gäbe, würde ich empfehlen, diese zu befolgen. Leider haben wir derzeit noch keine entsprechenden Standards. Legen Sie stattdessen innerhalb Ihrer Organisation einen Standard für häufig vorkommenden Optionen fest, damit jede Option in Ihrer Website und in Ihrem Intranet die gleichen Kürzel hat.
13. Verwenden Sie Checkboxen und Radio-Buttons nur, um Einstellungen zu verändern, und nicht als Aktionsschalter zur Auslösung von irgendetwas. Ausserdem sollten die veränderten Einstellungen immer erst dann greifen, wenn der Benutzer einen Eingabeknopf betätigt (zum Beispiel mit der Aufschrift "OK" oder "Weiter zu X", wenn "X" der nächste Schritt eines Vorgangs ist).
    • Wenn der Benutzer den "Zurück"-Knopf anklickt, sollten alle über Checkboxen und Radio-Buttons vorgenommenen Änderungen rückgängig gemacht und die ursprünglichen Einstellungen wiederhergestellt werden. Die gleiche Richtlinie gilt natürlich auch, falls der Benutzer einen "Abbruch"-Knopf ("Cancel") anklickt (wobei Webseiten mit Navigation eigentlich keine Abbruch-Option brauchen, weil der "Zurück"-Knopf dem gleichen Zweck dient).
    • Wenn ein Anwender zuerst "Zurück" und dann "Vorwärts" drückt, interpretiert man das am besten im Sinne des "Rückgängig" und "Wiederherstellen"-Funktionspaares, d.h. die ganze Erscheinung und alle Eingaben sollten sich so präsentieren, als ob der Anwender nie auf den "Zurück"-Knopf gedrückt hätte. Änderungen sollten noch keine Auswirkungen auf später haben, bevor der Anwender im nächsten Schritt auf "OK" oder etwas in dem Sinne klickt.

Warum diese Richtlinien wichtig sind

Betreibe ich bloss Haarspalterei, wenn ich auf dem korrekten Gebrauch von Checkboxen und Radio-Buttons bestehe? - Nein. Es gibt gute Usability-Gründe dafür, die GUI-Standards zu befolgen und die Schalter korrekt zu verwenden.

Hauptgrund: Das Befolgen von Design-Standards verbessert die Fähigkeit der Anwender vorauszusagen, was ein Schalter tun wird und wie sie ihn bedienen müssen. Wenn sie eine Liste von Checkboxen sehen, wissen sie, dass sie mehrere Optionen auswählen können. Wenn sie eine Liste von Radio-Buttons sehen, wissen sie dagegen, dass sie nur eine auswählen können. (Natürlich wissen das nicht alle Benutzer, aber viele, zumal das seit 1984 Design-Standard ist.)

Weil viele Benutzer wissen, wie man Standard-GUI-Funktionen bedient, stärkt ein korrekter Einbau dieser Design-Elemente ihr Gefühl der Kontrolle, das Gefühl, die Technik zu beherrschen. Wenn man die Standards verletzt, fühlt sich die Benutzeroberfläche dagegen brüchig an - so, als ob alles Mögliche passieren könnte. Stellen wir uns zum Beispiel vor, dass Sie durch Ihre Erfahrung davon ausgehen, einen Radio-Button ohne sofortige Wirkung anklicken und Ihre Entscheidungen dann solange noch ändern zu können, bis Sie auf "OK" klicken. Sie würden vermutlich entsetzt ausrufen, wenn die Website diesen Standard verletzt und Sie unerwartet auf die nächste Seite befördert, sobald Sie eine Auswahl getroffen haben. Schlimmer noch: Sie werden verunsichert, weil Sie nicht wissen, was alles passieren könnte, wenn Sie irgendwo anders in der Site mit Formularen arbeiten.

Die grössten Usability-Probleme für Checkboxen und Radio-Buttons stammen aber von unklaren, irreführenden Beschriftungen oder davon, dass Optionen so beschrieben werden, dass sie für Durchschnittsnutzer unmöglich zu interpretieren sind. Eine Kontexthilfe kann das letztere Problem beheben, aber noch besser ist es, jeden wichtigen Satz Interaktionsschalter mit Benutzern zu testen. Zum Glück sind Checkboxen und Radio-Buttons leicht mit Papierprototypen zu testen, so dass man nicht erst etwas implementieren muss, um zu erkennen, ob die Benutzer die Beschriftungen verstehen und die Schalter korrekt benutzen können.

Kein professioneller Interaktionsdesigner würde den Fehler machen, Checkboxen zu verwenden, wo Radio-Buttons angezeigt sind. Der Unterschied zwischen diesen beiden Schaltern ist eines der ersten Dinge, die in jedem Interaktionskurs gelehrt werden. Daher noch ein letzter Grund, die richtigen Schalter zu verwenden: Wenn Sie es nicht tun, hält man Sie für einen Amateur.

Zurück zu Jakobs Alertbox

Zurück zur Homepage