De 10 geboden voor je webformulier

29 september 2016 Inzichten / De 10 geboden voor je webformulier

Je webformulier is een cruciale en vaak laatste stap in je conversieflow. Het is dan ook belangrijk dat je webformulier goed ineenzit. Wat maakt dat je formulier een succes wordt? Hoe maak je het de gebruiker zo gemakkelijk mogelijk? Wat doe je beter wel en wat niet? Wij geven onze 10 geboden voor je webformulier.

#1 Maak je formulier niet te lang

De vuistregel is: Vraag niet naar gegevens die je eigenlijk niet nodig hebt.
 
Als een formulier te veel velden bevat voor wat je er als gebruiker voor terugkrijgt, zal dat je gebruikers afschrikken. Hierdoor zullen ze afhaken en velen zullen zelfs niet beginnen met het invullen van je formulier.
 
Probeer het aantal velden zoveel mogelijk te beperken. Vraag je bij elk veld van je formulier af of je deze informatie nu wel echt nodig hebt. Dat ene extra veld waar je graag wel een antwoord op zou hebben, maar dat je eigenlijk niet nodig hebt, is vaak de lagere conversie niet waard.
 
Extra tip: het aantal velden in je formulier beperken kan ook door samengevoegde velden te gebruiken voor informatie die logisch bij elkaar hoort. Eén veld bijvoorbeeld voor een naam en voornaam of voor een geboortedatum.

 

#2 Plaats de velden van je formulier onder elkaar

UX guru Luke Wroblewski geeft in zijn boek Web Form Design enkele basisprincipes voor webformulieren mee.
 
Wroblewski stelt onder meer dat een duidelijke visuele lijn in de velden van een formulier het gemakkelijker maakt voor gebruikers om het formulier in te vullen. Door velden in een formulier echter naast elkaar te gaan plaatsen, wordt die visuele lijn onderbroken en moet de gebruiker met zijn ogen zigzaggende bewegingen maken, waardoor de gebruiker onbewust afgeleid wordt. Daardoor stijgt de kans op fouten.
 
Door de velden in een formulier onder elkaar te plaatsen, wordt het formulier door de duidelijke visuele lijn in de velden leesbaarder en overzichtelijker en verlaagt de kans op fouten door de gebruiker waardoor het succespercentage van je webformulier stijgt.
 
Plaats de velden van je formulier daarom onder elkaar, in 1 kolom.
 
Enige uitzondering: velden die logisch bij elkaar horen, zoals naam en voornaam of postcode en gemeente. Nog beter is in dit geval om ze te vervangen door een samengevoegd veld indien mogelijk (zie ook de extra tip bij #1).

 

#3 Plaats geen placeholdertekst in de velden 

Het komt nog vaak voor dat in webformulieren placeholderteksten - teksten in het invulveld dus - worden gebruikt in plaats van duidelijke, aparte labels te voorzien bij elk veld.
 
Volgens een artikel gepubliceerd door de Nielsen Norman Group zorgen placeholderteksten in de velden van een formulier er echter voor dat gebruikers het moeilijk hebben om te onthouden welke informatie wordt gevraagd in elk veld. Eens je een veld invult zie je het label immers niet meer. Daardoor hebben ze het ook moeilijk om fouten te detecteren en op te lossen.
 
Placeholderteksten in velden geven bovendien de indruk dat de velden al ingevuld zijn of dat er standaardwaarden worden gegeven voor de velden.
 
Plaats labels bij velden dus altijd buiten de velden en nooit in het veld zelf.
 
Ook hints en instructies bij een veld horen niet thuis in het veld zelf, maar erbuiten. Als een hint of instructie in het veld staat, dan ziet de gebruiker die namelijk niet meer als hij het veld heeft ingevuld, waardoor het een stuk moeilijker wordt om fouten op te lossen. (‘Wat waren nu ook alweer de regels voor het kiezen van het wachtwoord?’)
 
Verberg hints en instructies ook nooit achter een informatie-icoon of een pop-up. Hints en instructies moeten, net als labels, te allen tijde zichtbaar zijn voor de gebruiker.
 
Plaats hints en instructies dus ook buiten de velden zelf. De beste plaats hiervoor is boven de velden, net onder de labels.

 

#4 Plaats labels links boven de velden

De eerder vermelde Luke Wroblewski beschrijft in een artikel de verschillende mogelijkheden voor de plaatsing van labels in formulieren.
 
Wroblewski komt hier tot de conclusie dat labels in een formulier het best links boven de velden staan.
 
Door de labels van je formulier net boven de velden te plaatsen, zien gebruikers in één oogopslag zowel het label als het veld. Het versterkt ook de duidelijke visuele lijn in je formulier. Beide maken het voor gebruikers gemakkelijker én sneller om je formulier in te vullen.
 
Uitzondering: als je wil dat gebruikers je formulier traag en aandachtig invullen - omdat het bijvoorbeeld gaat over kritische waarden of omdat je wil dat ze bij elke waarde die ze invullen goed nadenken over wat ze invullen - dan is een linkse uitlijning van de labels soms meer aangewezen. Een linkse uitlijning van de velden zal er volgens Wroblewski namelijk voor zorgen dat gebruikers het formulier automatisch trager gaan invullen, doordat ze voortdurend zigzaggende bewegingen moeten maken met hun ogen.
 
Extra tip: Zet de labels en hun corresponderende velden visueel samen zodat het duidelijk is welk label bij welk veld hoort.

 

#5 Gebruik duidelijke en korte labels

Hou de labels bij de tekstvelden kort. Je hoeft geen volledige vragen te stellen Dus niet: ‘Wat is je voornaam?’ maar wel ‘voornaam’.
 
En ook nog:
  • Gebruik sentence case voor labels. Sentence case betekent dat het is opgebouwd zoals een zin: een hoofdletter voor het eerste woord, kleine letters voor de volgende. Dus bijvoorbeeld: ‘Postcode en gemeente’ en niet: ‘Postcode En Gemeente’.
  • Vermijd gebruik van hoofdletters.

#6 Markeer de optionele velden in plaats van de verplichte velden

Als je wil dat gebruikers de optionele velden van je formulier invullen, stop dan met het aanduiden van de verplichte velden, maar markeer in plaats daarvan enkel de optionele velden.
 
Onderzoek heeft aangetoond dat gebruikers - in tegenstelling tot wat we misschien denken - over het algemeen geneigd zijn meer informatie te geven dan vereist is. Als je in je webformulier echter de verplichte velden aanduidt, dan blijkt dat gedrag te vervallen, en gaan gebruikers enkel de verplichte velden invullen en de optionele velden overslaan. Ze geven je met andere woorden net minder informatie. Meer hierover hier.
 
Duid je enkel de optionele velden aan dan wordt het formulier door de gebruiker minder gezien als ‘moeten’, komt het formulier minder agressief over en gaan gebruikers meer geneigd zijn de optionele velden in te vullen.

 

#7 Maak de actieknoppen beschrijvend

Gebruik geen generieke labels zoals ‘Verstuur’, ‘Verzend’, maar beschrijf de actie die de gebruiker neemt bij het klikken op de actieknop, bijvoorbeeld: ‘Schrijf je in op de nieuwsbrief’, ‘Vraag offerte aan’,... Hiermee wordt de gebruiker er nog eens aan herinnerd wat hij gaat doen en is het ook nog eens een positieve bevestiging dat hij effectief aan het doen is wat hij wil doen.

 

#8 Gebruik een algemene foutboodschap in combinatie met een boodschap per veld

Het beste is natuurlijk als je kan vermijden dat gebruikers fouten maken door duidelijke labels te gebruiken, hints bij de tekstvelden te plaatsen - niet in de tekstvelden - en de velden van je webformulier onder elkaar te plaatsen, zoals we eerder al aanhaalden.
 
Als de gebruiker dan toch bepaalde velden niet of niet correct heeft ingevuld, zorg dan voor een duidelijke, algemene foutboodschap én zorg ervoor dat die direct zichtbaar is voor de gebruiker. Op deze manier vermijd je situaties waarin de gebruiker terug op je formulier komt en het voor hem lijkt alsof er niets is gebeurd.
 
Naast een algemene foutboodschap is het ook belangrijk om ook bij elk veld waar er een validatiefout is, een boodschap te tonen. Maak daarbij gebruik van deze boodschappen om de gebruiker te helpen door te vertellen hoe hij de fout kan oplossen. 
Een validatiefout kan bijvoorbeeld zijn dat een e-mailadres niet geldig is. Als boodschap daarbij is dan: ‘Vul een geldig e-mailadres in. 

 

#9 Maak het de gebruiker zo gemakkelijk mogelijk om je webformulier in te vullen

  • Gebruik de juiste componenten om de juiste soort input te vragen. Bijvoorbeeld: een date-picker - een kalendercomponent waarbij je op de datum kan klikken - voor een datum.
  • Gebruik zogenaamde maskers zodat velden makkelijker in te vullen zijn. Bijvoorbeeld: voor een rekeningnummer staat er dan BE__ __ ____. Als gebruiker zal je dan enkel de lege ruimte invullen. 
  • Stel de HTML-attributen van de velden in zodat gebruikers op mobiel een toetsenbord voorgeschoteld krijgen dat aangepast is aan de input die wordt gevraagd. Als je aan de gebruiker een telefoonnummer vraagt, zorg dan bijvoorbeeld dat ze een keypad gepresenteerd krijgen in plaats van het standaardtoetsenbord van hun smartphone. Dat kan via HTML-attributen.
  • Ook desktopgebruikers mogen niet vergeten worden. Zorg zeker dat de tabvolgorde goed is ingesteld, zodat je dus naar het volgende veld springt als je op de tab-toets drukt. Maak het gemakkelijk voor de gebruiker om het formulier in te vullen door enkel gebruik te maken van het toetsenbord. Het mooiste voorbeeld hiervan is TypeForm.
  • Zorg ervoor dat je formulier toegankelijk is. Toegankelijk betekent dat je webformulier bruikbaar moet zijn voor iedereen, ook voor personen met een handicap. Meer informatie over wie deze personen zijn en hoe zij hun computer bedienen, kan je vinden op de website van AnySurfer.

#10 Maak het leuk!

Laat ons eerlijk zijn, niemand vindt het echt leuk om een formulier in te vullen. Maak daarom van het invullen van je formulier een fijne ervaring voor je gebruikers, bouw je formulier goed op en zorg voor een aantrekkelijke bedankingspagina. Wat ook altijd goed werkt: geef je bezoekers na het invullen van een formulier een leuk en onverwacht extraatje, zoals een extra voordeel of een korting. Dat alles zal de gebruiker een goed gevoel geven over de aanvraag en zal het algemene succespercentage van je formulier de hoogte in doen schieten.
 
Hou in je achterhoofd dat het algemene richtlijnen zijn die in de meeste gevallen van toepassing zijn en dat er uitzonderingen zijn voor elke regel.
 
UX is iets waar jij ook wat over te zeggen hebt? Misschien ben jij wel onze nieuwe digitaal architect!

Mattias Berlamont
UX Architect

Lees meer

Iedereen bij Wijs deelt zijn expertise, ook Jasper en Evi. Benieuwd naar de laatste nieuwtjes en blogposts? Schrijf je in voor onze nieuwsbrief!