Startpagina voor formulieren

De documentatie van het Design System is nog in bèta en wordt stapsgewijs aangevuld.

Vragen? Raadpleeg de vorige documentatiehub(opent in nieuw venster) of contacteer ons.

Wanneer van toepassing?

Een startpagina zoals hieronder uitgelegd wordt, kan interessant zijn voor complexere formulieren. Denk aan formulieren die één of meer van volgende aspecten bevatten:

Alles invullen = een langdurig proces, betreft veel data
Het formulier kan meestal niet ‘vanbuiten’ ingevuld worden, maar er dienen documenten voor verzameld te worden, de gebruiker gaat dan data daarvan aflezen en ingeven,…
De gebruiker kan elk moment beslissen om te stoppen met het formulier in te vullen, en het later verder oppikken
- Gegevens moeten opgeslaan kunnen worden
- Gebruiker moet kunnen zien waar ‘ie gebleven was de laatste keer
- Gebruiker moet data kunnen aanpassen en aanvullen

Doel van de startpagina

Het doel van de startpagina is tweeledig. Enerzijds, ter introductie. Dit door:

Aan te geven welke stappen er volgen.
Te vermelden wat de gebruiker nodig heeft om het formulier in te vullen.
Te verduidelijken of alle velden verplicht zijn, tenzij anders vermeld.

Zo’n introductie kan ook toegepast worden op minder complexe formulieren.

Anderzijds, ter overzicht van de reeds getroffen stappen. Bij complexe formulieren kan de introductie snel een hele eerste pagina beslaan. Hier kan een overzicht van alle stappen worden gegeven, inclusief de status van elke stap. Deze overzichtspagina kan ook als referentie dienen wanneer het formulier tussentijds wordt opgeslagen en later verder ingevuld kan worden.

Voor het invullen van het formulier

Voorbeeld van een startpagina voor complexe formulieren.

Duidelijk overzicht bieden van alle te treffen stappen

In eerste instantie biedt u een ‘startscherm’ aan waar alle stappen gelijk weergegeven worden: geen disabled/uitgegrijsde stappen, zodat alle stappen even leesbaar en toegankelijk zijn. Dit schept een duidelijk beeld en een heldere verwachting bij de gebruiker van wat het formulier inhoudt, en wat voor gegevens de gebruiker allemaal zal moeten ingeven (eveneens welke zaken zoals documenten de gebruiker hiervoor zou nodig hebben).

Onder dat overzicht aan stappen, verschijnt 1 duidelijke actieknop om het invullen van het formulier te beginnen.

Tijdens het invullen

Voorbeeld van een actieve eerste stap, met actieknop om in te vullen.

Eerste stap is actief

De actieve stap wordt onderscheiden van de volgende stappen door middel van:

de actieknop die verschijnt op de stap zelf, om deze in te vullen
de tussentitel ‘volgende stappen’, die tussen de actieve en inactieve stappen verschijnt
de volgende stappen kunnen nog niet ingevuld worden zolang de eerste stap niet voltooid is, dus verschijnt er ook geen actieknop bij die volgende stappen

Voorbeeld van een voltooide eerste stap.

Eerste stap is voltooid

Eenmaal een stap voltooid is, kan diens status ook als ‘voltooid’ weergegeven worden. Dit kan door middel van een naked alert onder de titel en optionele subtitel van zo’n stap.

Daarbovenop is wat voorheen een actieknop was om de stap in te vullen, nu een link geworden om de stap te wijzigen.

Het voltooien van de eerste stap zorgt er ook voor dat nu een volgende stap actief is, deze krijgt nu een actieknop. De titel ‘volgende stappen’ is ook 1 stap verschoven.

Dit herhaalt zich dus telkens er een stap voltooid wordt. Zo hebben er op termijn meer en meer stappen de status ‘voltooid’, met een link om te wijzigen.

Substappen

Substappen kunnen ook weergegeven worden, hiervoor kunnen we een openklapbare stap gebruiken.

Voorbeeld van een stap waar gegevens ontbreken.

Foutmeldingen

Zijn er gegevens foutief ingevuld of ontbreken er gegevens op een bepaalde stap? Dan kan ook dit meegegeven worden met behulp van de status, ervan uitgaand dat zolang er een foutmelding is, de stap de status ‘voltooid’ niet kan meekrijgen noch tonen.

Bovendien werd er een waarschuwingsstatus voorzien vanuit de Steps component, waar de hele stap een ‘waarschuwing-state’ kan aannemen.