Meerstappenformulier

[Rozerinay]

Meerstappenformulier

Welkom bij de GitHub Discussion voor een meerstappenformulier. In deze Discussion willen we graag de meest recente ontwerpen delen, ervaringen uitwisselen, en gezamenlijk werken aan het optimaliseren van formulieren.

Doelen

• Inzicht bieden in de designs. We laten graag zien welke wijzigingen er zijn doorgevoerd en hoe we tot de huidige ontwerpen zijn gekomen.
• Feedback en lessen. We willen graag jullie feedback horen en de lessen die jullie zelf hebben geleerd met betrekking tot formulieren ontwerpen. Zo kunnen we onze template continu verbeteren.
• Bron van waarheid. Samen willen we één centrale plek creëren waar alle informatie over de meerstappenformulier template staat. Dit is waardevol voor gebruikers die deze template willen gebruiken.
• Vragen stellen. Iedereen is uitgenodigd om vragen te stellen, inzichten te delen en samen te sparren over mogelijke verbeteringen.

Templates

• Startpagina
• Intropagina
• Controlepagina
• Bevestigingspagina

Patronen

• Voortgang indicatie
• Verplichte velden
• Gegevens uitvragen
• Foutmeldingen
• 'Volgende stap' actie
• Opslaan of Stoppen
• Terug navigeren
• Inloggen
• Bestand toevoegen
• Page Header
• Page Footer / Hulp bieden
• Stapelen en uitlijnen
• Visueel ontwerp

Richtlijnen

Introductie richtlijnen NL Design System voor formulieren
Onze richtlijnen rondom formulieren. Hierbij zijn we uitgegaan van toegankelijkheid, gebruikersvriendelijkheid en consistentie, ondersteund door gebruikersonderzoek. Per onderdeel verwijzen we naar specifieke richtlijnen.

Onderzoek

Workshop: Forms, Forms, Forms - Miro (2023)
Initiatief vanuit Den Haag waarbij verschillende designers online bij elkaar kwamen om design vraagstukken rondom meerstappenformulieren met elkaar te bespreken en keuzes te maken.

Onderzoek: Contactformulier voor WMEBV - Gebruikersonderzoeken.nl (2023)
Gebruikersonderzoek uitgevoerd door Stichting Accessibility, in samenwerking met VNG en het NL Design System. Het onderzoek richtte zich op een meerstappenformulier om contact op te nemen met de gemeente. Het meerstappenformulier is voorgelegd aan mensen met een beperking of die minder taalvaardig zijn. Het formulier maakt onderdeel uit van een handreiking die is geschreven in het kader van de Wet modernisering elektronisch bestuurlijk verkeer (WMEBV).

• Meer informatie over het WMEBV project
• Bekijk het formulier dat is gebruikt tijdens het onderzoek
• Bekijk de formulier templates in Figma

Onderzoek: Vergunning aanvragen - Gemeente Den Haag (December 2023) (PDF, 6,1 MB)
Gemeente Den Haag heeft onderzoek gedaan naar een meerstappenformulier rondom het aanvragen van een vergunning. Het prototype is voorgelegd aan ondernemers.

Onderzoek: Nieuwe klachtenformulier Gemeente Utrecht - Gebruikersonderzoeken.nl (2024)
Gebruikersonderzoek uitgevoerd door gemeente Utrecht, waarbij is gekeken naar het nieuwe klachtenformulier. Daarbij stond de volgende vraag centraal: "Wat zijn de pijn- en fijnpunten die een inwoner ervaart bij het doen van een klacht (openForms formulier) op het gebied van design, interactie en flow van het nieuwe formulier?"

Onderzoek: Generiek Klachtenformulier - Ronde 1 (Juni 2024)
Tijdens de Design Open Dag van juni hebben we een meerstappenformulier voor het indienen van een klacht voorgelegd aan inwoners van Utrecht. Het formulier en het onderzoek zijn tot stand gekomen door een samenwerking van verschillende gemeenten om tot een generiek klachtenformulier te komen.

Onderzoek: Generiek Klachtenformulier - Ronde 2 (November 2024)
Tijdens de Design Open Dag van november hebben we een tweede ronde onderzoek gedaan voor het generieke klachtenformulier. Daarbij wilde we achterhalen over de aanpassingen ten opzichte van ronde 1 daadwerkelijk een verbetering waren.

Handige linkjes

Meerstappenformulier template - Figma
Ons ontwerp van de meerstappenformulier template in Figma.

[jeffreylauwers]

Startpagina

Het startpunt van een meerstappenformulier kan verschillen. Toch kunnen we al het een en ander vaststellen.

Gerelateerde componenten

• Link
• Button

[jeffreylauwers]

Workshop: Forms, Forms, Forms

Tijdens de Forms, Forms, Forms workshop probeerde we als designers tot een antwoord te komen op de volgende vragen:

• Willen we op de productpagina al aangeven dat je moet inloggen?
• Welke tekst gebruik je voor de call-to-action? Is deze generiek of specifiek voor het achterliggen formulier?

Bekijk het Forms, Forms Forms, Miro board voor antwoorden, aanvullende vragen, inspiratie en schetsen.

[jeffreylauwers]

Onderzoek: WMEBV

Het startpunt van een meerstappenformulier dat we aan eindgebruikers hebben voorgelegd was een contactpagina.

Inzichten

• Vrijwel elke respondent geeft aan dat ze in eerste instantie zouden bellen, of eventueel langsgaan.
• Het telefoonnummer wordt verwacht op de contactpagina. Daarnaast zoekt men het telefoonnummer ook in de Page Footer.
• Een enkele respondent geeft aan misschien toch het formulier te proberen zodat ze haar vraag goed kan formuleren.

Onderzoek formulieren - Bellen - Youtube

Vrijwel elke respondent weet de link 'Start contactformulier' te vinden. Het werkwoord 'Start' gevolgd door het type formulier lijkt dus goed te werken.

Onderzoek formulieren - Startpunt - Youtube

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1

Bij het onderzoek naar het klachtenformulier startte respondenten vanuit onderstaande pagina.

Inzichten

Call to action

Bij dit onderzoek werd de 'Button as Link' component met de tekst 'Ga naar klachtenformulier' ingezet als ingang naar het meerstappenformulier. Alle respondenten wisten deze te vinden. De tekst 'Ga naar' gevolgd door het type formulier lijkt dus ook goed te werken.

Overige contactmogelijkeden

De overige contactmogelijkheden zoals bellen of een brief sturen werden ook opgemerkt.

[jeffreylauwers]

Intropagina

Een intropagina kan worden ingezet vooraf aan meerstappenformulier. Het helpt om vooraf een beeld te scheppen van wat men kan verwachten tijdens het invullen van het formulier.

Gerelateerde richtlijnen van het NL Design System

• Leg uit waarom informatie nodig is.
• Vermeld duidelijk of een veld wel of niet verplicht is.

Gerelateerde componenten

• Unordered List
• Link
• Button

[jeffreylauwers]

Workshop: Forms, Forms, Forms

Tijdens de Forms, Forms, Forms workshop probeerde we met designers tot een antwoord te komen op de volgende vragen:

• Welke informatie plaats je zoals op de introductiepagina?
• Welke tekst gebruik je voor de call-to-action?
• Positioneer je een intropagina in de formulieromgeving of op de publieke site?

Bekijk het Forms, Forms Forms, Miro board voor antwoorden, aanvullende vragen, inspiratie en schetsen.

[jeffreylauwers]

Onderzoek: WMEBV

Inzichten

Wat gaat goed

• De opsomming wordt goed gelezen.
• De link 'Doorgaan' wordt goed gevonden en zorgt niet voor problemen.

Wat kan beter

• Een tijdsindicatie zoals 'Het duurt ongeveer 5 minuten om dit formulier in te vullen' zorgt voor verschillende reacties. Sommige respondenten verwachten langer bezig te zijn. Andere vinden 5 minuten juist erg lang klinken, zeker wanneer men enkel een vraag wil stellen.
• Daarnaast merkt een respondent op dat het verzamelen van gegevens ook tijd kost. Een aanknopingspunt dat deze intropagina een geschikte plek is om aan te geven of men specifieke informatie bij de hand moet hebben voordat ze met het formulier starten.
• Een enkele respondent merkt op dat de zin over 'niet verplichte velden' verwarring kan veroorzaken.

Verder onderzoeken

• Zou het helpen om de tijd niet exact uit te drukken maar in meer globale termen (5 tot 15 minuten)?
• Zou het helpen om alleen de stappen van het formulier te vermelden en de tijdsindicatie weg te laten? Bijvoorbeeld “In dit formulier doorloop je drie stappen: uw vraag, uw gegevens en het controleren van de ingevulde informatie”.
• Wat zou er gebeuren als we de tijdsindicatie alleen tonen bij formulieren die ook echt veel tijd in beslag nemen? Mist men de tijdsindicatie wanneer we deze weglaten bij formulieren die niet veel tijd in beslag nemen?

Onderzoek formulieren - Tijdsindicatie - Youtube

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Bij het onderzoek van Den Haag stond er meer informatie op de pagina en deze is onderverdeeld in secties. De functionaliteit 'Doorgaan' is aangevuld met een icoon.

Inzichten

• De intropagina lijkt een goede plek om de voorwaarden te benoemen. Doordat de vorige pagina (product detailpagina) erg lang was werd niet alles gelezen. Op deze pagina zijn respondenten sneller geneigd om nog even op het linkje naar de voorwaarden te klikken. Het is geen probleem dat de voorwaarde hier niet volledig zijn uitgeschreven, maar doorlinken.
• De respondenten vonden het fijn dat hier nogmaals een overzicht van de benodigde documenten werd getoond. Zo konden ze nog snel het lijstje doorlopen. Alle respondenten gaven aan dat ze eerst de hele lijst zouden verzamelen voordat ze door zouden gaan met een aanvraag.
• Bij een eerdere versie ontstonden er nog vragen over de mogelijkheid om op te slaan en de mogelijkheid om het ingevulde formulier te downloaden. Deze vragen zijn afgevangen in deze tweede versie.
• Daarnaast werkte de vorm van een opsomming goed. Hierdoor waren de verschillende punten snel door te nemen.

Verder onderzoeken

• Voorwaarden
  • Het linken naar voorwaarden op de vorige pagina (product detailpagina) lijkt goed te werken. Doen we dit dan altijd of is er een afhankelijkheid van het aantal voorwaarden? Bijvoorbeeld: Als er meer dan x aantal voorwaarden zijn, schrijven we deze wél uit op de Intropagina?
• Dit heeft u nodig?
  • Wat doen we als men niks nodig heeft? Laten we dit onderdeel in zijn geheel weg? Of benoemen we juist 'U heeft niks nodig.'?

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1

Tijdens het onderzoek voor een klachtenformulier hebben we vervolgens onderzocht of het beter zou zijn om alleen de stappen van het formulier te vermelden en de tijdsindicatie weg te laten.

Inzichten

• Een voorbeeld van zo’n formulering is: “In dit formulier doorloopt u de volgende stappen: uw klacht, voorstel oplossing, uw gegevens en het controleren van de ingevulde informatie.”
• Deze tekst werd gelezen en leverde geen opmerkingen op vanuit de respondenten.
• Wanneer men gevraagd werd hoeveel tijd zij verwachtte bezig te zijn was het antwoord vaak 5 minuten.

[jeffreylauwers]

Inloggen

Bij een meerstappenformulier kan het voorkomen dat de gebruiker moet inloggen. Hieronder verzamelen we informatie rondom dit patroon.

Gerelateerde richtlijnen van het NL Design System

• Leg uit waarom informatie nodig is.
• Sta knippen en plakken van een wachtwoord toe.

Gerelateerde componenten

• Unordered List
• Radio Group
• Login Link
• Logo

[jeffreylauwers]

Logius Stijlhandleiding aansluiten Toegang

Vanuit Logius is er een stijlhandleiding opgesteld. Het betreft een checklist met richtlijnen voor overheidsorganisaties.

https://www.logius.nl/domeinen/toegang/stijlhandleiding-aansluiten-toegang

[jeffreylauwers]

Login Link component

Op basis van de Stijlhandleiding heeft het Design System team van Logius de Login Link ontwikkeld.

• GitHub Discussion voor Login Link.
• Login Link binnen NL Design System - Voorbeeld - Bibliotheek (Figma).
• Login patroon binnen 'NL Design System - Templates' (Figma).

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1

In het prototype van het klachtenformulier hadden we enkele aanpassingen gedaan rondom inloggen.

• De stap voor inloggen is later in het proces geplaatst.
• Er is bij dit prototype de mogelijkheid om je klacht anoniem in te dienen.

Inzichten

• Een aantal respondenten hadden verwacht aan het begin van de flow in te moeten loggen met DigiD. En dat leek hun ook prettig.
• De informatie over anoniem melden werd niet goed gevonden.
• Enkele respondenten hadden het vermoedde dat zij op de logo's konden tikken om deze te selecteren.
• De voordelen van het inloggen werden niet altijd opgemerkt.
• Vier respondenten kennen het EU-logo niet.

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 2

Op basis van de inzichten uit ronde 1 zijn we tijdens een Design Open Dag eventuele oplossingen gaan schetsen. Voor het prototype van het klachtenformulier dat is ingezet voor ronde 2 hebben we enkele aanpassingen gedaan.

• De logo's vervangen voor tekst.
• De disc's van de opsomming vervangen voor groene check icoontjes.
• De vraag om in te loggen gecombineerd met anoniem blijven.
• De Form Field Description over anoniem melden vervangen voor een Alert die pas wordt getoond nadat men voor deze optie heeft gekozen.
• De 'namens wie' vraag pas stellen nadat men heeft aangegeven te willen inloggen.

Inzichten

• Geen enkele respondent vindt dat het inlog moment op een gek moment komt (ipv beginnen met inloggen).
• De voordelen van het inloggen soms aandachtig gelezen en soms overgeslagen.
• De optie om anoniem een klacht in de dienen wordt gewaardeerd, en de gele Alert valt op.
• Een aantal respondenten hebben een licht wantrouwen naar de overheid en denken dat alles wordt op geslagen en mogelijk tegen hun gebruikt kan worden.

[jeffreylauwers]

Uitloggen

Nadat men is ingelogd moet er ook de mogelijkheid zijn om weer uit te loggen. Tijdens het onderzoek voor WMEBV is respondenten gevraagd wat zij verwachten nadat zij op de naam rechtsboven in de Page Header klikken. Uitloggen werd daarbij genoemd. Toch zouden wij dit graag nog eens bij een volgend onderzoek mee laten nemen.

[jeffreylauwers]

Voortgang indicatie

Bij een meerstappenformulier kan je voortgang indicatie toepassen. Hiermee krijgen gebruikers een beeld van hun voortgang binnen een meerstappenformulier. Hieronder verzamelen we informatie rondom dit patroon.

Gerelateerde richtlijnen van het NL Design System

• Geef aan hoeveel stappen er zijn en in welke stap de gebruiker zich bevindt
• Plaats de informatie over waar de gebruiker is in de stappen boven het formulier

Gerelateerde componenten

• Heading
• Heading Group
• Progress Bar

Gerelateerde informatie

Do Less - GOV.UK blog

[jeffreylauwers]

Workshop: Forms, Forms, Forms

Tijdens de Forms, Forms, Forms workshop probeerde we als designers tot een antwoord te komen op de volgende vragen:

• Hoe willen we de stappen inzichtelijk maken?
• Is het nodig dat we de namen van alle stappen inzichtelijk maken?
• Willen we een progress bar?

Bekijk het Forms, Forms Forms, Miro board voor antwoorden, aanvullende vragen, inspiratie en schetsen.

[jeffreylauwers]

Onderzoek: WMEBV

Inzichten

Wat gaat goed

• Wanneer men naar de voortgangsindicator wordt gevraagd geven zij aan dat dit van toegevoegde waarde is bij een formulier dat uit meerdere stappen bestaat.
• Een voortgang van 'Stap 2 van 4' lijkt voldoende te zijn om voortgang aan te duiden.

Wat kan beter

Vrijwel alle respondenten zien de voortgangsindicatie in eerste instantie over het hoofd.
De richtlijn Geef aan hoeveel stappen er zijn en in welke stap de gebruiker zich bevindt geeft aan dat de stappen het beste in of onder het formulierkopje staan.

Verder onderzoeken

• Is het nodig om de voortgangsindicatie beter onder de aandacht te brengen? Zo ja, wat is hierin de juiste vorm?
  • Is de positie van ‘Stap 2 van 4’ de juiste? Of zou deze onder de naam van de stap moeten staan?
  • Is ‘Stap 2 van 4’ als tekst voldoende? Zo niet, zorgt een aanvullende Progress Bar voor meer aandacht/duidelijkheid?
• Hoe reageert men wanneer voortgang helemaal niet zichtbaar is? Bijvoorbeeld bij formulieren waarbij er stappen bij of afvallen afhankelijk van een keuze (conditionele stappen).
  • Hoe reageert men wanneer voortgang wel zichtbaar is en er conditionele stappen bijkomen?
• De controle pagina wordt als 'Stap 3 van 4' aangeduid. Dit zorgt bij 1 respondent voor verwarring. We willen graag weten of dit bij meer mensen voor verwarring zorgt. Is het beter om de controle pagina als 'Stap 3 van 3' aan te duiden? Of denkt men hierdoor juist 'klaar' te zijn. Dit zouden we graag verder uitzoeken.

Onderzoek formulieren - Voortgang indicator - Youtube

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Tijdens dit onderzoek werd dezelfde opzet gebruikt en doorliepen respondent meer stappen.

Inzichten

• De respondenten wisten terug te vinden in welke stap binnen het formulier ze waren. Ze vonden het fijn om dit te kunnen zien, zodat ze een idee hadden hoeveel vragen ze nog moesten beantwoorden. (p21)
• Het viel sommige respondenten op dat enkele stappen dezelfde titel hadden. Het stoorde hen niet per sé, maar het viel wel op. In dit geval kwam dat vanwege conditionele stappen. (p28)

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1 & 2

In het prototype om een klacht in te dienen hebben we er expres voor gekozen om geen voortgang indicatie op te nemen. Aan de ene kant wilde we zien of men hier op reageerde. Aan de andere kant was dit ook lastig omdat het aantal stappen afhankelijk was van de keuze om anoniem te blijven.

Inzichten

Er werden geen opmerkingen gemaakt over de voortgang op één respondent na. Deze respondent merkte op dat het formulier "lang duurt voor een klacht". Vooral rondom Persoonlijke gegevens.

Verder onderzoeken

• De opmerking van de respondent kan misschien te maken hebben met tussentijdse onderbrekingen vanwege het interview zelf. Daarom zou het goed zijn om een formulier (van gelijkwaardige grootte) ook eens in stilte te laten doorlopen en achteraf enkele vragen te stellen.
• Kan de behoefte aan voortgang indicatie te maken hebben met het aantal stappen?

[rianrietveld]

Aanvullend:
Als de stappen in het kopje worden opgenomen kunnen de voortang en de koptekst via CSS worden gescheiden.

De HTML wordt dus:

<h2>
  <span class="progress-indicator">
    Stap 2 van 4
  </span>
  Titel van de stap
</h2>

en de CSS

.progress-indicator {
  display: block;
  font-size: 1rem;
  font-weight: normal;
}

Er is geen komma nodig tussen de voortang en de titel, na de span neemt VO vanzelf al een beetje pauze.
Hoor de screen recording.

ZIe ook:nl-design-system/documentatie#1895 (comment)

[jeffreylauwers]

'Volgende stap' actie

Een meerstappenformulier bevat een 'Volgende stap' actie. Hieronder verzamelen we informatie rondom dit patroon.

Gerelateerde richtlijnen van het NL Design System

• Buttons in een formulier
• Zorg voor een consistente navigatie en benaming van links en buttons.

Gerelateerde componenten

• Link
• Button

[jeffreylauwers]

Workshop: Forms, Forms, Forms

Tijdens de Forms, Forms, Forms workshop probeerde we als designers tot een antwoord te komen op de volgende vragen:

• Hoe noemen we de volgende stap button? 'Volgende', 'Volgende stap', 'Verder' of iets anders?

Bekijk het Forms, Forms Forms, Miro board voor antwoorden, aanvullende vragen, inspiratie en schetsen.

[jeffreylauwers]

Onderzoek: WMEBV

Inzichten

Wat gaat goed

De button 'Volgende stap' onderaan het formulier wordt gevonden en zorgt niet voor twijfel of problemen.

Verder onderzoeken

Het lijkt ons interessant om te onderzoeken of een label, zoals 'Volgende stap: Uw gegevens' of 'Stap 2: Uw gegevens', helpt om het proces te verduidelijken. Hierbij moet worden meegenomen dat er formulieren bestaan waarbij er stappen bijkomen of afvallen afhankelijk van een keuze of antwoord.

Onderzoek formulieren - Volgende stap - Youtube

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua positie en tekst. Er is wel een icoon toegevoegd.

Inzichten

Tijdens beide onderzoeken zijn er geen opmerkingen gemaakt waaruit bleek dat respondenten de tekst of functionaliteit verkeerd begrepen.

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1 & 2

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua positie en tekst. Er is wel een icoon toegevoegd.

Inzichten

Tijdens beide onderzoeken zijn er geen opmerkingen gemaakt waaruit bleek dat respondenten de tekst of functionaliteit verkeerd begrepen.

[jeffreylauwers]

'Volgende stap' of simpelweg 'Volgende'?

Verder onderzoeken

Is 'Volgende stap' voor iedereen begrijpelijk?
We zouden graag onderzoeken of 'Volgende stap' ook begrepen wordt door mensen die de Nederlandse taal minder goed spreken of laag geletterden. Zou enkel 'Volgende' net zo goed werken?

[jeffreylauwers]

Opslaan of Stoppen

Bij een meerstappenformulier kunnen 'Opslaan' en 'Stoppen' functionaliteit voorkomen. Hieronder verzamelen we informatie rondom dit patroon.

Gerelateerde componenten

• Link
• Button
• Modal Dialog

[jeffreylauwers]

Workshop: Forms, Forms, Forms

Tijdens de Forms, Forms, Forms workshop probeerde we als designers tot een antwoord te komen op de volgende vragen:

• Waar plaatsen we de functionaliteit om op te slaan?
• Moet de opslaan functionaliteit een button of link zijn?
• In welke vorm willen we de opslaan functionaliteit aanbieden?
• Welke acties moeten we bij het opslaan aanbieden?
• Wat gebeurt er als de gebruiker (in dit geval) op 'Verstuur' klikt? Waar komt hij terecht?

Bekijk het Forms, Forms Forms, Miro board voor antwoorden, aanvullende vragen, inspiratie en schetsen.

[jeffreylauwers]

Onderzoek: WMEBV

Inzichten

Wat gaat goed

• De functionaliteiten 'Opslaan' en 'Stoppen' direct onder de primaire actie worden gevonden.
• De labels 'Opslaan en later verder' en 'Stoppen met formulier' worden begrepen.
• De verwachting van het vervolg na 'Stoppen' is duidelijk. Men snapt dat de ingevuld data wordt verwijderd.

Verder onderzoeken

• De verwachting van het vervolg na 'Opslaan' lijkt uiteen te lopen. Enkele respondenten verwachten verder te kunnen door nogmaals het formulier te starten, anderen zoeken het eerder in de Mijn omgeving.
• Momenteel wordt er gedacht aan een Modal Dialog waarin wordt toegelicht wat de actie inhoudt en opties worden geboden om de actie daadwerkelijk uit te voeren of te annuleren. Maar misschien werkt een aparte pagina wel net zo goed, of beter. We leren er graag meer over.

Onderzoek formulieren - Opslaan of Stoppen - Youtube

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua positie. Er is wel een kleine tekst aanpassing gedaan, namelijk 'Opslaan en later verder gaan'. Ook zijn er iconen toegevoegd.

Inzichten

Alle respondenten wisten de Opslaan functionaliteit te vinden, ze vonden het fijn dat dit een optie was.

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1 & 2

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua positie en tekst. Er zijn wel iconen toegevoegd.

Inzichten

Er zijn geen hele concrete inzichten naar voren gekomen tijdens dit onderzoek.

[jeffreylauwers]

Verder onderzoeken en uitwerken

Beide functionaliteiten zullen verder uitgewerkt en gevalideerd moeten worden. Daarbij hebben we de volgende vragen:

Opslaan

• Hoe komt men terug in het formulier? Opnieuw inloggen? Een link per email?
• Waar vindt men de gegevens om weer terug te komen naar het formulier dat tussentijds is opgeslagen?
• Stel, we mogen geen linkje mailen in verband met phishing, wat is dan een alternatief zodat de gebruiker zijn formulier af kan maken?
• Waar verwacht men terecht te komen in het formulier nadat ze deze hebben opgeslagen en later opnieuw openen?

Als men op 'Opslaan' heeft geklikt, moet er een bevestiging komen dat dit is gelukt. Voorstel bij Den Haag:

• Wat verwacht men na het klikken op 'Sluiten'?
• Waar verwacht men terecht te komen als ze klikken op 'Sluit formulier'?

Stoppen

Waar verwacht men uit te komen als ze binnen de Modal Dialog op 'Stoppen met formulier' klikken?

[jeffreylauwers]

Terug navigeren

Een meerstappenformulier bevat de functionaliteit om terug te navigeren. Hieronder verzamelen we informatie rondom dit patroon.

Gerelateerde richtlijnen van het NL Design System

Zorg voor een consistente navigatie en benaming van links en buttons

Gerelateerde componenten

Link

[jeffreylauwers]

Workshop: Forms, Forms, Forms

Tijdens de Forms, Forms, Forms workshop probeerde we als designers tot een antwoord te komen op de volgende vragen:

• Waar tonen we de vorige stap functionaliteit?
• Welke tekst gebruiken we? 'Stap terug', 'Vorige stap' of iets anders?

Bekijk het Forms, Forms Forms, Miro board voor antwoorden, aanvullende vragen, inspiratie en schetsen.

[jeffreylauwers]

Onderzoek: WMEBV

Inzichten

Wat gaat goed

• De functionaliteit om een stap terug te navigeren wordt gevonden. Zowel boven de titel op de introductie pagina als bij de eerste stap van het formulier.
• Ook bij de vervolgpagina's, waar de Link vlak boven de titel van de stap staat, wordt de functionaliteit gevonden.
• Het verschil in tekst 'Terug' en 'Vorige stap' wordt niet opgemerkt.
• Naast deze functionaliteit wordt ook de 'back button' van de browser gebruikt.

Onderzoek formulieren - Terug - Youtube

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua positie en tekst.

Inzichten

Respondenten wisten de functionaliteit te vinden in het geval dat ze terug naar de vorige stap wilden.

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1 & 2

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua positie en tekst.

Inzichten

• Respondenten navigeerde terug rondom het Inloggen.
• Tijdens beide onderzoeken zijn er geen opmerkingen gemaakt waaruit bleek dat respondenten de tekst of functionaliteit verkeerd begrepen.

[jeffreylauwers]

'Vorige stap' of enkel 'Vorige'?

Verder onderzoeken

Is 'Vorige stap' voor iedereen begrijpelijk?
We zouden graag onderzoeken of 'Vorige stap' ook begrepen wordt door mensen die de Nederlandse taal minder goed spreken of laag geletterden. Zou enkel 'Vorige' net zo goed werken?

[jeffreylauwers]

Page Header

Boven een meerstappenformulier kun je een uitgeklede 'Page Header' plaatsen. Hierin kun je overbodige funtionaliteiten weg laten met het idee om de focus van de eindgebruiker te versterken. Hieronder verzamelen we informatie rondom dit patroon.

Gerelateerde componenten

Page Header

[jeffreylauwers]

Workshop: Forms, Forms, Forms

Tijdens de Forms, Forms, Forms workshop probeerde we als designers tot een antwoord te komen op de volgende vragen:

• Wat moet er in de header staan?
• Willen we de titel van het formulier in de header of in de body tonen?
• Willen we in de header de functionaliteit aanbieden om het formulier te kunnen verlaten? Zo ja, hoe willen we deze functionaliteit vormgeven?
• Hoe tonen we de naam van de ingelogde persoon? Hoe tonen we de naam van de gemachtigde persoon?

Bekijk het Forms, Forms Forms, Miro board voor antwoorden, aanvullende vragen, inspiratie en schetsen.

[jeffreylauwers]

Onderzoek: WMEBV

Inzichten

Wat gaat goed

• Het inzetten van een specifieke 'funnel header', waarbij overbodige navigatie mogelijkheden verdwijnen, lijkt goed te werken. Er worden geen opmerkingen gemaakt over het ontbreken van navigatie items die nog wel aanwezig zijn voordat men het formulier start.
• Het tonen van een voorletter met achternaam in de rechterbovenhoek lijkt niet voor problemen te zorgen met betrekking tot privacy. Dit kan uiteraard te maken hebben met het feit dat dit een onderzoek was en men niet hun eigen naam ziet staan.
• De verwachting van wat er getoond wordt nadat je op je naam klikt loopt uiteen. Een ingang naar de Mijn Omgeving, een menu, uitloggen, het wordt allemaal genoemd.

Verder onderzoeken

Welke informatie en functionaliteit is er nodig wanneer na het klikken op de naam? En sluiten deze aan bij de verwachting?

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Tijdens dit onderzoek werd ook een specifieke 'funnel header' ingezet.

Inzichten

• Tijdens het onderzoek hebben respondenten geen opmerkingen over de wijziging van Page Headers.
• Tijdens het onderzoek zijn er geen specifieke inzichten naar voren gekomen met betrekking tot de Page Header.

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1 & 2

Tijdens dit onderzoek bleef de Page Header op elke pagina gelijk. In de Page Header is bij een small viewport enkel en logo en de functionaliteit om het menu te opnenen zichtbaar.

Inzichten

Tijdens het onderzoek zijn er geen specifieke inzichten naar voren gekomen met betrekking tot de Page Header.

[jeffreylauwers]

Weergave van ingelogd zijn

Op dit moment tonen wij de naam van de ingelogd persoon direct in de Page Header. Dat doen we als volgt: 'J. van Drouwen' deze wordt getoond als 'Button as Link' component met rechts een chevron-down icoon.

Verder onderzoeken

• Is het direct tonen van de naam gewenst? Zo niet, wat zou dan een goed label zijn? 'Ingelogd'?
• Wat tonen we als iemand als gemachtigde is ingelogd?
  • Eigen naam met daaronder naam van gemachtigde? Bijvoorbeeld 'J. van Drouwen voor: M. de Vries.
  • Namen weglaten? Bijvoorbeeld: 'Ingelogd als gemachtigde'

[jeffreylauwers]

Stapelen en uitlijnen

Hieronder verzamelen we informatie rondom het positioneren van elementen binnen een formulier.

Gerelateerde richtlijnen van het NL Design System

• Labels in een formulier
• Descriptions in een formulier
• Buttons in een formulier

Gerelateerde componenten

• Form Field
• Form Field Label
• Button

[jeffreylauwers]

Workshop: Forms, Forms, Forms

Tijdens de Forms, Forms, Forms workshop was er 1 vraag rondom het positioneren van elementen binnen een formulier:

Wat vindt de gebruiker van de gecentreerde positie van het formulier?

Bekijk het Forms, Forms Forms, Miro board

[jeffreylauwers]

Onderzoek: WMEBV

Inzichten

Wat gaat goed

• Geen enkele respondent merkte iets op over de gecentreerde positie van het formulier.
• Geen enkele respondent merkte iets op over het positioneren van labels boven de invulvelden.
• Geen enkele respondent merkte iets op over het uitlijnen van de acties met de invulvelden.
• Het stapelen van labels, formuliervelden en acties lijkt goed te werken. Het helpt mensen met kokervisus of mensen die gebruik maken van een digitaal vergrootglas.

Verder onderzoeken

Het stapelen van labels, formuliervelden en acties helpt mensen met kokervisus of mensen die gebruik maken van een digitaal vergrootglas. Maar het zorgt ook voor langere pagina's. Tijdens dit onderzoek bleek dat een respondent moeite met scrollen had. Zij ondervond juist nadeel van lange pagina's. Het betrof een dame met een motorische beperking die het prototype op een laptop met muis moest doorlopen. Ze gaf aan dat zij thuis een tablet op haar schoot legt (soms zelfs met haar kat er onder). We leren graag of mensen hier vaker last van ondervinden als zij hun eigen apparatuur of instellingen gebruiken.

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua positionering van elementen.

Inzichten

Tijdens het onderzoek zijn er geen specifieke inzichten naar voren gekomen met betrekking tot het stapelen, uitlijnen of scrollen.

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1 & 2

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua positionering van elementen. Het prototype werd enkel getest op een smartphone.

Inzichten

Tijdens het onderzoek zijn er geen specifieke inzichten naar voren gekomen met betrekking tot het stapelen, uitlijnen of scrollen.

[jeffreylauwers]

Visueel ontwerp

Layout, typografie, witruimte, en kleur het draagt al dan niet onbewust bij aan de gebruikers ervaring van een formulier. Hieronder verzamelen we informatie rondom het visueel ontwerp van een formulier.

[jeffreylauwers]

Onderzoek: WMEBV

Inzichten uit onderzoek

Wat gaat goed

• De layout van het formulier en de daaropvolgende 'Mijn omgeving' wordt als prettig ervaren.
• Witruimte, lettergrootte en kleur worden benoemd als positieve punten.
• Geen enkele respondent merkte iets op over de gecentreerde positie van het formulier.

Onderzoek formulieren - Layout - Youtube

Mobile first

Meerdere respondenten geven aan het formulier normaal gesproken op hun smartphone of tablet in te vullen. Dit biedt voordelen vanwege de automatische suggesties bij het typen van tekst. Of zelfs de mogelijkheid om gebruik te maken van spraak naar tekst functionaliteit. Ook merkt een respondent op dat het scrollen op een tablet beter voor haar werkt in verband met haar beperking.

[jeffreylauwers]

Verplichte velden

Hieronder verzamelen we informatie rondom het aanduiden van wel of niet verplichte velden binnen een formulier.

Gerelateerde richtlijnen van het NL Design System

Vermeld duidelijk of een veld verplicht is.

Gerelateerde componenten

Field Field Label

[jeffreylauwers]

Onderzoek: WMEBV

Inzichten uit onderzoek

Wat gaat goed

• Het valt respondenten op wanneer velden niet verplicht zijn.

Wat kan beter

• De meeste respondenten geven aan het veld dan ook niet in te vullen. Opvallend is dat telefoonnummer, ondanks dat dit niet verplicht is, wel wordt ingevuld.

Verder onderzoeken

• Kan de zin 'Vul alle velden in. Als een veld niet verplicht is, staat dit erbij.' op de intropagina duidelijker?
• Wekt de term 'Niet verplicht' (wel B1) andere verwachtingen als de aanduiding 'Optioneel' (geen B1)?
• Is het markeren van optionele velden duidelijker dan het markeren van verplichte velden?

Onderzoek formulieren - Labels gekoppeld - Youtube

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Tijdens dit onderzoek werd dezelfde opzet gebruikt voor het markeren van niet verplichte velden.

Inzichten

Tijdens het onderzoek zijn er geen specifieke inzichten naar voren gekomen met betrekking tot het markeren van niet verplichte velden.

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1 & 2

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua markeren van niet verplichte velden. Hierbij waren de niet verplichte velden bij stap 1 'Uw klacht' in de meerderheid.

Inzichten

• De tekst 'Vul alle velden in. Als een veld niet verplicht is, staat dit erbij.' op de intropagina en bovenaan elke stap met niet verplichte velden werd gelezen en begrepen.
• '(niet verplicht)' als aanvullig bij het Form Field Label werd gelezen, begrepen en als positief ervaren.

Update

Er is met taalexperts gekeken of we de zin 'Vul alle velden in. Als een veld niet verplicht is, staat dit erbij.' nog scherper kunnen krijgen. Hoewel 'velden' voort komt uit 'Form Fields' zou er verwarring kunnen optreden bij een Radio of Checkbox group of File Input waarbij men het gevoel kan hebben dat ze met 'velden' te maken hebben. Het voorstel is om nu de volgende zin te gebruiken en bij vervolgonderzoek in de gaten te houden hoe men hier op reageert / mee om gaat.

Vul alles in. Als iets niet verplicht is, staat dat erbij.

[jeffreylauwers]

Foutmeldingen

In een formulier kunnen foutmeldingen voorkomen. Hieronder verzamelen we informatie rondom dit patroon.

Gerelateerde richtlijnen van het NL Design System

Foutmeldingen in een formulier.

Gerelateerde componenten

• Form Field Error Message
• Invalid Form Alert

[jeffreylauwers]

Onderzoek: WMEBV

Inzichten

Wat gaat goed

• Validatie nadat men op de button 'Volgende stap' (submit) klikt werkt goed.
• De terugkoppeling van foutieve velden door middel van een Alert met ankerlinks per foutmelding werkt goed.
• De schrijfwijze van de foutmeldingen lijkt duidelijk te zijn.
• Het positioneren van de Alert bovenaan het formulier werkt goed.
• Het positioneren van de foutmelding tussen het formulier label en het invulveld werkt goed.
• Het direct valideren nadat een formulierveld als 'invalid' is gemarkeerd lijkt goed te werken.

Verder onderzoeken

• Hoe gaan we om met het direct valideren van een formulierveld dat als invalid is gemarkeerd wanneer validatie pas kan plaats vinden na submit? En wat als direct valideren voor het ene veld wel kan maar voor het andere niet?
• Kan de focus direct op het invulveld nadat men op een ankerlink klikt? En hoe werkt dit bij een formulier veld met checkboxes en radio buttons?

Onderzoek formulieren - Foutmeldingen - Youtube

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1 & 2

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua tonen van foutmeldingen. Nadat men op 'Volgende stap' klikte verscheen er een Invalid Form Alert met Link (anker) bovenaan het formulier. Tergelijk werd het betreffende veld voorzien van een invalid state. De tekst van de foutmelding was op beide plekken gelijk. Namelijk:

'Het ingevulde e-mailadres is niet toegestaan. Vul een e-mailadres in, zoals bijvoorbeeld hallo@voorbeeld.com.'.

De fout zou zijn ontstaan omdat men '.com' was vergeten toe te voegen aan het e-mailadres. Hier moet worden bij vermeld dat dit een Figma prototype was, men had deze fout niet zelf gemaakt door te typen.

Inzichten

• De foutmelding wordt door de meeste respondenten opgemerkt.
• Twee respondenten lezen de foutmelding in eeste instantie niet. Pas nadat zij niet precies weten wat er fout is.

[jeffreylauwers]

Schrijven van foutmeldingen

We zijn een aparte GitHub Discussion gestart voor het schrijven van foutmeldingen.

[jeffreylauwers]

Bestand toevoegen

In een formulier kan een functionaliteit zitten waarmee men bestanden kan toevoegen. Hieronder verzamelen we informatie rondom dit patroon.

Gerelateerde richtlijnen van het NL Design System

Plaats descriptions tussen label en formulierveld.

Gerelateerde componenten

• File Input
• File

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1 & 2

Het ontwerp van 'Upload patroon met Voorbeeld thema' heeft een rol gespeeld in het prototype rondom een klachtenformulier.

Inzichten

• Men heeft niet altijd een beeld bij het aantal MB's en de verschillende bestandstypen zoals doc, docx, etc.
• Men wil graag controleren wat zij hebben geupload.

[jeffreylauwers]

Toegevoegd bestand kunnen bekijken

Uit het onderzoek van Den Haag om een vergunning aan te vragen werd duidelijk dat men het toegevoegde bestand graag nog even zou willen controleren. Daarom hebben we de bestandsnaam in het ontwerp interactief gemaakt. Bij het onderzoek rondom het Generieke Klachtenformulier werd zelfs benoemd dat men graag een kleine thumbnail zou willen zien. Dit is nog niet verwerkt.

[jeffreylauwers]

Handig: Schrijfwijze bestandsgrootte

Schrijfwijze grootheden en eenheden zoals MB en kB.

[jeffreylauwers]

Overweging: Criteria weglaten?

Als we invloed hebben om zoveel mogelijk te accepteren qua bestandsgrootte en bestandsformaten zou de informatie over MB's en bestandstypen weglaten kunnen worden. Let wel, als deze restricties er zijn kunnen hier uiteindelijk toch foutmeldingen uit voortkomen. Krijgt men dan niet het gevoel van "Had mij dat dan eerder verteld"?

[jeffreylauwers]

Overweging: Extra stap?

Als het toevoegen van bestanden optioneel is, zouden we ook eerst kunnen uitvragen of men überhaupt een bestand wil toevoegen. Doormiddel van Radio Button Groep met de opties 'Ja' of 'Nee'. Bij de conditionele stap die volgt als men kiest voor 'Ja' kan dan alle ruimte genomen worden om uit te leggen welke criteria er zijn. Zo kan de gebruiker zich puur en alleen op deze tekst concentreren.

[jeffreylauwers]

Page Footer / Hulp aanbieden

Onder een meerstappenformulier kun je een uitgeklede 'Page Footer' plaatsen. Hierin kun je overbodige functionaliteiten weg laten met het idee om de focus van de eindgebruiker te versterken. Daarnaast zou het een plek kunnen zijn om eigengebruikers hulp aan te bieden. Hieronder verzamelen we informatie rondom dit patroon.

Gerelateerde componenten

Page Footer

[jeffreylauwers]

Workshop: Forms, Forms, Forms

Tijdens de Forms, Forms, Forms workshop probeerde we als designers tot een antwoord te komen op de volgende vragen:

• Wat moet er in de footer staan?

Bekijk het Forms, Forms Forms, Miro board voor antwoorden, aanvullende vragen, inspiratie en schetsen.

[jeffreylauwers]

Onderzoek: WMEBV

Inzichten

• Het telefoonnummer wordt verwacht op de contactpagina. Daarnaast zoekt men het telefoonnummer ook in de Page Footer.
• Het woord 'Proclaimer' werd niet begrepen.

Verder onderzoeken

Tijdens het onderzoek gaf 1 respondent aan moeite te hebben met scrollen. Zou het helpen om vlak boven de Page Footer een 'Back to top' link aan te bieden?

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Tijdens dit onderzoek werden de contact mogelijkheden ook in de Page Footer gepositioneerd. Daarnaast waren er nog meer linkjes aanwezig.

Inzichten

Wat gaat goed

• Alhoewel meerdere respondenten de contactmogelijkheden duidelijker in beeld zouden verwachten, zie wat kan beter, wist iedereen zelfstandig de contactgegevens te vinden in de voet. Dit is vanuit gewenning toch een plek waar iedereen uiteindelijk gaat kijken.
• Ook was het voor respondenten direct duidelijk dat ze met iemand met expertise op dit gebied in contact zouden komen. Dit vonden ze fijn om te zien.

Wat kan beter

• De meeste respondenten gaven aan de contactmogelijkheden duidelijker of in een andere vorm op de pagina terug te willen zien. Zo noemde iemand een fysieke knop, sommige zouden bovenaan de pagina zoeken en sommigen aan de zijkant van de pagina. Dit zou eventueel weggenomen kunnen worden door de groene contact knop op Den Haag.nl te gebruiken. Hiermee is het echter wel belangrijk dat je nog steeds direct met de juiste afdelingen in contact komt.
• Het bijvoegen van twee nummers zonder naam gaf wat verwarring. Respondenten wisten niet precies waarom er zowel een 06 nummer als een 070 nummer stond. Ze verwachten dat het 070 nummer algemeen is en dat het 06 nummer hen met een specifiek persoon in contact brengt. Het zou goed zijn om hier toe te voegen met wie je in contact komt om meer duidelijkheid te geven.

[jeffreylauwers]

Controlepagina

Een controlepagina kan worden ingezet om ingevulde data te controleren voordat men deze verstuurd.

Gerelateerde richtlijnen van het NL Design System

• Bied als laatste stap een opsomming aan van alle ingevoerde gegevens.
• Maak het mogelijk een inzending te controleren, te wijzigen of ongedaan te maken.
• Geef duidelijk aan wanneer het formulier verzonden gaat worden.

Gerelateerde componenten

• Form Summary
• Link
• Button

[jeffreylauwers]

Onderzoek: WMEBV

Een controlepagina kan worden ingezet om ingevulde data te controleren voordat men deze verstuurd.

Inzichten uit onderzoek

Wat gaat goed

• De titel 'Controleer uw gegevens' werd gelezen en begrepen. Men snapt wat er van hen wordt verwacht.
• Men weet de actie 'Aanpassen' te vinden en deze sluit aan bij hun verwachting.
• Een combinatie van icoon, het label 'Aanpassen' en interactie kleur is voldoende. De visueel verborgen tekst helpt mensen die gebruik maken van schermlezers mochten zij context missen.

Wat kan beter

• Het wordt onhandig ervaren om, na een aanpassing, weer langs alle stappen te moeten om weer bij de controlepagina te komen.
• ‘Huisnummer’ en ‘Toevoeging’ werden afzonderlijk uitgevraagd, maar op de controlepagina samengevoegd tot één veld (‘huisnummer’). Dit zorgde bij enkele respondenten voor verwarring.

Verder onderzoeken

• Na het aanpassen verwacht men terug te keren op de controlepagina. Onze verwachting is dat een actie als 'Opslaan' of 'Opslaan en naar controle', die men vervolgens terug leidt naar de controlepagina, goed zou werken. Dit zouden we graag verder uitzoeken.
• Het vermoeden is dat het ‘slim’ samenvoegen van ingevoerde data soms tot onduidelijkheid leidt. We willen graag ontdekken in welke situaties dit wel of niet werkt.

Onderzoek formulieren - Aanpassen - Youtube

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua titel, positionering van linkjes en het potlood icoon. De tekst van de links werd uitgebreid. In plaats van enkel 'Aanpassen' werden teksten als 'Bedrijfsgegevens aanpassen' en 'Start horeca-inrichting aanpassen' gebruikt.

Wanneer men op de link klikte werden zij naar de betreffende stap geleid waarbij onderaan de button 'Volgende stap' was ingewisseld voor 'Opslaan en terug naar controle'.

Inzichten

• Respondenten gaven aan dat ze het fijn vonden om dit overzicht nog eens te zien op het einde, om alles nog eens te controleren en ook direct aan te kunnen passen.
• De links om data aan te passen werd door elke respondent opgemerkt. Men vond het fijn dat deze mogelijkheid op dit punt in het formulier aan aanwezig was, zodat ze niet zelf weer terug hoefde te navigeren in het formulier.
• Respondenten vonden dit een makkelijke manier om hun gegevens aan te kunnen passen.
• Ze vonden het fijn dat je via deze knop weer direct bij de controlepagina terechtkomt, en niet weer eerst alle pagina's van het formulier door hoeft te klikken.

[jeffreylauwers]

Aanpassen, wijzigen, veranderen.

Aanpassen, wijzigen en veranderen zijn alle B1-woorden.

Verder onderzoeken

Is enkel het tonen van het woord 'Aanpassen' voldoende?
Het maakt de tekst korter en dus wellicht gemakkelijker en sneller te scannen.

We moeten daarbij meenemen dat niet iedereen de Heading in combinatie met de link ervaart. Als men gebruik maakt van een screenreader en we doen niks dan hoort men elke keer 'Aanpassen, Aanpassen, Aanpassen' en missen zij context. Het idee is om de link 'Aanpassen' aan te vullen met visueel verborgen tekst (css class 'visually-hidden'). Op die manier zijn de teksten van de link niet elke keer hetzelfde en hoort men teksten als 'Aanpassen uw gegevens' of 'Aanpassen klacht'.

Door het woord 'Aanpassen' vooraan te zetten hopen we dat dit goed werk voor mensen die gebruik maken van spraakbediening.

Zou de term 'Wijzig' ook werken?
Dan krijg je 'Wijzig uw gegevens' of 'Wijzig klacht'.

[jeffreylauwers]

Onderzoek: Klachtenformulier ronde 1

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua titel, positionering van linkjes, potlood icoon en tekst. Op de pagina waar men de aanpassingen deed werd als tekst op de button 'Opslaan' gebruikt.

Inzichten

• Alle respondenten wisten wat er van hun verwacht werd op deze pagina.
• Vrijwel alle respondenten wisten de actie om data aan te passen te vinden. Een enkeling gaf aan terug te navigeren om data aan te passen.
• Na het aanpassen werd de button met de tekst 'Opslaan' gevonden en begrepen. Respondenten waardeerde dat zij direct werden terug geleid naar de controlepagina.

[jeffreylauwers]

'Versturen'

Bij elk onderzoek werd op de Controlepagina een Button met de tekst 'Versturen' gebruikt. Tot nu toe zorgde dit bij geen enkele respondent voor verwarring of opmerkingen.

Verder onderzoeken

• Zou een tekstuele aanvulling zoals 'Verstuur uw klacht' of 'Verstuur uw vraag' net zo goed, al dan niet, beter en duidelijker zijn?
• Is de opslaan functionaliteit nuttig op dit punt in het formulier?

[jeffreylauwers]

Bevestigingspagina

Een bevestigingspagina kan worden ingezet om gebruikers te informeren dat hun data met succes is verstuurd. Daarnaast biedt het de mogelijkheid om te informeren wat men kan verwachten of als vervolg-actie kan ondernemen.

Gerelateerde richtlijnen van het NL Design System

Bevestigingspagina van een formulier.

Gerelateerde componenten

• Alert
• Unordered List
• Link

[jeffreylauwers]

Workshop: Forms, Forms, Forms

Tijdens de Forms, Forms, Forms workshop probeerde we als designers tot een antwoord te komen op de volgende vragen:

• Hoe willen we de titel van deze pagina noemen? Willen we de titel van het formulier behouden of iets anders voor in de plaats neerzetten?
• Wat moet er op de bevestigingspagina staan?
• Hoe kunnen we duidelijk maken dat het formulier goed is verzonden?

Bekijk het Forms, Forms Forms, Miro board voor antwoorden, aanvullende vragen, inspiratie en schetsen.

[jeffreylauwers]

Onderzoek: WMEBV

Inzichten

Wat gaat goed

• Het groene blok met icoon en de tekst 'Uw vraag is met succes verstuurd' geeft men duidelijk de bevestiging dat het formulier succesvol is verstuurd.
• De informatie bij 'Wat gaat er nu gebeuren' wordt gelezen en begrepen.
• Welke vervolg-actie men onderneemt verschilt. Printen, downloaden, inbox en MijnOmgeving bekijken worden alle genoemd.

Wat kan beter

• Enkele respondenten merken op dat het prettig is om te weten binnen hoeveel tijd er een reactie verwacht kan worden.

Onderzoek formulieren - Bevestiging en vervolgactie - YouTube

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua groen blok en de schrijfwijze van titels. De tekst van de opsomming was iets langer. De optie om te downloaden was prominenter. De opties om te printen of terug te keren naar de homepage waren dan wel weer gelijk aan de opzet zoals bij WMEBV.

Inzichten

Wat gaat er goed

• Het groene vlak maakt het heel duidelijk dat de aanvraag is gelukt.
• De respondenten gaven aan dat ze het wel fijn vonden om te zien wat er nu gaat gebeuren.
• Meerdere respondenten gaven aan dat ze het fijn vonden om hun aanvraag te kunnen downloaden voor eigen administratie.

Wat kan beter

• Op de productpagina wordt de termijn van de aanvraag benoemd, maar op dat punt wordt er door veel respondenten overheen gelezen. Op dit moment in het proces hebben ze hier echter wel veel behoefte aan. Het zou goed zijn om in deze opsomming te benoemen.
• De tekst bij de tweede bullet is erg lang, het is goed om deze zo kort mogelijk te houden zodat de tekst snel te lezen/scannen is.

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1 & 2

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua groen blok, de schrijfwijze van titels, korte opsomming en mogelijkheid om te downloaden, printen of terug te keren naar de homepage.

Inzichten

• De meeste respondenten vertrouwen op dat hun klacht goed is aangekomen.
• Er zijn ook respondenten die onvoldoende vertrouwen hebben in het aankomen van de klacht, zij wachten op de bevestiging.
• Enkele respondenten vragen zich af hoelang het duurt voordat hun klacht in behandeling wordt genomen.
• De helft van de respondenten verwacht hun klacht terug te vinden via Mijn Overheid. Maar ook de bevestigingsmail en de website zelf worden genoemd.

[jeffreylauwers]

Do users return to your service after finishing? Blog - GOV.UK

Interessant inzicht. Bij GOV.UK kwamen ze er tijdens onderzoek achter dat men de Bevestigingspagina aan hun bookmarks toevoegd. Wanneer men via de bookmark op de Bevestigingspagina terecht kwam, was deze hier niet op ingericht. Inmiddels is deze pagina aangepast zodat men beter geholpen wordt.

[jeffreylauwers]

Gegevens uitvragen

Het kan voorkomen dat je persoonlijke gegevens gaat uitvragen zoals een adres of telefoonnummer. Hieronder verzamelen we informatie rondom dit patroon.

[jeffreylauwers]

Onderzoek: WMEBV

Bij dit onderzoek werden gegevens als volgt uitgevraagd.

Inzichten

Deze volgorde en labels zorgde niet voor problemen. Tijdens het onderzoek werd het automatisch aanvullen vanuit de browser per veld gedaan. De respondenten gaven aan dit liever direct voor meerdere velden te zien.

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Tijdens dit onderzoek werd vrijwel dezelfde opzet gebruikt bij het uitvragen van persoonlijke- en bedrijfsgegevens. Aangevuld met velden voor Burgerservice-, KVK-, en Rekeningnummer.

Inzichten

Uw gegevens
Bij deze stap waren geen bijzonderheden. Respondenten vonden de vragen en informatie volledig en navigeer goed door deze stap heen.

Bedrijfsgegevens
Bij deze stappen waren weinig bijzonderheden. Respondenten wisten, op kleine puntjes na, soepel door deze stap heen te navigeren. Sommige respondenten gaven aan dat het voor hen niet direct duidelijk was of ze hun privé of zakelijk rekeningnummer moest invullen. Het zou goed zijn om hier extra toelichting bij te geven.

[jeffreylauwers]

Toevoeging van 'Opmerkingen'

We wisten dat het verplicht stellen van een telefoonnummer geen goed idee was. Mensen kunnen een auditieve beperking hebben, moeite hebben met spreken of de nederlandse taal niet machtig zijn. Tijdens de Design System week 2024 sprak Darice de Cuba. Darice gaf aan dat als je iemand om een telefoonnummer vraagt het fijn is om ook een veld voor 'Opmerkingen' toe te voegen. Daar zouden zomaar meerdere voordelen aan kunnen kleven. Men kan bijvoorbeeld aangeven:

• dat ze wel kunnen bellen met moeite hebben met spreken.
• dat ze best zouden willen Whatsappen.
• Aangeven op welk tijdstip je gebeld kan worden.

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1 & 2

Vooraf aan dit onderzoek hebben we geprobeerde wij om zoveel mogelijk velden te schrappen en enkel de broodnodige gegevens uit te vragen. Maar het is niet geheel duidelijk of we de adresgegevens weg kunnen laten. Zie ook de vraag van Yasmine op Slack.

We hebben verschillende ontwerpen uitgewerkt. Zie ook het Figma ontwerp.

Uiteindelijk hebben we besloten vrijwel dezelfde opzet te gebruiken om te zien of men hier opmerkingen over maakte. Wel werd het uitvragen van de naam opgesplitst in Voorletters, Tussenvoegstel (niet verplicht) en Achternaam.

Inzichten

Deze inzichten zijn niet helemaal los te zien van het feit dat mensen hun klacht op 3 manieren konden doorgeven. Door in te loggen, door gegevens zelf in te vullen of door de klacht anoniem door te geven.

Inloggen
Wanneer men inlogde werden vrijwel alle gegevens vooraf ingevuld en werden de invulvelden als 'Read-only' gepresenteerd. Alleen e-mailadres, telefoonnummer en opmerkingen kon met invullen. Dit werd door vrijwel alle respondenten begrepen en gewaardeerd.

Zelf invullen
Wanneer men ervoor koos om gegevens zelf in te vullen werd het formulier gepresenteerd zoals op de afbeelding is te zien. Hierbij hebben we geen specifieke opmerkingen over de labels, dan wel volgorde gekregen.

Anoniem
In dat geval kreeg men dit scherm niet te zien.