Een ontwerp beoordelen doe je met je ogen. Je kijkt naar een plaat, vindt hem mooi en geeft akkoord. Wat je op zo’n plaat niet ziet, is of de route klopt. Ben je in drie klikken bij je doel? Of weet je halverwege niet meer waar je bent?
Daar kom je pas achter als je erin kunt klikken. En dat is precies wat een prototype je geeft.
Het scheelt bovendien een discussie. Twee mensen kunnen eindeloos van mening verschillen over een indeling.
Laat een derde persoon een taak uitvoeren in het model. Die discussie is dan binnen tien minuten beslecht.
Een klikbaar model waarin je fouten vindt voordat ze geld kosten.
Wat is een prototype?
Een prototype is een klikbaar model van je website die nog niet gebouwd is. Je klikt op een knop en gaat naar het volgende scherm.
Menu’s klappen open, formulieren gaan naar een bedankscherm en je kunt terug. Alles wat je bezoeker straks doet, kun je hier al doen.
Het verschil met een mockup
Een mockup is een stilstaand beeld. Hij ziet er af uit maar doet niets.
Een prototype is dezelfde vormgeving met gedrag eraan gekoppeld. Dat verschil is groter dan het klinkt.
Op een stilstaand beeld zie je niet dat je menu onlogisch is ingedeeld. In een klikbaar model merk je dat binnen een minuut.
Waarom je ermee test
Omdat repareren in een prototype vijf minuten kost en in een gebouwde site een dag.
Je test er de route van je bezoeker mee. Komt hij bij het antwoord dat hij zocht, en hoeveel stappen heeft hij daarvoor nodig?
Wat je erin vindt
Knoppen die niemand als knop herkent.
Een stap die overbodig blijkt.
Een formulier dat te veel vraagt.
Een menu-item dat niemand aanklikt.
Die laatste is waardevol. Je verwijdert dan iets voordat het gebouwd is en jaren onderhoud vraagt.
Hoe je het test
Bij een gebruikerstest geef je iemand een taak en houd je je mond. Dat tweede is het moeilijkst.
Zeg niet: klik hier maar. Zeg: probeer een offerte aan te vragen. Kijk daarna wat er gebeurt en waar iemand aarzelt.
Kies daarbij mensen uit je persona, dus mensen die op je klant lijken. Vijf is genoeg. Na vier of vijf tests hoor je dezelfde problemen terugkomen, en de zesde levert weinig nieuws op.
Wat het kost
Minder dan mensen denken, want de vormgeving heb je al. Het koppelen van schermen is werk van uren, niet van dagen.
Bij een gemiddelde bedrijfssite praat je over een dagdeel extra in de ontwerpfase. Dat verdient zich terug bij de eerste stap die je schrapt. Meer over dat gereedschap lees je bij Figma.
Hergebruiken bij de bouw
Niet als code, wel als leidraad. Ik neem er de kleuren, de afstanden en het gedrag per schermbreedte uit over.
Die waarden komen als vaste afspraken in het design system. Zo bouw je na wat er getest is en niet wat er onderweg is bedacht.
Test bij het testen voor de bouw ook of alles met het toetsenbord werkt. Dat kun je in een klikbaar model al beoordelen, zie accessibility.
Kies de juiste testers
Mensen die je site niet kennen. Je collega weet al waar alles staat en is dus de slechtst denkbare tester.
Vraag pas achteraf waarom iemand ergens twijfelde. Tijdens de test stuur je hem anders zonder dat je het doorhebt.
Vraag ernaar in je offerte
Vraag of er een klikbaar model in zit en niet alleen plaatjes. Dat is een verschil van een paar uur in de begroting.
Vraag ook om toegang tot het bestand zelf. Bij een uitbreiding over een jaar kun je dan verder bouwen op wat er ligt.
Wat je ermee voorkomt
Een scherm dat je niet bouwt, kost je ook geen onderhoud in de jaren daarna. Dat is de stille winst van deze stap.
Zo raakt je site minder snel vol met onderdelen die niemand meer kan verantwoorden.
Meer vragen over Prototype
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een prototype?
Wat is het verschil tussen een mockup en een prototype?
Waarom test je met een prototype?
Hoe test je een prototype met gebruikers?
Wat kost een prototype?
Kun je een prototype hergebruiken bij de bouw?
Wat is een prototype?
Een mockup is een stilstaand beeld. Hij ziet er af uit maar doet niets.
Een prototype is dezelfde vormgeving met gedrag eraan gekoppeld. Dat verschil is groter dan het klinkt.
Op een stilstaand beeld zie je niet dat je menu onlogisch is ingedeeld. In een klikbaar model merk je dat binnen een minuut.
Je ziet ook niet hoeveel stappen iets kost. Drie mooie schermen achter elkaar kunnen samen een omslachtige route zijn.
Het is dus geen luxe versie van een mockup maar een ander gereedschap. De mockup gaat over hoe het eruitziet, het prototype over hoe het werkt. Meer daarover lees je bij mockup.
Onthoud het als uiterlijk tegenover werking. De mockup gaat over hoe het eruitziet, het prototype over hoe het werkt.
Je hebt ze allebei nodig, maar ze beantwoorden andere vragen en ze horen bij een ander moment in het traject. Vraag dus altijd welke van de twee je krijgt en op welk moment.
Wat is het verschil tussen een mockup en een prototype?
Een prototype is een klikbare versie van je website die nog niet gebouwd is. Je klikt op een knop en gaat naar het volgende scherm.
Menu’s klappen open, formulieren gaan naar een bedankscherm en je kunt terug. Alles wat je bezoeker straks doet, kun je hier al doen.
Een ontwerp beoordelen doe je normaal met je ogen. Je kijkt naar een plaat, vindt hem mooi en geeft akkoord.
Wat je op zo’n plaat niet ziet, is of de route klopt. Of je in drie klikken bij je doel bent, of dat je halverwege niet meer weet waar je bent.
Daar kom je pas achter als je erin kunt klikken. En dat is precies wat een prototype je geeft, nog voordat er een regel code is geschreven.
Vraag bij een ontwerptraject of je erin kunt klikken. Een plaat beoordelen is iets anders dan een route uitproberen.
Op een stilstaand beeld zie je niet of je in drie klikken bij je doel bent, en dat is precies wat ertoe doet.
Waarom test je met een prototype?
Omdat repareren in een prototype vijf minuten kost en in een gebouwde site een dag.
Je test er de route mee die je bezoeker aflegt. Komt hij bij het antwoord dat hij zocht, en hoeveel stappen heeft hij daarvoor nodig?
Wat je erin vindt is steeds hetzelfde soort dingen. Knoppen die niemand als knop herkent. Een stap die overbodig blijkt. Een formulier dat te veel vraagt.
En een menu-item dat niemand aanklikt. Die laatste is waardevol, want je verwijdert dan iets voordat het gebouwd is en jaren onderhoud vraagt.
Het scheelt bovendien discussie. Twee mensen kunnen eindeloos van mening verschillen over een indeling. Laat een derde persoon een taak uitvoeren en die discussie is in tien minuten beslecht.
Gebruik het om te schrappen en niet alleen om te bevestigen. Een menu-item dat niemand aanklikt, bouw je gewoon niet.
Dat scheelt je niet alleen bouwuren maar ook onderhoud in de jaren daarna.
Hoe test je een prototype met gebruikers?
Je geeft iemand een taak en houdt daarna je mond. Dat tweede is het moeilijkst.
Zeg niet: klik hier maar. Zeg: probeer een offerte aan te vragen. Kijk daarna wat er gebeurt en waar iemand aarzelt.
Vraag pas achteraf waarom hij ergens twijfelde. Tijdens de test stuur je hem anders zonder dat je het doorhebt.
Vijf mensen is genoeg. Na vier of vijf tests hoor je dezelfde problemen terugkomen, en de zesde levert weinig nieuws op.
Kies daarbij mensen die je site niet kennen. Je collega weet al waar alles staat en die is dus de slechtst denkbare tester. Meer over verbeteren op basis van gedrag lees je bij CRO.
Geef iemand een taak en houd daarna je mond. Dat tweede is het moeilijkst en het belangrijkst.
Vijf mensen is genoeg. Na vier of vijf tests hoor je dezelfde problemen terugkomen en levert de zesde weinig nieuws op. Kies daarbij mensen die je site niet kennen, want je collega weet al waar alles staat.
Wat kost een prototype?
Minder dan mensen denken, want de vormgeving heb je al. Het koppelen van schermen is werk van uren, niet van dagen.
Bij een gemiddelde bedrijfssite praat je over een dagdeel extra in de ontwerpfase.
Dat verdient zich terug bij de eerste stap die je schrapt. Een overbodig scherm dat je niet bouwt, kost je ook geen onderhoud in de jaren daarna.
Vraag bij een offerte dus of er een klikbaar model in zit en niet alleen plaatjes. Dat is een verschil van een paar uur in de begroting.
En vraag om toegang tot het bestand zelf. Bij een uitbreiding over een jaar kun je dan verder bouwen op wat er ligt, in plaats van opnieuw te beginnen.
Vraag om toegang tot het ontwerpbestand zelf en niet alleen om een link. Bij een uitbreiding over een jaar scheelt dat een nieuwe ontwerpronde.
Leg die afspraak vast in je offerte, dan is er achteraf geen discussie over.
Ga je een nieuwe website laten maken en wil je vooraf weten of de route klopt? Beschrijf je plannen via het formulier hieronder. Ik leg uit hoe een klikbaar model werkt en wat het je bespaart aan verbouwing achteraf. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Klikmodel, interactief ontwerp, klikbaar ontwerp
