Brief 01 · Oefenen-pijler · Hub, Library & Quiz Detail
Van "ik wil oefenen" naar "ik speel deze quiz" — in dertig seconden.
Sleutel-states voor de drie views vóór de quiz: Oefenen Hub (pijler-home, modus-keuze), Quiz Library (browse, search, filters) en Quiz Detail (overweging, modus-tier-keuze, secties). De drie views zijn een discovery-funnel: Hub set de toon en surface-t persoonlijke aanbevelingen → Library laat power-users exact zoeken → Detail laat de student commitment maken op de juiste intensiteit.
A · Concept-rationale
De Oefenen-pijler heeft één kernspanning: drie heel verschillende oefenvormen (Quiz / Oefentoets / Examensim) moeten naast elkaar bestaan zonder elkaar te kannibaliseren. Een 5-minuten Quiz Free voelt anders dan een 60-minuten Examensim — maar beiden zitten op dezelfde Hub, en beiden worden vanuit dezelfde Library gevonden. Onze oplossing: modus is een eigenschap van de quiz zelf, niet een speel-keuze. Een woordenlijst-quiz íś een Quiz; een eindexamen-set íś een Examensim. De student kiest welke quiz, niet hoe-die-zelfde-quiz-zich-gedraagt.
Drie ontwerpprincipes: (1) Hub = pijler-DNA, niet feed — je ziet jezelf (level/streak/Snaps), je drie modi met heldere visual differentiation als entry-points naar de juiste Library-filter, en wat Pulse vandaag aanraadt. Geen oneindige scroll. (2) Library is dual-paradigma — een AI-curated mood-board ("Voor jou vandaag") boven een klassieke filtered grid voor wie exact weet wat ze zoeken. Modus-badges op elke kaart maken de modus direct zichtbaar. (3) Tier-locks zijn upgrade-paden, geen muren — een Premium-user die naar een Pro-Examensim kijkt ziet niet "geblokkeerd", maar voelt wat hij mist; de paywall biedt zowel "Bekijk Pro" als "Maak je eigen Examensim" aan via de AI Wizard. Nooit doodlopend.
Leidende principes
Modus is een eigenschap, geen speel-keuze
Quiz.exerciseType is gefixeerd bij creation. Library toont modus-badge per kaart; Detail heeft één primary CTA passend bij de modus. Reden: V1-quizzen (woordenlijstjes, foto-samenvattingen) kunnen niet altijd herschalen.
Cross-pijler badges in plaats van CTA's
Een quiz die uit Plannen komt krijgt een paarse "← UIT PLANNEN"-badge — geen aparte "uit plannen"-sectie. De hint zit in de kaart zelf.
Pulse als curator, niet als loempia
Pulse spreekt op Hub als sub-koptekst ("Voor jou vandaag — door Pulse"). Geen mascotte-bubbel die je moet wegklikken; de aanbevelingen zijn de mascotte.
Tier-paywall = "voel wat je krijgt"
De Pro/Premium-card op een gelockte Detail-page is niet leeg-gedimd. Hij staat actief in beeld met benefits + alternative-CTA. De gebruiker kan altijd doorklikken naar de Free-versie.
B · Sleutel-states
11 ontworpen states verdeeld over drie views (canvas onderaan).
Oefenen Hub 5 states
- Default (returning user) — Pulse-strook bovenaan met huidige streak (12d), drie modus-tiles (Quiz · Oefentoets · Examensim) met tier-badges, daily-mission glimpse, recent activity. Dark-mode default — Hub is de "thuis-vibe".
- Eerste-bezoek (fresh) — geen activity, geen streak, Pulse zegt "Welkom bij Oefenen — kies een vorm en ga ervoor". Modi met intro-copy ("Snel-en-leuk" / "Echt cijfer" / "Examenkamer-realisme") in plaats van stats. Light-mode om luchtig te beginnen.
- Cross-pijler trigger (vanuit Plannen) — bovenaan een paarse banner "Bio-toets donderdag · 3 dagen" met direct-CTA naar de juiste quiz. Hub-rest blijft normaal — cross-pijler is invasief gepositioneerd zónder de pagina te overnemen.
- Streak verloren (recovery) — Pulse-card prominent: "Streak weg. Geen ramp — vandaag opnieuw beginnen." Modus-tiles ongewijzigd, daily-mission iets ingedikt zodat de recovery-card lucht heeft. Geen schaamte-toon.
- Free-tier (paywall context) — Oefentoets-tile heeft "Premium" badge zichtbaar maar niet gedimd; klik leidt naar Detail met Premium-card. Examensim-tile heeft "Pro" badge. Subtiele upgrade-strip onderaan met "Ontgrendel alles voor €X/mnd". Light-mode.
Quiz Library 4 states
- Default — "Voor jou vandaag" mood-board boven (3 AI-suggesties, eerste is Plannen-gelinkt en groot, daarnaast 2 reasons-based: "OMDAT je dit 5d geleden oefende" / "PAST de Stepping Stones unit"). Daaronder klassieke 3-koloms quiz-grid met tabs (Alle / Mijn / Favorieten / Recent) en filter-pills.
- Filtered — search-bar actief ("cellen" · 14 resultaten), drie active-filter-pills (Biologie ✕ · havo-3 ✕ · ≤15 min ✕). Mood-board verdwijnt zodra een filter actief is — context wisselt van "browse" naar "search".
- Empty (Mijn quizzen, geen items) — Pulse-mascotte centraal, "Nog niets hier. Maak een quiz van je hoofdstuk-foto…" + twee CTA's (Maak met AI / Upload PDF). Onderaan een quota-strip ("3 gratis AI-quizzen per maand").
- Loading skeleton — shimmer-blokken voor de mood-board hero-cards en de grid-cards, tabs-skelet, geen layout-shift bij hydratie.
Quiz Detail 2 states
- Default (Premium user, eerder gespeeld) — 2-koloms layout. Links: cross-pijler badge ("← UIT PLANNEN · Bio-toets H4 do"), titel, 4-stat-grid (Vragen / Beoordeling / Plays / Gem. score), beschrijving, creator-card, vorige-score-strip ("Jouw vorige score · 87%"). Rechts: prominente ModusHeader-strook ("Modus · Oefentoets · Premium"), Secties-kiezen-paneel met checkbox-onderwerpen + Snaps-totaal, Settings-toggles (timer / hints / shuffle), één primary CTA "Start Oefentoets", en een handoff-card naar Leren.
- Tier-locked (Premium user kijkt naar Pro Examensim) — links zelfde layout maar met grijze "Pro · Examensim Lock"-badge. Rechts: gelockte ModusHeader "Examensim · Pro" met dashed border, daaronder actieve Upgrade-card met benefits + "Bekijk Pro"-CTA, plus een tweede dashed-border kaart "Maak je eigen Examensim → AI Wizard" als alternatief route. De gebruiker kan altijd iets: upgraden, of zelf via wizard een Examensim creeren — nooit doodlopend, en geen "speel als Oefentoets"-link (die zou impliceren dat dezelfde quiz herschaalt, en dat klopt niet).
Flow tussen de drie views
Hub
Pulse-aanbeveling klikbaar · "Browse alles" naar Library
→
Library
Quiz-card klikbaar · search + filter
→
Detail
Modus kiezen · secties · Start
C · Deviations vs huidige Snapsnelds
Hub bestaat nog niet (volledig V1-nieuw). Library + Detail hebben mobile-baselines die we hier op web reframen.
| Onderdeel | Huidig (mobile) | Jij (web) | Waarom |
|---|
| Library default-view | Lege grid + FilterPills + search-bar; alle quizzen tonen we onverdeeld, sortering is "populair" | "Voor jou vandaag" mood-board boven (3 AI-suggesties, één Plannen-gelinkt en groot) + grid daaronder met "Voor jou"-default-sortering | 12-18 op smartphone-gewoontes verwachten gecureerde feeds (TikTok, Spotify For You). Een lege filter-grid voelt als handmatig werk. Mood-board boven brengt platform-intelligentie naar voren zónder de power-user weg te halen. |
| Library card-modus | Modus is impliciet — quizzen tonen alleen vak/titel/rating | Modus-badge zichtbaar op elke kaart (Quiz · Oefentoets · Examensim) met tier-kleur + icoon. Plus Modus-filter-pill als eerste filter in de filter-row. | Omdat modus een eigenschap van de quiz is (gefixeerd bij creation), moet de student dit kunnen zien vóór de klik. Zonder badge zou een 12-jarige op een 3-uurs Examensim klikken in de verwachting van een 5-min quiz — frustratie. Library wordt zo 2-dimensionaal: vak/niveau én modus. |
| Quiz Detail modus-presentatie | Eén "Quiz starten"-CTA; modus is impliciet | Prominente ModusHeader-strook bovenaan rechts (icoon + naam + tier-badge + tagline) plus één primary CTA passend bij de modus ("Start Quiz" / "Start Oefentoets" / "Start Examensim"). Settings-toggles (timer/hints/shuffle) blijven beschikbaar. | De modus is geen keuze maar een feit — de UI moet dat communiceren, niet als drie-keer-knop maar als één duidelijke header. Pedagogisch: 12-18 begrijpt direct wat ze gaan krijgen, geen verkeerde verwachting van herschaling. |
| Cross-pijler badges | Niet zichtbaar — Plannen en Oefenen zijn losgekoppeld in mobile UI | Paarse "← UIT PLANNEN"-badge op zowel Library-card als Detail-page-titel; banner op Hub bij imminent-deadline | De pijler-architectuur is een platform-belofte; deze moet in de UI voelbaar zijn, niet alleen abstract bestaan. Een paarse badge is goedkoop in real-estate maar maakt de cross-pijler-lijn zichtbaar elke keer dat hij relevant is. |
| Tier-paywall presentatie | Modal popup bij start-attempt: "Upgrade naar Premium" + benefits-list, alleen accept of dismiss | Inline op Detail-page: actieve Upgrade-card met benefits + "Bekijk Pro"-CTA, plus een tweede dashed-border-kaart "Maak je eigen Examensim → AI Wizard" als alternatieve route | Een modal maakt de paywall onontkoombaar — voelt als drempel. Inline + alternatief biedt twee echte keuzes: upgrade voor déze specifieke quiz, of creëer zelf je eigen via de wizard. We linken NIET naar "speel als Oefentoets" (zou foutief impliceren dat dezelfde quiz herschaalt). |
| Empty-state Library | Generic "Geen quizzen" + cross-link naar maker | Pulse-mascotte centraal, conversational copy ("Nog niets hier. Maak een quiz van je hoofdstuk-foto…"), twee CTA's (AI / PDF), quota-strip onderaan | Een lege state is een micro-onboarding-moment. Pulse + concrete handeling + transparant quota voelt als hulp; "Geen quizzen" voelt als doodlopend. |
D · Challenge-vraag — expliciet beantwoord
De huidige Library heeft FilterPills + dropdowns + tabs. Voor 12-18 doelgroep met smartphone-gewoontes — is dit het juiste navigatie-patroon, of zou een fundamenteel andere browse-UX (swipeable cards, vak-georiënteerde mood-board, AI-suggesties first) beter werken?
Beide tegelijk — niet kiezen. 12-18 hebben twee mentale modellen die naast elkaar bestaan: passieve discovery ("verras me, ik wil iets passend") en actieve search ("ik weet exact wat ik zoek voor mijn toets"). Een puur AI-feed-paradigma straft de tweede groep; een puur filter-grid-paradigma straft de eerste. Onze Library Default lost dit op met dual paradigma boven elkaar: bovenaan een mood-board-strook ("Voor jou vandaag") met 3 AI-curated cards (één groot Plannen-gelinkt + twee reason-based small cards), daaronder de klassieke filtered grid met tabs en filter-pills. Zodra de gebruiker een filter activeert verdwijnt de mood-board (Library Filtered state) — context-switch van "browse" naar "search" maakt het scherm rustiger en focusseert op resultaten.
Hoe geef je de drie modi (Quiz / Oefentoets / Examensim) visueel onderscheid op de Hub?
Border-left accent + tier-badge + iconografie. We gebruiken geen volle achtergrondkleuren voor de modi-tiles (dat zou ze té apart maken — ze zijn varianten van hetzelfde, niet andere producten). In plaats daarvan: 3px gekleurde border-left (Quiz groen #16A34A · Oefentoets blauw #0096C7 · Examensim slate #475569), kleine icoon in cirkel (zap / clipboard-check / shield-check), en tier-badge rechtsboven (Free / Premium / Pro). Dit creëert herkenbaarheid zonder overdrijving — de drie tiles zien er als een familie uit, met duidelijke individuele identiteit.
Library default-view — persoonlijk gerelateerd of trending? Of mix?
Mix met expliciete reason-tags. "Voor jou vandaag" toont 3 cards die elk een andere reden hebben: card 1 is ← UIT PLANNEN (deadline-driven, groot en prominent); card 2 is · OMDAT (gedrag-based: "Je oefende dit 5d geleden · score 73% — herhaling geadviseerd"); card 3 is · NIEUW (Leren-context-based: "Past de Stepping Stones unit die je nu in Leren leest"). Door de reason-tags expliciet te tonen vertrouwt de gebruiker de aanbeveling — geen zwarte AI-doos. De grid daaronder sorteert op "Voor jou" (default), wat een soft-personalized blend is van populariteit + vak-match + niveau-match — gebruiker kan switchen naar puur populariteit/recent als ze willen.
Quiz Detail tier-paywall — hoe maak je "deze quiz is voor Premium" duidelijk zonder frustratie?
Voel wat je krijgt + bied alternatieve creatie-route. De Pro-locked Detail-state toont een gelockte ModusHeader (Examensim met dashed border + lock-icoon) bovenaan rechts — zo zie je direct waar je tegenaan loopt. Daaronder twee kaarten: (1) een volledige Upgrade-card met groot icoon, tier-naam, tagline ("Pro · examenkamer-realisme"), drie bullet-benefits, huidig-tier-strip ("Je hebt nu Premium · upgrade Pro vanaf €2,50/mnd extra") en primary-CTA "Bekijk Pro"; (2) een dashed-border-kaart "Maak je eigen Examensim → AI Wizard" als alternatieve route — want via de wizard kan de student met een eigen samenvatting wel een Examensim-tier-quiz creëren. De gebruiker eindigt nooit doodlopend, maar krijgt twee echte keuzes: upgrade voor déze specifieke premade Pro-quiz, of creëer zelf een Examensim. Wat we bewust niet doen: linken naar "speel als Oefentoets" als alternatief op dezelfde quiz — dat zou foutief impliceren dat dezelfde quiz herschaalt, terwijl modus eigenschap-bij-creatie is.
Cross-pijler badges — subtiel of prominent? Hoe voorkomen we cluttering?
Schaal met user intent. Cross-pijler-info verschijnt op drie schaal-niveau's: (1) banner — Hub met imminent deadline (≤3 dagen) krijgt een paarse banner bovenaan; dit is invasief maar context-juist. (2) badge op kaart — Library-card die uit Plannen komt krijgt een kleine paarse "← UIT PLANNEN"-pill in de kaart-header; subtiel maar zichtbaar. (3) prominent badge op Detail — boven de titel van een Plannen-gelinkte quiz staat een grotere "← UIT PLANNEN · Bio-toets H4 do"-badge; de student maakt nu commitment, dus de context mag prominent. Door de prominentie te schalen met intent (browsing < kiezen < beslissen) voorkomen we cluttering: de badges zijn nooit overal tegelijk groot.
Recent + Mijn quizzen + Favorieten — drie tabs, of één view met filters?
Vier tabs (incl. Alle), met getal-counts. We hadden kunnen kiezen voor een filter-pill ("status: mijn / favoriet / recent / alle"), maar tabs winnen om twee redenen: (1) tabs houden de mentale plek vast — als je in "Favorieten" bent, voel je dat je in een andere lijst zit, niet in dezelfde lijst met een andere filter-state; (2) tabs maken counts mogelijk ("Mijn quizzen 7" / "Favorieten 12") — dit is informatie die gebruikers in deze leeftijd waarderen ("hoeveel heb ik er?"). De counts staan klein naast het label, niet als grote badges. "Recent" als sidebar-glance hebben we overwogen maar verworpen: het zou Hub overladen, en op Library is het natuurlijker als peer-tab van de andere lijsten.
E · Aannames die we maakten
- "Voor jou vandaag"-curatie is dynamisch en vernieuwbaar: we tonen een refresh-knop om de aanbevelingen handmatig te verversen. Backend-aanname: een lichte recommendation-service die per user 3 cards genereert op basis van Plannen-deadlines + speel-historie + Leren-progress. Verversingstrigger: handmatig, of dagelijks automatisch om 06:00.
- Modus-tiers in deze brief = Free/Premium/Pro: Quiz Free is gratis voor iedereen, Oefentoets vereist Premium, Examensim vereist Pro. Tier-naming is consistent met huidige Snapsnelds-pricing-page.
- Cross-pijler badges renderen alleen bij <7d-deadline: een quiz die theoretisch in Plannen voor 3 weken later is gepland krijgt nog géén "← UIT PLANNEN"-badge — alleen vanaf 7 dagen tot deadline. Voor je laat-grasduinen-mode niet visueel verstoord raakt.
- Quota-strip onderaan empty-state: "3 gratis AI-quizzen per maand" is illustratief — exacte aantallen volgen uit pricing-decision (T-shirt-size waarschijnlijk: Free 3/mnd, Premium 30/mnd, Pro onbeperkt). De UI-component is tier-aware en past dynamisch aan.
- Sectie-checkbox-paneel op Detail toont Snaps-totaal live: elke aangevinkte sectie voegt vragen + Snaps toe; de footer-strook update real-time ("11 vragen geselecteerd · ~9 min · +26 ⚡"). Stimuleert volledige selectie zónder te dwingen.
F · Architectuur-correctie · Robin's bijsturing — verwerkt in deze finale
Eerdere conceptversie liet modus-keuze leven op Detail-page ("Speel als Quiz / Oefentoets / Examensim"). Robin's strategische bijsturing: modus is gefixeerd bij quiz-creation, niet kiesbaar bij play. Reden:
- Veel V1-quizzen zijn user-created (foto's, aantekeningen, woordenlijstjes) en kunnen niet altijd herschalen naar Oefentoets/Examensim.
- Woordenlijst van 50 woorden = alleen Quiz; kan niet "moeilijker".
- Foto van 3-pagina samenvatting = max 15 vragen, géén Examensim mogelijk.
- Auto-upgrade-flow (Quiz → Oefentoets met extra credits) = V1.1 / V2 scope.
Decision B4 (gehandhaafd): Quiz.exerciseType is gefixeerd bij creation. User kiest modus in AI Wizard of manual-create flow, niet bij play.
Drie wijzigingen vs eerdere concept
- Library-card toont modus-badge per quiz (Quiz Free · Oefentoets Premium-badge · Examensim Pro-badge). Library wordt 2-dimensionaal: vak/niveau filter EN modus-badge. Filter-toggle "Modus" (Alle / Quiz / Oefentoets / Examensim) toegevoegd als eerste filter-pill.
- Quiz Detail "Speel als"-sectie verwijderd. Eén primaire CTA: "Start Quiz" / "Start Oefentoets" / "Start Examensim" — afhankelijk van
Quiz.exerciseType. Geen modus-keuze. Settings-toggles (timer / hints / shuffle) voor in-quiz opties blijven.
- Pro-locked Detail (Examensim die user niet kan spelen): paywall-card met "Bekijk Pro" + tweede dashed-card "Maak je eigen Examensim →" met CTA naar AI Wizard met preselected modus=examensim. NIET "Speel als Oefentoets"-link (zou foutief impliceren dat dezelfde quiz herschaalt).
Behouden vanuit eerdere concept
- Library dual paradigma (mood-board + filtered grid; mood-board verdwijnt bij actief filter)
- Cross-pijler-prominentie schaalt met intent (Library subtiel → Detail groot → Hub banner ≤7d)
- Recommendation-service: 3 cards/dag/user, 06:00 refresh + handmatig
- Quota-strip empty-state: "3 gratis AI-quizzen/mnd"
- Hub-modus-tiles als entry-points naar library-met-modus-filter (bv. klik Examensim-tile → /library?mode=examensim) of AI Wizard met preselected modus
↓ Sleutel-states canvas — sleep, klik om uit te vergroten ↓