Prototype en clickdemo
Wat is een klikbaar prototype?
Een clickdemo is precies hetzelfde ding, maar met een ander doel: iets laten zien aan mensen die nog moeten beslissen. Je directie, je bank, een klant die overweegt te bestellen, of de collega's die er straks mee moeten werken. Over een idee praten levert beleefd geknik op. Iemand het laten uitproberen levert bruikbare kritiek op.
Wat het niet is: half afgebouwde software. Er komen geen gegevens uit je administratie en er zit geen koppeling onder. Precies daarom kan een prototype in twee weken klaar zijn, en kun je het zonder pijn weggooien als blijkt dat het niet werkt.
Waarom je eerst een prototype wil
Je kunt een idee op twee manieren toetsen. Erover vergaderen, of het laten uitproberen. Dat tweede kost een fractie van wat bouwen kost en levert antwoorden op waar je iets aan hebt.
Zekerheid voordat je gaat bouwen: Je ontdekt in week twee dat een scherm niet werkt, in plaats van in maand vijf. Een fout in een prototype herstellen kost een middag. Dezelfde fout in gebouwde software kost weken.
Draagvlak zonder eindeloos vergaderen: Laat de mensen die moeten beslissen zelf klikken. Dan gaat het gesprek niet meer over smaak, maar over de vraag of het werkt. Besluiten vallen daardoor sneller.
Een scherpere prijs voor de bouw: Wie precies weet welke schermen er komen, kan er een prijs op zetten die klopt. Een prototype maakt de marge in een bouwbegroting een stuk smaller.
Uitproberen met echte gebruikers: Vijf mensen uit je doelgroep laten proberen wat je van plan bent, laat binnen een uur zien waar ze vastlopen. En dat lang voordat er iets gebouwd is.
Voor wie is dit
Een prototype is er voor het moment waarop je iets wil beginnen, maar nog niet zeker weet of het idee houdt.
- Je hebt een idee voor een systeem en moet intern geld zien los te krijgen
- Je wil je klanten iets laten zien voordat je er een flink bedrag in stopt
- Je hebt drie ideeën en wil weten welke de moeite waard is
- Je vraagt offertes op en merkt dat elk bureau iets anders begrijpt van je aanvraag
- Je moet je eigen mensen meekrijgen in een nieuwe manier van werken
Wat je krijgt
- Een klikbare versie van de belangrijkste route, te openen op een laptop en op een telefoon
- Schermen met jouw eigen inhoud, zodat het gesprek over de zaak gaat en niet over de vulteksten
- Een link die je kunt doorsturen, zonder dat iemand iets hoeft te installeren
- Een testronde met vijf gebruikers, met een verslag van waar ze vastliepen
- Een lijstje met wat er wel en niet in zit, zodat niemand denkt dat het al werkt
- Een inschatting van de bouwkosten, gebaseerd op wat er nu daadwerkelijk in staat
Hoe we het bouwen
Eerst één route kiezen. We pakken het pad dat je het vaakst wil laten zien, of dat je het meest wil uitproberen. Een prototype dat alles tegelijk probeert te tonen, is stiekem een bouwproject geworden.
Dan in elkaar zetten. In één tot drie weken maken we de schermen van die route, klikbaar en met echte inhoud. Halverwege zie je een eerste versie, zodat je nog kunt bijsturen voordat het af is.
Dan voorleggen. We leggen het prototype voor aan de mensen om wie het gaat. Wat daaruit komt, bepaalt of je gaat bouwen, iets anders gaat bouwen, of het plan laat liggen. Alle drie zijn winst, ook die laatste.
Wat kost een klikbaar prototype?
Een clickdemo van vijf tot tien schermen is een afgebakende klus. Een uitgebreider prototype, met meerdere routes en een testronde, is een stuk meer werk.
De prijs hangt af van het aantal schermen en van hoe echt het eruit moet zien. Een schets in grijstinten is in dagen klaar. Een versie die niet van de echte site te onderscheiden is, kost een veelvoud. Voor draagvlak binnen je eigen bedrijf is grijs vaak genoeg.
Er loopt hier niets maandelijks door. Dit is een klus met een begin en een eind. Besluit je te gaan bouwen, dan gebruiken we de schermen die er al liggen. Onderhoud begint pas na livegang.
Waarom Mediavisie Web
Wij bouwen zelf. Wat wij in een prototype laten zien, kunnen we dus ook echt maken. Er zit geen bureau tussen dat iets moois belooft wat de bouwers later stilletjes moeten afzwakken.
We koppelen sinds 2008 systemen aan elkaar. Daardoor zien we tijdens het schetsen al waar het straks gaat schuren. Dat zetten we in het verslag, zodat je niet met een goedgekeurd plan blijft zitten dat je eigen systemen niet aankunnen.
En wat we maken is van jou: de schermen, de teksten en de code eronder. Ga je met een ander verder, dan hoeft niemand opnieuw te beginnen.
Waar je op moet letten
Een prototype overtuigt makkelijker dan het waarmaakt. Wie klikt op iets wat af oogt, denkt al snel dat het bijna klaar is. Terwijl het echte werk dan nog moet beginnen: de koppelingen, de rechten, en alles wat er misgaat zodra er echte gegevens in komen. Zeg er dus bij dat mensen naar een schets kijken. En reken erop dat het grootste deel van je budget ná deze fase weggaat.
Klik erdoorheen
Drie schermen, één handeling
Zo ziet een clickdemo eruit. Geen plaatje maar iets waar je doorheen loopt, zodat je merkt of de volgorde klopt voordat er gebouwd wordt.
Kies een moment
Klopt dit?
Donderdag 10:00, 30 minuten, videogesprek.
Staat genoteerd
Je krijgt een bevestiging per mail met de link erin.
- Kiezen
- Bevestigen
- Klaar
Wat je niet ziet
Op een plaatje werkt alles
Links het ontwerp zoals het wordt opgeleverd, rechts hetzelfde scherm waar je iets kunt doen. Probeer links maar eens iets aan te klikken.
Stilstaand ontwerp
Werkt de knop? Wat gebeurt er als het misgaat? Geen idee.
Klikbaar prototype
Laat het veld leeg en druk op versturen. Dát is wat je wilt weten.
De techniek eronder
Alle techniekWaar we het mee bouwen.
-
Ontwerp
Figma
Waar het ontwerp begint en waar je meekijkt. Componenten sluiten aan op wat we daarna in code bouwen.
-
Ontwerp
Storybook
Elk onderdeel los te bekijken en te testen, inclusief de staten die je op de site zelden tegenkomt.
-
Opmaak
CSS
Eigen variabelen voor kleur, ruimte en typografie. Eén plek aanpassen verandert de hele site mee.
-
Opmaak
Sass
Waar een project er al op draait. Nieuwe sites bouwen we met eigen CSS en variabelen, dat is inmiddels genoeg.
-
Beweging
GSAP
Voor animatie die iets uitlegt in plaats van iets opvult. Respecteert de instelling voor minder beweging.
-
Beweging
Lenis
Rustiger scrollen zonder het scrollgedrag van de browser te breken. Uit zodra iemand minder beweging heeft ingesteld.
Werkwijze
Hoe we het aanpakken.
Van het eerste gesprek tot doorbouwen na livegang. Vier fases, en je weet bij elke fase wat er af is en wat er nog komt.
-
1 tot 2 weken
Uitzoeken
Wat er moet komen en wat er al ligt
We brengen in kaart welke systemen mee moeten, wie het straks beheert en waar het vorige traject op vastliep. Daar komen de uitzonderingen boven water die later de planning bepalen.
Lees verder over Uitzoeken -
Eén week
Afbakenen
Van wensenlijst naar een plan met een prijs
We knippen het werk in stukken die los opgeleverd kunnen worden, en zetten er een prijs en een volgorde op. Daarbij spreken we af wat er in de eerste versie zit en wat later komt.
Lees verder over Afbakenen -
6 tot 12 weken
Ontwerpen en bouwen
Eerst de schermen, dan de techniek eronder
Je kijkt vanaf de eerste week mee op een testomgeving. We leveren in rondes op, te beginnen met het deel dat het meeste werk uit handen neemt, zodat je stuurt op wat je ziet.
Lees verder over Ontwerpen en bouwen -
Doorlopend
Doorbouwen
Na livegang begint het pas
Updates, bewaking en nieuwe functies, met een vast aanspreekpunt dat je project kent. We meten wat er gebruikt wordt, en dat bepaalt waar we het volgende kwartaal aan werken.
Lees verder over Doorbouwen
Zo ziet dat er in de praktijk uit
Alle casesWij werken onder andere voor
Aan de slag
Iets te bouwen?
Vertel wat er moet komen. We denken mee over techniek, haalbaarheid en wat het kost, ook als het plan nog niet rond is.