Design

Prototype en clickdemo

Een prototype is een proefversie van je site of systeem. Het ziet eruit als het echte werk en je kunt erin klikken, maar er zit niets achter. Je loopt de route, en binnen tien minuten voel je of het klopt.

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

  1. Kiezen
  2. Bevestigen
  3. 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

Versturen

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 techniek

Waar 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. 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
  2. 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
  3. 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
  4. 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

Wij 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.

Een project bespreken
Ontdek jouw mediavisie