Mijn tien geboden voor (web)formulieren

Niet in steen gebeiteld, maar zowat het lijstje waar ik mij dezer dagen aan hou:

Gij zult geen foutmeldingen geven die onnodig zijn

Als mensen een telefoonnummer invullen, accepteer dan alles. Vraag niet om het gebruik van haakjes, schuine strepen, puntjes of net het vermijden daarvan. Dat is gewoon lui, want je kan die dingen prima gelijkvormig maken nadat de gebruiker het formulier heeft verstuurd.

Gij zult beleefd zijn in uw foutmeldingen

‘Vul een juist e-mailadres in!’ is geen beleefde foutmelding. ‘Kijk het ingevulde e-mailadres na’ is al een pak beter. ‘Het lijkt erop dat er iets mis is met het ingevulde e-maildres’ heeft mijn voorkeur.

Gij zult fout ingevulde velden op twee plaatsen aangeven

Meerbepaald bij het veld zelf, en bovenaan het formulier of onderaan bij de submit-knop. Zo is het voor de gebruiker moeilijk te missen.

Gij zult geen informatie vragen die niet nodig is

Mensen haten formulieren. Elk extra veld is een drempel en een reden om weg te gaan. Als iemand een handtas van €15 bestelt, hoef je daar geen heel enquêteformulier aan te verbinden. Vraag alleen wat je nodig hebt, en nodig de gebruiker achteraf eventueel uit zijn/haar profiel te vervolledigen. Als je iets met die gegevens doet. Als het alleen maar is ‘omdat het misschien ooit van pas komt’, laat het dan.

Gij zult het <label> element fatsoenlijk gebruiken

Vooral bij checkboxes en radiobuttons is het heel handig dat wanneer je op de tekst bij het vakje klikt, het betreffende vakje ook aan- dan wel uitgevinkt wordt. Maar ook bij tekstvelden is dat bijzonder praktisch.

Gij zult geen UI widgets vervangen door uw eigen geknutsel

Mensen zijn het gewend dat een tekstveld, een knop, een radiobutton en een checkbox er op een bepaalde manier uitzien. Daarvan afwijken is zelden een goed idee. Uploadvelden zijn wellicht een uitzondering. Het zelf wijzigen van formulierelementen kost bovendien tijd en moeite, en de kans is reëel dat het in heel wat (mobiele) browsers niet fatsoenlijk werkt.

Gij zult HTML5 field types gebruiken

De toekomst lacht ons toe. Vroeger hadden we voor een tekstveld alleen ‘text’ of ‘password’ als veldtype. In HTML5 is daar heel wat meer bijgekomen. ‘email’ bijvoorbeeld, of ‘number’. Op mobiele browsers zorgt het gebruik daarvan ervoor dat een specifiek schermtoetsenbord getoond wordt. Met resp. een prominente @ of alleen maar cijfertjes.

Gij zult labels boven de formuliervelden plaatsen

Uit het meeste gebruikersonderzoek blijkt dat die plaats optimaal scannen van het formulier toelaat en ook visueel rust geeft. Alle velden staan netjes onder elkaar en ‘vlaggen’ niet.

Gij zult de tabvolgorde respecteren

Ervaren gebruikers springen van veld naar veld met de tab-toets. Als je die volgorde door elkaar haalt, erger je in het beste geval die gebruikers. In het slechtste geval hebben ze het niet door en wordt het formulier fout verzonden.

Gij zult niet enkel client-side valideren

Javascript-validatie van formuliervelden is geweldig. Je kan meteen feedback geven en hoeft geen pagina te verversen. Maar erop betrouwen is nog wat anders. Voor je gegevens opslaat in een database moet je ze altijd checken op de server, zonder afhankelijk te zijn van Javascript-validatie in de browser.

Eén reactie op “Mijn tien geboden voor (web)formulieren”

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *