User Experience (UX) in (contact)formulieren – wat leidt tot conversie?

User Experience (UX) in (contact)formulieren

Wat leidt tot conversie?

Wie wordt er ’s morgens wakker en denkt… laat ik eens lekker een formulier in gaan vullen? Niemand, bezoekers van je website zijn vaak kritisch en achterdochtig als ze gegevens moeten achterlaten. Als ze dit wel doen, dan moet het simpel, snel, veilig en eerlijk. Daarbij komt een noodzakelijk kwaad: het invullen van het formulier.

Tijdens het invullen van het formulier is het zaak dat de bezoeker niet meer van mening verandert of geïrriteerd raakt door bijvoorbeeld:

  • een langdurig invulproces;
  • een moeilijk formulier met onduidelijke verplichte velden;
  • te veel persoonlijke informatie;
  • een formulier wat niet goed functioneert.

Jammer genoeg is het voor mensen als wij, waar de marketing door het bloed giert, ook één van de meest belangrijke user-service interactie. Waar het formulier ook voor is – het inschrijven van een nieuwsbrief of het aanmelden voor een seminar – we zijn data aan het verzamelen. Wel eerlijk natuurlijk, de bezoeker moet altijd weten wat er met zijn gegevens gaat gebeuren.

Naast deze basis ‘feitjes’ zijn er nog veel meer zaken waar rekening mee gehouden moet worden en waar een aantal richtlijnen uitkomen voor het verbeteren van de user experience.

Eén of meerdere kolommen

Uit onderzoek blijkt dat formulieren opgebouwd uit een enkele kolom een betere conversie hebben dan formulieren met meerdere kolommen. Bezoekers bekijken en vullen een formulier in van boven naar onderen, waardoor een formulier met één kolom het meest logische is.

Er zijn natuurlijk uitzonderingen bij bepaalde gevraagde informatie. Denk dan bijvoorbeeld aan een huisnummertoevoeging of voornaam en achternaam. Deze kunnen wel in één regel gezet worden.

1 koloms formulier conversie verhogend

1 koloms formulier, bijkomend voordeel is dat velden beter lijnen wat veel rustiger overkomt 

2 koloms formulier conversie verlagend

2 koloms formulier, drukker en meer chaotisch

Waar plaats je input labels?

Input labels vertellen bezoekers vertellen welke informatie ze moeten invullen in welke velden. Deze labels staan het beste links uitgelijnd boven het betreffende input-veld. Dit is voor een bezoeker de meest vertrouwde én het meest verwachte patroon (we lezen van links naar rechts en van boven naar onderen). Tegenwoordig is er redelijk wat ‘fancyness’ mogelijk mat animatie en verborgen placeholders. Trend van tegenwoordig is bijvoorbeeld een label dat op het input veld staat en dat zodra het veld actief wordt, naar boven animeert.

Animated GIF van een animerende label uit Google’s Material Design.

Er is veel te vinden over de ideale plek voor het plaatsen van labels. Het verschilt ook een beetje per situatie.

Labels plaatsen boven het input-veld

De meest verwachte plek van de input labels is boven het betreffende veld. Dit is ook door Google gevalideerd als de beste plek. Volgens hun onderzoek zijn bezoekers korter bezig met het vinden van de juiste informatie en zijn er minder oogsprongen (saccades) nodig. Nog een groot voordeel van deze positionering van het label is dat het input-veld de volle beschikbare breedte kan gebruiken. Dit is lekker overzichtelijk en werkt voor een bezoeker veel prettiger. De labels kunnen daarom ook wat langer zijn als dat nodig is.

Belangrijk ook is dat er bij mobiele telefoons en/of kleinere beeldschermresoluties niets of vrijwel niets aangepast hoeft te worden in code en css om het label goed zichtbaar te houden op verschillende resoluties.

Form labels boven input

Labels boven inputvelden

Form labels naast input

Labels naast inputvelden

Kleinere / oudere telefoons

Bij formulieren waar de labels naast (links) van het input-veld staan, zorgt de totale breedte van zo’n regel vaak voor een relatief smal invoerveld op kleine resoluties. Hierdoor moet een bezoeker scrollen in het input-veld, omdat deze te klein is om het volledige antwoord te tonen. Een typefout kan over het hoofd gezien worden en het aanpassen van een ingevoerde tekst kan dermate irritant zijn voor een bezoeker, dat deze afhaakt.

Google: “Simple is better

Eigenlijk is het enige nadeel van positionering boven het input-veld dat de totale verticale ruimte van een formulier hoger gaat worden. Dan kan het zijn een deel van je formulier onder ‘the fold’ komt.

Placeholders in plaats van labels?

Nee, niet doen. Onderzoek wijst uit dat het gebruiken van placeholders nadelig is voor de usability van het formulier. Zo gaat de placeholder meestal weg bij het aanklikken van het input-veld. Dit is een uitdaging voor het korte termijn geheugen als bijvoorbeeld een bezoeker is afgeleid bij het invullen van het formulier. Groot nadeel is ook dat bij het gebruiken van alleen placeholder tekst (en geen labels) ingevulde velden niet te controleren zijn door de bezoeker. Er is dus een grotere kans dat er ‘false information’ in je database komt te staan. Als iemand niet oplet en zijn achternaam invoert bij de straatnaam heb je niets aan de informatie.

Eigenlijk is er maar één situatie te bedenken waar het gebruiken van een placeholder acceptabel is: bij het vragen van alleen een mailadres, bij bijvoorbeeld de inschrijving voor je nieuwsbrief.

Form placeholder ipv iput

Input-veld wat gebruik maakt van een placeholder tekst i.p.v. een label.

Paar laatste tips

Spacing / lucht

Maak je formulier niet te krap. Een bezoeker moet al informatie invoeren wat hij liever niet doet. Als het ook nog eens benauwd en krap is, is de kans groter dat de bezoeker afhaakt.

1 koloms formulier conversie verhogend

Voorbeeld van een formulier met goede spacing

formulier met slechte spacing

Slechte spacing geeft een benauwd en onvertrouwd gevoel

Autofocus op het eerste veld

Dit begeleidt een bezoeker gelijk naar je het formulier. Hoe eerder een bezoeker bij je formulier is na het laden van de pagina, hoe de groter de kans dat deze doorzet tot de submit button.

Formulier met autofocus

Formulier met autofocus

2 koloms formulier conversie verlagend

Formulier zonder autofocus

Submit button

Een submit button / cta button hoeft niet per se de kleur van de branding of huisstijl te zijn. Er is in principe per website, pagina of doelgroep uit te zoeken wat de beste kleur is voor een button. Daar is ook goed op te A/B-testen.

Ook is het aan te raden om onder de button  duidelijk aan de bezoeker te vertellen wat er gaat gebeuren naar het klikken op de submit button. Onder de button kun je verwijzen naar de privacy policy, disclaimer en algemene voorwaarden en vermelden dat alles via een veilige verbinding gaat (https/ssl).

Duidelijke validatie

Geef duidelijk aan bij de bezoeker wanneer een veld verkeerd is ingevuld. Als hiernaar gezocht moet worden is de kans groot dat men afhaakt.

Goede validatie van een formulier

Goede duidelijke validatie

2 koloms formulier conversie verlagend

Slechte onduidelijke validatie, een bezoeker moet opzoek naar verkeerd ingevoerde velden

Conclusie

Een formulier moet goed overzichtelijk zijn. Op de bovenstaande richtlijnen zijn per situatie afwijkingen mogelijk. Bij een lang formulier is het bijvoorbeeld voor een bezoeker fijner om een formulier juist wel in 2 kolommen te plaatsen. Zo’n formulier zal ook meer ruimte in beslag nemen en krijgt in de praktijk vaak een eigen pagina, in plaats van een onderdeel op een pagina te zijn. Vraag nooit meer informatie dan dat nodig is. Hoe minder velden een formulier heeft, des te hoger de conversie. Ook geeft de gemiddelde bezoeker niet graag zijn telefoonnummer af.

Succes!

Paul te Kortschot

Heb je een vraag of aanvulling, gebruik het formulier. 😉

  • bv. 0612345678
  • Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.
2018-07-10T09:34:04+00:00

Laat een reactie achter