Wat is een prototype?

Definitie: Een prototype is een vroege, vereenvoudigde versie van een product waarmee je een idee zichtbaar maakt en toetst voordat het echt gebouwd wordt. Bij software kan dat variëren van een schets op papier tot een klikbaar ontwerp of een werkende proefversie van één onderdeel.

In het kort

• Een prototype is bedoeld om te leren: klopt de opzet, begrijpen gebruikers het en is het technisch haalbaar?
• Er zijn prototypes met lage en hoge detaillering, van papieren schetsen en wireframes tot klikbare ontwerpen en functionele proefversies.
• Een prototype is geen MVP: een prototype toetst een idee, een MVP is de eerste versie die echte gebruikers echt gebruiken.
• Een prototype is goedkoper om aan te passen dan software, waardoor je fouten vroeg en tegen lage kosten ontdekt.

Wat is een prototype?

Het woord prototype komt uit het Grieks en betekent zoiets als “eerste vorm”. In de productontwikkeling is het een voorlopige versie waarmee je een idee tastbaar maakt. Een autofabrikant bouwt een kleimodel, een meubelmaker een proefstoel, een softwareontwikkelaar een reeks schermen die je kunt doorklikken.

Bij apps en webapplicaties is een prototype meestal een weergave van de belangrijkste schermen en de route die een gebruiker aflegt. Je ziet hoe een overzicht eruitziet, wat er gebeurt als je op een knop drukt en welke informatie op welk moment zichtbaar is. Achter de schermen gebeurt er vaak nog niets: gegevens worden niet echt opgeslagen en berekeningen zijn nagebootst. Dat is precies de bedoeling. Je wilt leren zonder de kosten van echte software.

Een bekend voorbeeld: het houten blok van de PalmPilot

Een vaak aangehaald voorbeeld komt van Jeff Hawkins, de bedenker van de PalmPilot uit de jaren negentig. Voordat er een werkend apparaat was, droeg hij een houten blok op het formaat van het apparaat in zijn zak. Als iemand een afspraak wilde maken, haalde hij het blok tevoorschijn en deed alsof hij hem invoerde. Zo toetste hij of het formaat werkte en welke functies hij echt gebruikte.

Het voorbeeld laat zien dat een prototype niet ingewikkeld hoeft te zijn. Het moet vooral een vraag beantwoorden. In dit geval: past dit in het dagelijks leven, en wat doe je er eigenlijk mee?

Prototypes buiten software

Het begrip prototype wordt in veel vakgebieden gebruikt. In de industrie is het een proefmodel van een machine of onderdeel, vaak gemaakt met 3D-printen. In de bouw is het een proefopstelling of maquette. In de mode is het een eerste proefstuk van een kledingstuk. Het principe is overal hetzelfde: maak een idee tastbaar, toets het en verbeter het, voordat je investeert in productie. Dit artikel richt zich op prototypes voor apps, webapplicaties en andere software.

Waarom maak je een prototype?

• Een idee zichtbaar maken. Een beschrijving in tekst wordt door iedereen anders gelezen. Een schets of klikbaar ontwerp maakt een gedeeld beeld.
• Gebruikers laten meedenken. Mensen reageren veel concreter op een scherm dan op een lijst met eisen.
• Fouten vroeg vinden. Een ontbrekende stap of verkeerd begrepen werkproces kost in een prototype minuten om aan te passen, in software dagen.
• Haalbaarheid toetsen. Een technisch prototype laat zien of een koppeling, berekening of AI-stap werkt zoals verwacht.
• Beslissen en begroten. Met een prototype kun je beter inschatten wat de bouw gaat kosten en wat je bewust weglaat.
• Draagvlak creëren. Een prototype helpt om collega’s, management of investeerders mee te krijgen.

Soorten prototypes

Low-fidelity en high-fidelity

Prototypes worden vaak ingedeeld naar detaillering, in het Engels fidelity.

Low-fidelity prototypes zijn ruw: schetsen, blokken en lege vlakken waar later afbeeldingen komen. Ze zijn snel gemaakt en nodigen uit tot kritiek, omdat niemand bang is iets moois kapot te maken. Ze zijn ideaal om de grote lijnen te bepalen: welke schermen zijn er, in welke volgorde, en welke informatie staat waar.

High-fidelity prototypes lijken sterk op het eindproduct, met echte kleuren, teksten en interactie. Ze zijn geschikt om details te toetsen en om te presenteren. Het nadeel: ze kosten meer tijd, en gebruikers geven sneller commentaar op kleuren dan op de vraag of de route klopt.

Een veelgebruikte aanpak is beginnen met low-fidelity en pas detailleren als de opzet staat.

Prototype, MVP of proof of concept?

Het belangrijkste verschil: een prototype laat zien hoe een product zou kunnen werken, een MVP is de eerste bruikbare versie van het product zelf. Een prototype mag weggegooid worden; een MVP is het begin van de software die blijft.

Hoe maak je een prototype voor een app of webapplicatie?

1. Bepaal wat je wilt leren. Gaat het om de route, de begrijpelijkheid, de haalbaarheid of het draagvlak? Die vraag bepaalt welk soort prototype past.
2. Kies de kern. Welke gebruiker, welke taak en welke schermen zijn daarvoor nodig? Laat de rest weg.
3. Schets eerst ruw. Op papier of in een eenvoudige tool, zodat je snel varianten kunt vergelijken.
4. Maak het klikbaar voor de belangrijkste route, als je wilt testen met gebruikers.
5. Test met echte gebruikers. Geef een opdracht, zoals “plan een nieuwe afspraak in”, en kijk zonder uitleg waar iemand vastloopt.
6. Pas aan en test opnieuw. Twee of drie rondes leveren vaak de meeste inzichten op.
7. Leg vast wat je hebt geleerd. Welke keuzes zijn gemaakt, wat is bewust weggelaten en welke vragen staan nog open?

Tools om een prototype te maken

• Papier, whiteboard of sticky notes voor de eerste schetsen.
• Figma is de meest gebruikte ontwerptool voor wireframes, mockups en klikbare prototypes.
• Andere ontwerptools zoals Penpot, Sketch of Adobe XD bieden vergelijkbare functies.
• AI app builders zoals Bolt.new en Lovable maken in korte tijd een werkend prototype op basis van een beschrijving.
• No-code tools zijn geschikt voor een functioneel prototype met eenvoudige logica en opslag.

AI-tools hebben de grens tussen prototype en eerste versie kleiner gemaakt. Een werkend prototype staat er nu soms in een middag. Dat is waardevol, maar het blijft een prototype: beveiliging, foutafhandeling en onderhoudbaarheid zijn nog niet vanzelf geregeld.

Wie maakt een prototype?

Dat hangt af van het soort prototype. Een eerste schets kan iedereen maken, ook de opdrachtgever zelf. Juist dan zie je hoe iemand het proces voor zich ziet. Wireframes, mockups en klikbare prototypes worden meestal gemaakt door een ontwerper of een ontwikkelaar met oog voor gebruikerservaring. Een functioneel prototype of proof of concept vraagt om een ontwikkelaar, omdat er echte logica of een koppeling in zit.

Het belangrijkste is dat de mensen die het proces kennen, actief meedoen. Een prototype dat alleen door een ontwerper is gemaakt en alleen door de opdrachtgever is goedgekeurd, mist vaak de uitzonderingen die gebruikers dagelijks tegenkomen.

Prototypen met AI

AI verandert de manier waarop prototypes worden gemaakt. Met een AI app builder beschrijf je een scherm of route en krijg je in korte tijd een werkende versie die je kunt doorklikken en zelfs met echte gegevens kunt vullen. Ontwerptools bieden steeds vaker AI-functies om varianten van een scherm te genereren.

Dat heeft twee kanten. Je kunt veel sneller varianten maken en testen, en een werkend prototype voelt voor testgebruikers realistischer dan een plaatje. Tegelijk ontstaat het risico dat een prototype te snel wordt gezien als bijna af. Spreek daarom vooraf af wat het prototype moet bewijzen, en wat er daarna nog nodig is om er betrouwbare software van te maken.

Checklist voor een bruikbaar prototype

• Er is één duidelijke vraag die het prototype moet beantwoorden.
• De belangrijkste gebruiker en taak staan centraal.
• De route is compleet van begin tot eind, ook als de schermen eenvoudig zijn.
• Teksten zijn echt, geen nepteksten, zodat gebruikers kunnen beoordelen of ze het begrijpen.
• Er is getest met mensen uit de doelgroep.
• De inzichten en keuzes zijn vastgelegd.

Hoe test je een prototype?

• Kies vijf tot acht testgebruikers uit de doelgroep, niet alleen collega’s die het idee al kennen.
• Geef taken, geen uitleg. “Zoek de openstaande offertes van deze week” vertelt meer dan “wat vind je van dit scherm?”
• Laat mensen hardop denken. Zo hoor je waar twijfel ontstaat.
• Let op gedrag, niet alleen op meningen. Waar klikken mensen eerst, waar zoeken ze, waar haken ze af?
• Noteer patronen. Eén persoon die vastloopt is een signaal, drie mensen die op hetzelfde punt vastlopen is een probleem.

Waar past een prototype in het ontwikkelproces?

Een prototype hoort bij de voorbereiding, vaak als onderdeel van de discovery-fase. De volgorde ziet er meestal zo uit:

1. Probleem en doel in kaart brengen.
2. Proces en gebruikers begrijpen.
3. Prototype van de belangrijkste route maken en testen.
4. Eisen en afbakening vastleggen op basis van wat het prototype heeft opgeleverd.
5. Bouwen van de eerste versie of MVP.
6. Verbeteren op basis van echt gebruik.

Tijdens de bouw kun je opnieuw prototypen, bijvoorbeeld voor een nieuwe functie of een scherm waarover twijfel bestaat. Een prototype is dus geen eenmalige stap, maar een hulpmiddel dat je inzet zodra er een vraag is die je goedkoop wilt beantwoorden.

Van prototype naar bouw: wat neem je mee?

Een prototype is pas waardevol als de inzichten in de bouw terechtkomen. Neem in elk geval mee:

• De getoetste route, met de schermen en stappen zoals ze na de tests zijn aangepast.
• De keuzes en de reden erachter, zodat ontwikkelaars begrijpen waarom iets zo is ontworpen.
• Wat bewust is weggelaten, om discussie over de afbakening later te voorkomen.
• Open vragen, zoals uitzonderingen die nog niet zijn uitgewerkt.
• Teksten en benamingen die gebruikers begrepen, want woordkeuze bepaalt vaak of een scherm werkt.

De code van een functioneel of AI-gegenereerd prototype kan soms als basis dienen. Laat een ontwikkelaar dan beoordelen of die code geschikt is om op verder te bouwen, of dat het beter is om opnieuw te beginnen met de inzichten als leidraad.

Een prototype voor besluitvorming

Een prototype wordt niet alleen voor gebruikers gemaakt. Het is ook een sterk middel om intern een besluit te nemen of om een investeerder of subsidieverstrekker te laten zien wat je van plan bent. Een directie die moet kiezen tussen een standaardpakket en maatwerk, begrijpt het verschil veel beter met een paar schermen dan met een document.

Let er dan wel op dat je eerlijk bent over wat het prototype is. Laat zien wat getest is en wat nog niet, en welke onderdelen bij de echte bouw nog uitgewerkt moeten worden. Een prototype dat mooier lijkt dan wat er straks binnen het budget gebouwd kan worden, schept verwachtingen die later lastig zijn waar te maken. Gebruik het prototype daarom ook om de afbakening zichtbaar te maken: dit zit in de eerste versie, dit komt later.

Wanneer kun je zonder prototype?

Niet elk project heeft een uitgebreid prototype nodig. Bij een kleine aanpassing aan een bestaand systeem, een standaardfunctie die gebruikers al kennen of een eenvoudig formulier is een korte schets vaak genoeg. Een prototype is vooral waardevol bij nieuwe producten, bij processen met meerdere gebruikersgroepen en bij schermen waarin veel informatie samenkomt.

Wat kost een prototype?

De kosten hangen af van het soort prototype. Een papieren schets of wireframe kost vooral tijd van een paar uur tot enkele dagen. Een klikbaar prototype van de belangrijkste route kost meestal enkele dagen ontwerpwerk. Een functioneel prototype met echte logica of een koppeling is meer werk, omdat er al ontwikkeld wordt. Vergeleken met het bouwen van een volledige applicatie is een prototype vrijwel altijd een kleine investering, en die verdient zich terug als je er een verkeerde richting mee voorkomt.

Veelgemaakte fouten

• Te mooi beginnen. Een gepolijst ontwerp voordat de route klopt, leidt tot discussies over kleur in plaats van inhoud.
• Alles prototypen. Concentreer je op de taak die het meest onzeker of het belangrijkst is.
• Niet testen. Een prototype dat alleen intern wordt bekeken, mist de reactie van de mensen die het moeten gebruiken.
• Het prototype als product behandelen. Een klikbaar ontwerp of snel gegenereerde app is geen betrouwbare software. Plan de echte bouw apart.
• Geen vastlegging. Zonder verslag van keuzes en inzichten begint de discussie bij de bouw opnieuw.
• Alleen het ideale pad tonen. Laat ook zien wat er gebeurt bij een fout, een lege lijst of een gebruiker zonder rechten.

Wat betekent dit voor jouw project?

In mijn werkwijze zitten schermschetsen in de betaalde blauwdruk, samen met het afgebakende proces, de afhankelijkheden en een voorstel voor de eerste versie. Zo zie je voordat er gebouwd wordt hoe de belangrijkste route eruitziet en kun je daarop reageren.

Bij Webinooo, mijn eigen webinarproject, zijn de registratie en de streaming eerst getest voordat andere onderdelen aan de beurt kwamen. Dat is het principe van een prototype in de praktijk: toets het onderdeel waarover de meeste onzekerheid bestaat, voordat je de rest eromheen bouwt. Bij Leadooo zag ik hoe een kleine eerste versie helpt om het proces beter te begrijpen.

Heb je een idee dat je eerst zichtbaar wilt maken voordat je investeert in de bouw? Stuur me voor wie het is, wat er nu gebeurt en wat de eerste versie moet oplossen. Dan bepalen we samen de logische eerste stap.

Veelgestelde vragen over prototypes

Wat is een prototype?

Een prototype is een vroege, vereenvoudigde versie van een product waarmee je een idee zichtbaar maakt en toetst voordat het echt gebouwd wordt. Bij software varieert dat van een schets tot een klikbaar ontwerp of werkende proefversie.

Wat is het verschil tussen een prototype en een MVP?

Een prototype toetst of een idee werkt voor de gebruiker en wordt meestal niet echt gebruikt. Een MVP is de eerste werkende versie van het product die echte gebruikers echt gebruiken, zodat je leert of het waarde oplevert.

Wat is een prototype van een app?

Een prototype van een app is een weergave van de belangrijkste schermen en de route die een gebruiker aflegt, vaak klikbaar gemaakt in een ontwerptool zoals Figma. Zo kun je de app testen voordat hij gebouwd wordt.

Verwante termen

Klikbaar prototype · MVP (Minimum Viable Product) · Proof of concept (PoC) · Programma van eisen · Discovery-fase · Wireframe · AI app builder