Een van de resultaten van de algemene formulieren werksessie van 16 maart was een ‘formulierenreis’. Tijdens de werksessie van 13 april zijn we vervolgens dieper ingegaan op hoe we een formulier kunnen groeperen en opsplitsen in meerdere stappen, als onderdeel van stap 1 van het ontwerpen van een formulier ‘Vormgeving en structuur’:
In 6 groepen gingen we aan de slag gegaan met de volgende 3 vragen:
- Hoe groepeer je onderwerpen?
- Hoe breek je een formulier op dat veel informatie bevat?
- Hoe navigeer je hierdoor en weet je te allen tijde waar je vandaan komt, momenteel bent, en naartoe kan gaan?
De uitkomsten hiervan zijn terug te vinden op het Miro-bord van de sessie.
Het was wederom erg fijn om te zien dat vanuit verschillende disciplines en organisaties volop kennis en goede voorbeelden werden gedeeld. De resultaten uit deze sessie zijn weer verdere input voor de richtlijnen in het NL Design System.
We nodigen je van harte uit om deel te nemen aan het Google Doc ‘Richtlijnen voor formulieren’ om suggesties of wijzigingen toe te voegen, bronnen te delen of vragen te stellen.
We zien ook graag relevante onderzoeksresultaten tegemoet. Momenteel kan dat het beste per e-mail gestuurd worden. Afhankelijk van het formaat van deze documentatie gaan we kijken hoe we deze het beste een plek kunnen geven.
We delen nu al graag een aantal eerste conclusies uit de sessie.
Waar begin je als je een formulier ontwerpt?
Deze stappen kun je aanhouden als leidraad bij het vormgeven van een formulier:
- Formuleer eerst alle vragen die je aan jouw gebruiker wilt stellen.
- Bedenk of al deze vragen daadwerkelijk nodig zijn om uit te vragen (is het bijvoorbeeld nodig om naar het geslacht of geboortedatum te vragen? Wat is het doel hiervan voor de organisatie en (vooral ook) het voordeel voor een gebruiker?
- Groepeer de vragen. Doe dit vanuit de visie van de gebruiker, en niet vanuit jouw organisatie. In deze stap betrek je idealiter een aantal echte gebruikers die helpen de vragen te groeperen.
- Ontstaan er zo veel groepen dat het voor gebruikers overweldigend dreigt te worden om deze op één pagina te tonen? Of wordt de pagina hierdoor erg lang? Overweeg deze dan over meerdere stappen te tonen. Gebruik daarbij wel heldere navigatie.
- Indien een gebruiker niet alle vragen uit zijn hoofd kan beantwoorden en bijvoorbeeld een paspoort of bankgegevens moet opzoeken, dan is het raadzaam een ‘startstap’ toe te voegen met een overzicht wat een gebruiker nodig heeft om het formulier succesvol in te vullen.
Algemene vormgeving
Veel gebruikers zien op tegen het invullen van online formulieren. Zorg er daardoor voor dat er zo min mogelijk afleiding is op formulierenpagina’s en hou deze zo simpel mogelijk.
Enkele vragen, meerdere elementen
Duidelijk is dat een enkele vraag op een formulier niet slechts één formulierelement hoeft te zijn. Het vragen van NAW-gegevens (“Wat is uw naam en adres?”) of een geboortedatum bestaan immers uit meerdere elementen om deze enkele vragen te beantwoorden.
Groeperen
Omdat het groeperen van vragen op formulieren van de context afhankelijk is, is het lastig om harde richtlijnen op te stellen. Het is vaak maatwerk. In de praktijk komen veel uitzonderingssituaties voor. Het illustreren met voorbeelden van verschillende formulieren kan hierbij helpen. Mochten jullie voorbeelden voorhanden hebben dan ontvangen we deze graag!
Enkele standaarden voor ‘groepeerblokken’ zijn vast te stellen, zoals voor NAW-gegevens, ondertekening, bankgegevens, geboortedatum en toe te voegen bijlagen. De volgorde waarin deze blokken getoond worden kan echter per doel verschillen.
Het nadenken over hoe een groep in HTML geïmplementeerd wordt door middel van het <fieldset> element kan helpen vragen visueel te groeperen. Ook de ‘boekhoofdstuk metafoor’ of waar een koptekst moet verschijnen, kan hulp bieden bij het groeperen. Gebruikers vragen wat voor hen een logische groepering is, is uiteraard een hele goede methode om te groeperen.
Sorteren
Groepen kunnen op verschillende manieren gesorteerd worden. Een van de opties is dat eerst makkelijke vragen, en daarna de moeilijke aan bod komen. Een andere optie is om eerst vooringevulde antwoorden op vragen te tonen. Optionele vragen – mits ze niet bij een bepaalde groep horen- stel je aan het einde.
Een gebruiker moet voordat hij aan het formulier goed kunnen zien of het formulier of een vraag voor hem bedoeld is. Als een gebruiker niet voor een bepaald onderdeel of bepaalde vraag niet in aanmerking komt, moet dit snel in het proces duidelijk zijn. Beslisbomen kunnen hierbij helpen. Zet zo’n beslisboom vooraan in het formulier.
Navigeren
Wanneer een formulier in meerdere stappen wordt opgebroken, dan is het belangrijk deze van goede navigatie te voorzien. Hierdoor weet een gebruiker ten alle tijden waar hij vandaan komt, op dat moment is, en naartoe kan gaan. Navigatie kan tevens dienst doen om voortgang en eventuele validatiefouten te tonen.
Bewerken en tussentijds opslaan
Het moet mogelijk zijn om stappen terug te gaan en antwoorden te bewerken. Het tussentijds opslaan van antwoorden is hierbij van belang, al is dit niet altijd wenselijk (bijvoorbeeld als om een machtiging gevraagd wordt). In deze gevallen is het wellicht een optie om deze vragen op 1 pagina te tonen.
Verschillende soorten formulieren
Formulieren met condities zijn lastiger op te breken. Antwoord op een vraag in een stap kan er voor zorgen dat een extra stap nodig is. Hierdoor kan de navigatie wijzigen en een gebruiker in de war raken. Daarom maken we onderscheid in 3 soorten formulieren:
- Korte, bondige formulieren. Deze kunnen op 1 pagina getoond worden. Een kort formulier is bijvoorbeeld een formulier met slechts 1 groep of maximaal 3 groepen vragen.
- Lange formulieren zonder condities. Deze kunnen over meerdere pagina’s of stappen verspreid worden. Navigatie is voor deze formulieren inzichtelijk, omdat alle afzonderlijke groepen vast staan. Een gebruiker kan ook op voorhand alle vragen doornemen.
- Lange formulieren mét condities. Ook deze formulieren beslaan meerdere pagina’s of stappen. Omdat het antwoord op een vraag invloed kan hebben op vervolgvragen, en zelfs hele groepen van vragen contextueel wel of niet getoond worden, kan navigatie voor deze formulieren niet altijd vooraf vaststaan. Een gebruiker kan dan niet alle vragen doornemen. Vooruit navigeren is hierdoor vaak niet mogelijk, terug navigeren uiteraard wel.
Presentatie Ed Boon
‘Formulierenarchitect’ Ed van Visioned ging in zijn presentatie dieper in op de WCAG-richtlijnen om formulieren toegankelijk te maken. Tevens liet hij ons het One Thing Per Page ontwerppatroon zien, dat bijvoorbeeld ook bij GOV.UK wordt toegepast. Dit patroon kan tevens op formulieren toegepast worden. Een koptekst met een groep vragen kan bijvoorbeeld op een enkele pagina gesteld kan worden.
Het groeperen van vragen kan er ook voor zorgen dat de juiste informatie automatisch bij de juiste afdeling terechtkomt. Dit maakt de afhandeling voor de organisatie makkelijker en de gebruiker wordt sneller geholpen.
Hij liet ons zien dat een formulier niet altijd de beste manier is om een gebruiker snel van informatie te voorzien. Een intelligente chatbot zou ook al veel voorkomende vragen kunnen afvangen. Een simpel telefoontje kan tevens uitkomst bieden.
Vragen?
Heb je vragen of opmerkingen? Dan kun je contact met op ons nemen via NLDesignSystem@gebruikercentraal.nl of rechtstreeks met Rogier.
