Meerstappenformulier

[Rozerinay]

Meerstappenformulier template

Welkom bij de GitHub Discussion rond onze meerstappenformulier template! 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.

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)
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.

[Rozerinay]

Controlepagina

Over: Terugkeren naar de controlepagina

Onderzoek WMEBV

Uit het onderzoek blijkt dat het als onhandig wordt ervaren om, na een aanpassing, telkens alle stappen opnieuw te doorlopen om weer bij de controlepagina uit te komen.

Onderzoek Klachtenformulier

Hier zagen we dat het aanbieden van een ‘Opslaan’ Button na een aanpassing goed werkt. Na het klikken op deze Button wordt de gebruiker direct teruggeleid naar de controlepagina.

[Rozerinay]

Controlepagina

Over: Samenvoegen van gegevens

Onderzoek WMEBV

‘Huisnummer’ en ‘Toevoeging’ werden afzonderlijk uitgevraagd, maar op de controlepagina samengevoegd tot één veld (‘huisnummer’). Dit zorgde bij enkele respondenten voor verwarring.

Lessen

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.

[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.

[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 (binnen een meerstappenformulier)

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
• Login Link
• Logo

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Voorafgaand aan het onderzoek rondom Vergunning aanvragen bij Gemeente Den Haag hebben @Rozerinay en ik de positie van de logo's van inlogmiddelen verplaatst. Boven de voordelen in plaats van onder de voordelen. Ook noteerde we de voordelen als opsomming.

Inzichten

• Alle respondenten gaven te hebben gekozen om in te loggen.
• Respondenten begrepen de uitleg en zagen de voordelen van het inloggen.
• De respondenten herkennen en vertrouwen DigiD en vinden het daarom fijn om hiermee in te loggen.

[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]

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?
• Hoe reageert men wanneer voortgang niet zichtbaar is? Bijvoorbeeld bij formulieren waarbij er stappen bijkomen of afvallen afhankelijk van een keuze of antwoord.
• 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?

[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]

Opslaan of Stoppen

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

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:

• 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.
• Beide functionaliteiten zullen verder uitgewerkt moeten worden om dit te valideren. Belangrijke informatie om hier in mee te nemen:
  • Waar gaat men verder in het formulier? Men verwacht niet terug te zijn aan de start.
  • Hoe komt men terug in het formulier? Opnieuw inloggen? Een link per email?
  • Waar vindt men de gegevens om weer terug te komen naar in het formulier?
• Momenteel wordt er gedacht een Modal Dialog waarin wordt toegelicht wat de actie inhoud 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]

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]

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]

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?

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Tijdens dit onderzoek werd dezelfde opzet gebruikt qua 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 [email protected].'. 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 en rondom het Generieke Klachtenformulier werd duidelijk dat men het toegevoegd 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 Header / Hulp aanbieden

Onder een meerstappenformulier kun je een uitgeklede 'Page Footer' plaatsen. Hierin kun je overbodige funtionaliteiten 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

Nog niet terug kunnen halen uit de rapportage maar het staat me bij dat men het telefoonnummer ook in de footer zocht en vond. Ik zal het nog even navragen bij anderen die meekeken met het onderzoek.

Inzichten

Het woord 'Proclaimer' werd niet begrepen.

Back to top?

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

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.