docs: patronen uit WMEBV onderzoek publiceren

docs/voorbeelden/patronen/formulieren/_category_.json

@@ -1,3 +1,9 @@
 {
-  "label": "Formulieren"
+  "label": "Formulieren",
+  "link": {
+    "type": "generated-index",
+    "title": "Patronen - Formulieren",
+    "keywords": ["patronen", "formulieren"],
+    "slug": "voorbeelden/patronen/formulieren"
+  }
 }

docs/voorbeelden/patronen/formulieren/_pattern_footer_info.mdx

@@ -0,0 +1,7 @@
+## Help deze documentatie te verbeteren
+
+Om ervoor te zorgen dat deze documentatie nuttig, relevant en up-to-date is, kun je een wijziging voorstellen via [Github](https://github.com/nl-design-system/documentatie).
+
+## Vragen
+
+Heb je een vraag? Twijfel niet en [neem contact op met het kernteam](../../../project/kernteam.mdx).

docs/voorbeelden/patronen/formulieren/_research-info.mdx

@@ -0,0 +1,7 @@
+### Achtergrond onderzoek
+
+Dit patroon is toegepast in een meer-stappen-formulier dat 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](https://vng.nl/wmebv)
+- [Bekijk het formulier dat is gebruikt tijdens het onderzoek](https://nl-design-system-templates-theta.vercel.app/wmebv)
+- [Bekijk de formulier templates in Figma](https://www.figma.com/file/taAnsV55PVP0cmw18BnMDk/NLDS---Voorbeeld---Templates?type=design&node-id=1528-3874&mode=design)

docs/voorbeelden/patronen/formulieren/bevestigingspagina.mdx

@@ -0,0 +1,45 @@
+---
+title: Bevestigingspagina
+hide_title: true
+hide_table_of_contents: true
+sidebar_label: Bevestigingspagina
+sidebar_position: 11
+pagination_label: Bevestigingspagina van een meer-stappen-formulier
+description: Documentatie rondom de bevestigingspagina van een meer-stappen-formulier
+keywords:
+  - voorbeelden
+  - patronen
+  - formulieren
+  - bevestigingspagina
+  - onderzoek
+---
+
+import PatternFooterInfo from "./_pattern_footer_info.mdx";
+import ResearchInfo from "./_research-info.mdx";
+import { VideoPlayer } from "../../../../src/components/VideoPlayer";
+
+# Bevestigingspagina van een meer-stappen-formulier
+
+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.
+
+![Ontwerp van bevestigingspagina van een meer-stappen-formulier](https://raw.githubusercontent.com/nl-design-system/documentatie/assets/voorbeeld_formulier_succes.png)
+
+## Inzichten uit onderzoek
+
+### 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.
+
+<VideoPlayer videoId="3xGV14vdEQI" />
+
+<ResearchInfo />
+
+---
+
+<PatternFooterInfo />

docs/voorbeelden/patronen/formulieren/controlepagina.mdx

@@ -0,0 +1,51 @@
+---
+title: Controlepaginapagina
+hide_title: true
+hide_table_of_contents: true
+sidebar_label: Controlepaginapagina
+sidebar_position: 10
+pagination_label: Controlepagina van een meer-stappen-formulier
+description: Documentatie rondom de controlepagina van een meer-stappen-formulier
+keywords:
+  - voorbeelden
+  - patronen
+  - formulieren
+  - controlepagina
+  - onderzoek
+---
+
+import PatternFooterInfo from "./_pattern_footer_info.mdx";
+import ResearchInfo from "./_research-info.mdx";
+import { VideoPlayer } from "../../../../src/components/VideoPlayer";
+
+# Controlepagina van een meer-stappen-formulier
+
+Een controlepagina kan worden ingezet om ingevulde data te controleren voordat men deze verstuurd.
+
+![Ontwerp van controlepagina van een meer-stappen-formulier](https://raw.githubusercontent.com/nl-design-system/documentatie/assets/voorbeeld_formulier_controle.png)
+
+## Inzichten uit onderzoek
+
+### Wat gaat goed
+
+- Men snapt wat er van hen wordt verwacht.
+- Men weet de 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 worden in het formulier los uitgevraagd. Op de controlepagina wordt dit samengevoegd tot enkel huisnummer. Dit zorgt 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 bestaat dat het slim samenvoegen van opgegeven data ook voor verwarring kan zorgen. We leren graag wanneer dit wel werkt en wanneer niet.
+
+<VideoPlayer videoId="Koq-BSnFE20" />
+
+<ResearchInfo />
+
+---
+
+<PatternFooterInfo />

docs/voorbeelden/patronen/formulieren/foutmeldingen.mdx

@@ -0,0 +1,49 @@
+---
+title: Foutmeldingen
+hide_title: true
+hide_table_of_contents: true
+sidebar_label: Foutmeldingen
+sidebar_position: 99
+pagination_label: Foutmeldingen in een formulier
+description: Documentatie rondom foutmeldingen in een formulier
+keywords:
+  - voorbeelden
+  - patronen
+  - formulieren
+  - foutmeldingen
+  - onderzoek
+---
+
+import PatternFooterInfo from "./_pattern_footer_info.mdx";
+import ResearchInfo from "./_research-info.mdx";
+import { VideoPlayer } from "../../../../src/components/VideoPlayer";
+
+# Foutmeldingen in een formulier
+
+In een formulier kunnen foutmeldingen voorkomen. Hieronder verzamelen we informatie rondom dit patroon.
+
+![Ontwerp van foutmeldingen in een formulier](https://raw.githubusercontent.com/nl-design-system/documentatie/assets/voorbeeld_formulier_foutmeldingen.png)
+
+## Inzichten uit onderzoek
+
+### Wat gaat goed
+
+- Validatie nadat men op de knop 'Volgende stap' (submit) klikt werkt goed.
+- De terugkoppeling van foutieve velden doormiddel 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?
+
+<VideoPlayer videoId="K7IWqxEITzw" />
+
+<ResearchInfo />
+
+---
+
+<PatternFooterInfo />

docs/voorbeelden/patronen/formulieren/funnel-header.mdx

@@ -0,0 +1,45 @@
+---
+title: Funnel header
+hide_title: true
+hide_table_of_contents: true
+sidebar_label: Funnel header
+sidebar_position: 9
+pagination_label: Funnel header boven een meer-stappen-formulier
+description: Documentatie rondom de funnel header boven een meer-stappen-formulier
+keywords:
+  - voorbeelden
+  - patronen
+  - formulieren
+  - funnel header
+  - onderzoek
+---
+
+import PatternFooterInfo from "./_pattern_footer_info.mdx";
+import ResearchInfo from "./_research-info.mdx";
+import { VideoPlayer } from "../../../../src/components/VideoPlayer";
+
+# Funnel header boven een meer-stappen-formulier
+
+Boven een meer-stappen-formulier kun je een 'Funnel header' toepassen. Hieronder verzamelen we informatie rondom dit patroon.
+
+![Ontwerp van een funnel header boven een meer-stappen-formulier](https://raw.githubusercontent.com/nl-design-system/documentatie/assets/voorbeeld_formulier_header.png)
+
+## Inzichten uit onderzoek
+
+### 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.
+
+### Verder onderzoeken
+
+- De wachting van wat er getoond wordt nadat je op de naam klikt loopt uiteen. Een ingang naar de mijn omgeving, een menu en uitloggen worden allemaal genoemd.
+- Welke informatie en opties zijn nodig wanneer men op de button klikt? En sluiten deze aan bij de verwachting. Dit zouden we graag verder uitzoeken.
+
+<VideoPlayer videoId="_yU8tIHw9WQ" />
+
+<ResearchInfo />
+
+---
+
+<PatternFooterInfo />

docs/voorbeelden/patronen/formulieren/inloggen.mdx

@@ -0,0 +1,54 @@
+---
+title: Inloggen
+hide_title: true
+hide_table_of_contents: true
+sidebar_label: Inloggen
+sidebar_position: 4
+pagination_label: Inloggen binnen een meer-stappen-formulier
+description: Documentatie rondom inloggen binnen een meer-stappen-formulier
+keywords:
+  - voorbeelden
+  - patronen
+  - formulieren
+  - inloggen
+  - onderzoek
+---
+
+import PatternFooterInfo from "./_pattern_footer_info.mdx";
+import ResearchInfo from "./_research-info.mdx";
+import { VideoPlayer } from "../../../../src/components/VideoPlayer";
+
+# Inloggen binnen een meer-stappen-formulier
+
+Bij een meer-stappen-formulier kan het voorkomen dat de gebruiker moet inloggen. Hieronder verzamelen we informatie rondom dit patroon.
+
+![Ontwerp van inlog optie binnen een meer-stappen-formulier](https://raw.githubusercontent.com/nl-design-system/documentatie/assets/voorbeeld_formulier_inloggen.png)
+
+## Inzichten uit onderzoek
+
+### Wat gaat goed
+
+- Het vooraf invullen van gegevens doordat je inlogt wordt door de meeste respondenten gezien als een voordeel.
+- Wanneer het niet per se nodig is om in te loggen is een keuze om zonder in te loggen verder te gaan gewenst.
+
+### Wat kan beter
+
+- De stap om in te loggen lijkt te vroeg te komen in het proces. In de context 'vraag stellen aan de gemeente' wordt het daadwerkelijke vraag stellen verwacht in plaats van inloggen.
+- Inloggen met DigiD wordt door de meeste respondenten als een behoorlijk uitdaging gezien.
+- De voordelen van het inloggen worden door enkele respondenten over het hoofd gezien.
+
+### Verder onderzoeken
+
+- Hoe zouden we de voordelen beter onder de aandacht kunnen brengen? En denkt men vervolgens anders over inloggen?
+- Hoe wordt het 'opknippen' van stappen ervaren wanneer:
+  - Men, naast DigiD, ook met E-herkenning of een internationaal identificatiebewijs kan inloggen?
+  - Men ook de mogelijkheid heeft om het formulier als gemachtigde in te vullen?
+- Zijn radio-buttons wel de juiste manier om deze keuze uit te vragen? Zouden buttons met logo's bijvoorbeeld beter werken?
+
+<VideoPlayer videoId="GPozcguvUJU" />
+
+<ResearchInfo />
+
+---
+
+<PatternFooterInfo />