Skip to content
ICT Fusion Knowledgebase

Prototyping: De Juiste Vorm voor de Juiste Vraag

Introductie

Een prototype is een snelle, vereenvoudigde versie van je oplossing, gemaakt om erover te communiceren en daarvan te leren. Het is geen mini-eindproduct, maar een schets om ideeën te testen. In deze pagina leer je waarom prototypen essentieel zijn, welke vormen er zijn, en hoe je de juiste vorm kiest voor jouw vraag.

Wat is een Prototype?

Prototype = een snelle, vereenvoudigde versie van je oplossing gemaakt om erover te communiceren en daarvan te leren.

Prototypes zijn niet bedoeld als eindproduct. Ze zijn snel gemaakt, met concessies (slordige code, geen accessibility, placeholders), met als doel: vragen beantwoorden & leren.

Belangrijke principes

  • Je houdt de inzichten, niet het prototype zelf
  • Prototypes zijn in principe wegwerp
  • Ze zijn gemaakt om te communiceren (met team, opdrachtgever, gebruiker)
  • Ze helpen je risico’s en fouten vroeg te ontdekken

Waarom Maak je een Prototype?

Prototypen helpen je op vijf manieren:

  1. Ideeën verkennen – Verschillende richtingen uitproberen zonder veel tijd te investeren
  2. Communiceren – Met het team, de opdrachtgever en de gebruiker praten over iets tastbaars
  3. Feedback ophalen en leren – Ontdekken wat werkt en wat niet
  4. Risico’s vroeg ontdekken – Fouten en aannames checken voordat je maanden bouwt
  5. Beslissingen voorbereiden – Ga je hiermee verder of niet?

Voorbeeld: Studieplek-app

Stel, je ontwerpt een app om studieplekken te reserveren. Voordat je maanden bouwt, wil je weten: snappen studenten de flow? Dan maak je een prototype, zodat je het kan laten zien, feedback krijgt en dus kan leren zonder veel tijd/geld te verspillen.

Vier Veelgebruikte Prototypevormen

De vorm van het prototype stuurt welk soort feedback je krijgt – en dus op welk soort vragen je antwoord kunt krijgen.

1. Papieren Prototype

Wat is het?
Snelle schetsen op papier van het idee, schermen of flows

Welke vragen beantwoordt het?

  • Sluit het idee aan bij de vraag?
  • Klopt de grove flow?
  • Snapt de gebruiker waar hij is?

Welk soort feedback krijg je?

  • “Ik snap niet wat hier gebeurt”
  • “Ik mis hier een knop”
  • “Waarom zou ik hier naartoe gaan?”

Wanneer gebruik je dit?
Heel vroeg in het proces, als je nog aan het verkennen bent welk idee het beste werkt.

2. Wireframe

Wat is het?
Digitale schets van structuur en layout (zonder mooie vormgeving)

Welke vragen beantwoordt het?

  • Staat de juiste info op de juiste plek?
  • Vinden gebruikers de belangrijkste dingen snel?
  • Is de informatiehiërarchie logisch?

Welk soort feedback krijg je?

  • “Deze knop moet dichter bij X”
  • “Ik mis hier een filterveld”
  • “Ik zie niet waar ik moet zoeken”

Wanneer gebruik je dit?
Als je de grove flow hebt, maar wilt testen of de structuur en layout werken voordat je aan visueel design begint.

3. Figma Klikbaar Prototype

Wat is het?
Realistisch uitziend, interactief prototype met visueel design

Welke vragen beantwoordt het?

  • Voelt de interactie logisch en prettig?
  • Zijn de schermen begrijpelijk en aantrekkelijk?
  • Spreekt de look & feel aan?

Welk soort feedback krijg je?

  • “Deze overgang is verwarrend”
  • “Deze knop valt niet op”
  • “Deze kleur vind ik niet mooi”
  • “De foto’s vind ik niet duidelijk”

Wanneer gebruik je dit?
Als je de flow en structuur hebt getest en nu wilt weten of de visuele uitwerking en interacties werken.

⚠️ Waarschuwing: Studenten hebben de neiging om al snel mooie prototypes te maken in Figma. Te vroeg Figma gebruiken kan de feedback verschuiven naar styling, terwijl je misschien nog een flowvraag hebt.

4. Proof-of-Concept (PoC) Code

Wat is het?
Klein technisch experiment om één risico te testen of vraag te beantwoorden

Welke vragen beantwoordt het?

  • Werkt deze API wel goed genoeg?
  • Is deze library bruikbaar?
  • Is de performance oké?
  • Kunnen we deze sensor aan de praat krijgen?

Welk soort feedback krijg je?

  • “Technisch haalbaar / niet haalbaar”
  • “We moeten een andere aanpak zoeken”
  • “Dit werkt, maar de performance is te traag”

Wanneer gebruik je dit?
Als je een technische aanname hebt die je wilt checken voordat je verder bouwt.

⚠️ Let op: Dit is óók een prototype, maar dan in code. Het is meestal niet bedoeld als productiecode – het is een experiment.

De Vorm Stuurt de Feedback

Voorbeeld: Reserveringssysteem voor Studieplekken

Situatie: Je hebt twee vragen:

  1. Werkt mijn idee?
  2. Klopt de flow?

Wat je doet: Je maakt mooie schermen in Figma met foto’s, kleuren en interacties.

Wat er gebeurt: Je krijgt feedback zoals:

  • “Ik mis een logo”
  • “De kleuren vind ik niet mooi”
  • “De foto’s vind ik niet duidelijk”

Het probleem: Je krijgt niet de antwoorden waar je naar op zoek bent! Je wilde weten of het idee werkt en of de flow klopt, maar je krijgt feedback over visueel design.

Betere aanpak: Start met een papieren prototype of wireframe om eerst de flow te testen. Pas als die klopt, ga je naar Figma voor visuele feedback.

Prototypes zijn Wegwerp

Waarom wegwerp?

Prototypes zijn snel gemaakt met concessies:

  • Slordige code
  • Geen accessibility
  • Placeholders
  • Niet alle edge cases afgedekt

Risico’s van prototype → productie:

  • Technische schuld (rommelige code)
  • Verkeerde aannames niet opgeschoond
  • Geen solide basis voor doorontwikkeling

Wat houd je dan wel?

Je houdt de inzichten, niet het prototype zelf.

Het prototype heeft zijn werk gedaan als je weet:

  • Wat werkt en wat niet
  • Welke aannames kloppen
  • Welke richting je op moet
  • Wat je moet aanpassen

Stappenplan: Prototype voor Jouw Project

1. Kies één vraag

Bijvoorbeeld:

  • Snapt de gebruiker hoe hij ‘X’ moet doen?
  • Vindt de gebruiker de juiste info?
  • Kunnen we sensor ‘X’ goed aan de praat krijgen?

Tip: Schrijf je vraag op. Dit helpt je om gefocust te blijven.

2. Kies een prototypevorm

Kies de vorm die past bij je vraag:

  • Papieren prototype → voor idee-validatie en grove flow
  • Wireframe → voor structuur en informatiehiërarchie
  • Klikbaar Figma prototype → voor interactie en visueel design
  • Proof-of-concept code → voor technische haalbaarheid

3. Beschrijf kort

Voordat je begint met maken:

  • Welke vraag wil je beantwoorden?
  • Welke vorm prototype kies je hiervoor?
  • Welk soort feedback verwacht je te krijgen?

Dit helpt je om bewust te kiezen en niet automatisch naar Figma te grijpen.

4. Maak het prototype

Klein en gericht:

  • Papier → 3–5 foto’s van schermen/flows
  • Wireframe → screenshots of link
  • Figma → link naar klikbaar prototype
  • PoC-code → link naar GitLab + korte beschrijving

Belangrijk: Het prototype hoeft niet perfect te zijn; het moet goed genoeg zijn om de vraag te beantwoorden.

5. Test en reflecteer

Test met minimaal 2 personen en beschrijf:

  • Jullie vraag: Welke vraag wilde je beantwoorden?
  • Gekozen vorm: Welke vorm hebben jullie gekozen en waarom?
  • Feedback: Wat voor soort feedback heb je daadwerkelijk gekregen? Past dit bij de vorm?
  • Inzichten: Welke inzichten nemen jullie mee naar de volgende stap?

Veelgemaakte Fouten

❌ Te snel naar Figma

Probleem: Je krijgt feedback over kleuren en fonts terwijl je de flow nog moet testen.
Oplossing: Start met papier of wireframe.

❌ Te veel in één keer

Probleem: Je maakt een volledig prototype met alle schermen en functionaliteiten.
Oplossing: Focus op één vraag of één flow.

❌ Te gehecht aan het prototype

Probleem: Je wilt het prototype doorontwikkelen tot eindproduct.
Oplossing: Zie het prototype als experiment. Houd de inzichten, bouw opnieuw.

❌ Niet testen

Probleem: Je maakt een prototype maar test het niet met gebruikers.
Oplossing: Het hele punt van een prototype is om te testen. Plan dit direct in.

Verdieping: Bronnen en Inspiratie

Boeken

  • “Sketching User Experiences” – Bill Buxton
    Over het belang van schetsen en prototypen in het ontwerpproces

  • “Sprint” – Jake Knapp (Google Ventures)
    Bevat een volledig hoofdstuk over prototypen in één dag

  • “Don’t Make Me Think” – Steve Krug
    Klassieker over usability, met praktische tips voor prototypen

Video’s

Websites

Tools

Samenvatting

  • Je maakt prototypes om te communiceren en daarvan te leren
  • Verschillende vormen roepen verschillend soort feedback op:
  • Papier → idee en grove flow
  • Wireframe → structuur en layout
  • Figma → interactie en visueel design
  • PoC-code → technische haalbaarheid
  • Prototypes zijn in principe wegwerp – je houdt de inzichten, niet de ruwe oplossing
  • Kies de vorm die past bij je vraag – niet automatisch naar Figma
  • Test je prototype – dat is waar je van leert

Reflectievragen

  1. Welke vraag wil je beantwoorden met je volgende prototype?
  2. Welke prototypevorm past het beste bij die vraag?
  3. Heb je in het verleden wel eens te snel een high-fidelity prototype gemaakt? Wat was het effect daarvan?
  4. Wat maakt het moeilijk om een prototype weg te gooien?

Koppeling met Think – Make – Check

Prototyping is de Make-fase van de Lean UX cyclus:

flowchart LR
    A["💡 Think<br>Begrijpen"]
    B["🛠️ Make<br>PROTOTYPEN"]
    C["✅ Check<br>Testen"]

    A --> B
    B --> C
    C --> A

    style B fill:#4CAF50,stroke:#2E7D32,color:#fff
  • Think geeft je de vraag die je wilt beantwoorden
  • Make is waar je het prototype bouwt
  • Check is waar je het test en leert

De inzichten uit Check informeren de volgende Think-fase, en zo draait de cyclus door.