Formulieren

Via een aantal simpele toevoegingen kan een standaard (web)formulier worden omgetoverd tot een gebruiksvriendelijk formulier. Door ervoor te zorgen dat het formulier er visueel aantrekkelijk uitziet wordt meteen bereikt dat de gebruiker het prettiger vindt om een formulier in te vullen. Bovendien zal de drempel om dit daadwerkelijk te doen worden verlaagd. Een aantal tips:

 

1.  Zorg voor een duidelijke structuur

Het geordend weergeven van informatie zorgt voor een rustige omgeving. Dit is prettig voor de gebruiker. Geef duidelijk aan welke kop bij welk veld hoort en lijn alles goed uit.

 

Bij de website van ABZ zien we dat er geen ondersteuning van visuele elementen zoals achtergrondkleur of lijnen is gebruikt. Hierdoor wordt een beetje het idee gegeven dat velden lukraak worden geplaatst. Bovendien is de breedte van de colom niet overal gelijk.

Formulier website ABZ

 

De website van vaya zorgt voor een gestructureerde weergave. De vragen worden afgebakend met een subtiel lijntje tussen de velden en de ruimte tussen de velden en de border is ook comfortabel. Verder is hier de colombreedte wel consistent.

Website vaya

 

2. Geef aan welke velden verplicht zijn

Geef duidelijk aan welke velden verplicht zijn. Vaak wordt dit gedaan via het plaatsen van een asterix (*) achter het veld maar dit kan ook op een andere visuele manier worden ingevuld. Belangrijk is dat de velden duidelijk worden geaccentueerd.

Woongaard maakt gebruik van een cirkel. Dit icoon is duidelijk waarneemwaar waardoor in één oogopslag zichtbaar is welke velden verplicht zijn.

Formulier Woongaard

 

3. Voorzie velden van een informatie-funtie

Bij het invullen van een formulier kan onduidelijkheid ontstaan over de in te voeren informatie in een bepaald veld. Dit kan komen omdat de omschrijving van het veld niet geheelomvattend is. Hypotheekofferte.nl heeft via een informatie-icoon een functie toegevoegd waarmee de gebruiker extra informatie kan inwinnen over het veld. Door over het icoon te navigeren wordt een extra kader weergegeven waarin een uitgebreide omschrijving van het veld wordt getoond.

Formulier Hypotheekofferte

 

4. Deel het formulier in secties in

Formulieren waarin veel informatie wordt gevraagd kunnen de gebruiker afschrikken. Daarom kunnen secties binnen een formulier zorgen voor structuur. Hierdoor worden de velden niet meer als één lange lijst weergegeven maar wordt de gebruiker via kleine formulieren door het complete formulier begeleid. Een bouwtekening van een Ikea kast wordt ook niet in één bladzijde weergegeven maar de gebruiker wordt stap voor stap meegenomen bij het in elkaar zetten van de kast.

 

Lenen.nl heeft het formulier opgesplitst in diverse onderwerpen. Zo kunnen de persoonlijke- of adresgegevens prima worden gebundeld. Via 5 ‘stappen’ kan het formulier worden ingevuld.

Formulier lenen

 

Een andere manier om informatie te bundelen is via een zogenaamde wizard. De verschillende onderwerpen worden aangeboden in diverse pagina’s. Zo wordt het omvangrijke formulier opgesplitst en zijn niet alle velden zichtbaar. Zorgverzekeraar FBTO heeft een prima formulier. Aan de rechterzijde wordt een progressieveld weergegeven. Hierin is zichtbaar welke pagina van het formulier momenteel zichtbaar is en hoeveel pagina’s er nog ingevuld dienen te worden. Hiermee kan ook terug worden genavigeerd in het formulier. Als alle velden van een pagina zijn ingevuld, kan via een ‘volgende’ knop verder worden gegaan met de volgende pagina van het formulier.

 

5. Breng een foutmeldingsfunctie aan

Als iemand een veld niet naar behoren heeft ingevuld dient deze te worden ingelicht met een tip hoe dit wel zou kunnen. Bruna heeft een prominente plaats ingeruimd voor de foutmelding. Boven het formulier wordt een rood kader (kleur is gangbaar en wordt geassocieerd met fouten) weergegeven waarin wordt aangegeven welke velden niet goed zijn ingevuld. Een ander alternatief is om de foutmeldingen weer te geven bij de velden in het formulier.

Foutmelding formulier Bruna

 

6 Gebruik geen wis button

Onwijs frustrerend is de ‘wis’ button. Op het moment dat je net een formulier hebt ingevuld en je denkt dat je op verzenden hebt geklikt blijkt ineens dat je het verkeerde knopje hebt gebruikt. Alle informatie is weg. Voeg daarom nooit een wis button toe zoals ABZ dit heeft gedaan. Welke toegevoegde waarde heeft het? Het is alleen maar irritant en zorgt voor verwarring.

Buttons formulier ABZ

 

Conclusie

Nog één keer alle zaken op een rijtje:

  1. Zorg voor een duidelijke structuur
  2. Geef aan welke velden verplicht zijn
  3. Voorzie velden van een informatie-funtie
  4. Deel het formulier in secties in
  5. Breng een foutmeldingsfunctie aan
  6. Gebruik geen wis button 

Als deze zaken worden gehanteerd is een formulier erg gebruiksvriendelijk. Misschien zijn er nog meer functionaliteiten die een formulier kunnen verberen?


Reacties

plaats hier je commentaar of inhoudelijke aanvulling

Extra

Promotioneel geleuter

Abonneer
Volg nu de vormgeving vandaal via RSS...
Tweets
Volg nu de vormgeving vandaal via Twitter...

Inhoud

Artikelen op deze website