Waar bestaat een formulier uit

Een formulier bestaat uit verschillende velden waarmee gebruikers input kunnen leveren. Boven elk veld staat een label dat aangeeft wat voor een input er verwacht wordt. Onder elk veld kan een extra help tekst staan die meer uitleg geeft over de te verwachte input.

Inputvelden zijn onder te verdelen in (onder andere) deze types:

• Tekst
• Email
• Wachtwoord
• Bestand
• Datum
• Nummer
• URL
• Telefoonnummer
• Buttons

Input kan ook geleverd worden doordat de gebruiker een keuze moet maken tussen verschillende opties. Deze worden onderscheiden door:

• Radio buttons: Hierbij kan de gebruiker slechts één optie kiezen
• Checkboxes: De gebruiker heeft de mogelijkheid om één of meerdere opties aan te vinken
• Select: Hierbij zijn de opties opgenomen in een dropdown element. Hoewel het mogelijk is om gebruikers meerdere opties te laten kiezen is het gebruikelijk dat er slechts één optie te selecteren is

 Met al deze elementen kun je simpele of complexe formulieren maken. De kunst is echter om formulieren te maken die makkelijk in het gebruik zijn.

Formulieren maken op basis van onderzoeksresultaten

Omdat formulieren een belangrijk onderdeel zijn van het internet is er al veel onderzoek gedaan naar hoe gebruikers deze invullen. Deze onderzoeken heb ik teruggebracht naar een aantal concrete tips.

Plaats het label boven het invoerveld

Uit onderzoek van Google blijkt dat een label het beste boven een invoerveld geplaatst kan worden. Door gebruik te maken van eye-tracking technologie werd aangetoond dat een gebruiker minder ‘fixaties’ (het laten rusten van de blik op een bepaald punt) nodig had wanneer het label boven het invoerveld stond. Deze formulieren waren daarom beter te scannen en werden sneller ingevuld in tegenstelling tot formulieren waarbij het label naast het invoerveld stond.

Gebruik 1 kolom

Uit onderzoek van het Baymard Institue, uitvoerder van grootschalige UX onderzoeken, dat het plaatsen van een formulier in meerdere kolommen leidt tot meer fouten. Gebruikers vergeten velden in te vullen of ze vullen foutieve informatie is omdat niet duidelijk is welk label bij welk veld hoort. 

Er zijn echter wel groeperingen mogelijk waardoor velden die logischerwijs bij elkaar horen wel naast elkaar kunnen staan. Denk daarbij aan straatnaam, huisnummer, postcode en plaats. Of voornaam, tussenvoegsel en achternaam.

Match lengte veld met verwachte input

In zijn boek Web Form Design: Filling in the Blanks geeft Luke Wrobleski bruikbare tips omtrent het ontwerpen van formulier op basis van onderzoek dat hij gedaan heeft.  Zo geeft hij dat een veld even lang moet zijn als de verwachte input. Een veld waar een huisnummer gevraagd wordt hoeft dus maar een paar karakter lang te zijn.

Vermijd secundaire acties zoals leegmaken of annuleren 

In datzelfde boek zegt Wrobleski dat secundaire acties bijna altijd tot verwarring leiden. Deze zijn bijna nooit nodig en kunnen er alleen maar voor zorgen dat de gebruiker per ongeluk zijn formulier leeg gooit. Denk bijvoorbeeld aan een ‘Reset’ knop naast de button waarmee het formulier verstuurd kan worden.

Mocht een secundaire actie noodzakelijk zijn zorg er dan in ieder geval voor dat deze visueel goed te onderscheiden is van de primaire actie. Waarbij de secundaire actie minder opvalt dan de primaire actie.

Markeer verplichte velden

Ook de Nielsen Norman Group heeft onderzoek gedaan naar hoe gebruikers formulieren invullen. Uit hun onderzoek blijkt dat het belangrijk is om onderscheid te maken tussen verplichte en niet verplichte velden door dit expliciet aan te geven bij het label. 

In het geval dat alle velden verplicht zijn kun je er voor kiezen optionele velden te kenmerken. Dit kun je doen door ‘optioneel’ te vermelden bij het label.

Maak keuzes direct zichtbaar

Een ander advies naar aanleiding van deze onderzoeken is om wanneer een gebruiker 3 of minder opties heeft om uit te kiezen deze dan direct zichtbaar te maken via radio buttons (als er maar één optie mogelijk is) of checkboxes (wanneer er meerdere opties mogelijk zijn). Gebruik in dit geval geen select (dropdown) element. Op deze manier krijgt de gebruiker direct de verschillende opties te zien zonder eerst de selectbox open te hoeven klikken.

Een toegankelijk formulier

Gebruikers moeten het formulier ook kunnen invullen door uitsluitend het toetsenbord te gebruiken. Door middel van de TAB toets moet de gebruiker door het formulier kunnen navigeren. Met behulp van een duidelijke focus indicatie weet de gebruiker welk veld hij of zij aan het invullen is.

Zorg ervoor dat het formulier voldoende contrast heeft. De randen (border) van deze velden moeten duidelijk te onderscheiden zijn van de achtergrondkleur. Controleer de achtergrondkleur en de voorgrondkleur met de contrastchecker van WebAIM.

Sluit niemand uit

Hoewel dit niet gebaseerd is op onderzoek benoemt Mike Monteiro in zijn boek ‘Ruined by Design’ een belangrijk punt ten opzichte van formulieren en het vragen naar gender. Hij omschrijft het als volgt: 

“If you honestly have a real reason that you need to know someone’s gender, just leave it an open field. People are gloriously complex. As a designer, I’m not going to trade someone’s happiness for a dataset that’s easier to sort.”

Overvraag niet

Wees kritisch bij elk veld dat je in het formulier plaatst. Heb je deze informatie echt nodig is? Enerzijds zorgt elk extra veld namelijk in een verlaging van het conversie percentage (het aantal mensen dat het formulier daadwerkelijk invult). Anderzijds creëer je een risico door data te vragen die niet nodig is en ook nog eens gevoelig blijkt te zijn. Je bent uiteindelijk verantwoordelijk voor het veilig bewaren van alle input die je vraagt en je moet weten (en communiceren) wat er met die data gedaan wordt. Om nogmaals Mike Monteiro aan te halen:

“The data we collect from users should be the absolute bare minimum in order to do the thing we are telling them is happening. The thing we are telling them is happening needs to be what’s actually happening. If you want more of their data to do something else later, you need to tell the user. If you, as the designer, don’t know what that something else is, do not let it make it onto the interface.”

Vragen of tips?

Heb je vragen over het bovenstaande of heb je zelf tips voor het ontwerpen en bouwen van gebruiksvriendelijke en toegankelijk formulieren? Laat het mij weten door hieronder een reactie achter te laten.