Nimm ein beliebiges Formular, in dem Besucher aus einer Liste von Optionen wählen sollen, und dir fällt etwas auf. Das Formular scheitert nicht, weil es zu viele Fragen stellt. Es scheitert, weil jemand für diese Frage den falschen Feldtyp gewählt hat. Ein Dropdown, wo Radiobuttons schneller wären. Checkboxen, wo nur eine Antwort Sinn ergibt. Radiobuttons, wo ein Dropdown den halben Platz auf dem Bildschirm sparen würde.
Das sind keine Kleinigkeiten. Untersuchungen zeigen, dass die Wahl des Feldtyps zu den häufigsten Gründen gehört, warum Besucher Formulare abbrechen. Eine einzige falsche Entscheidung zwischen Dropdown, Radiobutton und Checkbox kann deine Abbruchrate um 15 % oder mehr in die Höhe treiben. Der Besucher ist nicht verwirrt, weil er sich nicht entscheiden kann. Er ist verwirrt, weil der gewählte Feldtyp das falsche Signal sendet, was das Formular erwartet.
Dieser Artikel behandelt die praktischen Regeln für die Wahl zwischen Dropdowns, Radiobuttons und Checkboxen. Du lernst, welcher Feldtyp für welches Szenario am besten passt, was jeder Typ dem Besucher signalisiert und wie du die Fehler vermeidest, die Besucher zum Abbruch bringen. Wenn du diese Entscheidungen beherrschst, verstehst du, warum manche Marken beim selben Formular deutlich höhere Abschlussraten erzielen, nur weil sie einen Feldtyp geändert haben.
Warum der Feldtyp die Abschlussrate stärker beeinflusst, als die meisten denken
Ein Dropdown-Feld, ein Radiobutton und eine Checkbox erfassen alle eine Auswahl aus einer Liste. Oberflächlich wirken sie austauschbar. Die Unterschiede sind fein. Die Wirkung ist es nicht.
Sieht ein Besucher ein Dropdown, weiss er, dass er klicken muss, um die Optionen zu sehen. Bis zum Klick sind die Optionen versteckt. Das kostet einen zusätzlichen Schritt. Bei Radiobuttons sind die Optionen sofort sichtbar. Er kann alle auf einmal überblicken und wählen, ohne vorher zu klicken. Bei einer Checkbox versteht er, dass er mehrere Punkte auswählen kann, nicht nur einen.
Diese Unterschiede verändern, wie Besucher mit deinem Formular umgehen. Sie verändern die gedankliche Last. Sie verändern, wie schnell jemand seine Entscheidung trifft. Sie verändern, ob sich das Formular einfach oder überwältigend anfühlt. Machst du das richtig, brechen weniger Menschen dein Formular ab. Machst du es falsch, klicken Besucher weg, weil sich das Formular nicht intuitiv anfühlt, auch wenn es technisch funktioniert.
Der schlimmste Fehler ist der falsche Feldtyp für die Situation. Ein Dropdown für zwei Optionen wirkt übertrieben. Radiobuttons für 15 Optionen wirken überladen und erdrückend. Checkboxen, wenn jemand nur eine Option wählen soll, verwirren, was man auswählen darf. Jede falsche Wahl kostet dich Conversions.
Dropdowns passen am besten für lange Listen, bei denen der Standardwert egal ist
Ein Dropdown ist ein Feld, das Optionen versteckt, bis jemand zum Aufklappen klickt. Die Auswahl liegt hinter einem Klick. Deshalb eignen sich Dropdowns perfekt für eine bestimmte Situation: Du hast viele Optionen, und wenig Platz auf dem Bildschirm ist wichtig.
Nutze ein Dropdown, wenn du mehr als sieben Optionen hast. Ab hier wirkt das Formular überladen, wenn du alle Optionen als Radiobuttons oder Checkboxen zeigst. Ein Dropdown faltet alle Optionen in ein einziges Feld zusammen, das fast keinen vertikalen Platz braucht. Deshalb sind Dropdowns in mobilen Formularen Standard. Ein Smartphone-Bildschirm ist schmal. Dropdowns sparen Platz.
Dropdowns funktionieren auch gut, wenn die Wahl naheliegt und der Besucher eine klare Antwort im Kopf hat. Denk an die Auswahl eines Landes oder Bundeslandes. Die meisten wissen sofort, welches sie wollen. Sie tippen den ersten Buchstaben, um zur Option zu springen, oder klicken und scrollen. Die Interaktion ist schnell, weil die Frage leicht ist.
Doch hier scheitern Dropdowns. Sie scheitern, wenn Besucher Optionen vergleichen müssen, bevor sie sich entscheiden. Sie scheitern, wenn die Liste anders sortiert ist, als Besucher es erwarten. Sie scheitern, wenn es keinen Standardwert gibt und ein Besucher klicken muss, nur um zu sehen, welche Optionen es gibt.
Ein Beispiel: Ein Formular fragt per Dropdown nach der Essenspräferenz. Die Optionen sind durcheinander (Meeresfrüchte, vegetarisch, Hähnchen, Rind, vegan, glutenfrei). Ein Besucher weiss nicht, welche Optionen es gibt, ohne zu klicken. Wenn er klickt und die Liste sieht, muss er alle Optionen durchgehen, um zu entscheiden. Er kann sie nicht alle auf einmal vergleichen. Das dauert länger, als wenn die Optionen als Radiobuttons sichtbar wären. Usability-Forschung zeigt, dass Dropdowns Entscheidungen verlangsamen, wenn Nutzer mehrere Optionen bewerten müssen.
Nutze Dropdowns, wenn Besucher wissen, was sie suchen, und es viele Optionen gibt. Meide sie, wenn Besucher Optionen vergleichen müssen oder es weniger als sieben Auswahlmöglichkeiten gibt.
Radiobuttons passen, wenn du zwischen zwei und fünf Optionen hast
Ein Radiobutton zeigt neben jeder Option ein rundes Auswahlfeld. Klickt jemand eins an, werden die anderen automatisch abgewählt. Es kann immer nur eine Option ausgewählt sein. Deshalb heissen sie "Radio"-Buttons, wie bei alten Autoradios, bei denen das Drücken einer neuen Sendertaste die vorherige löste.
Radiobuttons funktionieren hervorragend, wenn Besucher eine klare, kleine Auswahl haben. Wenn dein Formular nach einem Abo-Tarif fragt und du drei Stufen anbietest, sind Radiobuttons die perfekte Wahl. Der Besucher sieht alle drei auf einmal. Er kann Preis, Funktionen und Vorteile im Kopf sofort vergleichen. Er klickt einen an. Fertig. Keine versteckten Optionen. Keine Verwirrung.
Radiobuttons funktionieren auch gut, wenn eine Option klar der Standard oder die beliebteste Wahl ist. Stell dir ein Formular vor, das fragt, wie Besucher auf deine Marke aufmerksam wurden. Du bietest fünf Optionen an, und die meisten wählen "Google-Suche". Weil die Radiobuttons sichtbar sind, sehen Besucher, die über Google gesucht haben, ihre Antwort sofort und klicken sie an. Sie müssen kein Dropdown öffnen und sich fragen, ob ihre Antwort in der Liste steht.
Die Usability-Forschung ist eindeutig. Sind die Optionen sichtbar, entscheiden Menschen schneller. Wenn Menschen alle Auswahlmöglichkeiten ohne zusätzlichen Klick sehen, steigen die Abschlussraten. Deshalb schlagen Radiobuttons Dropdowns bei kleineren Listen.
Bei fünf oder sechs Optionen wirken Radiobuttons langsam überladen. Mit mehr als sieben sieht das Formular erdrückend aus. Jeder Radiobutton braucht vertikalen Platz. Ein Formular mit acht Radiobutton-Optionen für "Was interessiert dich am meisten?" wirkt viel länger als nötig. Ab hier ist ein Dropdown sinnvoller.
Nutze Radiobuttons bei zwei bis fünf Optionen, wenn Besucher vom Vergleichen profitieren. Meide sie bei mehr als sieben Optionen.
Checkboxen sind für Auswahlen, bei denen mehrere Antworten richtig sind
Eine Checkbox sieht aus wie ein kleines Quadrat. Beim Klick zeigt sie ein Häkchen. Anders als bei Radiobuttons können mehrere Checkboxen in derselben Gruppe gleichzeitig angehakt sein. Das ist der entscheidende Unterschied. Checkboxen sind keine Alternativen zueinander. Es sind unabhängige Entscheidungen.
Checkboxen passen, wenn die Frage mehr als eine Antwort erlaubt. Ein Formular, das fragt "Welche dieser Funktionen interessieren dich?", nutzt Checkboxen, weil ein Besucher Produktanalyse, Kundenfeedback und Automatisierungsintegration gleichzeitig wählen könnte. Jede Checkbox ist eine eigene, unabhängige Entscheidung und keine Alternative zu den anderen.
Checkboxen passen auch für Zustimmungen. "Ich stimme den Geschäftsbedingungen zu" ist eine Checkbox, weil es eine Ja-oder-Nein-Aussage ist. Der Besucher stimmt zu oder nicht. Ebenso ist "Sendet mir E-Mail-Updates" eine einzelne Checkbox, weil sie eine einzelne Entscheidung darstellt.
Die Verwirrung entsteht, wenn Checkboxen verwendet werden, wo Radiobuttons nötig wären, oder umgekehrt. Ein Formular, das fragt "Welchen Tarif willst du?", sollte keine Checkboxen nutzen. Niemand kann alle drei Tarife wollen. Die Auswahlmöglichkeiten schliessen sich gegenseitig aus. Hier sind Radiobuttons richtig.
Checkboxen leiden auch unter demselben Häufungsproblem wie Radiobuttons. Mehr als sieben oder acht Checkboxen in einer Gruppe lassen das Formular erdrückend wirken. Optisch sehen viele Checkboxen nach viel Arbeit aus, selbst wenn der Besucher nur ein oder zwei Punkte wählen muss.
Nutze Checkboxen nur, wenn Besucher berechtigterweise mehrere Optionen gleichzeitig wählen können. Meide sie bei Fragen mit nur einer Antwort und teile grosse Mengen an Checkboxen in kleinere, zusammengehörige Kategorien.
So entscheidest du, wenn du unsicher bist, welches Feld du nutzen sollst
Meistens ist die Entscheidung klar. Manchmal liegt eine Frage aber in einer Grauzone. Du hast fünf Optionen und bist nicht sicher, ob Radiobuttons oder ein Dropdown besser passen. Dieser Entscheidungsbaum funktioniert.
Schritt 1. Kann der Besucher mehr als eine Antwort wählen? Wenn ja, nutze Checkboxen. Wenn nein, geh zu Schritt zwei.
Schritt 2. Wie viele Optionen gibt es? Weniger als sechs Optionen: weiter zu Schritt drei. Mehr als sieben Optionen: nutze ein Dropdown.
Schritt 3. Müssen Besucher die Optionen vergleichen, um sich zu entscheiden? Wenn ja, nutze Radiobuttons, damit alle Optionen auf einmal sichtbar sind. Wenn nein und die Antwort offensichtlich ist, funktionieren Radiobuttons oder ein Dropdown, aber Radiobuttons sind etwas schneller.
Dieser einfache Entscheidungsbaum löst 90 % der Fragen zum Feldtyp, die beim Gestalten von Formularen auftauchen. Für die Fälle, in denen du dir weiter unsicher bist, teste beide Varianten mit echten Besuchern. Lass dein Formular eine Woche mit Radiobuttons laufen und miss die Abschlussrate. Wechsle zu einem Dropdown, lass es eine weitere Woche laufen und vergleiche. Echte Daten deiner Besucher schlagen jede Designregel, denn deine Besucher füllen deine Formulare aus.
Häufige Fehler, die die Abschlussrate drücken, ohne dass jemand merkt, warum
Der erste Fehler ist ein Dropdown für zwei oder drei Optionen. Das passiert öfter, als du denkst. Ein Formular fragt "Wie hast du uns gefunden?" und die Optionen sind "Suchmaschine", "Social Media" und "Empfehlung". Ein Dropdown versteckt diese Optionen. Ein Besucher muss das Dropdown anklicken, um sie zu sehen. Er weiss nicht, welche Optionen es gibt, ohne zu klicken. Das erzeugt grundlos Reibung. Radiobuttons sind hier schneller und fühlen sich intuitiver an.
Der zweite Fehler sind acht oder neun Radiobuttons, wo ein Dropdown ein Zehntel des Platzes brauchen würde. Ein Formular lässt Besucher ihr Land aus einer Liste von 195 Ländern wählen. Radiobuttons würden endlos scrollen. Ein Dropdown mit Autovervollständigung löst das sofort. Manche Designer bleiben bei Radiobuttons, weil sie intuitiver wirken, und übersehen, dass diese Intuitivität verschwindet, wenn man durch 50 Optionen scrollen muss.
Der dritte Fehler sind Checkboxen bei einer Frage mit nur einer Antwort. Ein Formular fragt "Welchen Tarif hast du?" und zeigt drei Checkboxen, eine pro Tarif. Besucher sind verwirrt. Können sie alle drei wählen? Die Checkbox sendet das falsche Signal. Radiobuttons sind klarer, weil sie optisch vermitteln, dass nur eine Auswahl möglich ist.
Der vierte Fehler ist, nicht klar zu sagen, was ein Feld bedeutet. Eine Gruppe Checkboxen erscheint mit dem Label "Interessen" und ohne Erklärung. Der Besucher weiss nicht, ob er nur eine oder so viele wie zutreffend wählen soll. Bei Unklarheit sinken die Abschlussraten. Klare Labels beheben das. "Alle zutreffenden auswählen" oder "Eine auswählen" sagt dem Besucher genau, was das Feld erwartet.
Der fünfte Fehler ist der falsche Umgang mit Standardwerten. Ein Dropdown, das mit "Option auswählen" als Standard startet, wirkt kaputt. Ein Dropdown, das mit "Deutschland" als Standard startet, wirkt hilfreich, wenn die meisten Besucher von dort kommen. Radiobuttons ohne vorgewählte Option zwingen den Besucher zu einem Klick. Radiobuttons mit der häufigsten Antwort vorgewählt sparen dem Besucher einen Klick. Diese kleinen Standardwerte summieren sich über ein ganzes Formular.
Überlegungen für Mobilgeräte, die die Wahl des Feldtyps verändern
Smartphones sind kleiner. Das verändert die Entscheidung über den Feldtyp deutlich.
Am Desktop fühlen sich drei Radiobuttons für eine einfache Auswahl natürlich und schnell an. Am Smartphone stehen dieselben drei Radiobuttons untereinander und brauchen mehr Platz als ein Dropdown. Die Entscheidung kann kippen.
Mobile Besucher bedienen das Formular auch anders. Sie tippen mit dem Daumen, nicht mit präzisen Mausklicks. Eine Checkbox von 44 mal 44 Pixeln ist die Mindestgrösse, die sich noch bequem tippen lässt. Alles Kleinere lässt sich schwer genau treffen. Radiobuttons und Checkboxen brauchen genug Abstand, damit man beim Tippen nicht versehentlich eine benachbarte Option erwischt.
Dropdowns übernimmt auf dem Smartphone meist das native Auswahlmenü des Geräts. Klickt ein Besucher auf ein Dropdown, sieht er eine für Mobilgeräte optimierte Auswahl. Das ist oft schneller und bequemer, als auf der Seite selbst durch eine lange Liste zu scrollen.
In mobilen Formularen werden Dropdowns attraktiver, je knapper der Platz wird. Radiobuttons eignen sich weiter für zwei bis vier Optionen, weil sie sich schnell antippen lassen. Aber sechs Optionen als Radiobuttons fühlen sich wie Scrollen an. Dieselben sechs Optionen in einem Dropdown wirken auf dem Smartphone aufgeräumter und schneller.
Teste deine Formulare mobil. Die Entscheidung, die sich am Desktop richtig anfühlte, kann sich anders anfühlen, wenn jemand dein Formular auf einem vier Zoll grossen Smartphone-Bildschirm ausfüllt.
Anforderungen an die Barrierefreiheit, die jeder Feldtyp erfüllen muss
Dropdowns, Radiobuttons und Checkboxen müssen alle Standards der Barrierefreiheit erfüllen, damit Menschen mit Screenreader oder Tastaturbedienung dein Formular erfolgreich ausfüllen können.
Jede Gruppe aus Radiobuttons oder Checkboxen braucht ein Fieldset-Label, das erklärt, wofür die Gruppe da ist. Wenn ein Screenreader-Nutzer in die Gruppe tabbt, hört er das Label und versteht, woraus er wählt. Ohne Label hört er nur "Radiobutton eins, Radiobutton zwei" ohne Zusammenhang.
Jede einzelne Option braucht ein sichtbares, klickbares Label, nicht nur einen kleinen Radiobutton oder eine Checkbox. Muss ein Besucher genau das Quadrat der Checkbox treffen, um sie auszuwählen, haben Menschen mit weniger präziser Motorik Probleme. Kann er auf das Label neben der Checkbox klicken, wird die Auswahl für alle einfacher. Das ist keine Funktion der Barrierefreiheit nur für Menschen mit Behinderung. Es macht Formulare für alle einfacher.
Auch Dropdowns brauchen klare Beschriftung. Das Label sollte über oder links vom Dropdown-Feld stehen. Die aktuell gewählte Option sollte im geschlossenen Dropdown immer sichtbar sein. Wenn sich ein Dropdown nach der Auswahl schliesst und den gewählten Wert zeigt, weiss der Besucher, dass seine Wahl registriert wurde.
Tastaturnutzer müssen sich mit Tab- und Pfeiltasten durch Formulare bewegen können. Radiobuttons sollten die Navigation mit den Pfeiltasten zwischen den Optionen erlauben. Checkboxen sollten mit der Leertaste wählbar sein. Dropdowns sollten sich per Tastaturbefehl öffnen und schliessen lassen. Verlangt dein Formular für eines davon einen Mausklick, sind Tastaturnutzer blockiert.
Farbe allein darf den gewählten Zustand nicht anzeigen. Ein Dropdown mit hervorgehobener Option nutzt Farbe, um die Auswahl zu zeigen. Das ist hilfreich. Aber Nutzer, die Farben nicht sehen können, sollten ebenfalls erkennen, was gewählt ist, durch ein Häkchen, ein Symbol oder einen visuellen Hinweis, der nicht allein von Farbe abhängt.
Wie sich Feldtypen auf die Wahrnehmung deiner Marke auswirken
Der Feldtyp, den du wählst, sagt deinem Besucher etwas darüber, wie gut du ihn verstehst.
Ein Dropdown für zwei oder drei Optionen signalisiert, dass die Person, die das Formular gestaltet hat, wenig über die Nutzererfahrung nachgedacht hat. Es fügt einen unnötigen Klick hinzu. Ein Besucher bemerkt das. Es fühlt sich nach Reibung an.
Ein Radiobutton, wo ein Dropdown die halbe Formularlänge sparen würde, signalisiert dasselbe. Das Formular wirkt schlecht gestaltet.
Ein Formular dagegen, das erkennbar an die Nutzererfahrung gedacht hat, bei dem schnelle Entscheidungen selbstverständlich und Mehrfachauswahlen klar wirken, signalisiert etwas anderes. Es signalisiert, dass diese Marke die Zeit der Besucher respektiert. Es signalisiert, dass jemand das Formular sorgfältig durchdacht hat. Das ist nicht nur bessere Usability. Es ist eine bessere Markenwahrnehmung.
Kleine Entscheidungen wie diese summieren sich. Ein Besucher füllt dein Formular aus, und jedes Feld fühlt sich intuitiv an. Er ist schneller fertig als erwartet. Er hat ein gutes Gefühl bei der Interaktion. Dieses Gefühl überträgt sich darauf, wie er deine Marke wahrnimmt.