In dit artikel bespreken we 8 tips om je online formulieren, bijv. een contact formulier of een checkout formulier, te verbeteren.
In dit artikel bespreek ik 8 tips om je online formulieren, bijv. een contact formulier of een checkout formulier, te verbeteren.
Vraag enkel de meest relevante info. Als telefoonnummer of het adres in de huidige stap niet nodig – vraag er dan niet naar! Less is more werkt hier perfect.
Op die manier creëer je twee voordelen:
Probeer de gebruiker zo veel mogelijk te helpen. Als je al enige informatie over hem weet, vul die velden dan vooraf in of laat ze zelfs helemaal niet zien.
Bijvoorbeeld:
Laat de gebruiker wel toe om automatisch ingevulde velden aan te passen.
Bij een ontwerp met één kolom bewegen de ogen in een natuurlijke richting – van boven naar beneden door één enkele lijn. Bij een ontwerp met meerdere kolommen gaan de ogen zigzaggen. Dat verhoogt de voltooiingstijd en het aantal oogbevestigingen.
Bovendien vermijdt deze aanpak onnodige vragen als “Waar moet ik beginnen? Welk veld is het eerste? Welk is het tweede: onderaan of aan de rechterkant? Zijn de vragen in de linkerkolom gelijk aan de vragen in de rechterkolom? Of zijn ze onafhankelijk? Waarom zijn ze gescheiden?”…
Enkele uitzonderingen:
Als je formulier veel velden bevat, probeer ze dan in logische groepen te verdelen door er wat extra spaties of sectietitels tussen te zetten. Deze aanpak voorkomt gedachten als “Te veel vragen! Ik laat dit voor morgen…”.
De indeling in paragrafen werkt op dezelfde manier. In plaats van de vaste lap tekst, lees je het per portie.
Om het aantal fouten, verkeerde gegevens, enz. te beperken, dien je gebruik te maken van invoerbeperkingen.
Het (krediet)kaartnummer bestaat altijd alleen uit cijfers, dus het is niet nodig om andere symbolen toe te laten. Denk ook aan de mobiele telefoon. Toon enkel een numeriek toetsenbord indien enkel cijfers toegelaten zijn. Deze regel geldt natuurlijk ook voor een heleboel andere velden.
Gebruik visuele beperkingen zodat de gebruiker niet het idee krijgt om meer te typen dan nodig is.
Bijv. het veld postcode hoeft niet zo lang te zijn als het veld gemeente.
Bovendien dient een verschillende breedte van de velden als een goed anker voor de ogen om sneller te navigeren dan in een kolom met de velden van dezelfde breedte.
Toon foutmeldingen bij het veld waarop het van toepassing is, niet elders op de pagina.
En, nog belangrijker, probeer uit te leggen wat de oorzaak van het probleem is. Vermijd vaak voorkomende boodschappen als ‘Er is iets misgegaan. Probeer het later nog eens’ of ‘Error 999’. Een gebruiker zal dergelijke berichten nooit begrijpen. Probeer in plaats daarvan menselijke taal te gebruiken en leg uit wat de gebruiker/het systeem precies fout heeft gedaan, en wat er precies moet worden opgelost/aangevuld.
De hoofdregel hier is de labels niet te verbergen, zodat de gebruiker de context niet verliest. Daarom moeten de labels bij voorkeur buiten het veld staan. Als er voldoende ruimte is, gebruik ze dan aan de linkerkant van het veld.
De labels boven het veld zetten is ook prima, zeker op mobile is dit een betere optie door de geringere beschikbare ruimte.
Een andere goede optie is om het label naar boven te verhuizen van zodra het veld focus heeft.
In veel gevallen kan je de gebruiker extra helpen door placeholders in de velden te gebruiken als hinttekst. Je kan bijv. laten zien hoe het antwoord eruit moet zien – de opmaak, structuur, enz.
Goed formulier ontwerp draagt wel degelijk bij tot meer conversies.
Contacteer me gerust voor meer info.