Vibe coding voor websites: sneller van idee naar verbetering
Een goed idee voor je website wordt pas concreet wanneer je het kunt zien en gebruiken. Hoe werkt die keuzehulp? Welke vragen stelt het formulier? En wat krijgt een bezoeker te zien na een postcodecheck?
Met vibe coding kunnen we snel een eerste prototype maken. Dat bespreken we met de klant, scherpen we aan en testen we. Als de oplossing werkt zoals bedoeld, bouwen we haar zorgvuldig in de bestaande website in. Bijvoorbeeld als maatwerk in de code of als een beheerbaar onderdeel via Advanced Custom Fields (ACF).
Als developer werk ik daarin samen met Thijs, onze head of digital, en Janne, onze performance marketeer. Samen brengen we het idee, de gebruikerservaring en de technische uitvoering bij elkaar.
Met vibe coding maken we het idee tastbaar
Bij vibe coding beschrijf je wat je wilt maken en helpt AI om de code te schrijven. Door het resultaat te bekijken en bij te sturen, ontstaat een eerste versie waarmee je kunt experimenteren.
Dat is bijvoorbeeld bruikbaar bij een keuzehulp die bezoekers helpt een passende oplossing te vinden, een aangepaste aanvraagroute of een interactieve pagina. Met een prototype kunnen we de werking laten zien voordat alles volledig is uitgewerkt.
Voor mij als developer maakt dat de eerste fase concreter. We kunnen vroeg onderzoeken welke stappen nodig zijn, hoe de interactie aanvoelt en waar nog vragen zitten. De developer is daarbij vanaf het begin betrokken, zodat het experiment ook technisch een bruikbaar vertrekpunt heeft.
Eerst samen met de klant door het prototype
Vervolgens bespreken we het prototype met de klant. We doorlopen de pagina alsof we een bezoeker zijn: we vullen gegevens in, proberen verschillende keuzes en bekijken de uitkomst. Zo wordt duidelijk of de oplossing aansluit op de dagelijkse praktijk van de klant.
Thijs bewaakt daarbij het doel. Helpt dit onderdeel de bezoeker verder? Past de vervolgstap bij het commerciële proces? En lossen we hiermee de vraag op waarmee we begonnen?
De klant brengt kennis mee die je niet uit een ontwerp of briefing haalt. Misschien ontbreekt een belangrijke toepassing of vraagt het formulier iets wat een potentiële klant nog niet kan weten. Doordat we dat vroeg bespreken, kunnen we gericht bijsturen voordat we investeren in de definitieve uitwerking.
Janne: helpt dit de bezoeker ook verder?
Janne kijkt naar de aansluiting tussen de campagne, de pagina en de vervolgstap. Een bezoeker komt met een bepaalde verwachting binnen. De website moet daarop aansluiten.
Bij een postcodecheck is het bijvoorbeeld onvoldoende om alleen te melden dat een regio wordt bediend. Begrijpt iemand wat er daarna gebeurt? Is duidelijk wat een adviesaanvraag inhoudt? En helpt de check daadwerkelijk om twijfel weg te nemen?
Daar hoort vooraf een meetplan bij. We kunnen onderzoeken hoeveel bezoekers de check gebruiken en daarna verdergaan, maar ook welke aanvragen eruit voortkomen. Een functie die veel interactie oplevert, heeft pas commerciële betekenis als die bijdraagt aan relevante vervolgstappen.
Zo blijft het experiment gericht op de bezoeker én op het resultaat.
Een postcodecheck als concreet voorbeeld
Een voorbeeld is het concept voor een postcodecheck op de VOLL-website. Bezoekers voeren hun postcode in en zien of er een installateur in hun regio actief is. Daarna kunnen ze advies aanvragen.
In een prototype kunnen we samen beoordelen hoe die route moet werken. Welke uitleg staat bij het invoerveld? Wat tonen we als een regio wordt bediend? En welke boodschap krijgt iemand als dat niet zo is?
Ook de benodigde gegevens worden zo concreet. Voor regionale beschikbaarheid zijn actuele werkgebieden nodig. Willen we daarnaast laten zien wie de installatie uitvoert en welke certificering die partij heeft, dan vraagt dat om aanvullende, gecontroleerde informatie. Het prototype helpt om die keuzes met de klant te maken.
Testen of bezoekers ermee uit de voeten kunnen
Na de eerste afstemming testen we het prototype. Janne kijkt vanuit performance marketing naar de aansluiting tussen de verwachting van de bezoeker, de interactie en de vervolgstap. Is de uitleg duidelijk? Helpt het onderdeel om twijfel weg te nemen? En is logisch wat er na een aanvraag gebeurt?
Een UX-analyse, oftewel gebruiksanalyse, maakt dit concreet. We laten mensen taken uitvoeren en bekijken waar ze aarzelen of vastlopen. Dat is ook leerzaam voor de klant en ons team: woorden die intern vanzelfsprekend zijn, blijken soms vragen op te roepen. Of bezoekers verwachten andere informatie dan we vooraf dachten.
Met die inzichten verbeteren we het prototype. Een gebruikstest laat zien of mensen de oplossing begrijpen. Of die ook meer waardevolle aanvragen oplevert, beoordelen we met passende metingen en voldoende gegevens.
Testen of bezoekers ermee uit de voeten kunnen
Wanneer het prototype is besproken, aangescherpt en getest, volgt de technische uitwerking. Als developer bepaal ik hoe het onderdeel het beste aansluit op de bestaande website. De prototypecode is daarbij een vertrekpunt dat we beoordelen; soms kunnen we onderdelen gebruiken, soms is een andere opbouw verstandiger.
Binnen WordPress kan dat bijvoorbeeld een maatwerkonderdeel in het thema zijn, gecombineerd met ACF-velden waarmee de klant teksten, opties of andere inhoud kan beheren. Welke aanpak past, hangt af van de functie, de bestaande structuur en wat de klant zelf moet kunnen aanpassen.
We controleren de werking op verschillende schermformaten, de toegankelijkheid, gegevensverwerking en eventuele koppelingen. Ook foutmeldingen en uitzonderingen horen daarbij. Pas wanneer dat goed is ingericht en gecontroleerd, rollen we de verbetering uit op de live website.
Na livegang blijven we beoordelen en verbeteren
Samen met Janne richten we de relevante metingen in. Wordt het nieuwe onderdeel gebruikt? Waar stoppen bezoekers? En welke aanvragen komen eruit voort? Feedback van de klant en sales helpt om die gegevens te duiden.
Daarmee wordt het onderdeel van de structurele doorontwikkeling van de website. De eerste liveversie geeft nieuwe inzichten waarmee we verder kunnen verbeteren.
Dat is voor mij de waarde van deze werkwijze: met vibe coding snel een prototype maken, samen met de klant de juiste keuzes maken, testen en vervolgens degelijk integreren. Thijs bewaakt de richting, Janne onderzoekt de gebruikerservaring en het resultaat, en development zorgt voor een betrouwbare uitvoering.
Een prototype maakt het idee bespreekbaar. Zorgvuldige ontwikkeling maakt het bruikbaar voor iedere bezoeker.