621e1c90f9
|---------------------|---------------|---------------------| | E0: Foundation | ✅ Afgerond | Types + DB migratie | | E1: Leefgebieden | ✅ Afgerond | 3 componenten | | E2: AI Generatie | ⏳ Nog te doen | - | | E3: Behandelplan UI | ⏳ Nog te doen | - | Gemaakte bestanden: - lib/types/leefgebieden.ts - 7 domeinen met kleuren/emoji's - lib/types/behandelplan.ts - SMART doelen, interventies, Zod schemas - components/behandelplan/leefgebieden-form.tsx - Intake formulier - components/behandelplan/leefgebieden-scores.tsx - Score weergave - components/behandelplan/leefgebieden-badge.tsx - Domain badges - components/behandelplan/index.ts - Exports
141 lines
5.7 KiB
Markdown
141 lines
5.7 KiB
Markdown
# 🧩 Functioneel Ontwerp (FO) – Template
|
||
|
||
**Projectnaam:** _[vul in]_
|
||
**Versie:** _v1.0_
|
||
**Datum:** _[dd-mm-jjjj]_
|
||
**Auteur:** Colin Lit
|
||
|
||
---
|
||
|
||
## 1. Doel en relatie met het PRD
|
||
🎯 **Doel van dit document:**
|
||
Het Functioneel Ontwerp (FO) beschrijft **hoe** het product uit het PRD functioneel zal werken — dus wat de gebruiker ziet, doet en ervaart. Waar het PRD uitlegt *wat en waarom*, laat het FO zien *hoe dit in de praktijk werkt*.
|
||
|
||
📘 **Toelichting aan de lezer:**
|
||
Gebruik dit document om een gedeeld beeld te creëren tussen ontwerp, ontwikkeling en stakeholders. Het FO hoort compact te blijven: één niveau dieper dan het PRD, niet technisch maar functioneel-concreet.
|
||
|
||
---
|
||
|
||
## 2. Overzicht van de belangrijkste onderdelen
|
||
🎯 **Doel:** kort overzicht van de modules, schermen of onderdelen binnen de app of tool.
|
||
📘 **Toelichting:** som de kernschermen of modules op (zoals ‘Dashboard’, ‘Cliëntenlijst’, ‘Editor’, ‘AI-rail’). Dit helpt de lezer snel te begrijpen waar het FO over gaat.
|
||
|
||
**Voorbeeld:**
|
||
1. Dashboard / Overzicht
|
||
2. Cliëntdossier
|
||
3. Intakeverslag
|
||
4. Probleemprofiel
|
||
5. Behandelplan
|
||
6. *(Optioneel)* Rapportage / Agenda
|
||
|
||
---
|
||
|
||
## 3. Userstories (sjabloon + voorbeelden)
|
||
🎯 **Doel:** beschrijven wat gebruikers moeten kunnen doen, vanuit hun perspectief.
|
||
|
||
📘 **Toelichting:** gebruik dit vaste sjabloon:
|
||
|
||
**User Story Template:**
|
||
> Als [rol/gebruiker] wil ik [doel of actie] zodat [reden/waarde].
|
||
|
||
**Voorbeeld:**
|
||
> Als behandelaar wil ik snel een intakeverslag kunnen samenvatten zodat ik sneller tot een behandelplan kom.
|
||
|
||
**Aanvullende kolommen (optioneel):**
|
||
| ID | Rol | Doel / Actie | Verwachte waarde | Prioriteit |
|
||
|----|------|---------------|------------------|-------------|
|
||
| US-01 | Behandelaar | Nieuwe cliënt aanmaken | Kan direct starten met intake | Hoog |
|
||
| US-02 | Behandelaar | Intake samenvatten met AI | Tijdbesparing, inzicht | Hoog |
|
||
| US-03 | PO | Inzage demo-flow | Begrijpt AI toegevoegde waarde | Middel |
|
||
|
||
---
|
||
|
||
## 4. Functionele werking per onderdeel
|
||
🎯 **Doel:** per hoofdonderdeel beschrijven wat de gebruiker kan doen en wat het systeem doet.
|
||
|
||
📘 **Toelichting:** dit is de kern van het FO. Gebruik korte, actiematige beschrijvingen. Focus op gedrag, states en interacties.
|
||
|
||
**Voorbeeldstructuur:**
|
||
|
||
### 4.1 Dashboard / Overzicht
|
||
* Toont kaarten met samenvattingen van cliëntinformatie (intake, profiel, plan).
|
||
* Knoppen: *Nieuw verslag*, *Ga naar behandelplan*.
|
||
* Leeg-staat: melding “Nog geen dossiers”.
|
||
|
||
### 4.2 Intakeverslag
|
||
* Rich text editor met knoppen voor *Opslaan*, *AI-samenvatten*, *Leesbaarheid*.
|
||
* AI-resultaat verschijnt in rechterzijpaneel (AI-rail).
|
||
* Gebruiker kan *Preview → Invoegen* of *Annuleren*.
|
||
|
||
### 4.3 Probleemprofiel
|
||
* Formulier met dropdown (categorie) en slider (severity).
|
||
* AI-suggestie met bronverwijzing uit intake.
|
||
* Bevestigen activeert *Behandelplan* tab.
|
||
|
||
### 4.4 Behandelplan
|
||
* Vier secties: Doelen, Interventies, Frequentie/Duur, Meetmomenten.
|
||
* Gebruiker kan elke sectie aanpassen of regenereren via micro-AI-acties.
|
||
* Knoppen: *Opslaan* (concept), *Publiceer v1*.
|
||
|
||
---
|
||
|
||
## 5. UI-overzicht (visuele structuur)
|
||
🎯 **Doel:** eenvoudig inzicht geven in de globale schermopbouw.
|
||
|
||
📘 **Toelichting:** gebruik dit als communicatiemiddel met ontwerpers of developers. Het is geen pixel-perfect ontwerp, maar een functionele schets.
|
||
|
||
**Voorbeeld (ASCII-layout):**
|
||
```
|
||
┌───────────────────────────────────────────────┐
|
||
│ Topbalk: cliëntnaam, acties, zoeken │
|
||
├───────────────┬───────────────────────────────┤
|
||
│ Linkernav │ Middenpaneel (inhoud) │
|
||
│ (Overzicht, │ Detail, formulieren, editor) │
|
||
│ Intake, Prof.)│ │
|
||
├───────────────┴───────────────────────────────┤
|
||
│ Footer: status / toasts │
|
||
└───────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Tip:** Combineer dit later met wireframes of UX-schetsen uit Figma of Gamma.app.
|
||
|
||
---
|
||
|
||
## 6. Interacties met AI (functionele beschrijving)
|
||
🎯 **Doel:** uitleggen waar AI in de flow voorkomt en wat de gebruiker ziet of verwacht.
|
||
|
||
📘 **Toelichting:** beschrijf per AI-actie kort de trigger, verwerking en output.
|
||
|
||
**Voorbeeld:**
|
||
| Locatie | AI-actie | Trigger | Output |
|
||
|----------|-----------|----------|---------|
|
||
| Intake-editor | Samenvatten | Klik op knop *AI › Samenvatten* | Bullets in rechterzijpaneel |
|
||
| Intake-editor | Leesbaarheid (B1) | Klik op knop *AI › Leesbaarheid* | Herschreven tekstversie |
|
||
| Profiel | Extract problemen | Klik op *AI › Extract* | Categorie + severity + bronzinnen |
|
||
| Plan | Genereer behandelplan | Klik op *AI › Plan genereren* | Secties met bewerkbare doelen |
|
||
|
||
---
|
||
|
||
## 7. Gebruikersrollen en rechten (optioneel)
|
||
🎯 **Doel:** beschrijven welke rollen toegang hebben tot welke onderdelen.
|
||
📘 **Toelichting:** alleen opnemen als het project meerdere gebruikersgroepen kent.
|
||
|
||
**Voorbeeld:**
|
||
| Rol | Toegang tot | Beperkingen |
|
||
|------|--------------|-------------|
|
||
| Behandelaar | Alle cliëntdossiers | Alleen eigen dossiers bewerken |
|
||
| Manager | Rapportages | Geen bewerkingen |
|
||
| Demo-user | Alles (fictieve data) | Alleen lezen |
|
||
|
||
---
|
||
|
||
## 8. Bijlagen & Referenties
|
||
🎯 **Doel:** linken naar de overige documenten binnen Mission Control.
|
||
|
||
**Verwijzingen:**
|
||
- PRD (Product Requirements Document)
|
||
- TO (Technisch Ontwerp)
|
||
- UX/UI-specificatie
|
||
- Mission Control / Build Plan
|
||
- API Access Document
|