Mockup
Een statisch beeld van één scherm. Een mockup laat zien hoe de app eruit gaat zien, maar je kunt er niets in doen. Vergelijk het met een foto van een huis.
Wat is een klikbaar prototype?
Een klikbaar prototype is een interactief ontwerp van je app dat je kunt doorklikken alsof het product al bestaat, zonder dat er productiecode achter zit. Schermen zijn aan elkaar gekoppeld: je tikt op een knop en het volgende scherm verschijnt. Zo kun je een idee laten zien, testen en bijsturen voordat er iets gebouwd is.
01
/
07
Wat een klikbaar prototype precies is
Het zit tussen een statisch ontwerp en een gebouwde app in: het voelt echt, maar het is een simulatie.
Een klikbaar prototype bestaat uit ontworpen schermen die met elkaar verbonden zijn via klikbare gebieden, ook wel hotspots. Tik je op de inlogknop, dan verschijnt het volgende scherm. Open je een menu, dan klapt het uit. Voor degene die het vasthoudt voelt het als een echte app, terwijl er onder de motorkap alleen een ontwerpbestand zit.
Alles wat je ziet is voorbereid: de namen, getallen en foto’s zijn voorbeelddata en de knoppen volgen vooraf uitgestippelde paden. Dat is geen beperking, dat is juist het punt. Omdat er geen techniek achter zit, is een klikbaar prototype snel te maken en nog sneller aan te passen. Er bestaat ook een zwaardere variant waar wel echte code achter zit; het verschil lees je in Figma-prototype vs werkend prototype.
02
/
07
Waarin het verschilt van een mockup en een MVP
De drie termen worden vaak door elkaar gebruikt, maar ze beantwoorden elk een andere vraag.
Klikbaar prototype
Gekoppelde schermen die je kunt doorlopen. Het laat zien hoe de app werkt en aanvoelt, terwijl er nog niets gebouwd is. De rondleiding door het huis.
MVP
Een gebouwde eerste versie met werkende functies, echte data en echte gebruikers. Het huis zelf, in zijn kleinste bewoonbare vorm.
Een mockup beantwoordt de vraag hoe iets eruitziet, een klikbaar prototype hoe iets werkt, en een MVP of het in de praktijk standhoudt. Wil je de volledige vergelijking, inclusief waar een proof of concept in dit rijtje past, lees dan prototype vs MVP vs PoC.
03
/
07
Wat je met een klikbaar prototype kunt
Eén prototype dient meestal meerdere doelen tegelijk.
- Je idee valideren. Laat het prototype aan mensen uit je doelgroep zien en kijk of ze de kernflow begrijpen en er iets in herkennen dat hun probleem oplost.
- Testen met gebruikers. Geef testers een opdracht en kijk waar ze klikken, waar ze aarzelen en welke schermen vragen oproepen.
- Pitchen. Een investeerder, directie of subsidieverstrekker die zelf door je app klikt, begrijpt het idee sneller dan uit tien slides.
- Briefing voor de bouw. Het prototype legt schermen, flows en keuzes vast, waardoor een ontwikkelteam precies weet wat er gebouwd moet worden.
Die laatste rol wordt vaak onderschat. Een fout die je in een prototype ontdekt, pas je dezelfde dag aan. Dezelfde fout in een gebouwde app betekent opnieuw ontwerpen, opnieuw bouwen en opnieuw testen. Elke ronde feedback op het prototype maakt de uiteindelijke bouw daardoor korter en voorspelbaarder.
04
/
07
Hoe een klikbaar prototype gemaakt wordt
In de praktijk is Figma de standaard, maar het principe is in elke ontwerptool hetzelfde.
Een ontwerper begint meestal met een wireframe, een grove schets van de schermen en hun volgorde. Hoe je die eerste schets zelf maakt, lees je in wireframe maken van je app-idee. Daarna worden de schermen uitgewerkt in een tool als Figma en aan elkaar gekoppeld met interacties: dit gebied is klikbaar en leidt naar dat scherm, dit menu schuift open, dit formulier gaat door naar een bevestiging.
Het resultaat is deelbaar via een link die gewoon in de browser opent, ook op een telefoon. Naast Figma bestaan er meer opties, van eenvoudige schermkoppelaars tot AI-tools die uit een beschrijving schermen genereren; een overzicht vind je in de beste prototyping-tools. Heb je al een Figma-ontwerp liggen en wil je er meer mee dan doorklikken, kijk dan bij Figma naar werkend prototype.
05
/
07
Wanneer een klikbaar prototype genoeg is, en wanneer niet
Een prototype beantwoordt vragen over begrip en gedrag, geen vragen over techniek.
Genoeg als dit je vraag is
- Begrijpt mijn doelgroep de kernflow en willen ze die gebruiken?
- Slaat het concept aan bij investeerders, partners of de directie?
- Kloppen de schermen, de volgorde en de scope voordat de bouw start?
- Kan ik een ontwikkelteam een eenduidige briefing geven?
Niet genoeg als dit je vraag is
- Werkt de techniek, zoals een koppeling met een ander systeem of een algoritme?
- Wat doen gebruikers als ze echte data invoeren en terugzien?
- Betalen mensen er echt voor en komen ze terug?
- Kan het product live voor de eerste klanten?
Voor die tweede categorie heb je een werkende versie nodig, met echte code en echte data. Twijfel je welke route bij jouw situatie past, lees dan eerst een prototype of meteen de echte app bouwen. En slaat je prototype aan, dan lees je in van prototype naar productie hoe de stap naar een echte app eruitziet.
06
/
07
Zo ontstaat een klikbaar prototype bij OneDayBuild
Eén werkdag, van schets aan de muur tot een prototype op je telefoon.
Bij OneDayBuild ontstaat een klikbaar prototype in één werkdag. De ochtend gaat naar je verhaal: wie is de gebruiker, welk probleem lost de app op en welke flow is de kern. Die flow schetsen we samen uit. De middag gaat naar het uitwerken en koppelen van de schermen. Aan het eind van de dag klik je zelf door je eigen app en heb je een link die je direct kunt delen met je doelgroep of investeerders. Hoe zo’n dag er precies uitziet, lees je bij prototype in 1 dag.
07
/
07
Veelgestelde vragen
Is een klikbaar prototype hetzelfde als een demo?
Nee. Een demo laat een werkend product zien, een klikbaar prototype simuleert dat product. Voor een eerste reactie van gebruikers of investeerders maakt dat verschil vaak weinig uit, zolang je er eerlijk over bent dat het een prototype is.
Kun je een klikbaar prototype op een telefoon bekijken?
Ja. De meeste tools genereren een deelbare link die in de browser opent, ook op een telefoon. Het prototype vult dan het hele scherm en voelt als een echte app, inclusief tikken en swipen.
Kan een klikbaar prototype later hergebruikt worden voor de echte app?
Het ontwerp wel. Er is geen code om over te zetten, maar de schermen, flows en keuzes vormen een directe basis voor het team dat de echte app bouwt. Daardoor start de bouw met veel minder open vragen.
Hoe test ik een klikbaar prototype met gebruikers?
Geef iemand een concrete opdracht, bijvoorbeeld een afspraak boeken in de app, en kijk zwijgend mee. Waar iemand aarzelt of verkeerd klikt, zit een verbeterpunt. Een handvol testers haalt de grootste problemen meestal al boven water.
Wat heb ik nodig om een klikbaar prototype te laten maken?
Een helder verhaal over je doelgroep, het probleem en de belangrijkste flow is genoeg. Schetsen op papier helpen, maar zijn niet verplicht; die maak je samen met de ontwerper tijdens de intake.
Werkt een klikbaar prototype ook voor software die geen app is?
Ja. Dashboards, portalen, webshops en interne tools laten zich op dezelfde manier prototypen. Overal waar schermen en klikpaden zijn, werkt het principe hetzelfde.
