Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03149.jsonl.gz/2973

Checkboxen oder Radio-Buttons?
Selbst bedeutende Websites begehen elementare Fehler bei der Verwendung grundlegender Kontrollelemente der Nutzeroberflä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.
by Jakob Nielsen (deutsche Übersetzung) - 27.09.2004
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.
Bleiben Sie auf dem Laufenden! Lassen Sie sich über aktuelle Produkte, Lösungen, Dienstleistungen und Weiterbildungsmöglichkeiten informieren. Die Foobar Corp. und ausgesuchte Organisationen liefern Ihnen Informationen über weitere Angebote.Dürfen wir Ihnen Neuigkeiten per E-Mail zuschicken?
Ja, bitte schicken Sie mir Informationen über weitere Angebote per E-Mail.
Wenn Ihnen das lieber ist, werden wir die gemachten Angaben nicht zur Kontaktaufnahme verwenden.
Bitte verwenden Sie meine hier verwendeten Kontaktdaten nicht, um mir Informationen über weitere Angebote zu schicken.
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 Nutzern 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 Nutzer mit Ja oder Nein antworten. Die Empfehlung auf Grund von Nutzertests mit E-Commerce-Sites lautet, die Checkbox in der Grundeinstellung leer zu lassen, damit die Nutzer 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:
- Radio-Buttons verwendet man für Listen mit zwei oder mehr Optionen, die sich gegenseitig ausschliessen, aus denen der Nutzer 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.
- Checkboxen verwendet man, wenn der Nutzer 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.
- Eine einzelne Checkbox verwendet man für eine einzelne Option, die der Nutzer 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
- 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.
- 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 Nutzer 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.
Eins Zwei Drei Vier Fünf Sechs Sieben
- Formulieren Sie die Checkbox-Beschriftungen derart, dass die Nutzer 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.
- Falls die Nutzer 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 Nutzern 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.
- 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.
- Wenn der Nutzer 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 Nutzer 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 Nutzer, aber viele, zumal das seit 1984 Design-Standard ist.)
Weil viele Nutzer 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 Nutzeroberflä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 Nutzern 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 Nutzer die Beschriftungen verstehen und die Schalter korrekt nutzen 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.
© Deutsche Version von Jakob Nielsens Alertbox. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.