21 mei 2015 - 

Leuk! Formulieren invullen...

Formulier

...zei nog nooit iemand. Formulieren zijn vaak niet echt geliefd door de bezoeker, maar wel een essentieel onderdeel van websites. Wat als ze gebruiksvriendelijker gemaakt kunnen worden?

 

Tegenwoordig is er veel mogelijk om de bezoeker te helpen met het invullen van formulieren. Met de nieuwste technieken zijn formulieren niet alleen visueel aantrekkelijker te maken, maar kan de algehele ervaring verbeterd worden. Er zijn verschillende manieren om dat te bereiken en in dit artikel zal ik u meer vertellen over een aantal van die manieren. De gegeven voorbeelden komen rechtstreek van onze eigen website. Wilt u het formulier 'in het echt' zien? Bekijk dan ons contactformulier.

 

Validatie

De controle gebeurt meestal nadat de gebruiker op de verzendknop heeft geklikt, maar waarom zou je de gebruiker niet meteen feedback willen geven? Het is mogelijk om velden na, of zelfs tijdens, het invullen te valideren en direct feedback te geven aan de gebruiker. Hiermee voorkom je dat de deze terug moet scrollen en opnieuw moet kijken wat hij/zij heeft ingevuld. Zo verzeker je dat de juiste informatie wordt ingevuld.

 

Hieronder een voorbeeld van hoe wij het op onze website aanpakken. Als een verplicht veld is overgeslagen wordt dit visueel duidelijk gemaakt:

 

Zodra het veld correct is ingevuld komt er aan de rechterkant een goedgekeurd vinkje te staan.

 

Speciale velden

In eerdere versies van HTML was er één algemeen veld voor alle soorten tekst, maar met de komst van HTML5 zijn er nieuwe types bijgekomen. Zo kun je nu aan de browser vertellen of het veld bijvoorbeeld een e-mail adres, telefoonnummerof datum moet bevatten. Aan de hand daarvan voert de browser zelf al een validatie uit. Het voordeel daarvan is dat deze altijd in de taal van de gebruiker wordt weergeven. Voor mobiele apparaten komt daar nog een groot voordeel bij: Het toetsenbord past zich aan, aan het type veld. Zo kun je dus sneller en makkelijker de juiste gegevens invoeren.

 

toetsenborden

 

Placeholders

Placeholders zijn de teksten die zichtbaar zijn in formuliervelden voordat de gebruiker er iets heeft ingevuld. Je kunt hier teksten in zetten om de gebruiker duidelijk te maken wat er van hem/haar verwacht wordt. Denk hierbij aan een e-mail veld met daarin een voorbeeld als naam@emailadres.nl of een korte zin zoals 'Vul hier uw emailadres in'.

 

Grafische voorbeelden

Een formulier hoeft tegenwoordig helemaal niet meer een lijst van saaie velden te zijn. Ze mogen er gerust uitspringen door middel van grafische effecten. Wilt u de gebruiker in alle rust het formulier laten invullen? Wat dacht u van één groot formulier welke stap voor stap een vraag stelt.

Bekijk hier een aantal voorbeelden

 

In het volgende voorbeeld zijn placeholders gebruikt welke zichtbaar blijven na invullen van het veld. Je creëert daarmee de illusie dat het formulier korter is dan het daadwerkelijk is:

Bekijk hier het voorbeeld

 

Nuttig voor u?

De beschreven technieken zijn op alle soorten sites inzetbaar: Van desktop tot mobiel en responsive. Ze bieden meer gemak voor bezoekers vanaf elk apparaat, maar zeker mobiele bezoekers. Vaak zijn deze technieken goed in bestaande websites te integreren. Wilt u daarom weten wat de mogelijkheden voor uw site zijn?

Neem dan contact met ons op

Terug naar blog