Portfolio Case 02

Toegankelijke AI-formulierassistent

AI-hulp in een complexe flow, met menselijke controle en WCAG als basis.

Formulier-UX Accessibility AI-assisted Human-in-the-loop

AanvraagPlus°

De Formulierflow

Stap voor stap door de interface.

Scherm 1 / Start

AanvraagPlus°

Ingelogd als J. Doe

Complexe Beoordeling Aanvragen

Welkom. In de volgende stappen verzamelen we de benodigde informatie voor uw aanvraag. U kunt uw situatie vrij omschrijven, gegevens aanvullen en documenten toevoegen.

Stap 1 van 4 Situatie beschrijven

Start

Gegevens

Uploads

Controle

Slimme ondersteuning beschikbaar

Tijdens het invullen kan onze AI u helpen om teksten te verduidelijken of te controleren op ontbrekende informatie. Dit is optioneel. Je houdt altijd zelf controle over wat wordt verzonden.

Scherm 2 / Input & AI Acties

Beschrijf uw situatie

Stap 1: Omschrijving

Toelichting aanvraag Leg uit waarom u deze aanvraag indient. Wees zo concreet mogelijk, maar deel geen persoonsgegevens als dat niet nodig is.

Privacy note: Vermijd het noemen van BSN-nummers of medische details in dit open veld.

Scherm 3 / AI Voorstel Status

Jouw originele tekst

Wij willen een aanvraag doen voor het nieuwe systeem omdat het oude niet meer werkt. We missen features en de data is traag.

Voorgestelde herschrijving

Gegenereerd

Controleer altijd zelf of dit exact verwoordt wat u bedoelt.

Scherm 4 / Formulier & Foutmelding

Aanvullende gegevens

Stap 2: Details van de aanvraag

Contact & Type

Afdeling *

Gewenste ingangsdatum *

Selecteer een datum in de toekomst.

Categorie

Standaard verwerking Beoordeling binnen 5 werkdagen.

Spoed aanvraag Alleen voor kritieke operationele blockers.

Referentienummer (Optioneel)

Scherm 5 / Uploads & AI Detectie

Ondersteunende documenten

Voeg bestanden toe die relevant zijn voor de beoordeling.

Klik om te uploaden of sleep bestanden hierheen PDF, DOCX of JPG (Max. 10MB)

Toegevoegd (1)

Q3_Rapportage_Final.pdf 2.4 MB

Mogelijk gevoelige data gedetecteerd Dit document lijkt financiële overzichten te bevatten. Controleer of dit bestand vereist is voor uw aanvraag. Verwijder bestanden die u niet wilt meesturen.

Scherm 6 / Human-in-the-loop Review

Controleer uw aanvraag

Controleer onderstaande samenvatting zorgvuldig. U bent verantwoordelijk voor de inhoud die wordt ingediend.

AI-gegenereerde samenvatting

De aanvrager, werkzaam op de afdeling IT Operations, verzoekt om de implementatie van een nieuw systeem ter vervanging van de huidige verouderde infrastructuur. Het verzoek is ingediend als een standaard aanvraag. Als onderbouwing is een Q3 rapportage toegevoegd.

Nog controleren (AI Check)

Er is geen specifieke leverancier genoemd voor het nieuwe systeem. Klopt dit?
Bijlage bevat mogelijk financiële data. (Zie waarschuwing bij stap 3).

Afdeling IT Operations

Ingangsdatum 01 November 2024

Categorie Standaard verwerking

Bijlagen 1 bestand (Q3_Rapportage_Final.pdf)

Ik heb de samenvatting en gegevens gecontroleerd Ik bevestig dat de informatie correct is en ingediend kan worden voor beoordeling. Automatische controles zijn adviserend.

Scherm 7 / Bevestiging

Aanvraag succesvol ingediend

Uw aanvraag met referentie #REQ-8821 is ontvangen en wordt beoordeeld door een medewerker.

Status Ingediend voor review

Verwachte reactietijd Binnen 5 werkdagen

Design System Componenten

Visuele basis voor de AanvraagPlus UI.

Status Messages & Alerts

Informatie (Neutraal) De beoordelingstermijn kan afwijken rond feestdagen.

AI Suggestie (Accent) De AI heeft 2 mogelijke ontbrekende punten gevonden.

Waarschuwing (Privacy/Control) Deze tekst lijkt gevoelige gegevens te bevatten.

Foutmelding (Validatie) Vul een omschrijving in om verder te gaan.

Form Controls & Focus

Input (Focus State)

Select

Checkbox Checked Radio Active

Accessibility & UX Notes

WCAG-principes toegepast in dit ontwerp.

Duidelijke Labels

Elk invoerveld heeft een expliciet, visueel label. Er wordt niet alleen op placeholders vertrouwd. Optionele velden zijn duidelijk gemarkeerd in tekst (niet alleen met een afwijkende kleur).

Keyboard Navigatie & Focus

Alle interactieve elementen (inputs, buttons, custom radio's) hebben een duidelijk ontworpen focus state (`ring-1 ring-indigo-500`). De flow is logisch te tabben.

Contrast & Kleurgebruik

Foutmeldingen vertrouwen niet alleen op kleur (rood), maar gebruiken altijd een icon en ondersteunende tekst ("Selecteer een datum in de toekomst"). Tekstcontrast voldoet aan WCAG AA richtlijnen.

Human-in-the-loop UX

AI output wordt nooit automatisch geaccepteerd of verzonden. De reviewstap dwingt de gebruiker om expliciet aan te vinken dat zij de AI-samenvatting hebben gecontroleerd. Begrijpelijke microcopy voorkomt blind vertrouwen.