Wat is het verschil tussen een mockup en een prototype?

Een mockup laat zien hoe je site eruitziet; een prototype laat zien hoe hij werkt. Het verschil zit in de doorstroom tussen schermen.

Een mockup is een plaatje.

Een prototype is datzelfde plaatje met werkende verbindingen.

De mockup

Kleuren, lettertypen, foto’s en indeling. Bedoeld om over vormgeving te praten.

Meer daarover lees je bij mockup.

Het prototype

Dezelfde schermen, maar nu klikbaar. Bedoeld om over gedrag en begrijpelijkheid te praten.

Meer daarover lees je bij wat een prototype is.

Welke je wanneer maakt

Eerst de mockup, dan pas het prototype. Zonder afgerond ontwerp klik je door schermen die nog gaan veranderen.

Meer daarover lees je bij design system.

Mijn vuistregels

1. Mockup voor vormgeving.
2. Prototype voor gedrag.
3. Altijd in die volgorde.
4. Prototype alleen voor de lastige stappen.

Die laatste scheelt het meeste werk.

Wat het extra kost

Bij een afgeronde mockup is een prototype een paar uur werk. Het meeste is al gemaakt.

Meer daarover lees je bij wat een prototype kost.

Wat je klant ervan merkt

Dat hij iets kan proberen in plaats van bekijken. Dat levert andere en betere opmerkingen op.

Meer daarover lees je bij figma.

Wat ik in de praktijk zie misgaan

De duurste fout die ik tegenkom is een mockup die als prototype wordt behandeld.

Iemand keurt een reeks plaatjes goed, iedereen is tevreden, en er wordt gebouwd. Pas als de site draait blijkt dat er een stap ontbreekt: er is wel een aanvraagformulier, maar niemand heeft bedacht wat er ná het verzenden op het scherm komt. Of er is een filter getekend zonder dat iemand zich heeft afgevraagd wat er gebeurt als er nul resultaten zijn.

Op een stilstaand beeld valt dat niet op, want daar bestaat alleen de situatie waarin alles goed gaat.

Wat ik daarom doe bij alles wat meer is dan een informatiesite: de route klikbaar maken en zelf aflopen. Niet om te kijken of het mooi is, maar om de gaten te vinden.

Eén ontdekking in die fase betaalt het klikbare model meestal ruimschoots terug.

Meer daarover lees je bij wireframe.

Veelgestelde vragen hierover