Neem elk formulier waarin bezoekers uit een lijst met opties moeten kiezen, en je ziet iets opvallends. Het formulier faalt niet omdat het te veel vragen stelt. Het faalt omdat iemand het verkeerde invoertype voor die vraag koos. Een dropdown waar keuzerondjes sneller waren geweest. Selectievakjes waar maar één antwoord logisch is. Keuzerondjes waar een dropdown de helft van de ruimte op het scherm had bespaard.
Dit zijn geen kleinigheden. Onderzoek laat zien dat de keuze van het invoertype een van de belangrijkste redenen is waarom bezoekers formulieren afbreken. Eén verkeerde keuze tussen een dropdown, keuzerondje of selectievakje kan het aantal afhakers met 15% of meer laten stijgen. De bezoeker is niet in de war omdat hij geen keuze kan maken. Hij is in de war omdat het invoertype dat jij koos een verkeerd signaal geeft over wat het formulier verwacht.
In dit artikel lees je de praktische regels voor het kiezen tussen dropdowns, keuzerondjes en selectievakjes. Je leert welk invoertype het best werkt in welke situatie, wat elk type aan je bezoeker communiceert en hoe je de fouten vermijdt waardoor bezoekers afhaken. Als je deze keuzes onder de knie hebt, begrijp je waarom sommige merken een veel hoger percentage ingevulde formulieren zien op hetzelfde formulier, alleen door één invoertype te veranderen.
Waarom het invoertype dat je kiest meer invloed heeft op het invullen van formulieren dan de meeste mensen denken
Een dropdownveld, een keuzerondje en een selectievakje verzamelen alle drie een keuze uit een lijst. Op het eerste gezicht lijken ze inwisselbaar. De verschillen zijn subtiel. De impact is dat niet.
Als een bezoeker een dropdown ziet, weet hij dat hij moet klikken om de opties te zien. De opties zijn verborgen tot hij klikt. Dat kost een extra stap. Bij keuzerondjes zijn de opties direct zichtbaar. Hij kan ze allemaal tegelijk bekijken en kiezen zonder eerst te klikken. Bij een selectievakje begrijpt hij dat hij meerdere dingen kan selecteren, niet maar één.
Deze verschillen veranderen hoe bezoekers met je formulier omgaan. Ze veranderen de mentale belasting. Ze veranderen hoe snel iemand een keuze maakt. Ze bepalen of het formulier simpel of overweldigend aanvoelt. Als je dit goed doet, haken er minder mensen af. Als je dit fout doet, klikken bezoekers weg omdat het formulier niet intuïtief voelt, ook al werkt het technisch prima.
De grootste fout is het verkeerde invoertype voor de situatie gebruiken. Een dropdown voor twee keuzes voelt overdreven. Keuzerondjes voor 15 opties voelen rommelig en overweldigend. Selectievakjes terwijl iemand maar één optie mag kiezen, zorgen voor verwarring over wat er te selecteren is. Elke verkeerde keuze kost je conversies.
Dropdowns werken het best voor lange lijsten waarbij de standaardkeuze niet uitmaakt
Een dropdown is een veld dat opties verbergt tot iemand klikt om het te openen. De keuze zit achter een klik. Daardoor is een dropdown perfect voor één specifieke situatie: je hebt veel opties en schermruimte telt.
Gebruik een dropdown als je meer dan zeven opties hebt. Vanaf dat punt maakt het tonen van alle opties als keuzerondjes of selectievakjes het formulier rommelig. Een dropdown vouwt al die opties samen in één veld dat bijna geen verticale ruimte inneemt. Daarom zijn dropdowns standaard in mobiele formulieren. Een telefoonscherm is smal. Dropdowns besparen schermruimte.
Dropdowns werken ook goed als de keuze duidelijk is en de bezoeker een helder antwoord in gedachten heeft. Denk aan het kiezen van een land of provincie. De meeste mensen weten meteen welke ze willen. Ze kunnen de eerste letter typen om naar de optie te springen, of klikken en scrollen om hem te vinden. De interactie is snel omdat de vraag makkelijk is.
Maar hier falen dropdowns. Ze falen als bezoekers opties moeten vergelijken voordat ze kiezen. Ze falen als de lijst is gesorteerd op een manier die bezoekers niet verwachten. Ze falen als er geen standaardwaarde is en een bezoeker moet klikken om te zien welke opties er zijn.
Een voorbeeld: een formulier vraagt bezoekers om hun maaltijdvoorkeur te kiezen in een dropdown. De opties staan door elkaar (vis, vegetarisch, kip, rundvlees, veganistisch, glutenvrij). Een bezoeker weet niet welke opties er zijn zonder te klikken. Als hij klikt en de lijst ziet, moet hij ze allemaal doorlopen om te kiezen. Hij kan ze niet in één oogopslag vergelijken. Dat duurt langer dan wanneer de opties als keuzerondjes zichtbaar waren. Onderzoek van de Nielsen Norman Group laat zien dat dropdowns het beslissen vertragen als gebruikers meerdere opties moeten beoordelen.
Gebruik dropdowns als bezoekers weten wat ze zoeken en er veel opties zijn. Vermijd ze als bezoekers opties moeten vergelijken of als er minder dan zeven keuzes zijn.
Keuzerondjes zijn logisch bij twee tot vijf opties
Een keuzerondje (radio button) toont een rond vakje naast elke optie. Als iemand er een aanklikt, worden de andere automatisch uitgezet. Er kan maar één optie tegelijk gekozen zijn. Daarom heten ze "radio buttons", zoals de knoppen van oude autoradio's: als je een nieuwe zender indrukte, sprong de vorige eruit.
Keuzerondjes werken prima als bezoekers een duidelijke, kleine set keuzes hebben. Vraagt je formulier bezoekers om een abonnement te kiezen en bied je drie niveaus aan, dan zijn keuzerondjes de perfecte keuze. De bezoeker ziet alle drie tegelijk. Hij kan prijzen, functies en voordelen direct in zijn hoofd vergelijken. Hij klikt er één aan. Klaar. Geen verborgen opties. Geen verwarring.
Keuzerondjes werken ook goed als één optie duidelijk de standaardkeuze of de populairste is. Stel je een formulier voor dat vraagt hoe bezoekers je merk hebben gevonden. Je biedt vijf opties aan en de meeste mensen kiezen "Zoeken via Google". Als de keuzerondjes zichtbaar zijn, zien bezoekers die via Google kwamen hun antwoord meteen en klikken ze erop. Ze hoeven geen dropdown te openen met de vraag of hun antwoord in de lijst staat.
Het gebruiksonderzoek is duidelijk. Als opties zichtbaar zijn, nemen mensen sneller beslissingen. Als mensen alle keuzes zonder extra klik kunnen zien, stijgt het aantal ingevulde formulieren. Daarom doen keuzerondjes het bij kleinere lijsten beter dan dropdowns.
Keuzerondjes beginnen rommelig te voelen bij vijf of zes opties. Met meer dan zeven ziet het formulier er overweldigend uit. Elk keuzerondje neemt verticale ruimte in. Een formulier met acht keuzerondjes voor "Waar ben je vooral in geïnteresseerd?" ziet er veel langer uit dan nodig. Op dat punt is een dropdown logischer.
Gebruik keuzerondjes bij twee tot vijf opties, als bezoekers baat hebben bij het vergelijken ervan. Vermijd ze bij meer dan zeven opties.
Selectievakjes zijn voor keuzes waarbij meerdere antwoorden goed zijn
Een selectievakje (checkbox) ziet eruit als een klein vierkantje. Als je erop klikt, verschijnt een vinkje. Anders dan bij keuzerondjes kunnen meerdere selectievakjes in dezelfde groep tegelijk zijn aangevinkt. Dat is het belangrijkste verschil. Selectievakjes zijn geen alternatieven voor elkaar. Het zijn onafhankelijke keuzes.
Selectievakjes werken als de vraag meer dan één antwoord toelaat. Een formulier dat vraagt "Welke van deze functies interesseren je?" gebruikt selectievakjes, omdat een bezoeker productanalyse, klantfeedback en automatiseringskoppelingen tegelijk kan kiezen. Elk selectievakje is een eigen, onafhankelijke keuze en geen alternatief voor de rest.
Selectievakjes werken ook voor akkoordverklaringen. "Ik ga akkoord met de algemene voorwaarden" is een selectievakje, omdat het een ja-of-nee-stelling is. De bezoeker gaat akkoord of niet. Zo is ook "Stuur me updates per e-mail" één selectievakje, omdat het één keuze vertegenwoordigt.
De verwarring ontstaat als mensen selectievakjes gebruiken waar keuzerondjes horen, of andersom. Een formulier dat vraagt "Welk abonnement wil je?" moet geen selectievakjes gebruiken. Iemand kan niet alle drie de abonnementen willen. De keuzes sluiten elkaar uit. Keuzerondjes zijn hier juist.
Selectievakjes hebben ook last van hetzelfde probleem als keuzerondjes als er te veel zijn. Meer dan zeven of acht selectievakjes in één groep maken het formulier overweldigend. Visueel lijken veel selectievakjes veel werk, ook als de bezoeker er maar één of twee hoeft te kiezen.
Gebruik selectievakjes alleen als bezoekers terecht meerdere opties tegelijk mogen kiezen. Vermijd ze bij vragen met één antwoord en verdeel grote aantallen selectievakjes in kleinere, samenhangende categorieën.
Zo besluit je welk invoerveld je gebruikt als je twijfelt
De keuze is vaak duidelijk. Maar soms zit een vraag in een grijs gebied. Je hebt vijf opties en weet niet of keuzerondjes of een dropdown beter voelen. Dit is de beslisboom die werkt.
Stap 1. Mag de bezoeker meer dan één antwoord kiezen? Zo ja, gebruik selectievakjes. Zo nee, ga naar stap twee.
Stap 2. Hoeveel opties zijn er? Minder dan zes opties: ga naar stap drie. Meer dan zeven opties: gebruik een dropdown.
Stap 3. Moeten bezoekers de opties vergelijken om te kiezen? Zo ja, gebruik keuzerondjes zodat alle opties tegelijk zichtbaar zijn. Zo nee en het antwoord ligt voor de hand, dan werken keuzerondjes of een dropdown allebei, maar keuzerondjes zijn iets sneller.
Deze eenvoudige beslisboom lost 90% van de vragen over invoertypes op die je tegenkomt bij het ontwerpen van formulieren. Twijfel je nog, test dan beide opties met echte bezoekers. Draai je formulier een week met keuzerondjes en meet het percentage ingevulde formulieren. Schakel over op een dropdown, draai het nog een week en vergelijk. Echte data van je bezoekers wint van elke ontwerpregel, want je bezoekers zijn degenen die je formulieren invullen.
Veelgemaakte fouten die het invullen van formulieren laten instorten zonder dat iemand weet waarom
De eerste fout is een dropdown gebruiken voor twee of drie opties. Dit gebeurt vaker dan je denkt. Een formulier vraagt "Hoe heb je ons gevonden?" en de opties zijn "Zoekmachine", "Social media" en "Doorverwezen". Een dropdown verbergt die opties. Een bezoeker moet op de dropdown klikken om de opties te zien. Hij weet niet welke opties er zijn zonder te klikken. Dat voegt zonder reden frictie toe. Keuzerondjes zijn hier sneller en voelen intuïtiever.
De tweede fout is acht of negen keuzerondjes tonen terwijl een dropdown een tiende van de schermruimte zou innemen. Een formulier vraagt bezoekers hun land te kiezen uit een lijst van 195 landen. Keuzerondjes zouden eindeloos scrollen. Een dropdown met zoeken en automatisch aanvullen lost dit direct op. Sommige ontwerpers houden vast aan keuzerondjes omdat die intuïtiever voelen, zonder te beseffen dat dat gevoel verdwijnt als je door 50 opties moet scrollen.
De derde fout is selectievakjes gebruiken voor een vraag met één antwoord. Een formulier vraagt "Welk abonnement heb je?" en toont drie selectievakjes, één per abonnement. Bezoekers raken in de war. Kunnen ze alle drie kiezen? Het selectievakje geeft het verkeerde signaal. Keuzerondjes zijn duidelijker, omdat ze visueel laten zien dat er maar één gekozen kan worden.
De vierde fout is geen duidelijke instructie geven over wat een veld betekent. Een groep selectievakjes verschijnt met het label "Interesses" en zonder uitleg. De bezoeker weet niet of hij er maar één moet kiezen of zoveel als van toepassing zijn. Bij onduidelijkheid daalt het aantal ingevulde formulieren. Duidelijke labels lossen dit op. "Selecteer alles wat van toepassing is" of "Kies er één" vertelt de bezoeker precies wat het veld verwacht.
De vijfde fout is standaardwaarden verkeerd gebruiken. Een dropdown die begint met "Selecteer een optie" als standaard voelt kapot. Een dropdown die begint met "Nederland" als standaard voelt behulpzaam als de meeste bezoekers daar vandaan komen. Keuzerondjes zonder voorgeselecteerde optie dwingen de bezoeker om er een aan te klikken. Keuzerondjes waarbij het meest voorkomende antwoord al is geselecteerd, besparen de bezoeker een klik. Deze kleine standaardwaarden tellen over een heel formulier op.
Mobiele overwegingen die de keuze van het invoertype veranderen
Mobiele telefoons zijn kleiner. Dat verandert de keuze van het invoertype op belangrijke punten.
Op desktop voelen drie keuzerondjes voor een eenvoudige keuze natuurlijk en snel. Op mobiel staan diezelfde drie keuzerondjes onder elkaar en nemen ze meer schermruimte in dan een dropdown. De keuze kan dan omslaan.
Mobiele bezoekers gebruiken ook anders. Ze tikken met hun duim, niet met een precieze muisklik. Een selectievakje van 44 bij 44 pixels is de minimale comfortabele grootte. Alles kleiners is moeilijk nauwkeurig te raken. Keuzerondjes en selectievakjes hebben genoeg ruimte om zich heen nodig, zodat je niet per ongeluk een aangrenzende optie aantikt.
Dropdowns op mobiel worden meestal afgehandeld door het eigen selectiemenu van het apparaat. Als een bezoeker op een iPhone een dropdown aantikt, ziet hij een voor mobiel geoptimaliseerde keuzelijst. Dat is vaak sneller en comfortabeler dan scrollen door een lange lijst op de pagina zelf.
Bij mobiele formulieren worden dropdowns aantrekkelijker naarmate schermruimte schaarser wordt. Keuzerondjes zijn nog steeds goed voor twee tot vier keuzes, omdat ze snel aan te tikken zijn. Maar zes opties als keuzerondjes voelt als scrollen. Dezelfde zes opties in een dropdown voelen op een telefoon schoner en sneller.
Test je formulieren op mobiel. De keuze die op desktop goed voelde, kan anders voelen als iemand je formulier invult op een telefoonscherm van tien centimeter.
Toegankelijkheidseisen waar elk invoertype aan moet voldoen
Dropdowns, keuzerondjes en selectievakjes moeten allemaal voldoen aan toegankelijkheidsnormen, zodat mensen met een schermlezer of toetsenbordnavigatie je formulier succesvol kunnen invullen.
Elke groep keuzerondjes of selectievakjes heeft een fieldset-label nodig dat uitlegt waar de groep voor dient. Als een schermlezergebruiker de groep intabt, hoort hij het label en begrijpt hij waaruit hij kiest. Zonder label hoort hij alleen "Keuzerondje één, keuzerondje twee" zonder context.
Elke afzonderlijke optie heeft een zichtbaar, klikbaar label nodig, niet alleen een klein keuzerondje of selectievakje. Als een bezoeker precies op het vierkantje van een selectievakje moet klikken, hebben mensen met minder nauwkeurige motoriek moeite. Als ze op het label naast het selectievakje kunnen klikken, wordt kiezen voor iedereen makkelijker. Dit is geen toegankelijkheidsfunctie alleen voor mensen met een beperking. Het maakt formulieren makkelijker voor iedereen.
Ook dropdowns hebben een duidelijk label nodig. Het label hoort boven of links van het dropdownveld te staan. De huidige gekozen optie moet altijd zichtbaar zijn in de gesloten dropdown. Als een dropdown na het kiezen sluit en de gekozen waarde toont, weet de bezoeker dat zijn keuze is geregistreerd.
Toetsenbordgebruikers moeten door formulieren navigeren met de tab- en pijltjestoetsen. Bij keuzerondjes moet je met de pijltjestoetsen tussen opties kunnen bewegen. Selectievakjes moeten te kiezen zijn met de spatiebalk. Dropdowns moeten met toetsenbordcommando's te openen en te sluiten zijn. Als je formulier voor een van deze dingen een muisklik vereist, worden toetsenbordgebruikers geblokkeerd.
Kleur alleen mag de geselecteerde status niet aangeven. Een dropdown met een gemarkeerde optie gebruikt kleur om te laten zien wat is gekozen. Dat helpt. Maar gebruikers die kleur niet kunnen zien, moeten ook kunnen zien wat is gekozen, via een vinkje, een icoon of een visuele aanduiding die niet alleen van kleur afhangt.
Hoe invoertypes in formulieren je merkbeleving beïnvloeden
Het invoertype dat je kiest, vertelt je bezoeker iets over hoeveel je hem begrijpt.
Een dropdown voor twee of drie opties laat zien dat degene die het formulier ontwierp niet veel over gebruiksgemak nadacht. Het voegt een onnodige klik toe. Een bezoeker merkt dat. Het voelt als frictie.
Keuzerondjes waar een dropdown de helft van de formulierlengte had bespaard, geven hetzelfde signaal. Het formulier voelt slecht ontworpen.
Maar een formulier waarbij duidelijk is nagedacht over de gebruikerservaring, waarin snelle keuzes vanzelfsprekend voelen en meerdere selecties helder zijn, geeft een ander signaal. Het laat zien dat dit merk de tijd van de bezoeker belangrijk vindt. Het laat zien dat iemand het formulier zorgvuldig heeft doorgedacht. Dat is niet alleen betere bruikbaarheid. Het is ook een betere merkbeleving.
Zulke kleine beslissingen tellen op. Een bezoeker vult je formulier in en elk veld voelt intuïtief. Hij is sneller klaar dan verwacht. Hij heeft een goed gevoel bij het contact. Dat gevoel neemt hij mee in hoe hij je merk ziet.