Alles is in orde: je mail is mooi opgemaakt, de copy is goed, de afbeeldingen zijn juist gekozen en je hebt de mail uitgebreid getest. Het laatste wat je dan wil, zijn lezers die afhaken omdat ze na je belangrijkste call-to-action een formulier voor hun neus krijgen dat niet uitnodigt om in te vullen. Een slecht formulier noemen wij een conversie killer. En dat wil je voorkomen. Vraag is: hoe maak je goede online formulieren?

White paper: Hoe maak je goede online formulieren

Dit blog geeft je 4 handige tips. Wil je alle 25 tips lezen om je formulieren te optimaliseren? Download dan het white paper met een handige checklist.

Een voorbeeld van een online formulier

Op het eerste gezicht lijkt er met het formulier van Bauknecht niet veel mis. Het ziet er overzichtelijk uit en je krijgt als lezer voldoende aanwijzingen om het formulier goed in te vullen. Toch worden in dit voorbeeld enkele belangrijke formulier­conventies geschonden.

Stel dat je bovenstaand formulier achter een call-to-action als “Aanvragen reparatie” stopt, dan kun je op je klompen aanvoelen dat slechts weinig lezers juichend achter hun pc zitten. Vooral als je bedenkt dat het bovenstaande screenshot slechts een deel is van alle invulvelden. Klik om de afbeelding om het hele formulier te bekijken.

Let op het aantal invulvelden

Ondanks dat het voor de hand ligt, is het niet minder waar: beperk het aantal invulvelden. Per formulier of per pagina zou je moeten stoppen bij vijf invulvelden. Onderzoek van onder andere VentureHarbour toont aan dat maximaal vijf invulvelden -in de meeste gevallen- de hoogste conversie oplevert. Alleen als lezers verwachten dat ze meer gegevens moeten achterlaten, dan kun je overwegen om meer dan vijf invulvelden te gebruiken.

Voor het reparatie­verzoek van Bauknecht is er wel iets voor te zeggen dat je meer dan vijf invulvelden nodig hebt. Maar 26 invulvelden op één pagina is echt wel heel veel.

Gebruik een éénkoloms­structuur

Naast de vele invulvelden, valt op dat de invulvelden naast elkaar in twee kolommen zijn geplaatst. Ook dit is niet slim. Uit eye-tracking onderzoek Designing usable web forms: empirical evaluation of web form improvement guidelines komen de volgende eye-tracking maps:

Keer op keer blijkt dat lezen van links naar rechts tot meer oogfixatie­punten leidt dan lezen van boven naar beneden. En hoe vaker je je ogen moet fixeren hoe langer het duurt voordat je de geschreven informatie begrepen hebt.

Zo had het originele formulier van NZZ Online 155 fixatie­punten en bij elk punt stonden lezers 62 milliseconden stil. Bij het verbeterde exemplaar daalde het aantal fixatiepunten naar 96 en was de fixatietijd 41 milliseconden. Dit lijken kleine verschillen, maar ze hebben een grote impact op je conversie.

Ondanks dat het onderzoek met bovenstaande eye-tracking maps specifiek gaat over de relatie tussen invulaanwijzingen en invulvelden, geven dit soort onderzoeken voldoende richtlijnen om invulinformatie in online formulieren onder elkaar te plaatsen.

Al met al had Bauknecht er beter aan gedaan om de invulvelden voor de persoonlijke gegevens te scheiden van de invulvelden voor de apparaat­gegevens. Zet ze op verschillende pagina’s zodat er per pagina minder invulvelden zichtbaar zijn en zorg ervoor dat de invul­velden allemaal in één kolom staan.

Zet invul­aanwijzing en invulveld onder elkaar

Een invul­aanwijzing zoals Voornaam, Achternaam etc. moet je dus boven het invulveld plaatsen en nooit ernaast. Een voorbeeld uit het formulier van Bauknecht:

In dit voorbeeld zie je dat Bauknecht de best practice Zet invul­aanwijzing en invulveld onder elkaar volgt. De invul­aanwijzingen Land en Aanhef zijn immers boven het invulveld geplaatst.

Kies altijd de juiste antwoord­mogelijkheid

Toch is het jammer dat op de invulaanwijzing Aanhef een dropdownmenu volgt. De antwoorden op dit invulveld hadden zichtbaar moeten zijn als radiobuttons. Radiobuttons gebruik je als lezers uit een beperkte lijst met antwoord­mogelijkheden slechts één keuze mogen maken.

Als je radiobuttons kunt inzetten, dan moet je dat doen. Radiobuttons vergen immers slechts één klik en een dropdownmenu twee: menu uitklappen en selecteren. Vergeet nooit de belangrijkste wetmatigheid in formulierenland: hoe minder moeite lezers moeten doen, hoe groter de bereidheid van lezers om je formulier in te vullen.

Een dropdownmenu moet je daarom alleen gebruiken als lezers uit een lange lijst één keuze moeten maken. Dat op de invulaanwijzing Land een dropdownmenu volgt, lijkt terecht. Daar heb je er namelijk 196 van.

Naast dropdownmenu’s en radiobuttons, heb je nog twee antwoord­mogelijkheden: checkboxen en tekstvelden. Het rechthoekige tekstveld komt het meeste voor in formulieren. Gebruik zo’n veld als de lezer slechts één antwoord hoeft in te vullen. Denk bijvoorbeeld aan de invulvelden voor persoonsgegevens.

Gebruik checkboxen als lezers één antwoord­mogelijkheid wel of niet kunnen aanvinken of als ze uit meerdere antwoord­mogelijkheden meerdere keuzes mogen maken. Daarin verschillen checkboxen duidelijk van radiobuttons. Kijk maar eens naar de volgende voorbeelden:

4 best practices op een rij

In dit artikel heb je vier best practices gelezen die gelden bij het maken van goede online formulieren: let op het aantal invulvelden, gebruik altijd een éénkolomsstructuur, zet invulaanwijzing en invulveld onder elkaar en kies altijd de juiste antwoord­mogelijkheid.

Maar het zijn er maar vier. In totaal heeft Spotler 25 belangrijke aanwijzingen onder elkaar gezet om je te helpen de best mogelijke formulieren op te stellen. Voor een artikel is het veel om al deze 25 best practices op te sommen, maar voor een mooi white paper is het precies goed.

Download het white paper met 25 best practices

Vind je informatie over het opstellen van goede online formulieren interessant en ben je benieuwd hoe Spotler je daarin ondersteunt?
Download het white paper