Neem het formulier van een willekeurig merk en je vindt waarschijnlijk ontwerpproblemen die leads kosten. De meesten letten op wat ze vragen, niet op hoe ze het presenteren. Maar de merken die wel converteren? Die kennen een geheim: hoe je velden ordent, de ruimte ertussen en het visuele gewicht van elk element maken het verschil tussen moeiteloos en pijnlijk.
Dat verschil is groot. Het gat tussen een voltooiingspercentage van 50% en een van 85% komt vaak neer op maar drie dingen.
Ontwerpprincipes voor formulieren zijn de praktische regels die deze onzichtbare ervaring bepalen. Indeling, witruimte en visuele hiërarchie werken samen om je bezoekers vanzelfsprekend door je formulier te leiden, zonder wrijving of verwarring. Beheers deze drie en elk formulier dat je bouwt voelt vanzelfsprekend om in te vullen.
In deze gids leer je precies hoe je elk principe toepast. Geen theorie. Geen vulling. Alleen het praktische kader dat verwarrende formulieren omzet in conversies.
Wat zijn ontwerpprincipes voor formulieren?
Ontwerpprincipes voor formulieren zijn de regels voor ordening en visuele presentatie waardoor formulieren werken. Het gaat niet om versiering of smaak. Het gaat om gedrag van gebruikers. Hoe scant het menselijk oog een formulier? Hoe groepeert het brein verwante informatie? Welke signalen vertellen iemand dat een veld belangrijk, optioneel of gekoppeld aan een ander veld is? Dat zijn de vragen waar formulierontwerp antwoord op geeft.
De beste ontwerpprincipes voor formulieren gelden voor alle soorten formulieren. Of je nu een contactformulier ontwerpt, een afrekenformulier of een inschrijfformulier voor een evenement: dezelfde regels voor indeling, witruimte en hiërarchie gelden. Deze principes zijn gebaseerd op hoe mensen visuele informatie echt verwerken en beslissingen nemen onder mentale belasting.
Worden ontwerpprincipes voor formulieren genegeerd, dan storten voltooiingspercentages in. Onderzoek laat zien dat formulieren met slechte witruimte 20 tot 40% vaker worden verlaten dan formulieren met goede witruimte. Een onduidelijke visuele hiërarchie zorgt dat gebruikers belangrijke velden overslaan of optionele velden invullen die ze niet bedoelden. Een slechte indeling laat een formulier van vijf velden aanvoelen als een van twintig.
Waarom ontwerpprincipes voor formulieren ertoe doen voor je bedrijf
Elk formulier op je website is een conversiepunt. Hier worden prospects leads, voltooien klanten aankopen en worden gegevens verzameld. Zijn je formulieren moeilijk te gebruiken, dan verlies je direct omzet.
Bedenk wat er gebeurt als iemand op je formulier landt. Die persoon heeft al besloten zaken met je te doen. Hij wil het formulier invullen. Het enige dat hem tegenhoudt, is wrijving in het ontwerp. Hij ziet niet of een veld verplicht of optioneel is. Hij begrijpt niet waarom bepaalde informatie wordt gevraagd. Hij ziet niet makkelijk waar hij hierna moet klikken. Dus vertrekt hij.
Ontwerpprincipes voor formulieren hebben direct invloed op je bedrijfscijfers. Merken die sterke ontwerpprincipes op hun formulieren toepassen, zien hogere voltooiingspercentages, minder afhakers en betere gegevenskwaliteit. Een techbedrijf dat de witruimte en visuele hiërarchie van zijn formulier verbeterde, zag het voltooiingspercentage stijgen van 62% naar 84%. Een webwinkel die de indeling van het afrekenformulier herordende, verlaagde het aantal verlaten winkelwagens met 23%.
Dit is geen theorie. Zo beslissen gebruikers of je formulier hun tijd waard is.
De drie kernprincipes van formulierontwerp: indeling, witruimte en visuele hiërarchie
Formulierontwerp rust op drie pijlers. Elke pijler heeft een eigen doel. Samen maken ze een formulier dat eenvoudig aanvoelt en gebruikers van begin tot eind leidt.
Principe 1: de indeling van het formulier
Indeling is hoe je informatie op de pagina ordent. Het is de fysieke plaatsing van velden, labels, knoppen en secties. Een sterke indeling maakt direct duidelijk hoe je het formulier invult en in welke volgorde.
De effectiefste formulierindeling volgt een structuur met één kolom. Dat is geen ontwerptrend, het is gebaseerd op hoe mensen lezen. Het oog beweegt op een pagina van boven naar beneden. Staan formuliervelden in één kolom, dan lopen gebruikers er vanzelf doorheen, zonder links en rechts te hoeven kijken of terug te moeten om te controleren of ze iets misten.
Formulieren met meerdere kolommen laten het oog harder werken. De gebruiker moet beslissen of hij eerst de linker of de rechter kolom invult. Hij moet onthouden waar hij was. Zelfs een formulier met twee kolommen verhoogt de mentale belasting en het aantal afhakers. Formulieren met één kolom converteren aanzienlijk beter, soms met 20% of meer.
Binnen die ene kolom horen verwante velden visueel te worden gegroepeerd. Een formulier voor een verzendadres heeft alle adresvelden bij elkaar (straat, huisnummer, postcode, plaats). Een factureringssectie hoort visueel los te staan van een verzendsectie. Deze groepen vertellen gebruikers dat de velden bij elkaar horen en als geheel kunnen worden ingevuld. Niet-gegroepeerde velden voelen willekeurig en rommelig, ook als de informatie logisch is.
Ook labels bepalen de indeling. Elk label hoort direct boven het invoerveld te staan, niet links ervan. Staan labels links van invoervelden, dan groeit de afstand tussen label en veld, waardoor onduidelijk wordt welk veld bij welk label hoort. Labels bovenaan houden de relatie tussen label en veld duidelijk. Dit is vooral belangrijk op mobiel, waar labels en velden naast elkaar niet mogelijk zijn.
Ook de plaatsing van de knop doet ertoe. Je belangrijkste knop met een oproep tot actie hoort onderaan het formulier, direct onder het laatste veld. Die moet duidelijk en opvallend zijn en het eerste waarop het oog landt als de gebruiker klaar is met invullen. Secundaire knoppen (zoals "Opslaan als concept" of "Annuleren") horen kleiner te zijn of onder de hoofdknop te staan, zodat ze niet afleiden van de hoofdactie.
Principe 2: witruimte in formulieren
Witruimte is lege ruimte. Het is de afstand tussen velden, tussen secties en tussen een label en zijn invoerveld. Witruimte voelt niet als een "principe". Het voelt onzichtbaar. Maar het doet het belangrijkste werk in je formulierontwerp.
Goede witruimte doet twee dingen. Het geeft duidelijkheid over wat bij elkaar hoort en het geeft ademruimte, zodat het formulier minder overweldigend voelt.
De regel is simpel. Verwante velden krijgen weinig ruimte tussen zich. Een veld "Voornaam" en een veld "Achternaam" krijgen 8 tot 12 pixels verticale ruimte ertussen. Dat is dichtbij genoeg om als paar te voelen. Is een groep klaar (zoals een naamsectie), vergroot dan de ruimte voor de volgende groep tot 24 tot 32 pixels. Die visuele kloof vertelt de gebruiker dat er een nieuwe sectie begint.
Zie witruimte als leestekens. Weinig ruimte zegt "deze horen bij elkaar". Veel ruimte zegt "dit is een nieuwe gedachte". Gebruikers lezen deze signalen direct.
Dit gebeurt als de witruimte overal te krap is. Een formulier met tien velden die zonder ademruimte op elkaar zitten, voelt als een muur van invoervakken. De gebruiker voelt zich overweldigd nog voor hij begint. Zijn brein weet niet welke velden bij welke andere horen. Hij haakt af voor hij het eerste veld heeft ingevuld.
Dit gebeurt met goede witruimte. Hetzelfde formulier met tien velden voelt beheersbaar. De gebruiker ziet dat sommige velden bij elkaar horen (factuuradres), dan is er een kloof en dan volgt een andere groep (verzendadres). Het formulier voelt korter, omdat het is opgedeeld in behapbare stukken.
Een onderzoek uit 2024 naar formulier-UX vond dat formulieren met goede witruimte en groepering een 32% hoger voltooiingspercentage hebben dan dezelfde formulieren met een krappe indeling. De enige variabele die veranderde, was de witruimte.
Mobiele formulieren hebben meer ruimte nodig, niet minder. Mobiele schermen zijn klein en vingers zijn groot. Velden op mobiel dicht op elkaar zetten is een conversiedoder. Elk veld heeft genoeg ruimte eromheen nodig, zodat een gebruiker erop kan tikken zonder naastgelegen velden te raken. Dit gaat niet om de opvulling binnen het invoerveld (al is die ook belangrijk). Het gaat om de ruimte tussen velden. Een mobiel formulier met royale verticale ruimte en een gestapelde indeling in één kolom converteert aanzienlijk beter dan een formulier dat voor desktop is gebouwd en voor mobiel is verkleind.
Principe 3: visuele hiërarchie in formulieren
Visuele hiërarchie is de volgorde waarin oog en brein verwerken wat ze zien. In een formulier is het het verschil tussen een "verplicht" veld dat opvalt en een veld dat wegvalt in de achtergrond. Het is het verschil tussen een primaire verzendknop die klikbaar oogt en een secundaire knop voor annuleren die eruitziet als tekst.
Visuele hiërarchie in formulieren ontstaat met vier belangrijke middelen. Grootte, kleur, contrast en plaatsing spelen allemaal een rol bij het sturen van de aandacht van de gebruiker.
Grootte geeft belang aan. Een opvallend label in lettergrootte 16px is belangrijker dan hulptekst in 12px. Een grote verzendknop voelt belangrijker dan een kleine knop "Resetten". De aanduiding voor verplichte velden hoort iets opvallender te zijn dan optionele labels. Maak dit verschil niet overduidelijk. Maak het gewoon iets zichtbaarder. Dit subtiele verschil in grootte stuurt het oog zonder te schreeuwen.
Kleur schept hiërarchie via contrast. Een donker label op een witte achtergrond heeft veel contrast en valt op. Lichtgrijze hulptekst heeft minder contrast en wijkt naar de achtergrond. Een felblauwe verzendknop in een formulier met grijze invoervelden heeft direct contrast en trekt het oog. Een secundaire knop in hetzelfde grijs als de formulierachtergrond wijkt terug. Het oog landt eerst op de hoofdactie, precies waar je het wilt.
De beperking is belangrijk. Gebruik in één formulier niet meer dan drie visuele gewichten. Een gewicht kan een kleur zijn, een grootte, een tint of een stijl (vet of normaal). Als alles fel is, is niets fel. Heb je vijf verschillende tekstkleuren, dan weet de gebruiker niet waar hij op moet letten. Drie niveaus van visueel belang zijn genoeg om de aandacht te sturen zonder verwarring. Dit is de hiërarchieregel die de meeste formulieren breken, en het uit zich als "ik wist niet dat dit optioneel was" of "ik dacht dat die knop niet actief was".
Ook plaatsing schept hiërarchie. Het eerste veld dat een gebruiker ziet, is het opvallendst. De primaire knop met oproep tot actie onderaan is het laatste dat ze zien, en het is de actie die het vaakst wordt voltooid. Aanduidingen voor verplichte velden, hulptekst en foutmeldingen hebben allemaal een plek nodig waar ze duidelijk zijn zonder af te leiden.
De "knijptest" laat zien of je visuele hiërarchie werkt. Knijp je ogen half dicht (of doe het echt) en kijk naar je formulier. Wat zie je het eerst? Zie je de belangrijkste velden en de hoofdknop, dan werkt je hiërarchie. Gaan je ogen naar willekeurige plekken of raak je in de war over wat je moet doen, dan moet je hiërarchie beter.
Zo pas je ontwerpprincipes voor formulieren toe op elk soort formulier
Deze drie principes gelden voor elk formulier op je website. Een contactformulier gebruikt dezelfde regels voor indeling, witruimte en hiërarchie als een afrekenformulier, een registratieformulier of een inschrijfformulier voor een evenement. Het verschil zit niet in de principes zelf. Het verschil zit in welke velden het belangrijkst zijn voor dat soort formulier.
Om deze principes op je formulieren toe te passen, begin je met de indeling. Kies één kolom, van boven naar beneden. Groepeer verwante velden en maak grotere kloven tussen groepen.
Pas daarna witruimte toe. Gebruik gelijke ruimte tussen velden binnen een groep (8 tot 12px). Gebruik meer ruimte tussen groepen (24 tot 32px). Test op mobiel en zorg dat elk veld makkelijk aan te tikken is.
Bepaal tot slot de visuele hiërarchie. Bedenk wat de gebruiker het eerst moet opmerken. De kop van het formulier? De aanduiding voor verplichte velden? De hoofdknop? Zorg dat dat element visueel opvalt. Laat al het andere een ondersteunende rol spelen.
Het resultaat is een formulier dat vanzelfsprekend voelt. Gebruikers hoeven niet na te denken. Ze vullen het gewoon in en versturen het.
Zo helpt WEMASY je betere formulieren te bouwen
WEMASY heeft een formulierbouwer die al met deze ontwerpprincipes begint. Een indeling met één kolom is de standaard. De witruimte is vooraf ingesteld volgens de regel van 8px/24px. De visuele hiërarchie ontstaat door vooraf gemaakte stijlen voor formuliervelden, waarin labels, aanduidingen voor verplichte velden en invoervelden goed bij elkaar horen.
Je past kleuren, lettertypen en knoptekst aan op je merk. De onderliggende structuur blijft kloppen. Zo krijg je een formulier dat eruitziet als het jouwe en goed werkt.
Bekijk de formulierbouwer in actie en bekijk de prijzen van WEMASY om te zien welk abonnement formulieren bouwen en aanpassen bevat.