6 UX-tips voor een converterend websiteformulier

Trucs voor een goede gebruikerservaring met je formulier

Een scorende website staat of valt met de gebruikerservaring (UX). Dit geldt voor je gehele website, maar zeker ook voor je formulieren. Je wilt voorkomen dat bezoekers vroegtijdig afhaken, omdat je formulier bijvoorbeeld te lang of te complex is. Elk formulier is anders en vraagt om zijn eigen specifieke verbeterpunten. Toch zijn er een aantal tips die eigenlijk voor alle formulieren gelden.

Lees ze hieronder!

UX-tip 1: Houd het simpel

Houd de vragen die je wilt stellen relevant. Wil je extra inschrijvingen voor een nieuwsbrief? Vraag dan alleen naar een naam en e-mailadres. Heb je een restaurant en gebruik je een formulier zodat bezoekers een tafel kunnen reserveren? Vraag dan niet naar adresgegevens. Het restaurant komt niet bij jou eten, toch? ;-).

Wist je dat je sommige vragen niet eens mág stellen? In een sollicitatieformulier is het volgens de Algemene wet gelijke behandeling alleen mogelijk om informatie te verkrijgen die relevant is voor de functie. Een werkgever mag geen onderscheid maken op gebied van geslacht, nationaliteit, ras, godsdienst, seksuele geaardheid, politieke voorkeur of levensovertuiging. Laat deze vragen dus ook weg uit het formulier. 

UX-tip 2: Kies de juiste invoervelden

Zorg ervoor dat je het juiste type veld en visuele weergave van je veld gebruikt. 

Typen velden

Er zijn verschillende typen velden waar je uit kunt kiezen. Wanneer je bijvoorbeeld je bezoekers maximaal één keuze wilt laten selecteren, gebruiken we een selectielijst (dropdown) of keuzerondjes. De keuze hiervoor is afhankelijk van de hoeveelheid opties. Is je vraag bijvoorbeeld om een land van herkomst te selecteren? Dan gebruiken we vaak de dropdown, zodat de honderden keuzes niet te veel ruimte innemen op je formulier. Wanneer je een ja/nee vraag stelt, kun je beter keuzerondjes gebruiken. De keuzemogelijkheden zijn meteen zichtbaar en het scheelt een extra klik voor je bezoekers.

Gebruik een keuzerondje of knoppen als je een keuze aanbiedt met weinig opties. Het 'verstoppen' van antwoorden in en dropdown heeft hierbij namelijk geen meerwaarde. Het zorgt voor een extra klik en geen duidelijk overzicht.

Maar wat voor soort velden zijn er eigenlijk allemaal en wanneer gebruik je welk veld?

• Vrije tekstinvoer
  Een vrije tekstinvoer gebruik je voor de invoer van variabele waardes, zoals voornaam en woonplaats. Bij een vrije tekstinvoer kun je een controleslag instellen, zoals een telefoonnummer of e-mailadres. Hiermee voorkom je foute antwoorden.
  
  Voor een wachtwoord gebruiken we een veld met maskering, zodat het wachtwoord in eerste instantie in bolletjes getoond wordt. Velden kun je verduidelijken met een icoon.

• Checkbox
  De checkbox gebruiken we voor vragen waar één of meerdere antwoorden mogelijk zijn. Denk hierbij aan interesses of het accepteren van verschillende actievoorwaarden. 

• Keuzerondjes
  Bij keuzerondjes is er slechts één antwoord mogelijk. Je gebruikt keuzerondjes voor onder andere ja/nee vragen, een kledingmaat of aanhef. Als er veel mogelijke antwoorden zijn, kun je ervoor kiezen om naast een paar opties [Anders] met een vrije invoer erachter toe te voegen.

• Selectielijst (dropdown)
  Heeft je vraag veel antwoordmogelijkheden? Dan kiezen we voor een dropdown, omdat de lijst met antwoordmogelijkheden anders te lang wordt.

  Wanneer er maximaal één antwoord mogelijk is, heb je aan een simpele dropdown voldoende. Zijn er meerdere antwoorden mogelijk? Voeg dan labeltjes toe die je keuzes opsomt, zoals hieronder. De geselecteerde keuzes kun je wegklikken met een [x] of het prullenbak icoontje.

Niemand zit te wachten om door een ellenlange lijst te scrollen. Voeg aan jouw formulier bij een dropdown met veel antwoorden een zoekfunctie toe. Bekijk als voorbeeld onderstaande dropdown.  In eerste instantie zie je een alfabetische lijst met landen. Wanneer je de ‘N’ intypt krijg je alleen de landen die beginnen met een ‘N’ te zien, zodat je bijvoorbeeld ‘Nederland’ snel kunt vinden. Weer een stukje gebruiksgemak!

Visuele weergave van je velden

Om je formulier kracht bij te brengen, kun je bepaalde velden visueel ondersteunen. Denk bijvoorbeeld aan de kleuren van een kledingstuk in een webshop. We gebruiken een border om een cirkeltje met een kleur erin heen. Dit omdat je anders bij een witte variant de kleur niet ziet.

En nee, sorry... deze t-shirts zijn (nog) niet te koop!

UX-tip 3: Gebruik labels en placeholders

Bij invoervelden gebruiken we labels en placeholders.
Een placeholder is de tekst in een invoerveld, welke komt te vervallen als je begint met typen. Gebruik dus nooit alleen een placeholder, maar voeg ook een vast label toe. Zo voorkom je onduidelijkheid over het invoerveld, op het moment dat de eerste letter is getypt. 

Je kunt de placeholder het beste gebruiken voor een instructie of voorbeeld. De kans op foutieve antwoorden is hiermee kleiner. Dit is met name handig bij een vraag met een specifiek format, zoals een KvK-nummer, geboortedatum of e-mailadres.

UX-tip 4: Geef duidelijk aan wanneer er iets fout gaat

Zorg voor een duidelijke foutmelding, zodat duidelijk is welk van de velden fout is ingevuld. Klinkt logisch, toch?

UX-tip 5: Sluit af met een bedankpagina

Oké, dit is niet per se voor extra formulierinzendingen. Dit komt pas ná een ingezonden formulier. Maar wel zo netjes om even iemand te bedanken voor het invullen. Zorg hier ook direct dat de bezoeker weet wat de volgende stappen zijn! Laat weten wanneer je contact opneemt, of dat de persoon nog een extra bevestiging in de mailbox krijgt. Heeft de bezoeker een bestelling geplaatst? Dan stuur je diegene natuurlijk graag een e-mailbevestiging met het besteloverzicht, ordernummer en track & trace.

Ook dit is allemaal onderdeel van een goede gebruikerservaring en de totale klantreis.

UX-tip 6: Houd dezelfde tone of voice aan

Tot slot: zorg ervoor dat je bij zowel de formuliervelden, foutmeldingen en bedankpagina dezelfde tone of voice (u of jij/je) aanhoudt als op de rest van je website. De tone of voice is een belangrijk onderdeel van jouw merk en (merk)positionering. Dus zéker wanneer iemand op het punt staat interactie aan te gaan met jouw merk, is het belangrijk om de bezoeker op de bijpassende manier aan te spreken.

Ga aan de slag met online formulieren

Bekijk jouw webformulieren nog eens goed, nu je hier meer over weet. Gebruik de tips om de gebruikerservaring van jouw online formulieren nóg beter te maken.

Benieuwd naar waar jouw webformulieren op kunnen verbeteren? Ik kijk graag met je mee!

Terug naar overzicht