Marketing Glossar

2.413 Fachbegriffe aus 22 Bereichen des Online Marketings

Radio-Button

Definition: Ein Radio-Button (auch: Optionsfeld, Radio-Schaltfläche) ist ein Formularelement das die Einzelauswahl aus einer Gruppe von sich gegenseitig ausschließenden Optionen ermöglicht – nur eine Option der Gruppe kann gleichzeitig ausgewählt sein; die Auswahl einer Option deselektiert automatisch die zuvor gewählte. Der Name stammt von mechanischen Stationstastenleisten älterer Autoradios und Rundfunkempfänger: das Drücken einer Stationstaste löste alle anderen aus; Doug Engelbart (Stanford Research Institute; Menlo Park; CA) und Bill English implementierten dieses Interaktionsprinzip in die frühe Benutzeroberfläche des Xerox Alto (Xerox PARC; Palo Alto; CA; 1973) als Software-Pattern. Radio-Button-Anwendungsfälle: wenn der Nutzer genau eine Option aus 2–7 Möglichkeiten wählen soll; wenn alle Optionen gleichzeitig sichtbar sein sollen (Vergleich der Optionen wichtig); wenn eine Vorauswahl sinnvoll ist (häufigste/empfohlene Option vorab gewählt); Abgrenzung zu anderen Form-Controls: Checkbox (Mehrfachauswahl möglich; jede Checkbox unabhängig von anderen); Select/Dropdown (viele Optionen; platzsparend; aber: alle Optionen versteckt bis geöffnet; erschwerter Vergleich); Segmented Control/Button-Group (visuell modernere Alternative für 2–5 Optionen; besonders auf Mobile; bessere Touch-Targets); Toggle-Switch (für binäre Entscheidungen mit sofortiger Wirkung; kein Submit-Button nötig). Design-Richtlinie: 2–7 Optionen für Radio-Button; weniger als 2: nicht sinnvoll; mehr als 7: Select-Dropdown bevorzugen; Ausnahme: wenn Optionen stark unterschiedlich sind und Vergleich kritisch ist können mehr als 7 Radio-Buttons sinnvoll sein.

Erläuterung

Das Radio-Button-Pattern entstammt direkt der frühen GUI-Geschichte. Das Xerox Alto (Xerox PARC; Palo Alto; CA; 1973; Alan Kay/Butler Lampson/Charles Thacker) verwendete bereits Radio-Button-ähnliche Muster für exklusive Optionen in Dialogboxen; das Apple Macintosh System 1.0 (Apple Computer; Cupertino; CA; 1984; Susan Kare als Icon- und Interface-Designerin) formalisierte Radio-Buttons als runde Elemente (im Gegensatz zu quadratischen Checkboxen) in der Human Interface Guidelines (Apple HIG; erste Veröffentlichung 1985); das runde vs. quadratische Unterscheidungsmerkmal kommuniziert die semantische Differenz: rund = Einfachauswahl, quadratisch = Mehrfachauswahl; dieses Konvention ist bis heute in allen gängigen Design-Systemen implementiert. Luke Wroblewski (Product Director; Google; Mountain View; CA; «Web Form Design: Filling in the Blanks», Rosenfeld Media, 2008) analysierte Radio-Button-Usability in Webformularen: Radio-Buttons sind gegenüber Dropdowns vorzuziehen wenn (1) weniger als 7 Optionen vorhanden sind; (2) Nutzer die Optionen miteinander vergleichen müssen; (3) die Optionen nicht aus einem einzigen Oberbegriff bestehen; Wroblewski dokumentierte dass vorausgewählte Radio-Buttons (Defaults) die Formularabschlussrate erhöhen da Nutzer weniger Entscheidungsaufwand haben. Die W3C Web Accessibility Initiative (WAI; Cambridge; MA; WAI-ARIA Authoring Practices Guide 1.2; 2023; Joanmarie Diggs und James Nurthen als Hauptautoren) spezifiziert das Radio-Group-Pattern mit den Keyboard-Interaktionen: Pfeiltasten navigieren zwischen Radio-Buttons einer Gruppe (nicht Tab!) und wählen gleichzeitig aus; Tab navigiert zur nächsten Formulargruppe; Space wählt fokussierten Radio-Button aus. Baymard Institute (Aarhus; Dänemark; «Mobile Form Usability», 2023) analysierte Radio-Button-Performance auf Mobile: native HTML-Radio-Buttons haben auf Mobile oft zu kleine Touch-Targets (Standard-Rendering: 16–20px; WCAG-Minimum: 44×44px); custom-gestaltete Radio-Button-Karten (volle Breite; großes Touch-Target) erhöhen Mobile-Formular-Completion-Rate signifikant; visuelle Card-Radio-Buttons (gesamte Karte ist das klickbare Element) reduzieren Tipp-Fehler um 31% gegenüber kleinen Standard-Radio-Buttons. Google Material Design 3 (2021; Google; Mountain View; CA) differenziert zwischen Radio (Standard für Listen-Einzelauswahl), Chip Groups (für kompaktere Auswahl-Sets), und Segmented Buttons (für 2–5 Optionen mit einzeiliger Darstellung); die Wahl zwischen diesen Varianten richtet sich nach Kontext und Anzahl der Optionen.

HTML-Implementierung, Semantik und Keyboard-Navigation

Radio-Button vs. Alternativen und E-Commerce-Anwendungen

Praxistipp: Der häufigste Radio-Button-Fehler in E-Commerce-Formularen: zu kleine Touch-Targets. Der runde Radio-Button selbst ist oft nur 16–20px groß; auf Mobile kaum klickbar. Lösung: Machen Sie das gesamte Label zur Klickfläche durch display:flex auf dem Label mit 12–16px vertikalem Padding – das erhöht die Touch-Target-Höhe auf 44–48px ohne das visuelle Design zu verändern. Und vergessen Sie fieldset/legend nicht: ohne diese sind Radio-Button-Gruppen für Screen-Reader-Nutzer kontextlos – sie hören «Kreditkarte, Radio-Button» ohne zu wissen dass es um «Zahlungsmethode» geht.