Eddy Boeve
Eddy Boeve op 27 juli 2016

Formulieren: Live with them!

De verzuchting van veel online marketeers. Een website zonder een formulier is geen website. Je hebt ze nodig voor contact (eenvoudig), voor een check-out proces (vaak al een stuk complexer), of voor het primaire business-proces: kan heel complex zijn. Goed, als we niet zonder kunnen, dan kunnen we er maar beter voor zorgen dat het gebruikersvriendelijke, goed converterende formulieren zijn. Want het gebrek aan die twee zorgt toch voor de meeste onmin tussen formulieren aan de ene kant en gebruikers en marketeers aan de andere kant.

Ik ben in mijn werk als UX- en conversiespecialist veel bezig met formulieren, and I love ‘em! Ze zijn vaak het meest complexe onderdeel van een website, er wordt traditioneel weinig aandacht door marketeers aan besteed, en ze dragen erg veel bij aan de gebruikerservaring en conversie van een website of applicatie. Prachtige plek om te beginnen toch?

Mythes
Eerst even een paar mythes rondom formulieren wegnemen.

“Ik heb geen contactformulier nodig, want wij hebben ons telefoonnummer op de site staan.” Nee, je hebt mensen die meteen gaan bellen, en mensen die liever even een berichtje achterlaten, zodat er later contact met ze gezocht kan worden.

“Ik heb ze ook niet nodig, want ik heb ons e-mailadres op de contactpagina laten zetten.” Fout, want bezoekers die niet de beschikking hebben over hun (eigen) e-mailclient, kunnen zo moeilijker contact opnemen. Verder kun je je afvragen, of ze de minimaal gewenste informatie wel achterlaten, zodat je fatsoenlijk terug kunt mailen.

“Ik hoef niet naar de kwaliteit van de check-out formulieren te kijken, want die komen linea-recta uit Magento. En die zullen er wel naar hebben gekeken.” Famous last words, zou je kunnen zeggen. Natuurlijk hebben ze wel een mooie default neergezet, maar in het algemeen is het niet zo dat ‘one size fits all’ de beste oplossing bij gebruikersvriendelijkheid en conversie is. Per organisatie, product en dienst zul je moeten kijken of een one-page check out niet beter is dan de standaard meer-pagina versie. En welke velden je laat invullen, welke verplicht zijn, hoe ze heten, en hoe het formulier visueel wordt getoond aan de bezoekers.

“Moeilijk, moeilijk? Wij hebben maar drie verplichte velden in ons formulier, hoe moeilijk kan dat zijn?” Om maar eens in herhaling te vervallen: typisch gevalletje beroemde laatste woorden. Onderzoek aan het invulgedrag van formulieren hebben namelijk een berg do’s and don’ts opgeleverd.

Laten we daar dus in mijn eerste, en zeker niet mijn laatste blog over formulieren, eens naar de eerste do gaan kijken.

Label-veldverbindingen
Je hebt best veel keus als je als ontwerper de labels en de velden van een formulier vrij op het lege blad mag plaatsen. Dit zijn er zo maar drie, of je het veld helemaal links van, helemaal rechts van of juist boven het veld plaatst.

En dan heb ik het nog niet over de variant waarbij het label (ook vaak meteen instructietekst dan) ín het veld staat. Maar is er nog verschil in het bezoekersgedrag bij deze verschillende vormen van label-veldverbindingen?

Gelukkig is hier veel onderzoek naar gedaan. De slechtste is verrassend genoeg die het meeste gebruikt word, namelijk “Left Aligned”! De beste is gelukkig degene die je steeds meer ziet, “Top Aligned”. Maar zoals bij veel medicijnen, moet je wel de bijsluiter lezen. De kernbegrippen daarin zijn “visuele fixatie”, het herkennen van een begin van een label en van het bijbehorende veld, de “visuele richting”, de beweging van de ogen om bij het volgende label-veld te komen, en lengte van het formulier.

Wellicht begint het nu al wel te duiden waarom “Top aligned” veel beter is dan “Left Aligned (en ook “Right Aligned”). Kijk maar eens naar de onderstaande weergave van het aantal fixaties (fixations) versus richtingen (directions):

Labels die uitgelijnd zijn boven het invulveld reduceren de tijd dat het (gemiddeld gezien) kost om het formulier volledig in te vullen. Dit geldt vooral voor veel voorkomende invulvelden (zoals naam, adres, creditcard, enz.). De reden is dat er slechts een enkele oogfixatie nodig is om label en invulveld te herkennen. Verder is er 1 visuele richting, zodat er minder of geen fouten gemaakt worden bij het herkennen welk label bij wel veld hoort. Aan de bovenkant uitgelijnde labels werken ook prima bij formulieren die vertaald moeten worden of lange labels omdat er voldoende ruimte beschikbaar is voor het label zonder negatieve impact op de lay-out van de betreffende internetpagina. Alleen voordelen dus? Nou, er is wel het nadeel dat top-uitgelijnde labels veel verticale ruimte in beslag nemen, waardoor formulieren langer lijken, en in de ogen van gebruikers vaak daarom complexer overkomen. Ook vergt het veel van het design: anders kan er verwarring gaan ontstaan of een label nu bij het veld er onder of juist bij die er boven hoort.

Formulieren met links uitgelijnde labels kosten (gemiddeld gezien) de meeste tijd om in te vullen, vanwege het aantal oogfixaties dat hiervoor nodig is. En verder maken invullers vaker fouten vanwege de twee visuele richtingen, waardoor vaak abusievelijk een huisnummer bij een postcode wordt ingevuld. Net als bij rechts uitgelijnde velden is er ook het probleem van vertalingen van velden die meer ruimte innemen, waar het probleem van lange velden = problemen bij fixatie nog sterker wordt. Dus nooit doen? Nou, je hebt wel het voordeel dat het formulier korter lijkt. En ook in gevallen waarbij het scannen van de verschillende labels belangrijk is, bijvoorbeeld in formulieren met veel optionele velden, of met informatie die normaliter niet zoveel gevraagd wordt.

Rechts uitgelijnde labels zorgen er voor dat de afstand tussen het label en het veld zo klein mogelijk is, waardoor het probleem met de vele fixaties een stuk kleiner is dan bij links uitgelijnd, zoals hierboven beschreven. Verder is hier het scannen van de labels als dat belangrijk is, bijvoorbeeld bij veel optionele velden, een stuk moeilijker door de “rafelige rand” die links ontstaat.

En dan nog de variant van het label in het veld, die verdwijnt op het moment dat je je muis in het veld plaatst? Dat levert zeker kortere formulieren op en geen verwarring met boven/onder het veld, dus nog beter. Maar dan moet je de invuller van het veld wel ondersteunen bij het bepalen wat ook al weer het label was als er in het veld geklikt is. Daar zijn mooie visuele oplossingen voor verzonnen: label schuift bij de klik in het veld naar rechts, of verplaatst zich even buiten het vakje tijdens het invullen. Dat vergt wel wat meer techniek. Deze kennis heeft er intussen wel voor gezorgd dat de labels bij de formulieren van de Coolblue-site nu allemaal netjes rechts uitgelijnd zijn.