Skip to main content

Wireframes worden vaak over het hoofd gezien terwijl we ons haasten om nieuwe functies uit te brengen, maar ze kunnen een belangrijk hulpmiddel zijn voor productmanagers om feedback te verzamelen, snel ideeën uit te werken en complexe workflows te prototypen zonder veel extra werk. 

Het grootste deel van mijn loopbaan heb ik me bewogen tussen productmanagement en UX-design. Daarbij heb ik wireframes een belangrijk hulpmiddel gevonden in het productontwerpproces. Ze zijn niet alleen een geweldige manier om ideeën te visualiseren en low-fidelity-prototypes te maken, maar ook om teams op één lijn te krijgen.

Wat is een wireframe?

Balsamiq, de makers van een van de populairste wireframingtools op de markt, omschrijft een wireframe als “een schema of blauwdruk” die jou en je collega’s helpt na te denken over de structuur van wat je aan het bouwen bent.

Continue Reading for Free

Create a free account to finish this article, plus get ongoing access to timely insights and practical resources.

Laten we die definitie wat nader bekijken. Als blauwdruk helpt een wireframe de fundamenten van het uiteindelijke product vast te leggen—of het nu gaat om webpagina’s, mobiele apps of geavanceerde webapplicaties.

In plaats van je te richten op de fijnere details van het gebruikersinterfaceontwerp van je product, zoals kleuren, lettertypen en stijlen, helpt het wireframe de aandacht te verschuiven naar belangrijke structurele aspecten, zoals lay-out, informatiearchitectuur en functionaliteit op hoofdlijnen. Ontwerpelementen zijn natuurlijk belangrijk, maar als je je er te vroeg in het proces op richt, kunnen ze je afleiden van grote structurele problemen die later in het productontwikkelingsproces voor hoofdpijn zorgen.

Wireframe-mock-up uit een Miro-afbeelding
Een wireframe kan je helpen je ideeën te verkennen zonder je te veel op de fijnere details te richten. Deze mock-up is gemaakt in Miro met behulp van hun ingebouwde bibliotheek met wireframingtools. 

Een belangrijk kenmerk van een goed wireframe is dat het low-fidelity is. Dat betekent dat het zo eenvoudig kan zijn als enkele vakken in een samenwerkingstool voor ontwerp, of zelfs een tekening op een whiteboard of wat krabbels op de achterkant van een servet. Plaatshouders voor veel UI-elementen, zoals foto’s en tekst, worden veelvuldig gebruikt, omdat je je richt op de algemene paginalay-out en niet op de specifieke inhoud. 

Wireframes hoeven niet perfect te zijn — ze zijn bedoeld om ruw en flexibel te zijn. 

Productmanagers begrijpen hoe belangrijk het is om betekenis over te brengen, en vaak is de eenvoudigste methode de beste.

Een beeld zegt meer dan duizend woorden, vooral wanneer je te maken hebt met ontwikkelaars in het buitenland en taalbarrières moet overwinnen… echte klikbare prototypes stellen mensen in staat feedback te geven en voorkomen misverstanden in een vroeg stadium.

Bobby L. Johnson Headshot

Wie gebruikt het?

Wireframes zijn een geweldig productmanagementhulpmiddel, omdat ze de vele multidisciplinaire gesprekken waarin PM’s zich bevinden, met elkaar verbinden.

Iedereen in een productteam, waaronder productmanagers, ontwerpers en ontwikkelaars, kan profiteren van het wireframingproces.

In plaats van alle communicatie te concentreren in woorden die verkeerd kunnen worden begrepen, biedt een wireframe een snelle manier om de bedoeling die je voor ogen hebt te zien. Laat mensen zien wat je bedoelt, in plaats van het alleen in tekst uit te leggen.

Hoe diverser je feedback op het wireframe is, hoe meer ideeën je kunt evalueren—of de productmanager, ontwerper of ontwikkelaar het wireframe maakt, zou niet van belang moeten zijn, zolang jullie het allemaal gebruiken om samenwerking op te bouwen. 

Wie is verantwoordelijk voor wireframes?

In sommige organisaties kan het verwarrend zijn om te bepalen wie de wireframes moet maken. Als je team ontwerpers heeft, raad ik aan om te bespreken wie verantwoordelijk moet zijn voor het maken van het wireframe. Uiteindelijk zou het een hulpmiddel moeten zijn dat iedereen gebruikt—het is gewoon een andere manier om ideeën helder te communiceren, wat tot sterkere teams leidt. 

We’ve collected the goods — AI prompts, exclusive deals, and a library of resources for product leaders. Unlock your account for access.

Niet alleen voor interne belanghebbenden

Omdat wireframes als ontwerpen met een lage getrouwheid en als onuitgewerkt worden gezien, kan het gemakkelijk zijn om aan te nemen dat wireframes alleen bedoeld zijn voor interne communicatiedoeleinden, maar vergeet niet dat dit een geweldige manier is om gesprekken met klanten, testers en andere externe belanghebbenden op gang te brengen. 

Waarom zouden productmanagers wireframes gebruiken?

Wireframes vereenvoudigen je communicatie 

Het oude gezegde ‘een beeld zegt meer dan duizend woorden’ klopt helemaal! Schrijven wordt vaak gezien als een cruciale vaardigheid voor productmanagers, en daar ben ik het absoluut mee eens! Uit gewoonte kan het echter vaak onze standaardmethode van communiceren zijn, zelfs wanneer er eenvoudigere manieren bestaan. Door snel een wireframe in elkaar te zetten, kun je enorm veel tijd besparen die je anders aan het schaven aan teksten zou besteden. 

Wireframes helpen je complexe gebruikersstromen te begrijpen

Wireframes bieden je een tastbare manier om ideeën te verkennen die je moet omzetten in gebruikersverhalen of vereisten. Verborgen beperkingen worden zichtbaarder en nieuwe mogelijkheden die anders misschien over het hoofd waren gezien, dienen zich ook aan wanneer je een oplossing op een meer tastbare manier begint te bedenken. 

Wireframes zijn goedkoop

Een fantastisch aspect van wireframes is dat ze jou en het productontwikkelingsteam een zeer laagdrempelige mogelijkheid bieden om ideeën te testen zonder te veel te investeren in ontwerp met een hoge getrouwheid of code van productiekwaliteit.

Als je iets voor je hebt dat ingewikkeld of zelfs riskant lijkt om te bouwen, kies dan voor de goedkope route en zet snel enkele wireframes in elkaar om vroegtijdig gebruikersonderzoek uit te voeren. Dat kan al voldoende zijn om daadwerkelijk te beoordelen of een idee het waard is om in te investeren.

Nog een vaardigheid om je carrière in productmanagement vooruit te helpen

Een goed begrip van beste werkwijzen op het gebied van gebruikerservaring is een belangrijke harde vaardigheid voor een productmanager. Door vertrouwd te raken met wireframes als een extra hulpmiddel dat je kunt gebruiken, kun je je goed verkoopbare vaardigheden op het gebied van productmanagement verder aanscherpen. 

Je vaardigheden op het gebied van het maken van wireframes kunnen potentiële werkgevers laten zien dat je weet hoe je verder komt dan concepten en echte producten ontwikkelt. 

Hoe kunnen productmanagers wireframes effectief gebruiken?

Gebruikersonderzoek en feedback van belanghebbenden

Vroeg in het proces bevestiging voor je ideeën krijgen, is altijd een goede werkwijze. Wireframes maken ideeën tastbaarder en het gemakkelijker voor mensen om feedback te geven tijdens je gebruikersonderzoek. Dit geldt zowel wanneer je feedback verzamelt van interne belanghebbenden als wanneer je rechtstreeks met gebruikers praat.

Laat je er niet van weerhouden feedback te vragen doordat ze er onaf uitzien. Mensen zullen het waarderen dat je in een vroeg stadium van het productontwerpproces hun inbreng vraagt. 

Wireframes geven context aan je specificaties

Veel van de huidige populaire hulpmiddelen voor productontwerp en het maken van wireframes hebben ingebouwde integraties waarmee gebruikersverhalen en vereisten rechtstreeks kunnen worden gekoppeld aan de meest recente versies van je wireframes. Door visuele elementen op te nemen in je specificaties en gebruikersverhalen, kun je extra context aan je woorden geven. Vergeet ze dus niet toe te voegen.

Beste werkwijzen

  • Houd het eenvoudig: Effectief gebruik van wireframes betekent dat je niet te veel investeert in het perfect laten uitzien ervan—je moet niet streven naar een wireframe met een hoge getrouwheid. Als je merkt dat je te veel tijd besteedt aan het toevoegen van verfijning tijdens het maken van je wireframes, neem dan even een pauze en ga er met een frisse blik weer mee aan de slag. Herinner jezelf eraan dat je probeert te zien hoe de belangrijkste onderdelen van een idee kunnen samenkomen. De fijnere details kunnen later komen, naarmate je verder itereert.
  • Moedig anderen aan wireframes te gebruiken: Het kan lastig zijn om de complexiteit van productprocessen te beschrijven. Moedig anderen aan om met wireframes te laten zien wat ze bedoelen, zodat jullie die gewoonte samen kunnen ontwikkelen. Misschien vind je het gemakkelijker om complexe interactieontwerpen of technische problemen te bespreken wanneer jullie allemaal een visueel hulpmiddel gebruiken om het gesprek in realtime te sturen. 

Welke hulpmiddelen voor het maken van wireframes kan ik gebruiken?

Mijn eerste aanbeveling is om te bekijken wat je al tot je beschikking hebt. Papier werkt wanneer je alleen snel een idee wilt noteren, maar wanneer je iets wilt maken dat je eenvoudig kunt bijwerken en met anderen kunt delen, is er gelukkig geen gebrek aan gratis hulpmiddelen voor het maken van wireframes om uit te kiezen.

Dankzij de vele vooraf gebouwde UI-elementen die je kunt slepen en neerzetten, besparen deze hulpmiddelen je veel tijd. De meeste hebben ook sjablonen waarmee je kunt beginnen, zodat zowel beginners als experts op het gebied van het maken van wireframes snel aan de slag kunnen.

Hoewel sommige hulpmiddelen uitsluitend voor het maken van wireframes zijn bedoeld, kunnen ook andere hulpmiddelen voor UI-ontwerp, die worden gebruikt om geavanceerdere interactieve prototypes te maken, hiervoor worden ingezet. Hier volgt slechts een kleine selectie hulpmiddelen die je kunt bekijken:

  • Balsamiq: Een van de oudste en populairste specifieke tools voor draadmodellen is Balsamiq. Ze houden hun tools en visuele elementen bewust eenvoudig, zodat je je meer kunt richten op de functionaliteit waar je aan werkt, in plaats van afgeleid te raken door de opmaak.
  • Figma: Hoewel Figma een geweldige tool is voor het maken van complexe visuele ontwerpelementen, kun je er ook eenvoudig eenvoudigere lay-outs en draadmodellen mee maken.
  • Miro: Hoewel Miro op zichzelf geen ontwerptool is, hanteert het een veel vrijere benadering voor het gebruik van allerlei tools, van plaknotities tot mindmaps. Dankzij de ingebouwde mogelijkheden voor draadmodellen kan het een eenvoudige manier zijn om te beginnen met het maken van draadmodellen met een lage detaillering.
  • Framer – Als je meer nodig hebt dan statische draadmodellen, kun je met Framer interactieve prototypes met animaties en overgangen maken. Het is een geweldige optie voor teams die gebruikersinteracties al vroeg in het ontwerpproces willen testen.

    P.S., Bekijk alternatieven voor Framer en andere softwaretools voor draadmodellen.
  • Whiteboard Als je op kantoor bent, vergeet dan niet dat snelle schetsen op een whiteboard, omringd door je collega's, een snelle en eenvoudige manier kunnen zijn om een idee verder uit te werken! Werk je op afstand? De hierboven genoemde tools zijn geweldig voor virtuele samenwerking!

Gerelateerd artikel: 10 beste tools voor draadmodellen voor het ontwerpen van apps en websites

Draadmodellen kunnen je een sterkere productmanager maken

Veelzijdigheid in je aanpak en de tools die je gebruikt, zorgt er altijd voor dat je een zelfverzekerde en gerespecteerde productmanager wordt. Draadmodellen zijn een belangrijk hulpmiddel in je gereedschapskist, dus vergeet niet ze te gebruiken om je gedachten en ideeën te communiceren en vroeg en regelmatig feedback te verzamelen. 

Door het draadmodel als communicatiemiddel te benaderen, neem je de last weg van de vraag wie er eigenaar van is en richt je de aandacht op wat het belangrijkst is: overeenstemming binnen je teams creëren, feedback verkrijgen en delen, en duidelijkheid bieden aan de mensen met wie je werkt. 

Voor meer inzichten en tips over het ontwikkelen van je vaardigheden als productmanager kun je je abonneren op de nieuwsbrief van The CPO Club.

Gerelateerd artikel: Productmanager in digitale transformatie: zo laat je het werken

Bekijk ook: Beste mock-uptools voor productmanagers