Brief 05 · Oefenen-pijler · AI Wizard · v15 — DS-conform sidebar + verfijning

Snapsnelds had gelijk over twee dingen. Ik over drie.

In Ronde 1 ontwierp ik vrij, zonder de bestaande Snapsnelds-Wizard te zien. Nu ik de 9 PulseChat-screens heb gelezen (WizardStart → PulseChat → Preview → Klaar), is de eerlijke conclusie: Snapsnelds doet drie dingen écht goed die ik zou moeten houden, en mijn R1 doet drie dingen die we niet moeten verliezen. Dit document is de samensmelting — geen kant-en-klaar advies, maar een per-beslissing afweging met verplichte deviation-rationale wanneer ik afwijk van het bestaande.

De TL;DR: conversational frame, maar één scherm. Pulse coacht écht, niet als deurwachter. De 9 stappen worden 4 zichtbare regio's op één canvas. Alle goede Snapsnelds-patronen blijven (impact-statements, Beste keuze-badges, hoofdstukken-detectie, type-conflict). Maar het wizard-pacing-mechanisme verdwijnt.

R1 · vrij ontwerp Snapsnelds · bestaand R2 · synthese (kies dit)

v15 · wat is anders dan R2?

Drie issues uit de v14-review opgelost — synthese-keuzes uit R2 staan, maar drie patches:

  1. DS-conform sidebar. R2 had een eigen 56px-sidebar met "S"-logo en geen actieve item — dat was niet conform het design system. v15 gebruikt de canonieke collapsed-variant: 60px breed, 7 items in de juiste volgorde (Dashboard · Leren · Oefenen · Plannen · Quiz maken · Ranglijst · Winkel), pillar-kleuren op de drie pijlers, primary-blue rail-indicator op het actieve item (Wand2-icoon), en de SnapSnel-S als compacte mark bovenin. Geen interactie-balasten, alleen visuele lock-in op het maker-item.
  2. TypeConflict verplaatst van chat naar keuze-zone. In R2 woonde de "andere types gedetecteerd"-banner in het Pulse chat-frame, dat voelde verstopt. In v15 staat de inline TypeConflict direct ónder de hoofdstuk-checklist in de Bron-regio — dáár waar het besluit valt. Dichter bij de actie.
  3. Mode-cards opgevijzeld. R2 mode-cards waren plat (witte achtergrond, dunne rand). v15 voegt subtiele radial-tint per modus toe (10% bij selectie, 4% rust), inner-shadow op selected, en de "Beste keuze"-badge zit nu strakker op de bovenrand. Quiz / Oefentoets / Examensim verschillen visueel direct van elkaar zonder dat ik aparte kleurthema's nodig heb.

Phase 2 lijst-modus krijgt bovendien een first-time tooltip bij de Focus-toggle, zodat de overgang van "ik zie alles" naar "één-vraag-tegelijk-edit" leerbaar is — kritiek omdat 'list as default' uit Snapsnelds komt en 'focus' uit R1, en de brug tussen die twee patronen moet zichtbaar zijn.

A · Side-by-side: wat houdt elke kant goed?

Per ontwerp-beslissing: wat doet R1 (mijn vrije ontwerp), wat doet Snapsnelds (de 9-step PulseChat-flow), en welke versie kiest R2.

Beslissing R1 · vrij Snapsnelds · bestaand R2 · synthese
Pacing Eén canvas, alles tegelijk zichtbaar. 9 stappen, sequentieel, één keuze per scherm. R1 wintEén canvas met 4 regio's. 9-step is overkill voor 14-jarige.
Pulse als… Coach rechts, niet-blokkerend. Conversational lead, dialogue-driven. MixPulse leidt visueel (chat-frame links), maar vragen zijn tegelijk zichtbaar — geen wachten op de volgende bubble.
Keuze-presentatie Cards/pills/sliders naast elkaar. Quick-answers met % match, Beste keuze, beschrijvingen. Snapsnelds wintKeuze-cards mét reden, % match en aanbeveling. R1 was te kaal.
Impact-statements Cost-bar pop-effect, geen tekst per keuze. Info-rij onder elke vraag: "Dit beïnvloedt…" Snapsnelds wintBehouden. Verklaart waarom een keuze ertoe doet — past bij onze didactische tone-of-voice.
PDF met meerdere H-stukken Pulse vraagt het als ambiguïteit opduikt. Multi-select cards met "~N vragen" per H-stuk + Alles/Geen. Snapsnelds wintMulti-select met live count per H-stuk overgenomen.
Type-conflict Niet expliciet behandeld. Banner: "Materiaal bevat veel koppelvragen, voeg toe?" Snapsnelds wintBehouden. Slim AI-gedrag waar de student wat aan heeft.
Generation-fase 4 fases met inhoudelijke hints + cancel/refund-zin. Spinner-bar, "Vraag X van Y", geen refund-belofte zichtbaar. R1 wintVerhalende fases + expliciete refund-tekst. Snapsnelds-bar mist geruststelling.
Phase 2 lay-out Card-stack met peek (focus + vorige/volgende). Lijst met confidence% + status-badge per kaart. MixDefault = lijst (Snapsnelds, schaalt naar 30) + Focus-modus (R1) op klik. Zoom-in voor edit, zoom-out voor overzicht.
Status-systeem Linker rand-kleur + kleine icon. Volledige badges (✓ Goedgekeurd, ⚠ Review). MixLinker rand-kleur (R1) + tekst-badge alleen op review-kaarten (Snapsnelds, alleen waar 't telt).
Privacy-keuze Side-sheet samen met titel/beschrijving. Inline op Klaar-scherm, na save. R1 wintSide-sheet vóór save, niet als opdringerige eind-disclaimer.
Klaar-celebratie Klein, proportioneel — confetti is voor het spelen. Volledig confetti-scherm, mascot xl, share-grid. R1 wintMaken ≠ winnen. Confetti reserveren voor win-states (zie Brief 02).
Foto-flashcards Aparte entry, geen modus. Niet expliciet — modus-keuze in WizardStart heeft 'm wel. R1 wintAparte entry. Single-phase flow zonder type/scope-stap.

Score: R1 = 5 wins · Snapsnelds = 4 wins · Mix = 3. Conclusie: behoud Snapsnelds' keuze-rijkheid (impact, % match, multi-select) maar laat de wizard-pacing los.

B · Deviation-rationale (verplicht — waar wijken we af van bestaand?)

Voor elke afwijking van de geïmplementeerde Snapsnelds-Wizard, expliciet: van wat → naar wat → waarom.

⚠ Deviation 1 · Pacing
Van: 9 sequentiële PulseChat-stappen (Modus → Bron → Vak → Niveau → Aantal → Types → Configvragen → Generation → Klaar).
Naar: Eén canvas met 4 zichtbare regio's (Modus · Bron · Scope · Cost-bar) + chat-frame voor Pulse-stem en ambiguity-resolution.
Waarom: 14-jarige TikTok-natives zien een 9-step wizard als school-formulier. Belangrijker: keuze-impact (modus → credits) is niet zichtbaar als 't op stap 8 leeft. Cost-bar moet meeleven met élke keuze — dat kan niet in een wizard. Snapsnelds' eigen impact-tekst probeert dit op te lossen, maar te laat.
⚠ Deviation 2 · Pulse als coach, niet conversational lead
Van: Pulse stelt elke vraag als bubble, wacht op antwoord, gaat verder.
Naar: Pulse staat zichtbaar (mascot + één korte zin per fase), maar de keuzes leven buiten de chat-bubbles. Chat is voor commentaar en ambiguity-resolution — niet voor het door-pacen van het formulier.
Waarom: Conversational UX is zwaar als de input duidelijk is ("vak = bio" hoeft geen dialoog). Maar als Pulse een hoofdstuk niet kan kiezen of een type-conflict ontdekt, wordt chat juist krachtig. We halen de patronen die ertoe doen (Beste keuze, % match, impact, conflict-banner) maar laten het pacing-mechanisme los.
⚠ Deviation 3 · Generation-fase
Van: StreamingProgress-component met "Vraag X van Y" en spinner.
Naar: 4 narratieve fases (Lezen → Begrijpen → Genereren → Controleren) met inhoudelijke hints per fase + zichtbare cancel-knop + zin "Annuleer = credit terug. Geen risico."
Waarom: 30 seconden voelen lang voor een tiener. Snapsnelds toont nu één bezig-met-werken-state. Onze versie geeft 4 zichtbare beats die laten merken dat de AI écht iets doet ("480 woorden gevonden", "onderwerp: celdeling"). Refund-belofte naast cancel-knop is psychologisch crucial: het verlaagt de drempel om te annuleren — wat paradoxaal de tevredenheid verhoogt.
⚠ Deviation 4 · Phase 2 default lay-out
Van: Volledige lijst van 12 vragen, alle expanded zichtbaar.
Naar: Compacte lijst (Snapsnelds-stijl) als default + Focus-modus op klik (R1-stijl, kaart vergroot, peek-cards links/rechts blijven zichtbaar). Zoom in voor edit, zoom uit voor overzicht.
Waarom: Snapsnelds-lijst werkt voor 30 vragen (R1 zou daar te traag worden door swipe-navigatie). Maar voor edit is de Focus-modus superieur: minder cognitive load, peek-context behouden. We krijgen het beste van beide door view-mode toggle.
⚠ Deviation 5 · Status-badges minder schreeuwend
Van: Volledige badge per kaart ("✓ Goedgekeurd", "⚠ Review nodig") + confidence-%.
Naar: Linker rand-kleur als primary status-cue (groen/oranje) + tekst-badge alleen op kaarten die review nodig hebben. Confidence-% verborgen in tooltip, niet als ambient noise.
Waarom: 8 van 12 kaarten zijn auto-approved — die hoeven niet "GOEDGEKEURD" te schreeuwen. De student moet de 4 review-kaarten zien. Status-asymmetrie: positieve status = subtiel, attention-vereisende status = expliciet. Confidence-% is nuttig voor power-users, niet voor first-time 14-jarige.
⚠ Deviation 6 · Klaar-scherm proportioneel
Van: Vol confetti, xl-mascot, share-grid prominent.
Naar: Compacte success-kaart, +5 Snaps-counter, primaire CTA = "Spelen". Confetti weg, share als secundaire actie.
Waarom: Brief 02 stelde vast: confetti = winnen, niet maken. Een quiz maken is een mid-step. De échte beloning komt na de eerste play. Door confetti hier te reserveren krijgen we 'm later terug met meer betekenis. Plus: tieners voelen overdreven viering als kinderachtig.
✅ Behouden van Snapsnelds (geen deviation, expliciet bevestigd)
1. Beste keuze-badge op aanbevolen optie — sterk patroon. · 2. % match bij quick-answers — laat AI-redenen zien. · 3. Impact-tekst onder elke vraag — past bij didactische tone. · 4. SectionsSummary voor multi-chapter PDF — brilliant pattern, ongewijzigd over. · 5. TypeConflictBanner — slim AI-gedrag dat trust opbouwt. · 6. HelpCircle-toggle voor uitleg per vraag — gewaardeerd door 18-jarige examen-prepper. · 7. Confidence-color-coding (groen/oranje/rood) — gehouden in linker rand.

C · Sleutel-states (gesynthetiseerd — zie canvas onder)

D · Antwoorden op specifieke design-vragen — herzien na Snapsnelds-review

1 · UX-paradigma — herzien
In R1 zei ik "form-bias, conversational alleen bij ambiguïteit". Na het zien van Snapsnelds' implementatie: chat-frame is een prima visuele anchor voor Pulse, ook zonder dat alle vragen in bubbles leven. Synthese: chat-frame links als context-rail (mascot + 1-2 zinnen per fase), vragen rechts als tegelijk-zichtbare regio's. Pulse zegt "Hier zijn je opties" en de student kiest — geen wachten op volgende bubble. Snapsnelds' QuickAnswers en ConfigQuestion componenten gaan 1:1 over, maar leven in de rechter-regio i.p.v. inline in chat. Best of both.
2 · Foto-upload UX — bevestigd
Drag-drop + camera in dezelfde zone (R1) — Snapsnelds heeft hier geen sterke afwijkende positie. PDF single-file V1 blijft. Toegevoegd na Snapsnelds-review: de OCR-feedback ("~480 woorden, lijkt op celdeling") krijgt dezelfde tone als hun impact-statements: korte info-rij met Info-icon, niet een aparte modal. Past bij de bestaande micro-copy-stijl.
3 · Generation-wachttijd — onveranderd
R1's 4-fase-narrative + cancel/refund blijft. Snapsnelds' eigen StreamingProgress is té sober (één label, één bar) voor 30 seconden. Wel visueel afgestemd: zelfde Pulse-mascot, zelfde fontstack, zelfde radius. De fases zijn nieuw, de chrome is bekend.
4 · Phase 2 — herzien naar dual-view
R1 zei stack-only. Na het zien dat Snapsnelds een lijst gebruikt: lijst is default, focus-modus is opt-in. Voor 12 vragen werkt lijst beter als overview. Voor edit van één vraag werkt focus beter. Toggle rechtsboven (lijst-icoon / vergrootglas-icoon). Inline edit blijft de norm — geen modals. Bulk-acties in footer-strip blijven (R1).
5 · Privacy — onveranderd
Snapsnelds zet privacy/share op het Klaar-scherm. Wij niet — dat voelt als "je móét delen om af te ronden". Privé blijft default in side-sheet, vóór save. Snaps-nudge ("+10 Snaps zodra 5 anderen 'm spelen") is overgenomen, maar zonder dramatische confetti-context. Past bij het maken-vs-spelen-onderscheid uit Brief 02.

E · Open vragen aan Robin — herzien

  1. De grootste afwijking is de 9-step → 1-canvas-collapse. Hoe bezorgd zijn jullie dat dit te veel keuzes-tegelijk wordt voor de eerste-keer-gebruiker? Mijn argument: cost-bar geeft real-time feedback en Pulse-frame begeleidt. Maar dit is wel een significante implementatie-wijziging.
  2. Behouden of laten gaan: SectionsSummary-positie? Snapsnelds heeft 'm in chat-flow. Wij in de Bron-sectie. Componenten 1:1 over, maar de plek verandert. Akkoord?
  3. Confidence-% verbergen in tooltip — power-users (docenten in toekomst?) willen 'm misschien expliciet zien. Optie: power-mode toggle. Of altijd verborgen voor V1?
  4. Lijst vs Focus default in Phase 2 — ik kies lijst-default. Maar voor nieuwe gebruikers zou Focus didactisch beter zijn ("kijk goed naar deze vraag"). Dus: eerste-keer Focus, daarna lijst onthouden? Of altijd lijst?
  5. Confetti-reservation — als we 'm hier weghalen, wordt de eerste play 100% méér beloon-gevoelig. Alignen we hier op? Brief 02 suggereerde dit al, maar Snapsnelds' Klaar-scherm zegt het tegenovergestelde.
  6. Type-conflict-banner positie — ik zet 'm in de chat-frame links (volgt logisch uit "Pulse zegt iets"). Snapsnelds zet 'm inline in de keuze-zone. Beide verdedigbaar — voorkeur?

↓ Sleutel-states canvas — sleep, klik om uit te vergroten ↓