Feedback geven op je website aan Claude Code: van opmerking naar opdracht

Je bekijkt je eerste websiteversie en denkt: de pagina voelt nog niet goed. Maar wat geef je Claude Code mee? “Maak het mooier” kan tot allerlei veranderingen leiden, terwijl jij misschien alleen een te drukke introductie of een onduidelijke knop bedoelt.

Bruikbare feedback maakt duidelijk waar je iets ziet, wat er gebeurt en welk resultaat je verwacht. Je hoeft daarvoor geen CSS of componentnamen te kennen. Een concrete beschrijving vanuit de bezoeker is vaak een goed begin. Deze gids helpt je opmerkingen omzetten in opdrachten die je achteraf kunt controleren.

1. Beschrijf eerst wat je waarneemt

Begin met een beschrijving die iemand anders kan terugvinden. Noteer de pagina, het onderdeel en de omstandigheden. Zie je het op een telefoon of laptop? Heb je het menu geopend? Staat de browser ingezoomd? Gebruik de werkelijke URL of route en herkenbare tekst uit de pagina.

Een fictief voorbeeld:

• Te algemeen: “De dienstenpagina klopt niet.”
• Concreet: “Op /diensten staat de knop ‘Vraag informatie’ onder een lange tekst. Op mijn telefoon zie ik vóór die knop niet welke dienst ik kan aanvragen.”

De tweede opmerking benoemt wat je ziet. De oorzaak staat nog open: misschien is de tekst te lang, de volgorde onduidelijk of de knop verkeerd geplaatst. Laat die oorzaak onderzoeken voordat je een willekeurige technische oplossing voorschrijft.

Schrijf vervolgens wat je wilt bereiken. Bijvoorbeeld: “De bezoeker moet vóór de aanvraagknop begrijpen welke dienst wordt aangeboden.” Zo heeft de aanpassing een inhoudelijk doel.

2. Maak onderscheid tussen een fout en een voorkeur

Een fout is gedrag dat niet overeenkomt met de afgesproken werking. Een link gaat bijvoorbeeld naar de verkeerde pagina, een tekst bevat een onjuist adres of een menu opent niet. Een voorkeur gaat over een keuze waar meerdere oplossingen mogelijk zijn, zoals een rustiger kleurgebruik of een andere beeldverhouding.

Gebruik in je feedbacklijst een eenvoudig label:

• Fout: het huidige resultaat wijkt af van een afspraak of noodzakelijke taak.
• Onduidelijkheid: een bezoeker kan de informatie of volgende stap moeilijk begrijpen.
• Ontwerpvoorkeur: je wilt een andere visuele uitwerking.
• Nieuwe wens: je vraagt iets dat nog niet in de oorspronkelijke opdracht stond.

Dit zijn werklabels voor je eigen review. Ze helpen om je prioriteiten uit te leggen. Een nieuwe wens kan meer onderdelen raken dan een correctie, terwijl een fout in een belangrijke bezoekersroute aandacht verdient vóór een kleine kleurvoorkeur.

Bij een ontwerpvoorkeur geef je aan welk effect je zoekt. “Meer rust” wordt bruikbaarder als je toevoegt: “De drie decoratieve kaders concurreren met de hoofdtekst; maak de hiërarchie duidelijker en houd de belangrijkste knop herkenbaar.” Voor de oorspronkelijke visuele afspraken kun je teruggrijpen op je stijlbriefing met referentiewebsites.

3. Gebruik screenshots met gerichte toelichting

Een screenshot helpt om de bedoelde plek te tonen. Voeg er een korte beschrijving bij: de route, het schermformaat en het onderdeel dat aandacht nodig heeft. Maak een uitsnede als je één detail bespreekt, maar voeg zo nodig ook de hele pagina toe om de context te behouden.

Markeer één of enkele punten met een kader of pijl. Geef bij ieder punt aan wat je bedoelt. Een rode cirkel rond een knop vertelt nog niet of je de kleur, tekst, positie of werking wilt aanpassen.

Voor interactie is een stilstaand beeld onvoldoende om het hele probleem te begrijpen. Beschrijf dan de stappen:

1. Open /contact.
2. Ga met Tab naar het onderwerpveld.
3. Kies een onderwerp en ga naar de volgende bediening.
4. Noteer wat je ziet en wat je verwachtte.

Anthropic noemt specifieke context en screenshots als manieren om Claude Code gerichte informatie te geven. Gebruik een screenshot als ondersteuning van je opdracht en benoem wat erop belangrijk is. (Claude Code: best practices)

Controleer vóór je een screenshot deelt of er persoonlijke informatie, wachtwoorden of gegevens uit een beheeromgeving op staan. Maak voor zo’n situatie liever een veilig voorbeeld met testgegevens.

4. Schrijf per punt een controleerbare opdracht

Gebruik voor elk feedbackpunt vijf vaste velden: plek, huidige situatie, gewenste uitkomst, grenzen en controle. Daarmee kan Claude Code onderzoeken wat nodig is en kun jij bepalen of het resultaat klopt.

Een voorbeeld voor een mobiele kop:

• Plek: de eerste sectie op /over-ons, op een smal scherm.
• Huidig: de lange kop wordt aan de rechterkant afgesneden.
• Gewenst: de volledige kop is leesbaar en blijft binnen de pagina.
• Grenzen: behoud de tekst en bestaande typografische stijl.
• Controle: bekijk de pagina op smalle en brede schermen en controleer op horizontaal schuiven.

Dat is specifieker dan “zet de lettergrootte op 24 pixels”. Misschien lost een betere regelafbreking het probleem op zonder de hele kop kleiner te maken. Geef je een exacte waarde, leg dan uit of die een vaste ontwerpafspraak is of alleen een mogelijke oplossing.

Onderstaand eigen feedbackformulier kun je kopiëren en aanpassen:

Feedbackpunt: [korte naam]
Pagina of route: [URL]
Onderdeel: [herkenbare kop, knop of sectie]
Omstandigheden: [schermformaat, browser, relevante stappen]

Wat ik nu zie:
[concrete waarneming]

Wat de bezoeker moet kunnen begrijpen of doen:
[gewenste uitkomst]

Behoud deze afspraken:
[inhoud, stijl, routes of bestaande werking]

Onderzoek eerst de oorzaak en pas gericht aan.
Controleer daarna:
[zichtbaar resultaat of reproduceerbare handeling]

Laat zien wat is aangepast en welke controle is uitgevoerd.

Voeg de opdracht toe aan je bestaande projectcontext. Voor vaste afspraken die bij meerdere feedbackrondes gelden, kun je je CLAUDE.md-projectinstructies bijwerken.

5. Werk met een kleine, geordende feedbackronde

Verzamel je opmerkingen eerst op één plek. Orden ze daarna op hun invloed op de bezoeker. Begin bij fouten die een belangrijke taak blokkeren en bij onjuiste informatie. Beoordeel vervolgens structuur en begrijpelijkheid, en werk daarna aan visuele details.

Vraag niet in dezelfde onbegrensde opdracht om alle kleuren, teksten, routes en functies te veranderen. Maak een samenhangende ronde, bijvoorbeeld de leesbaarheid van de eerste sectie of de bediening van het mobiele menu. Dat maakt het eenvoudiger om gevolgen te beoordelen.

Ook kleine opmerkingen kunnen gekoppeld zijn. Een langere knoptekst kan de kaartindeling veranderen. Een grotere kop kan op mobiel meer ruimte vragen. Benoem zulke samenhang wanneer je die ziet en controleer de omliggende onderdelen na de aanpassing.

Als feedback een bestaande site raakt, gebruik dan ook het stappenplan om een website met Claude Code aan te passen. Dat helpt je vooraf vast te leggen welke werking beschermd moet blijven.

6. Sluit een punt pas na de hercontrole

Bekijk dezelfde pagina opnieuw onder dezelfde omstandigheden. Een aanpassing op desktop kan op mobiel anders uitpakken. Een herstelde knop kan er goed uitzien, maar naar de verkeerde bestemming gaan. Herhaal daarom de oorspronkelijke handeling in plaats van alleen een nieuw screenshot te bekijken.

• ☐ Ik kan het bedoelde onderdeel terugvinden op de juiste pagina.
• ☐ De beschreven fout of onduidelijkheid is opgelost.
• ☐ De afgesproken teksten en feiten zijn correct gebleven.
• ☐ Links en relevante bedieningen werken zoals bedoeld.
• ☐ Het resultaat is ook op een smal scherm bruikbaar.
• ☐ De controle is uitgevoerd en de uitkomst is vastgelegd.

Markeer een punt als opgelost, nog open of vervallen. Voeg bij een open punt toe wat nog niet klopt. Als je voorkeur tijdens de review verandert, schrijf de nieuwe keuze op; anders blijven eerdere en latere instructies naast elkaar bestaan.

Voor bredere controles kun je de gidsen over mobiel testen en toetsenbordbediening gebruiken. Wil je feedback onderdeel maken van een volledige opdracht, begin dan met de gratis briefing voor Claude Code.

Een goede feedbackronde eindigt met een zichtbaar gecontroleerde verbetering. Houd je opmerkingen concreet en je gewenste uitkomst duidelijk, zodat iedere volgende versie dichter bij de afgesproken website komt.