Een prototype is een interactieve, klikbare versie van een product die je bouwt om te testen hoe het werkt voordat iemand de echte code schrijft. Anders dan een statisch plaatje kun je er echt doorheen tikken: een knop indrukken, een nieuw scherm zien verschijnen, een nepformulier invullen. Het lijkt en gedraagt zich genoeg als het eindproduct om van te leren, en is toch snel aan te passen.

Denk aan het storyboard van een film dat is omgezet in een ruwe animatic. Je kijkt niet naar de uiteindelijke film, maar je volgt het verhaal, voelt het tempo en ziet wat niet werkt. Een prototype doet hetzelfde voor een product: het maakt van platte mockups iets wat je kunt ervaren en waarop je kunt reageren. Dat maakt het een sterk middel voor design, want echte mensen kunnen een flow proberen en je laten zien waar ze vastlopen.

De mate van detail is een knop die je instelt op de vraag. Een low-fidelity prototype kan papieren kaartjes zijn die je met de hand schuift, of grijze blokken die je aan elkaar knoopt, genoeg om te testen of de stappen in een logische volgorde staan. Een high-fidelity versie in een tool als Figma gebruikt de echte visuals en klikbare hotspots, dus hij voelt als een live app en is geschikt voor goedkeuring door stakeholders. Het verkeerde niveau kiezen kost tijd: niemand heeft pixelperfecte schermen nodig om te leren dat een formulier van vijf stappen er drie had moeten zijn. Het doel is om goedkoop te falen. Een verwarrende checkout vinden in een prototype kost een middag aan aanpassingen. Hem na de lancering vinden kost een herbouw en gemiste verkoop. Een prototype is meestal de stap nadat de keuzes uit prototyping en de wireframes vaststaan.

Bij TopDevs maken we prototypes van de belangrijkste flows en leggen die voor aan gebruikers voordat de ontwikkeling start, zodat we de versie bouwen die al werkt.