Verwende eine RadioGroup, um z. B. ...
-
eine Einfachauswahl von 2 bis ungefähr 7 Optionen anzuzeigen.
-
Optionen mit unterschiedlicher Textlänge darzustellen.
Täglicher Kaffeekonsum(optional)
Grundlagen
Eine RadioGroup enthält mehrere Radios oder RadioButtons als Optionsmöglichkeiten, von denen jeweils nur eine vom User ausgewählt werden kann. Die ausgewählte Option wird durch einen ausgefüllten Kreis gekennzeichnet. Zu Beginn ist häufig eine sinnvolle Option vorausgewählt.
Best practices
Achte bei der Verwendung einer RadioGroup darauf, dass ...
- ein Label verwendet wird, wenn der User die RadioGroup sonst nicht selbstständig verstehen kann. Ein anderes beschreibendes Element in Nähe der RadioGroup, kann das Label ersetzen, z. B. eine Heading.
- die Reihenfolge der Optionen gut gewählt ist. In den meisten Fällen ist es sinnvoll, die wichtigsten Optionen an den Anfang zu stellen. Wenn die RadioGroup in Umfragen verwendet wird, kann es stattdessen sinnvoll sein, die Optionen zufällig zu mischen.
- die Optionen für den User leicht zu unterscheiden sind, um Unsicherheit über die richtige Wahl zu vermeiden.
- es nicht zu viele Optionen sind. Idealerweise sind es 2-7 Optionen. Bei mehr Optionen oder wenn die Optionen nicht sofort sichtbar sein sollen, ist ein Select die bessere Wahl.
- die Auswahl durch das Anklicken eines Speicher-Buttons bestätigt werden muss.
- es oft ratsam ist, zu Beginn eine Option vorzuselektieren, um Fehlermeldungen zu vermeiden.
Verwendung
Verwende eine RadioGroup, um ...
- dem User eine Einfachauswahl mit ungefähr 2-7 direkt sichtbaren Optionen anzubieten.
- als Einfachauswahl-Components in Umfragen verwendet zu werden.
- Einstellungen vorzunehmen, bei denen immer genau eine Option ausgewählt werden muss.
RadioGroup vs. SegmentedControl
Flow bietet verschiedene Auswahl-Components an. RadioGroup und SegmentedControl ähneln sich sehr. In den Cards unter dem Text sind hilfreiche Anhaltspunkte für eine Abgrenzung.
Verwende eine SegmentedControl, um z. B. ...
-
eine Einfachauswahl von 2 bis 5 Optionen anzuzeigen.
-
Optionen anzuzeigen, die aus 1 bis 2 Wörtern bestehen.
-
Optionen anzuzeigen, die den darunterliegenden Inhalt verändern.
Anwendung
Position
RadioGroups werden häufig in Formularen verwendet.
- Radios dürfen nur untereinander und linksbündig dargestellt werden.
- RadioButtons dürfen untereinander und nebeneinander verwendet werden.
Hierarchie
Da RadioGroups aus mehreren Optionen bestehen, müssen diese in eine logische Reihenfolge gebracht werden. Folgende Punkte können dabei interessant sein:
- In den meisten Fällen sollte die wichtigste Option an erster Stelle stehen. Die wichtigste Option kann z. B. diejenige sein, die am häufigsten vom User gewählt wird.
- Eine Option, die ein hohes Risiko für den User darstellt, sollte weiter unten in der Liste erscheinen und niemals vorselektiert sein.
- Da eine RadioGroup in der Regel bereits über eine vorselektierte Option verfügt, wird die RadioGroup automatisch für den User zur Pflicht. Daher muss es immer eine Option geben, die der tatsächlichen Auswahl des Users entspricht. Dies bedeutet zum Beispiel, dass in einer Liste von Optionen am Ende eine Option mit der Bezeichnung „Andere“ oder „Keine“ angeboten wird.
Wohnort(optional)
Do
Der User kann hier den letzten Punkt auswählen, wenn die anderen Optionen nicht zutreffen.
Wohnort(optional)
Don't
Wenn der User woanders wohnt, kann er hier keine richtige Wahl treffen.
Inhalt
Radio
Ein Radio besteht aus zwei Bestandteilen: Einem Kreis, der anzeigt, ob eine Option ausgewählt ist oder nicht, und einem kurzen beschreibenden Text. Radios werden immer untereinander angeordnet und werden häufig in Umfragen verwendet.
RadioButton
Auf Benutzeroberflächen sind häufiger RadioButtons anstelle von Radios zu finden. RadioButtons haben den Vorteil, dass ...
- mehr Inhalt dargestellt werden kann. RadioButtons können auch eine Headline, Fließtext und einen Subtext besitzen. Dabei sollte der Fließtext, jedoch nicht länger als 2-3 Zeilen Text sein.
- die Klickfläche durch die Umrandung deutlicher wird und dadurch schneller dem User ins Auge springt.
- sie durch das ColumnLayout und die visuelle Umrandung auch nebeneinander dargestellt werden können.
Writing guidelines
Label
Ein Label soll dem User helfen herauszufinden, worum es sich bei der RadioGroup handelt:
- Labels sind platzsparender und unauffälliger. Sie werden verwendet, wenn 1-3 Wörter ausreichen, um die Optionen der RadioGroup zu beschreiben. Wenn mehr Wörter benötigt werden, kann z. B. eine Heading in der Nähe der RadioGroup platziert werden.
- Achte darauf, dass die Wortwahl verständlich ist und keinen Interpretationsspielraum lässt.
Do
Don't
Optionen
Radios und RadioButtons unterscheiden sich in einigen Punkten, die folgenden Punkte sollten jedoch bei beiden berücksichtigt werden:
- Beginne eine Option immer mit einem Großbuchstaben.
- Versuche die Option so kurz wie möglich zu beschreiben. In einem RadioButton können mehrere Sätze in der Mitte stehen, versuche aber nicht mehr als 3 Sätze zu schreiben.
- Wenn die Optionen Zahlen enthalten, sollten sich diese nicht überlappen oder zwischendrin Zahlen ausgelassen werden.
Alter(optional)
Do
Die Auswahl ist eindeutig, da sich kein Alter überschneidet.
Alter(optional)
Don't
Die Optionen überschneiden sich hier, sodass einige User zwei Optionen auswählen müssten.
Accessibility
Achte bei der RadioGroup darauf, dass ...
- wenn kein Label verwendet wird ein passendes AriaLabel für den Screenreader gesetzt wird, zum Beispiel bei einer Heading muss eine aria-labelledby verwendet werden.
- nie eine Option mit hohem Risiko zum Start vorausgewählt ist, damit diese nicht versehentlich ausgewählt wird. Zum Beispiel sollte darauf geachtet werden, wenn es um Bezahlung geht.
- die Auswahl durch einen Button bestätigt werden muss.