Form Navigation

[Rozerinay]

We willen graag meer leren over de Form Navigation component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Form Navigation

Doel

Overzicht van stappen in een formulier, met de mogelijkheid om direct naar beschikbare stappen te navigeren.

Ook bekend als

Meter, Progress tracker, Stepper, Steps.

Gerelateerde componenten

Progress List

Onderzoek

Question pages - GOV.UK
GOV.UK geeft aan dat zij van een progress indicator zijn afgestapt om de volgende redenen:

• worden vaak niet opgemerkt
• nemen veel ruimte in
• schalen niet goed op kleine schermen
• kunnen sommige gebruikers afleiden en verwarren
• maken het moeilijk om goede labels voor de stappen te schrijven
• maken het moeilijk om voorwaardelijke secties te verwerken.

In plaats daarvan tonen zij bij welke stap de gebruiker zich bevindt en hoeveel stappen er in totaal zijn.

Do less - Problems as shared spaces - GOV.UK
In dit artikel wordt aangegeven dat gebruikersonderzoek aantoonde dat de progress indicator verwarrend was en het verwijderen ervan geen negatieve impact had op de voltooiingspercentages, wat aantoont dat het beter is om overbodige functies weg te laten voor een duidelijkere gebruikerservaring.

Multi-page Forms - W3C
In deze tutorial worden verschillende benaderingen besproken voor meerstapsformulieren. Een van deze benaderingen is het gebruik van een ‘stapsgewijze indicator’. Er wordt aangegeven dat het gebruik van een indicator gebruikers helpt zich te oriënteren in formulieren met een vast aantal stappen.

Step indicator - U.S. Web Design System
Step indicator van het U.S. Web Design System waarin handige richtlijnen voor bruikbaarheid en toegankelijkheidsrichtlijnen worden genoemd.

[Rozerinay]

Den Haag

Figma - Huidig

---

Screenshots / Varianten

Current

Unchecked

Checked

Disabled

First step active

Last step active

Step skipped

All completed

Responsive gedrag

---

Notities

• Onder de naam: Progress indicator.
• Alleen beschikbaar in Figma. Nog niet ontwikkeld.
• StepMarker die bij de Progress List wordt gebruikt, wordt hier hergebruikt.
• De current, unchecked, checked en disabled stappen worden visueel benadrukt.
• Disabled state wordt ingezet voor stappen die zijn overgeslagen.
• Voorgaande voltooide stappen zijn aanklikbaar en de toekomstige stappen niet.
• Naam van de formulierstappen wordt weergegeven.
• Responsive gedrag: StepMarker en font-size zijn kleiner.
• Richtlijnen beschikbaar (Figma).

[Rozerinay]

Open Formulieren

Storybook

---

Screenshots / Varianten

Progress Indicator

Default

Mobile version

Progress Indicator Item

Default

Applicable, navigable, completed, not active

Applicable, navigable, completed, active

Applicable, navigable, not completed, not active

Applicable, navigable, not completed, active

Applicable, not navigable

Not applicable, not navigable

---

Notities

• Onder de naam: Progress Indicator.
• De verschillende varianten van de stappen worden visueel benadrukt door middel van een icon, font-weight en color.
• Not applicable variant wordt ingezet voor stappen die zijn overgeslagen.
• Bij not navigable varianten wordt er bij hover een disabled cursor weergegeven.
• Voorgaande voltooide stappen zijn aanklikbaar en er is de mogelijkheid om toekomstige stappen wel of niet aanklikbaar te maken.
• Naam van de formulierstappen wordt weergegeven.
• Responsive gedrag: stappen worden in een menu achter een button 'Formulier' getoond.
• Documentatie beschikbaar.

[Rozerinay]

RVO

• Documentatie website
• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Start

End

Step completed

Step doing

Step incomplete

Step disabled

First sub-step

Sub-step doing

Sub-step completed

Sub-step disabled

Last sub-step

Responsive gedrag

Figma

Vertical Progress Tracker

Horizontal Progress Tracker

---

Notities

• Onder de naam: Progress Tracker.
• De Progress Tracker verschilt tussen Storybook en Figma.
• In Figma is er naast de verticale variant ook een horizontale beschikbaar.
• In Figma kan de Process Step ook een Description en een icon ernaast bevatten.
• De verschillende varianten van de stappen worden visueel benadrukt door middel van een icon, font-weight, font-size en color.
• Voorgaande voltooide stappen zijn aanklikbaar en er is de mogelijkheid om toekomstige stappen wel of niet aanklikbaar te maken.
• Naam kan worden ingesteld voor het proces.
• Naam van de formulierstappen wordt weergegeven.

[Rozerinay]

Utrecht

Publieke website

---

Screenshots / Varianten

---

Notities

Progress Indicator van Open Formulieren wordt ingezet bij gemeente Utrecht.

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Form Navigation op het Community bord