Files
triqura-ecd/docs/templates/fo_template.md
colinislit 621e1c90f9 | Epic | Status | Wat is gedaan |
|---------------------|---------------|---------------------|
  | 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
2025-12-04 09:09:23 +01:00

5.7 KiB
Raw Permalink Blame History

🧩 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