Een formulierveld voelt niet als iets kleins als je er zelf een invult. Het is het moment waarop je beslist of je doorgaat of weggaat. En dat moment hangt helemaal af van of het veld zelf duidelijk is, de instructies makkelijk te volgen zijn en de foutmeldingen kloppen als er iets misgaat.
Onderzoek laat zien dat 67% van de mensen formulieren verlaat omdat ze moeilijk te doorlopen zijn. Dat komt meestal niet doordat er te veel informatie wordt gevraagd. Het komt door hoe die informatie op veldniveau wordt gepresenteerd. Eén onduidelijk label, een verwarrende plaatshoudertekst of een vage validatiefout kan iemand ervan weerhouden een formulier af te maken dat hij eigenlijk wel wil invullen.
In dit artikel lees je de praktische regels, zonder theorie, die formuliervelden veranderen van wrijvingspunten in conversietools. Je leest hoe labels moeten werken, waarom plaatshoudertekst faalt als ontwerpers erop vertrouwen en hoe validatiemeldingen bepalen of gebruikers je formulier vertrouwen of verlaten. Beheers deze details en je begrijpt waarom sommige merken 80% van hun formulieren afgerond zien worden, terwijl anderen moeite hebben om 50% te halen.
Wat maakt dat een formulierveld makkelijk of overweldigend voelt
Een formulierveld is meer dan een invoervak. Het is een gesprek tussen jouw merk en de bezoeker. Het veld zelf stelt een vraag, het label legt uit wat je wilt weten en de plaatshoudertekst geeft een hint. De validatiemelding reageert als er iets niet helemaal klopt. Elk onderdeel werkt samen om een gevoel te creëren.
Dat gevoel kan zijn: "Ik weet precies wat ik moet doen en ik vertrouw dit", of: "Ik weet niet wat hier moet staan en dit formulier lijkt kapot." Het verschil is geen toeval. Het is structuur.
Als velden makkelijk zijn, voelen ze moeiteloos. Het label vertelt je welke informatie in het veld hoort voordat je klikt. Het invoerveld zelf heeft genoeg ruimte om in te typen. Maak je een fout, dan vertelt de foutmelding precies wat er mis ging en hoe je het herstelt. Je gaat vol vertrouwen door het formulier.
Als velden moeilijk zijn, geven ze wrijving. Het label ontbreekt misschien of is onduidelijk. Je begint te typen en een plaatshoudertekst verdwijnt, waardoor je vergeet wat je moest invullen. Er verschijnt een fout zonder dat je hoort wat het probleem is, en je moet raden. Elk veld wordt een klein raadsel. Na drie of vier van die raadsels haken mensen af.
Formulierlabels: maak ze duidelijk en altijd zichtbaar
Een label is geen versiering. Het is de instructie die vertelt welke informatie in een veld hoort. De beste labels zijn duidelijk, beschrijvend en altijd zichtbaar. Niet verborgen. Niet verdwijnend. Altijd aanwezig.
Dit laat het onderzoek zien. Staat een label direct boven een veld en blijft het zichtbaar terwijl de gebruiker typt, dan worden er meer formulieren afgerond. Worden labels vervangen door plaatshoudertekst die verdwijnt zodra iemand begint te typen, dan worden er minder formulieren afgerond. De reden is simpel. Mensen moeten onthouden wat ze hebben ingevuld, controleren op typefouten en hun werk nakijken voordat ze versturen. Verdwijnt het label, dan kunnen ze dat allemaal niet.
Het label moet het veld beschrijven op een manier die één vraag beantwoordt. Welke informatie hoort hier? "E-mailadres" doet meer werk dan "E-mail". "Telefoonnummer" is duidelijker dan "Telefoon". "Bedrijfsnaam" wint van "Bedrijf". Deze kleine verschillen in specifiek zijn maken het verschil tussen directe duidelijkheid en een moment van twijfel.
Vermijd labels die informatie verbergen. Gebruik geen vage labels zoals "Overig", "Extra info" of "Details". Die dwingen de gebruiker te klikken of te zweven om te begrijpen waar het veld voor is. Een specifiek label zoals "Hoe heb je ons gevonden?" of "Wat is je grootste uitdaging?" doet het werk vooraf en houdt mensen in beweging.
Verplichte en optionele velden moeten visueel verschillen, maar hebben geen uitleg in woorden nodig. De meeste formulieren zeggen "Verplichte velden zijn gemarkeerd met een sterretje" en verwachten dan dat mensen die regel onthouden. Markeer verplichte velden liever zichtbaar (een sterretje of een stip) en maak optionele velden duidelijk met een klein label "(optioneel)". Mensen zien dan in één oogopslag wat verplicht is en wat niet.
Lange of complexe formulieren profiteren van korte hulptekst onder het label. Dit is geen levensles. Het is één zin die verduidelijkt waar nodig. Vraag je om een telefoonnummer en heb je een bepaald formaat nodig, voeg dan één regel toe onder het label: "Vermeld het netnummer. We bellen je niet zonder dat eerst te vragen." Die ene regel voorkomt fouten in het formaat en wekt vertrouwen. Maar houd het kort. Alinea's hulptekst onder elk veld maken het formulier overweldigend.
Voor een diepere blik op hoe opmaakkeuzes bepalen hoe formulieren worden ervaren, lees je onze gids over ontwerpprincipes voor formulieren: opmaak, ruimte en visuele hiërarchie.
Waarom plaatshoudertekst faalt en wat je in plaats daarvan gebruikt
Een plaatshoudertekst is tekst in een formulierveld die verdwijnt zodra iemand erop klikt. Het ziet er nuttig uit. Het voelt als een hint. In de praktijk is het de meest gemaakte fout in formulierontwerp.
Dit gebeurt er als iemand vertrouwt op plaatshoudertekst in plaats van labels. Een bezoeker komt op het formulier. De plaatshoudertekst zegt "john@example.com" om te laten zien welk formaat wordt verwacht. Ze klikken op het e-mailveld en beginnen te typen. De plaatshoudertekst verdwijnt. Nu zien ze niet meer welk formaat werd verwacht, dus ze vragen zich af of ze het goed doen. Ze typen het af. Ze tabben naar het volgende veld. Nu weten ze niet meer zeker of ze hun e-mailadres goed hebben getypt, maar ze kunnen niet terug om te controleren, omdat het veld de plaatshoudertekst niet meer toont. Dus wissen ze hun invoer en typen die opnieuw. Dat herhaalt zich bij elk veld met alleen een plaatshoudertekst als instructie. Het aantal afgeronde formulieren stort in.
Het onderzoek is overweldigend. Plaatshoudertekst schaadt het afronden van formulieren, schaadt de toegankelijkheid (schermlezers hebben er moeite mee) en geeft wrijving bij mensen met cognitieve beperkingen of iedereen die snel en afgeleid een formulier invult. Plaatshoudertekst niet meer als hoofdinstructie gebruiken en zichtbare labels toevoegen verhoogt het aantal afgeronde formulieren meetbaar.
Dit werkt: gebruik labels voor de instructie en plaatshoudertekst alleen voor voorbeelden. Een veld met het label "E-mailadres" en de plaatshoudertekst "jouw.naam@bedrijf.nl" werkt prima. Het label vertelt de gebruiker wat in het veld hoort. De plaatshoudertekst toont het formaat zonder de instructie te verbergen. Verdwijnt de plaatshoudertekst na een klik, dan weet de gebruiker al waar het veld voor is, omdat een zichtbaar label dat vertelt.
Niet elk veld heeft een plaatshoudertekst nodig. Eenvoudige velden zoals "Voornaam" of "Bedrijfsnaam" hebben alleen een label nodig. De plaatshoudertekst is nuttig voor velden waarbij het formaat telt (telefoonnummers, datums, URL's) of waarbij de gebruiker misschien niet weet welke voorbeeldgegevens hij moet invoeren (Twitter-naam, verwijscode).
Ben je in de verleiding om plaatshoudertekst te gebruiken in plaats van een label om ruimte te besparen, bouw het formulier dan toch met labels en laat ze onder elkaar staan. Een formulier met zichtbare labels en zonder plaatshoudertekst presteert altijd beter dan een formulier met zwevende labels en verborgen plaatshoudertekst. Gebruikers ronden formulieren sneller af, maken minder fouten en vertrouwen het formulier meer.
Validatiemeldingen: maak van fouten een wegwijzer
Validatie is wat er gebeurt als iemand een veld verkeerd invult. Er verschijnt een foutmelding. Op dat moment voelt de gebruiker iets. Of ze voelen dat het formulier kapot en verwarrend is, of ze voelen dat het formulier ze helpt om het goed te doen.
Slechte validatiemeldingen zijn vaag. Ze zeggen "Ongeldige invoer" of "Fout" en niets anders. De gebruiker weet niet wat er mis ging. Was het formaat fout? Was de invoer te kort? Gebruikten ze een teken dat niet is toegestaan? Ze moeten raden en het opnieuw proberen.
Goede validatiemeldingen zijn specifiek en bruikbaar. Zeg in plaats van "Ongeldig": "Het wachtwoord moet minstens 8 tekens bevatten, met één hoofdletter en één cijfer." Dat vertelt de gebruiker precies wat er mis ging en wat hij moet doen om het te herstellen. Het formulier voelt niet meer kapot. Het voelt alsof het helpt.
Ook timing telt. Validatie kan op twee manieren gebeuren. Validatie in realtime controleert het veld zodra de gebruiker klaar is met typen en toont direct een fout. Dat voelt responsief en helpt fouten opvangen vóór het versturen. Validatie van het hele formulier gebeurt als iemand op verzenden klikt en alle fouten tegelijk verschijnen. Dat voelt minder responsief, maar werkt prima voor eenvoudige formulieren. Combineer beide waar het kan. Validatie in realtime voor kritieke velden (e-mail, wachtwoord, telefoonnummer) en validatie van het hele formulier bij het versturen voor al het andere.
De plek van foutmeldingen bepaalt of mensen ze kunnen herstellen. Fouttekst moet direct onder het veld staan dat het probleem veroorzaakte, niet bovenaan het formulier in een overzichtslijst. Staat de fout onder het veld, dan kan de gebruiker de fout en het veld tegelijk lezen. Ze zien wat ze hebben getypt, begrijpen wat er mis ging en herstellen het direct. Staat de fout bovenaan het formulier in een lijst, dan moeten ze terugscrollen, het veld zoeken en onthouden wat de fout was.
Alleen kleur is niet genoeg om een fout aan te geven. Vertrouw niet alleen op een rode rand of rode tekst. Sommige gebruikers kunnen kleuren niet onderscheiden. Voeg een icoon toe (een kruisje, een waarschuwingsteken) en ondersteunende tekst, zodat de fout voor iedereen duidelijk is. Schermlezers hebben ook tekst nodig om de fout voor te lezen, niet alleen een kleurverandering.
De toon van foutmeldingen bepaalt hoe mensen over je formulier denken. Een harde melding zoals "Je hebt een ongeldig e-mailadres ingevoerd" geeft mensen het gevoel dat ze iets fout deden. Een behulpzame melding zoals "We herkennen dit e-mailformaat niet. Controleer op typefouten en probeer het opnieuw" geeft ze het gevoel dat ze geholpen worden. De tweede melding doet hetzelfde werk, maar de ervaring voelt meer als samenwerking dan als oordeel.
Voor tips over formulieren die voor alle gebruikers toegankelijk voelen, lees je ons artikel over toegankelijk formulierontwerp.
Hoe de ruimte tussen velden bepaalt of een formulier benaderbaar voelt
Een formulier is een visuele omgeving. De ruimte rond elk veld, de afstand tussen labels en invoervelden en de ruimte tussen groepen velden geven allemaal signalen of het formulier te overzien of overweldigend is.
Krappe ruimte laat tien velden eruitzien als dertig. Elk veld strijdt om visuele aandacht. De gebruiker weet niet welke velden bij elkaar horen. Labels staan dicht bij de invoervelden eronder en het volgende label staat maar een paar pixels lager. Het hele formulier voelt benauwd en overweldigend. Mensen haken af voordat het eerste veld is ingevuld.
Royale ruimte tussen verwante velden en grotere tussenruimtes tussen groepen velden laten dezelfde tien velden voelen als een kort, georganiseerd proces. Eerst vul je factuurgegevens in. Dan een duidelijke ruimte. Dan verzendgegevens. Dan weer een ruimte. Betaalgegevens. Het formulier voelt gestructureerd, niet chaotisch. Dit is geen verspilde witruimte. Dit is informatiearchitectuur die de gebruiker door het proces leidt.
Mobiele formulieren vragen extra aandacht voor ruimte. Op een telefoonscherm is een krap formulier onbruikbaar. Elk veld heeft genoeg verticale ruimte nodig, zodat een vinger erop kan tikken zonder een ernaast gelegen veld te raken. Een mobiel formulier met royale verticale ruimte en duidelijk gescheiden delen converteert aanzienlijk beter dan een formulier dat voor de computer is ontworpen en voor mobiel is verkleind. De ruimte is niet verspild. Ze is functioneel.
Ook de plek van labels beïnvloedt hoe de ruimte wordt ervaren. Labels horen direct boven invoervelden, niet ernaast. Staan labels links, dan wordt de afstand tussen het label en het invoerveld groter, wat verwarring geeft over welk veld bij welk label hoort. Dat geldt vooral op mobiel, waar labels links de tekst laten afbreken of krimpen tot onleesbare maten. Labels erboven blijven verbonden met hun invoerveld en voelen schoner.
Indicatoren voor verplichte en optionele velden die echt werken
Elk veld is verplicht (moet worden ingevuld) of optioneel (mag worden overgeslagen). De gebruiker moet in één oogopslag weten wat wat is, zonder hulptekst of instructies te lezen.
De traditionele aanpak markeert verplichte velden met een sterretje en zegt "Verplichte velden zijn gemarkeerd met een sterretje". Dat werkt alleen als gebruikers de regel onthouden. Veel mensen doen dat niet. Ze scannen het formulier en zien sterretjes zonder te begrijpen wat ze betekenen.
Een betere aanpak markeert verplichte velden zichtbaar (sterretje of gekleurde stip) en geeft optionele velden expliciet een label "(optioneel)" naast het label. Een snelle blik vertelt de gebruiker dan of elk veld nodig is. Verplichte velden zien er normaal uit met een markering. Optionele velden hebben een duidelijk label. Zo hoeft niemand een regel te onthouden.
Sommige formulieren gebruiken kleur om verplichte van optionele velden te onderscheiden. Dat kan werken, maar vraagt om veel contrast en moet worden gecombineerd met tekstlabels, niet alleen worden gebruikt. Een rood sterretje naast het label werkt beter dan een rode veldachtergrond, omdat de achtergrond het invoerveld minder zichtbaar kan maken.
Voorwaardelijke velden en alleen tonen wat nodig is
Sommige velden moeten pas verschijnen nadat een gebruiker een keuze heeft gemaakt in een vorig veld. Een selectievakje "Ik woon in de VS" kan een keuzelijst met staten tonen. Het kiezen van "Zakelijk" bij een veld voor het type account kan een veld voor de bedrijfsnaam tonen. Deze voorwaardelijke velden verlagen de mentale belasting door alleen de velden te tonen die de gebruiker echt moet invullen.
Verschijnen voorwaardelijke velden, dan moeten ze soepel en duidelijk verschijnen. Een plotselinge verschijning zonder animatie kan schrikken. Een infade of uitschuifeffect maakt de verandering duidelijk. Het nieuwe veld moet zijn eigen label en validatie hebben, net als een gewoon veld. Ga er niet van uit dat de gebruiker begrijpt wat hij moet doen alleen omdat het veld verscheen.
Voorwaardelijke velden werken het best als ze onder het veld verschijnen dat ze activeert, niet erboven of ernaast. De gebruiker maakt een keuze en direct onder die keuze verschijnen nieuwe velden die erbij horen. Zo blijft het pad lineair en is er minder verwarring.
Hoe WEMASY helpt bij het ontwerpen van formuliervelden
De formulierenbouwer van WEMASY heeft aanpasbare velden, validatieregels en foutmeldingen in realtime. Je stelt verplichte en optionele velden in, bepaalt specifieke validatieregels per veldtype en regelt precies welke foutmeldingen er verschijnen en wanneer. Zo bouw je formulieren die elke werkwijze uit dit artikel volgen, zonder te programmeren.
Ook de opmaak van velden, de ruimte en de plek van labels regel je met de ontwerptools voor formulieren van WEMASY. Bouw formulieren die duidelijk, professioneel en makkelijk in te vullen zijn.
Bekijk welke functies in elk WEMASY-abonnement zitten.