• Bovenaan het formulier moet een korte titel staan die de functie van het formulier samenvat, plus een korte introductietekst die uitlegt waarvoor het formulier bedoeld is. Bezoekers kunnen namelijk rechtstreeks naar het formulier geleid worden en de vorige pagina’s niet gelezen hebben.

• Zet de instructie/toelichting niet alleen op de pagina waarop naar het formulier wordt gelinkt (zoals een service), omdat er ook rechtstreeks naar een formulier gelinkt kan worden vanuit een andere locatie, of het formulier via een zoekfunctie kan worden gevonden. Ook dan moet duidelijk zijn wat het voor formulier is en hoe / wanneer het ingevuld moet worden.

• Vraag zo min mogelijk informatie, zodat het formulier er zo kort mogelijk uitziet. Hoe meer moeite het lijkt om het formulier in te vullen, hoe groter de kans dat de bezoeker afhaakt. Dit geldt ook wanneer de velden optioneel zijn: het gaat erom hoe het formulier in de eerste oogopslag overkomt.
  In onderstaande voorbeeld staan er veel te veel velden op het contactformulier:

• Vraag zo min mogelijk persoonlijke gegevens. Hoe meer de bezoeker iets over zichzelf moet doorgeven, hoe groter de kans dat de bezoeker afhaakt. Vermeld eventueel waarom het nodig is om de persoonlijke data door te geven, of stel de bezoeker gerust door te vermelden dat zijn data niet zal worden gebruikt voor andere doelen dan waar dit formulier voor is.

• Vragen om bv. geslacht wordt door sommigen als vervelend ervaren, dus doe dat alleen als die informatie echt nodig is voor vervolgacties of bepaalde systemen. Voeg waar mogelijk ook een alternatief toe, naast de opties vrouw of man.

• Verberg velden die niet voor alle bezoekers van toepassing zijn, om een formulier niet langer over te laten komen dan nodig. Vraag bijvoorbeeld met een ja/nee-vraag of een bepaalde situatie van toepassing is, en toon op basis van het antwoord wel of niet aanvullende velden.

Bezoekers vinden formulieren invullen vervelend en zijn snel geneigd om af te haken of er helemaal niet aan te beginnen. Door met laagdrempelige velden te starten en de moeilijke voor het laatst te bewaren, haal je ze over om te beginnen. Tegen de tijd dat ze de moeilijke velden tegenkomen, hebben ze al moeite gestopt in het invullen van het formulier en daardoor zijn ze minder snel geneigd om alsnog af te haken, want dat voelt als zonde van de reeds gedane moeite.

• Begin met velden die uit het hoofd zijn in te vullen. Bewaar velden waarvoor iemand bv. informatie moet gaan opzoeken of een document moet zoeken en uploaden, tot later.

• Bewaar velden waarin gevraagd wordt naar persoonlijke gegevens tot het laatste. Laat iemand bijvoorbeeld eerst de sessies kiezen waar hij naartoe wil, vraag dan pas om zijn naam en e-mailadres, en vraag pas op het allerlaatste naar betalingsgevens.

• Zorg dat het CMS zelf verschillende soorten input omzet naar het juiste format, zoals het verwijderen van een spatie uit een postcode of een streepje uit een telefoonnummer.

• Maak eisen aan velden niet strenger dan nodig. Zeer ingewikkelde wachtwoordeisen zijn bijvoorbeeld niet nodig voor een Radboud Recharge account  we zijn immers geen bank, dus stel dat het account in handen van anderen komt, is dat geen ramp.

• Soms kan het CMS bepaalde invoer niet automatisch corrigeren of is het nodig om eisen te stellen. Vermeld deze eisen dan vooraf. Het is voor bezoekers erg vervelend om een foutmelding te krijgen en opnieuw een veld in te moeten vullen.

• Zorg dat de eisen direct zichtbaar zijn onder het veld, in de helptekst. Dus niet verborgen onder het vraagteken met extra uitleg. De helptekst staat namelijk altijd in het zicht; het kost geen extra klik om de uitleg te zien.

• Maak het veldlabel zo duidelijk dat de bezoeker geen aanvullende uitleg nodig heeft.
  In onderstaande voorbeeld zou “Type vacature” beter "Over welk soort vacatures wil je een job alert ontvangen?" kunnen zijn, en kan de helptekst weggelaten worden.

• Als extra uitleg toch nodig is, gebruik dan het vraagtekenicoontje om extra uitleg toe te voegen.

• Gebruik extra uitleg alleen voor mensen die het veld mogelijk niet begrijpen. Dit is hopelijk slechts een deel van de gebruikers. Gaat het om informatie die alle gebruikers van het formulier moeten weten (zoals eisen aan invoer, zie punt 7), voeg dan helptekst toe in plaats van extra uitleg.

Ieder type formulierelement heeft een specifieke functie. Mensen kennen deze functie van andere websites. Je zou een formulierelement zo kunnen gebruiken dat deze ook een andere functie kan vervullen, maar zodra je afwijkt van de standaard, raken mensen in verwarring. Ook zijn aan bepaalde typen formulierelementen specifieke extra functionaliteiten gekoppeld, die bijvoorbeeld helpen het veld te valideren op de juiste vorm van invoer, of op mobiele telefoons een toetsenbord tonen met knoppen die speciaal geschikt zijn voor de invoer voor dat type veld (zoals een @-teken direct in het zicht voor het invoeren van e-mailadressen). Gebruik je een ander type veld dan bedoeld is voor het type invoer, dan vervallen deze voordelen.

• Gebruik bv. geen tekstveld maar een getalveld voor het invoeren van cijfers. Op de voorkant van het formulier ziet het veld er hetzelfde uit, maar ze hebben een verschillende werking qua gegevensvalidatie en getoonde invoertoetsenbord op mobiele telefoons.
  
  NIET:

WEL:

• Gebruik bv. checkboxen voor het kunnen aanvinken van minimaal een, of meerdere opties. Gebruik radiobuttons als de bezoeker maar één van de opties mag kiezen. In onderstaande voorbeeld is de eerste dus fout, de tweede goed.

• In onderstaande voorbeeld is het eerste veld eigenlijk bedoeld voor vrije invoer. Het tweede type veld is speciaal bedoeld voor het invoeren van tijdstippen en voorkomt fouten.

• Alleen maar brede velden komen over als veel werk om in te vullen.

• Te smalle velden zorgen ervoor dat bezoekers hun invoer niet volledig kunnen zien, wat de kans op foute invoer vergroot.
  Voorbeeld: Een postcodeveld hoeft maar 6 tekens te bevatten en moet dus smal zijn. Een veld voor een e-mailadres moet breed zijn, omdat het veel tekens moet kunnen bevatten.

Formulierelementen die bij elkaar in de buurt staan, worden gezien als elementen die met elkaar samenhangen. Formulierelementen waar veel witruimte tussen zit, of waar een scheiding zoals een lijn tussen staat, worden gezien als elementen die niet met elkaar samenhangen.

• Zorg dat er niet meer afstand zit tussen formulierelementen die wel bij elkaar horen, dan formulierelementen die niet bij elkaar horen.
  In onderstaande voorbeeld horen de horizontale radiobuttons bij elkaar (selecteer een van de twee opties), maar doordat er meer afstand horizontaal dan verticaal tussen zit, lijkt het alsof de verticale radiobuttons bij elkaar horen (selecteer een van de drie opties) of dat alle radiobuttons bij elkaar horen (selecteer één optie van de zes):

• Controleer ook altijd hoe het formulier eruit ziet op zowel desktop computers als tablets als mobiele telefoons.

• Bepaal wat een logische volgorde is vanuit bezoekersperspectief. Bijvoorbeeld alfabetisch.

• Bij zeer lange lijsten, zoals een lijst met landen, kun je de meest gekozen items, zoals ‘Nederland’, ook bovenaan de lijst zetten en de andere items op een andere manier sorteren. Doe dit niet bij korte lijsten.

Het is handig om, indien mogelijk, alvast zo veel mogelijk velden voor de bezoeker in te vullen, want dat scheelt moeite. Maar velden die al invoer bevatten, worden sneller over het hoofd gezien, waardoor de invoer onaangepast wordt verzonden.

• Vul alleen velden vast voor de bezoeker in wanneer je zeker weet dat het de juiste invoer is, bijvoorbeeld omdat je deze informatie al eerder van de bezoeker hebt ontvangen.

• Zet geen voorbeeldinvoer in een veld.

• Stel geen default waarde in voor formulierelementen zoals radiobuttons.

• Toon geen instructie in een dropdownbox, zoals in onderstaande voorbeeld:

• Laat het bevestigingsveld weg. Ieder extra veld zorgt voor minder zin om in te voeren. De meeste bezoekers kopieren en plakken toch gewoon de invoer uit het eerste veld in het tweede veld, dus dit veld is zelden nuttig.

• Wanneer de bezoeker aanvullende informatie moet lezen, zoals algemene voorwaarden of aanvullende uitleg, toon deze dan bijvoorbeeld in een overlay-venster. Link niet gewoon naar een andere pagina. Ook al wordt de reeds ingevuld data in het formulier automatisch bewaard, dat weet de bezoeker niet. De bezoeker kan bang zijn om weg te klikken uit angst dat die alles opnieuw moet gaan invullen.

• Zet het tussentijds opslaan van gegevens aan, om te voorkomen dat ingevoerde gegevens per ongeluk worden gewist als er iets misgaat voordat de bezoeker de kans heeft gehad het formulier te versturen.

• Voor lange / complexe formulieren, waarvoor een bezoeker meer tijd nodig heeft (bijvoorbeeld omdat hij documenten moet opvragen bij een andere instantie om als bijlage toe te voegen), maak het mogelijk om de reeds ingevoerde gegevens op te slaan en op een later moment terug te keren naar het formulier, om het dan alsnog af te ronden.

• Is opslaan voor later technisch niet mogelijk, vermeld dan aan het begin van het formulier welke gegevens nodig zijn, bijvoorbeeld in een bulleted list, zodat de bezoeker er niet pas in een latere stap achterkomt dat hij niet alle benodigdheden heeft om het formulier te kunnen afronden.

• Als een formulier uit meerdere stappen bestaat, laat dan op elk moment zien hoeveel stappen er zijn, wat deze stappen zijn, en in welke stap de bezoeker zich bevindt.

• Het moet voor de bezoeker altijd duidelijk zijn op welk moment die een formulier definitief verzendt, en wanneer die slechts naar een volgende stap in het formulier gaat.

• Als de knop naar een volgende of vorige formulierstap gaat, voeg dan een pijltje toe aan de knop. Bijvoorbeeld ‘< Persoonsgegevens’ en ‘Cursussen kiezen >’. Als de knop het formulier verzendt, voeg dan géén pijltje toe.  Bijvoorbeeld ‘Aanmelden’.

• Als je naar een volgende stap in een formulier gaat, vermeld dan naar welke stap de bezoeker gaat. Dus niet ‘volgende’ of ‘vorige stap’, maar bijvoorbeeld ‘naar adresgegevens’, ‘terug naar persoonsgegevens’, ‘beschikbaarheid opgeven’ of ‘cursussen kiezen’.

• Zorg dat de tekst op de verzendknop zo specifiek mogelijk vertelt wat er gaat gebeuren als je er op klikt. Dus niet ‘verzenden’ maar bijvoorbeeld ‘aanvragen’, ‘inschrijving bevestigen’ of ‘wijzig wachtwoord’.

• Zorg dat de knop om verder te gaan in het proces, meer opvalt dan de knop om terug te gaan (of naar een andere minder wenselijke optie). Zo kiest de bezoeker intuïtief deze optie.
  In onderstaande voorbeeld is het precies verkeerdom gedaan:

In de meeste gevallen is een annuleerknop niet nuttig. De bezoeker kan gewoon de pagina sluiten of op de backbutton klikken. Het komt bovendien vaak voor dat bezoekers per ongeluk op de annuleerknop in plaats van de verzendknop klikken en daardoor alles wat ze net hebben ingevuld, weer kwijt zijn.

Een foutmelding krijgen is al heel vervelend voor gebruikers, dus zorg dat dit zo min mogelijk extra frustratie oplevert.

• Formuleer foutmeldingen op een klantvriendelijke manier, niet op een technische manier. Dus niet zo:

• Zorg dat de foutmelding niet alleen naast een veld getoond wordt, maar ook op de plek waar de bezoeker kijkt wanneer hij de verzendknop klikt. Is het een lang formulier waardoor de bezoeker naar beneden is gescrold, en wordt de pagina niet ververst na een druk op de knop, dan heeft het geen zin de foutmelding bovenaan de pagina te tonen want die staat dan niet in beeld. Is het een lang formulier en wordt de pagina wel opnieuw geladen na een druk op de knop, dan wil je de foutmelding juist niet bij de verzendknop tonen.

• Wees specifiek. Vermeld bij welk(e) veld(en) de fout zit én wat er fout is. Dus niet “Niet alle velden zijn goed ingevuld”, maar “Je hebt geen geldige postcode ingevoerd” of “Je hebt geen telefoonnummer ingevuld”.

• Zorg dat de bevestigingstekst in beeld staat, zodat de bezoeker deze ziet zonder dat die hoeft te scrollen na het klikken op de verzendknop.

• Formuleer de bevestiging in termen van het doel van het formulier: niet wat is er verzonden, maar waarom is het verzonden. Dus niet “Het formulier is verzonden”, maar “Je aanvraag is ingediend”, “Je melding is verstuurd”, of, wanneer er een automatische actie aan het formulier vastzit: “Je bent vanaf nu aangemeld voor de nieuwsbrief”.

• Als er geen automatische actie aan het formulier verbonden is, maar een handmatige handeling van een medewerker nodig is, vertel dan ook wat de vervolgstap gaat zijn. Dus niet alleen “Je aanvraag is ingediend”, maar “Je aanvraag is ingediend. We nemen binnen twee werkdagen contact met je op.”, “We hebben je inschrijving ontvangen. Volgende week ontvang je je inschrijfbewijs per post.”, of “Je melding is verstuurd. We gaan het probleem onderzoeken en zo snel mogelijk oplossen.”

• Maak het zo persoonlijk mogelijk. Bedank de bezoeker bijvoorbeeld. “Hartelijk dank voor je aanmelding! We gaan nu voor je aan de slag om […]”

Als de bezoeker en/of beheerder een e-mail ontvangt met daarin een bevestiging van de verzonden gegevens, of een notificatie dat er een nieuwe formulier is ontvangen, moet deze prettig leesbaar zijn.

• Zorg voor een nette aanhef en afsluiting van de e-mail: zet niet alleen maar de ingevulde gegevens op een rijtje.

• Als je de naam van de ontvanger weet, gebruik deze dan als aanhef.

• Zet alle ingevulde gegevens in een logische volgorde en overzichtelijk onder elkaar. Begin met het veldlabel en daarna de ingevoerde data.

• Voor bezoekers: Vermeld onderaan de mail nogmaals wat de vervolgstap is (zie punt 20): waarvan is dit de bevestiging en wat is er nu automatisch in gang gezet of wat gaat er nu gebeuren?

• Voor bezoekers: Vermeld contactgegevens en of dit een e-mailadres is waar naar geantwoord kan worden.

• Voor beheerders: vermeld waar in het CMS het ingevulde formulier teruggevonden kan worden. (Wellicht moeten we er ook bij zetten of er een uiterlijke bewaartermijn volgens de AVG is en wanneer dus de boel moet worden opgeschoond?)

Alle formulieren op de website moeten op dezelfde manier worden ingericht, ongeacht vanuit welk organisatie-onderdeel het formulier afkomstig is, zodat de bezoeker een consistente ervaring heeft.

• Geef dezelfde soort velden altijd hetzelfde veldlabel op alle formulieren.

• Maak velden en teksten op dezelfde manier op. Bijvoorbeeld altijd niet-cursief in plaats van soms niet en soms wel cursief of vet.

• Houd je bij het schrijven van tekst aan de algemene richtlijnen voor goede online content en de RU-schrijfwijzer.

Zie ook de stijlafspraken voor formulieren.