Laatst hadden we een workshop over het ontwerpen van online formulieren. Jet de Ket van de Belastingdienst gaf ons een kijkje in de gaarkeuken van de belastingdienst; voor wat betreft het designgedeelte dan. Het werd in ieder geval duidelijk dat voor zo een groot bedrijf als de Belastingdienst er wel een erg karige hoeveelheid aandacht geschonken wordt aan de tak van het interactie ontwerp. Ze laten dan nog wel eens wat steekje vallen als het hier op aan komt.

Dit ook bij het ontwerpen van de formulieren waarmee de belastingdienst zo bekend is, en is geworden. Niemand vind het leuk om dergelijke formulieren in te vullen, niemand doet het voor zijn of haar plezier. Dit moet dus zo gebruikersvriendelijk als mogelijk is gemaakt worden. Hier mag wel een beetje extra aandacht aan geschonken worden.

Als opdracht kregen we mee om een ontwerp te maken voor het formulier ‘Opgaaf startende ondernemer’; bekijk de orginele versie. Het formulier moet op de website van de Belastingdienst ingevuld kunnen worden. Het moet dus ook voldoen aan de huisstijl van de Belastingdienst. En natuurlijk zo gebruiksvriendelijk als mogelijk!

Ik heb het een en ander aan informatie doorgenomen aangaande het ontwerp van online formulieren. Daaruit heb ik een aantal wetenswaardigheden gefilterd. Allen van belang bij het goed en gebruiksvriendelijk ontwerp van formulieren.

• Het effectiefst werkt de label boven het invulveld plaatsen. Zo is in een oogopslag duidelijk wat er middels het invulveld van de gebruiker gevraagd wordt. Mensen werken in formulieren van boven naar beneden.
• Wanneer de meeste velden verplicht zijn, markeer de niet verplichte velden. Wanneer de meeste velden niet verplicht zijn, markeer de verplichte velden.
• In alle gevallen geldt: probeer niet verplichte velden te vermijden.
• Tekst werkt het best, maar voor verplichte velden is markeren met een * duidelijk.
• De verschil in lengtes van velden werkt ook verduidelijkend voor wat er ingevuld moet worden. Maar om ruis te voorkomen kan er ook gekozen worden voor gelijke lengtes van velden.
• Maak gebruik van (zo minmogelijk) visuele ondersteuning om relevante relaties van vragen aan te geven. Dit helpt bij het scannen.
• Maak duidelijk onderscheid tussen primaire en secundaire buttons. Wanneer mogelijk, vermijd secundaire opties.
• Lijn de buttons uit met de uitlijning van de vragen/velden. Zo heeft de gebruiker een duidelijk doel en een ‘rechte weg’ naar het completiseren van het formulier.
• Wanneer er veel verduidelijking nodig is, maak gebruik van dynamische hulpmiddelen.
• Bij grote formulieren: laat de progressie zien; maak het mogelijk om dingen op te slaan.
• Bij het invullen van formulieren wordt vaak gebruik gemaakt van ‘tabbing’. Bedenk dit bij het ontwerp, zorg voor een goede html markup. Vermijd ‘multi-columning’.
• Maak gebruik van ‘finger section tabs’ voor een rechte lijn naar completiseren.
• Directe feedback, wanneer de gebruiker aan het invullen is, verhoogt de snelheid. (communiceer niet alleen of iets voldoet, maar ook limieten. )
• Fouten/ontbreken van informatie duidelijk communiceren: aan de top van de pagina en met ‘double visual language’.
• Geef feedback wanneer een actie volbracht of bezig is. Zowel tekstueel als visueel, met de mogelijkheid het weer uit beeld te doen verdwijnen.
• Gebruik de <label> tag voor het labelen van input velden. Dit wordt correct geïnterpreteerd door screan readers.
• Gebruik de ‘tabindex attribute’ voor een correct tabpad.

Met deze punten in het achterhoofd heb ik de volgende wireframes gemaakt voor het formulier van de Belastingdienst. Klik op de afbeeldingen voor het juiste formaat.

Ik heb het ontwerp verder uitgewerkt in een aantal afbeeldingen die de flow van het invullen van het formulier weergeven. Bij het ontwerp is rekening gehouden met de beschikbare ruimte op de website van de Belastingdienst, alsmede de huisstijl. Bekijk hieronder de afbeeldingen; klik op de afbeeldingen voor het juiste formaat.