Bouw met AI een werkend app-prototype en leg het voor aan echte mensen

Waarom een werkend prototype je meer vertelt dan een mockup

Statische schermen testen of mensen mooi vinden hoe iets eruitziet. Zelden testen ze of mensen het kunnen gebruiken, want de tester moet zich voorstellen wat er na elke tik gebeurt, en wie de sessie leidt, gaat het product uiteindelijk zelf vertellen. Een klikbaar app-prototype dat echt reageert, maakt dat vertellen overbodig. De tester typt in een echt veld, ziet een echt totaal veranderen en krijgt een echte lege toestand als hij het laatste item verwijdert. Zijn verwarring gaat over jouw ontwerp, niet over de gaten in het prototype.

Het verandert ook welke vragen je kunt stellen. Bij een mockup vraag je "zou je dit gebruiken?", en daar antwoorden mensen beleefd op. Met iets dat werkt, kun je een taak geven ("voeg de dienst van volgende dinsdag toe en kijk wat dat doet met je uren per week") en zien waar ze aarzelen.

Bepaal wat het prototype moet bewijzen

Schrijf voordat je iets beschrijft de een of twee vragen op die de test moet beantwoorden. Zo blijft de build klein en blijven de sessies gericht. Veelvoorkomende vragen:

• Begrip: weten mensen binnen een paar seconden waar het hoofdscherm voor is?
• De kerntaak: kunnen ze zonder hulp de ene taak uitvoeren waarvoor het product bestaat?
• Het lastige moment: wat gebeurt er bij het randgeval waarover je twijfelt: een lege lijst, een fout die ongedaan moet, een lange naam die afbreekt?
• Bereidheid: zouden ze na gebruik hun huidige spreadsheet, notitieboek of app hiervoor inruilen?

Alles wat die vragen niet dient, kun je weglaten of nabootsen. Een instellingenpagina die niemand opent in een sessie van twintig minuten is verspilde moeite, hoe makkelijk die ook te genereren is.

Hoe je het aan Anticode beschrijft

Beschrijf in een paar zinnen de persoon, de taak en de schermen, en zeg hoe de voorbeelddata eruit moet zien. Bijvoorbeeld: "Een prototype van een app om diensten te ruilen voor het team van een café. Schermen: het rooster van deze week, een verzoek om een dienst te ruilen en een lijst met openstaande ruilverzoeken. Gebruik acht voorbeeldmedewerkers en een realistische week. Markeer alles als demodata." De Architect antwoordt met een kort plan (naam, schermen, uitstraling, functies) en kan tot drie vragen stellen waar het antwoord de build verandert, elk met voorgestelde antwoorden waarop je kunt tikken.

Kies je Build it, dan schrijft het model de hele app als één HTML-document, en je kunt de code binnen zien komen. Nieuwe app-builds kunnen ook worden geopend in een headless browser op telefoon- en laptopbreedte, waar screenshots worden gemaakt en er doorheen wordt geklikt, waarna fouten worden teruggegeven om te herstellen, als die reviewdienst beschikbaar is.

Maak de nagebootste delen eerlijk

Anticode-apps draaien in een sandbox zonder netwerk, dus alles wat normaal een server nodig heeft, wordt binnen de pagina nagebootst: andere gebruikers zijn voorbeeldpersonen, "verstuurde" berichten komen in een lokale lijst terecht en een inlogscherm accepteert alles. De app markeert dit als demodata waar het ertoe doet. Houd die markering zichtbaar tijdens het testen. Testers die denken dat ze een echt systeem gebruiken, maken andere, riskantere keuzes dan testers die weten dat het een model is, en in deze fase wil je het tweede soort feedback.

Wat wel bewaard blijft, is alles wat de app opslaat in de eigen browser van de tester. Voegt iemand drie items toe, sluit hij het tabblad en komt hij morgen terug, dan staan de items nog op dat apparaat. Dat is genoeg voor een dagboekstudie van een week, zolang elke tester bij één telefoon of laptop blijft.

De sessies houden en de build aanpassen

1. Publiceer het prototype op zijn anticode.dev-adres en stuur testers de link. Er hoeft niets geïnstalleerd te worden.
2. Stuur belanghebbenden in plaats daarvan een reviewlink voor klanten: zij kunnen de huidige preview zonder account openen en opmerkingen bij een sectie achterlaten. Links verlopen standaard na 14 dagen en je kunt ze intrekken.
3. Vraag na elke ronde in gewone woorden om wijzigingen ("zet de ruilknop op elke dienstkaart"). Recente opslagmomenten blijven bewaard in de versiegeschiedenis (tot een aantal dat je abonnement bepaalt), zodat je ronde één en ronde drie naast elkaar kunt laten zien of terug kunt gaan.

Wat een prototype in één browser niet kan testen

Wees voor jezelf duidelijk over de grens. Een prototype in een sandbox draait op één apparaat tegelijk, dus het kan niet testen:

• Alles wat tussen mensen gebeurt: echte meldingen, gedeelde lijsten, twee testers die elkaars wijzigingen zien.
• Echt inloggen, rechten of accountherstel.
• Live externe data, betalingen of AI-functies binnen de app (die zijn alleen na te bootsen met vaste voorbeeldantwoorden).
• Prestaties met echte hoeveelheden data of trage netwerken.

Overleeft het idee de tests, dan is de export naar Next.js de stap naar een echt product. Die werkt voor app-builds en levert een standaard App Router-project in TypeScript met Postgres via Prisma, inloggen per e-mail, rollen voor klanten en medewerkers en een beheeromgeving. Het is een startpunt dat een developer verder uitbouwt, geen kant-en-klare app voor meerdere gebruikers, en je kunt het naar een GitHub-repository naar keuze pushen. De gids voor exporteren naar Next.js beschrijft wat erin zit. Heb je productieklare functies voor meerdere gebruikers nodig zonder code te schrijven, dan past een no-codetool met een eigen backend misschien beter dan allebei.

Veelgestelde vragen

Is dit een AI-prototypegenerator voor apps of een ontwerptool?

Het bouwt werkende code, geen frames op een canvas. Je krijgt een echte app in de browser, geschikt voor usabilitytests; heb je pixelprecieze ontwerpbestanden nodig voor een designteam, gebruik dan daarnaast een ontwerptool.

Kunnen testers het op hun telefoon gebruiken?

Ja. De gepubliceerde app is een webpagina die werkt in de browser van een telefoon, en wat hij opslaat, blijft op die telefoon.

Kan ik zien wat testers hebben ingevoerd?

Niet wat ze in de app hebben opgeslagen, want dat blijft op hun apparaat. Voeg je een feedback- of contactformulier toe, dan krijg je die inzendingen per e-mail en in het dashboard.

Wordt het prototype de echte app?

Het kan het startpunt worden. De export naar Next.js maakt er een project van met een database en inloggen, waarop een developer kan verder bouwen.