Prototypen versus wireframes: wat is het verschil?

Het is gemakkelijk om te denken dat het belangrijkste verschil tussen een wireframe en prototypes neerkomt op het feit dat de ene weinig detail heeft (een wireframe), terwijl de andere veel detail heeft (wireframes met hoge getrouwheid of prototypes), maar er komt veel meer bij kijken dan dat. 

In dit artikel bekijken we wat een wireframe is, evenals prototypes, en de verschillen tussen beide. We bespreken ook mock-ups, het midden tussen de twee, en in hoeverre je als productmanager op de hoogte moet zijn van het ontwerpproces. 

Wat is wireframing?

Laten we eerst bekijken wat een wireframe is. 

Bij een wireframe wordt het idee (zoals een app of webpagina) teruggebracht tot de essentie. Dit is het overzicht op grote hoogte van hoe je app of webpagina eruit kan komen te zien. Het bevat een overzicht van de structuur, de gebruikersinterface en de manier waarop informatie aan de gebruiker wordt gepresenteerd. 

De focus ligt hier op eenvoud—een wireframe maken is geen tijdrovend proces. Je richt je hierbij niet op de gebruikerservaring of interactiviteit. 

Een wireframe is ideaal om snel feedback te krijgen van belangrijke belanghebbenden, zodat je weet dat je op de goede weg bent. Zo niet, dan is het eenvoudig om met een paar aanpassingen iteraties te maken. 

Hoe ziet een wireframe eruit?

Enkele van de beste werkwijzen voor het maken van productwireframes zijn de volgende: 

• Een wireframe is meestal zwart-wit of in grijstinten
• De tekst Lorem ipsum wordt vaak als plaatshouder gebruikt
• In plaats van afbeeldingen weer te geven, volstaat een eenvoudige rechthoek (meestal met een „x” erin)

Onthoud dat dit weinig detail heeft: de functionaliteit en gebruikerservaring komen later. 

Tools voor het maken van een wireframe

Als je het ouderwets wilt aanpakken, is een wireframe maken met pen en papier meer dan voldoende om het idee snel over te brengen. Misschien ben je aan het lunchen of zit je in een koffiebar en heb je alleen een servet en een pen bij de hand wanneer je plotseling een idee krijgt. 

Zo niet, dan is Balsamiq een populaire softwareoplossing voor wireframing om een wireframe te maken. Deze software is uitsluitend bedoeld voor het maken van wireframes en niets anders. 

Natuurlijk is het ook mogelijk om een wireframe te maken met apps waarmee je wellicht al beter bekend bent, zoals Sketch en Invision, als je niet nóg een softwaretool wilt leren. 

Onthoud dat een wireframe weinig detail heeft en dat je het snel kunt samenstellen om een idee over te brengen. Je wilt niet enorm veel tijd besteden aan het leren van nieuwe software (hoewel Balsamiq vrij eenvoudig te leren is). 

Wat productmanagers moeten weten over wireframes

Als productmanager wil je je inzicht kunnen vertalen naar iets visueels waarvoor weinig tijd nodig is. 

Of je nu iets laat zien aan een softwareontwikkelaar of aan iemand die zich bezighoudt met UX-ontwerp, de kennis om snel een wireframe te maken zal je productmanagementcarrière enorm ten goede komen. 

Wat is prototyping?

Prototypes zijn versies met veel detail die, afhankelijk van de feedback van gebruikers, mogelijk niet veel verschillen van je uiteindelijke product wat betreft uiterlijk en werking. 

Prototypes zijn ideaal voor gebruikerstests. Je kunt de interacties, de gebruikerservaring, de gebruiksvriendelijkheid en de gebruikersinterface testen. 

Prototypes kosten veel meer tijd om te maken, omdat ze het uiteindelijke productontwerp nauw kunnen benaderen, maar het bespaart je veel tijd als je meteen het uiteindelijke product maakt nadat je het via prototyping hebt getest. 

Hoe ziet een prototype eruit? 

Afhankelijk van wat je product is, zou het ontwerp van je prototype redelijk vergelijkbaar moeten zijn met hoe het uiteindelijke ontwerp van het eindproduct eruit zal zien. 

Dit omvat de lettertypen, huisstijl, ontwerpelementen en het UI-ontwerp die je organisatie momenteel gebruikt voor andere apps of webpagina’s. 

Afhankelijk van hoe diepgaand je te werk wilt gaan, kun je interactieve prototypes maken om een beter beeld te krijgen van hoe het voltooide product eruit zal zien. Dit kan klikbare links omvatten waarmee je naar andere delen van het prototype gaat. 

Je kunt ook animaties en overgangen toevoegen om een prototype te maken dat zich veel meer gedraagt als een eindproduct. In sommige gevallen — zoals bij het simuleren van fysieke producten, ruimtelijke indelingen of AR-interfaces — kunnen teams zich wenden tot tools die 3D-prototyping ondersteunen om een levensechter beeld van interactie en beweging te krijgen.

Tools voor prototyping

Enkele van de populairste prototypingsoftware zijn:

• Adobe xd
• Invision
• Sketch
• Figma
• Photoshop

Veel van deze leveranciers bieden gratis prototypingtools of freemiumversies van hun software om je op weg te helpen.

Wat productmanagers moeten weten over prototypes

Dit hangt af van een aantal factoren. 

Als je bij een kleiner bedrijf werkt, vervul je mogelijk meerdere rollen en heb je misschien een idee hoe je een prototype met hoge getrouwheid samenstelt. 

Als je bij een grotere organisatie werkt, is de kans groot dat je teamleden hebt die gespecialiseerd zijn in gebruikerservaring en ontwerp. Dit zijn de teamleden die aan het prototype zouden moeten werken, omdat zij over gespecialiseerde vaardigheden beschikken die daar beter voor geschikt zijn. 

Als je als productmanager aan één vaardigheid gaat werken, besteed dan meer tijd aan wireframing, omdat je dat vaker zult doen. 

De belangrijkste verschillen tussen prototyping en wireframing

Laten we de belangrijkste verschillen tussen prototyping en wireframing samenvatten:

• Een wireframe heeft een lage getrouwheid en kost minder tijd om te maken, terwijl een prototype een hoge getrouwheid heeft en meer tijd kost.
• Een wireframe is meer bedoeld om een overzicht op hoofdlijnen van het productidee over te brengen. Een prototype lijkt op de manier waarop het eindproduct functioneert en zich gedraagt.
• Een wireframe maakt gebruik van tijdelijke aanduidingen en richt zich op de algemene structuur. Een prototype maakt gebruik van het daadwerkelijke ontwerp.
• Wireframes zijn hulpmiddelen om goedkeuring van belanghebbenden te verkrijgen. Met een prototype kun je de gebruikerservaring testen en feedback van gebruikers krijgen op basis van hun interactie. 

Mock-ups: de gulden middenweg

Er zit een zekere kloof tussen een prototype en een wireframe. Om die kloof te overbruggen, moet je ook weten wat mock-ups zijn. 

Hoewel wireframes snel zijn samen te stellen, kan het soms moeilijk zijn om je voor te stellen hoe het eindproduct eruitziet wanneer je alleen grijswaardenblokken en lorem-ipsumtekst hebt. 

Bij een mock-up richt je je erop het visuele ontwerp precies goed te krijgen. Dit gaat niet over gebruikstests of de gebruikerservaring — dat is de prototypefase. Het gaat om het visuele aspect van hoe het eindproduct eruit kan zien — pas wanneer je naar het prototype gaat, kun je je gaan richten op de gebruikersstroom.

Hetzelfde geldt hier voor wat een productmanager over mock-ups moet weten als voor prototypes.

Als je bij een grotere organisatie werkt, heb je ongetwijfeld teamleden die veel beter geschikt zijn voor het ontwerpproces en een mock-up kunnen samenstellen om feedback te verzamelen. (En laat ik duidelijk zijn: feedback is cruciaal om problematisch productontwerp op te sporen.)

Kort gezegd... 

Nu heb je een beter begrip van de verschillen tussen mock-ups en prototypes, evenals van de tussenliggende vorm van mock-ups. 

Je moet hier beoordelen hoe het momenteel met je vaardigheden gesteld is. Als pen en papier voor jou hebben gewerkt, kun je dat blijven doen, of je kunt aan de slag gaan met de vele uitstekende UX-ontwerptools die tot je beschikking staan. 

Onthoud dat er maar zoveel uren in een dag zitten en dat het maken van mock-ups en prototypes meer zal worden overgelaten aan teamleden die gespecialiseerd zijn in het ontwerpproces. Je zult nauw met hen willen samenwerken om iets te creëren met een zo klein mogelijke drempel tussen het prototype en het eindproduct. 

Als je meer ontwerpkennis wilt opdoen, bekijk dan ons overzicht van de webdesignconferenties die dit jaar plaatsvinden. 

Als je meer wilt leren over hoe je een betere productmanager kunt worden, schrijf je dan in voor de nieuwsbrief van The CPO Club.