Ik weet zeker dat je hebt gehoord over de voordelen van wireframing tijdens je opleidingen in productmanagement of van collega’s of vakgenoten. Ik neem ook aan dat je hebt geprobeerd een vorm van een wireframingproces in je product te introduceren.
Maar werkt je proces goed? Haal je met de manier waarop je het nu doet het maximale uit je wireframes? Dat hangt uiteindelijk echt af van het proces dat je gebruikt.
Om je te helpen de effectiviteit van je wireframing te vergroten, wil ik mijn ervaring met je delen en je vertellen over een wireframingproces dat ik het beste van allemaal vind.
Wireframing is een essentieel onderdeel van het UX-ontwerpproces
Wireframes zijn visuele representaties op hoofdlijnen van je product, die je kunt gebruiken om te illustreren hoe je wilt dat het product eruitziet en werkt. Met deze visuals kun je je idee testen en verder uitwerken voordat je je engineers vraagt om aan de slag te gaan met het ontwikkelproces — zo bespaar je tijd en geld.
Ik vind de definitie van wireframing door de experts op het gebied van gebruikerservaring bij NN/g erg goed, omdat deze het belangrijkste voordeel ervan duidelijk laat zien.
Snelle en kosteneffectieve techniek om belangrijke bruikbaarheidsproblemen vroegtijdig te identificeren met schetsen en papier. Perfect geschikt voor Agile- en Lean-processen.
Welke methode voor wireframing je ook kiest (tekenen op papier is prima!) of welke wireframingtool je ook besluit te gebruiken (bekijk daarvoor onze lijst met de beste wireframingtools), ik raad je aan dit proces te volgen. Ik heb het gevonden nadat ik vrijwel elk wireframingproces dat er bestaat had uitgeprobeerd.
Stap 1: Zorg dat je je gebruikers goed genoeg kent
Een goed ontwerp begint met een team dat zijn gebruikers goed kent. Wie heeft er tenslotte behoefte aan je ontwerp en het product dat ermee wordt gevisualiseerd als het niet in staat is om goed in de behoeften van de beoogde doelgroep te voorzien? Daarom is gebruikersonderzoek de belangrijkste stap die je moet zetten voordat je met wireframing begint.
In werkelijkheid zou gebruikersonderzoek gedurende de hele levenscyclus van je wireframingproces moeten doorgaan (en ook daarna), maar laten we ons richten op de beginfase waarin je de behoeften en de dagelijkse realiteit van je toekomstige klanten probeert te begrijpen.
Dit zijn enkele belangrijke activiteiten die ik je aanraad om tijdens deze fase uit te voeren:
Verkennende interviews: Wil je weten wat je gebruikers willen? Vraag het ze dan rechtstreeks. Je kunt beginnen met het opstellen van een lijst met vragen die je gebruikers helpen te vertellen over de problemen die ze ervaren en de oplossingen die ze gebruiken om deze problemen op te lossen.
Vervolgens kun je potentiële gebruikers benaderen en werven via sociale media, gespecialiseerde platforms zoals Userinterviews of Respondent, of je kunt ze zelfs ontmoeten op vakbeurzen.
Ten slotte voer je het interview uit met een recorder (zodat je het later kunt analyseren) of met een interviewpartner die naast je zit en aantekeningen maakt.
Opmerking: Idealiter doe je beide.
Enquêtes: Hoewel interviews een geweldige bron van kwalitatieve gegevens zijn die helpen de redenen achter behoeften en gedrag van gebruikers te achterhalen, leveren enquêtes een combinatie van kwalitatieve en kwantitatieve gegevens op. Daarmee kun je bevindingen valideren met statistische significantie.
Ik zal hier niet te veel in detail treden, omdat we een volledige handleiding hebben over vragen voor enquêtes die je kunt bekijken.
Veldonderzoek: In dit geval observeer je je gebruikers in hun ‘natuurlijke omgeving’. Dat betekent dat je virtueel of fysiek aanwezig bent in de omgeving waarin je doelgebruikers de problemen ervaren die je wilt oplossen.
Stel bijvoorbeeld dat je een tool bouwt waarmee het eenvoudig wordt om video’s voor sociale media te bewerken. Bij je veldonderzoek observeer je hoe een influencer op sociale media een TikTok-video opneemt, bewerkt en naar zijn of haar kanaal uploadt.
Hoewel veldonderzoek relatief lastig te organiseren is (niet alle gebruikers zullen zich prettig voelen bij het idee dat je hun dagelijkse activiteiten observeert), levert het je de rijkste context en inzichten over je gebruikers op.
Ontdekworkshops met belanghebbenden: Ja, een geweldige gebruikerservaring wordt opgebouwd rond de behoeften van gebruikers, maar laten we ook je belangrijkste belanghebbenden niet vergeten. Hoewel je gebruikers ook belanghebbenden zijn, gebruik ik deze term voor je oprichters en directie, je investeerders, en alle juridische of toezichthoudende instanties waarmee je moet samenwerken.
Soms neem je ontwerpbeslissingen niet op basis van de behoeften van je gebruikers, maar houd je rekening met:
- Je visie en strategie: De gebruikers van Apple zijn dol op kabels en bekabelde verbindingen, maar de visie van Apple is draadloos — daarom blijven ze poorten verwijderen. (Nu weet je dat!)
- Je juridische omgeving: Een enorme keuze aan cookie-instellingen is niet de meest gebruiksvriendelijke interface, maar het kan iets zijn dat je wettelijk verplicht bent te tonen.
Er is ook een argument voor intuïtie—ondanks dat je je gebruikers goed kent, kun je je eigen intuïtie raadplegen om een bepaalde ontwerpkeuze te maken.
Nu het concept en de soorten onderzoek duidelijk zijn, laten we illustreren hoe dit er in de praktijk uitziet aan de hand van een voorbeeld.
Have an account? Log In
Voorbeeld 1: Een wireframingtool maken voor een UI-professional
Stel je voor dat je verantwoordelijk bent voor het maken van een wireframingtool (iets vergelijkbaars met Balsamiq) en wilt weten hoe je doelgebruikers (in dit geval ontwerpteams) deze precies zullen gebruiken en welke problemen ze hopen op te lossen.
Om dit te achterhalen, kunnen we een vragenlijst opstellen die we tijdens een interview aan onze gebruikers willen stellen. Dit is wat we kunnen opnemen:
Stel nu dat we ontdekken dat de feedback voornamelijk de vorm heeft van een opmerking over een specifiek onderdeel van het productwireframe, en dat de productmanager zijn goedkeuring moet geven voor het wireframeontwerp. Dit zijn twee bevindingen die rechtstreeks invloed hebben op ons ontwerp, omdat we een workflow en gebruikersinterface moeten ontwerpen voor het plaatsen van opmerkingen bij het wireframe en het goedkeuren ervan.
Kortom, het uitvoeren van verkennend onderzoek is het belangrijkste onderdeel van je wireframingproces en ik raad je niet aan dit over te slaan. Nu je alle inzichten bij de hand hebt, gaan we verder met de volgende stap in ons wireframingproces.
Stap 2: Bouw je gebruikersflows
Voordat je de schermen/pagina's zelf maakt en je componenten zoals formulieren, kaarten, afbeeldingen, knoppen enzovoort erop plaatst, moet je de volgorde begrijpen van de stappen waarvan je verwacht dat je gebruikers die zullen doorlopen.
Deze reeksen worden ook wel gebruikersflows genoemd en vertegenwoordigen alle mogelijke paden die je gebruikers kunnen volgen om hun doelen te bereiken. Deze doelen kunnen iets gewoons en “administratiefs” zijn, zoals zich registreren of hun wachtwoord wijzigen, of je kernfuncties vertegenwoordigen (zoals zoeken naar en streamen van muziek bij Spotify).
Hoe dan ook, het opbouwen van gebruikersflows is belangrijk, omdat het je helpt alle schermen/pagina's die je wilt ontwerpen beter te visualiseren, evenals de inhoud die je voor elk scherm nodig hebt.
Om de flows beter te begrijpen, laat ik je er een zien met behulp van de stroomdiagramtool Flowmapp.
Voorbeeld 2: Een gebruikersflow van een webdesigntool visualiseren met Flowmapp
Stel dat je een webdesigntool met slepen en neerzetten bouwt, zoals Webflow. Je gebruikers zijn webdesigners die zonder code werken en je wilt de stappen visualiseren die ze zullen nemen om een achtergrondafbeelding aan hun webpagina toe te voegen.
Zo ziet een gebruikersflow voor die functie eruit in Flowmapp:
Zoals we kunnen zien, ligt bij een gebruikersflow de nadruk meer op de acties die de gebruiker uitvoert en de volgorde/causaliteit daartussen dan op de pagina's en hun ontwerp.
In dit voorbeeld willen we dat de gebruiker een afbeelding uit de galerij kan selecteren of er een naar de galerij kan uploaden/toevoegen. We willen ook dat de gebruiker een voorbeeld van de afbeelding kan bekijken voordat onze tool deze als achtergrond van de webpagina van onze gebruiker toepast.
Door hier naar de flow te kijken, begrijpen we dat de gebruiker op dezelfde pagina blijft—de webpagina-editor—en misschien een ander scherm ziet met de afbeeldingengalerij in de vorm van een pop-up.
Er is dus een pagina en een pop-up die we moeten ontwerpen met relevante ontwerpelementen en functies.
Nu we een overzicht hebben van de stappen die gebruikers nemen om hun doelen in ons product te bereiken, kunnen we eindelijk beginnen met het daadwerkelijke wireframen.
Stap 3: Begin met een wireframe met lage getrouwheid
Ja, het maken van een wireframe is de derde stap in dit wireframingproces. Geloof me echter: als je de vorige twee stappen uitvoert, breng je de kwaliteit van je wireframe naar een heel nieuw niveau en het is absoluut de moeite waard om er tijd aan te besteden.
Wat het wireframe zelf betreft, raad ik je aan om te beginnen met een wireframe met lage getrouwheid. Een wireframe met lage getrouwheid bevat geen specifieke details, zoals de juiste kleuren/groottes en andere ontwerpkenmerken van je pagina's en schermen. Het bevat ook geen echte afbeeldingen en tekst. In plaats daarvan gebruik je voor beide plaatshouders.
En er is een goede reden waarom een wireframe met lage getrouwheid er zo uitziet en waarom je hiermee zou moeten beginnen—wireframes met lage getrouwheid zijn snel te maken en aan te passen.
De kans is groot dat je iets belangrijks in je ontwerp over het hoofd hebt gezien. Wanneer je er feedback op verzamelt (daar gaan we in de volgende stap uitgebreid op in), kom je er misschien achter dat er veel onderdelen/stromen moeten worden aangepast.
Als je een volledig ontwerp had gehad, zou het aanpassen hiervan dagen hebben gekost. Maar met een wireframe met lage getrouwheid kun je je wijzigingen doorvoeren en je ontwerp binnen een paar uur of minder opnieuw aan feedback onderwerpen.
Nu we wireframes met lage getrouwheid zo uitgebreid hebben geprezen, bekijken we hoe ze eruitzien met behulp van een populaire wireframetool—Balsamiq.
Voorbeeld 3: Een wireframe voor een website maken
Het mooie van ontwerptools die gespecialiseerd zijn in wireframing, vooral wireframes met lage getrouwheid, is dat je niet elk element vanaf nul hoeft te tekenen.
In plaats daarvan worden ze meestal geleverd met allerlei vooraf gemaakte basisinterface-elementen (bijv. afbeeldingen, menu's, broodkruimelnavigatie, knoppen enzovoort), samen met bedieningselementen voor slepen en neerzetten, zodat je bijzonder snel kunt ontwerpen. Hier zie je een voorbeeld dat ik met Balsamiq heb gemaakt.
Gezien de aard van wireframes met lage getrouwheid zijn ze meestal grijswaarden of bevatten ze slechts minimale kleur en visueel ontwerp. In plaats daarvan zie je alleen de algemene uitstraling van UI-elementen in je ontwerp, evenals hun plaatsing en informatiearchitectuur.
Als je wireframe met lage getrouwheid klaar is, is het tijd om het aan je eerste beoordelingsronde te onderwerpen.
Stap 4: Je ontwerp met lage getrouwheid intern itereren
Voordat we tijd en moeite investeren in het maken van het definitieve productontwerp, laten we er maar van uitgaan dat we veel dingen verkeerd hebben gedaan of vergeten zijn mee te nemen in het ontwerp en beginnen we ons wireframe met lage getrouwheid aan onze collega's en belanghebbenden te tonen.
Natuurlijk zou je dit ontwerp ook aan je gebruikers kunnen laten zien. Maar gezien hoe moeilijk het is om gebruikers te werven die bereid zijn je ontwerp te beoordelen of op bruikbaarheid te testen, raad ik je aan hun kostbare tijd te gebruiken voor het bekijken van ontwerpen met een hogere getrouwheid en hun tijd niet te verspillen aan het aanwijzen van problemen die je collega's gemakkelijk hadden kunnen vinden.
Ik raad echter wel aan om je belanghebbenden in deze fase te betrekken. Twee belangrijke redenen hiervoor zijn:
- De “afstand” tussen hen en de teamleden die het product bouwen verkleinen door hen vanaf de vroege fasen te betrekken.
- Ontwerpproblemen met betrekking tot strategische afstemming in een vroeg stadium oplossen om later tijd te besparen.
Zodra je feedback van je collega's en belanghebbenden hebt verzameld, kun je tot slot je wireframe met lage getrouwheid op basis daarvan aanpassen, de aanpassingen met hen valideren en doorgaan met het maken van het daadwerkelijke visuele ontwerp voor je product.
Stap 5: Een wireframe met hoge getrouwheid en een klikbaar prototype maken
Nu je een goed begrip hebt van hoe je ontwerp er op hoofdlijnen uit zal zien, kun je veilig investeren in het creëren van de visuele onderdelen van je ontwerp en het naar een staat brengen waarin het er zo veel mogelijk uitziet als wat je van plan bent te bouwen.
In deze ontwerpfase bevat je digitale wireframe:
- Je UI-ontwerp: inclusief de juiste kleuren, schaduwen, typografie en lettertypen, marges enzovoort.
- Je visuele inhoud: als je afbeeldingen, illustraties, video's of andere grafische elementen op je pagina's wilt gebruiken, voeg je die nu toe.
- De tekst op je pagina: hiermee bedoelen we de tekst op je UI-elementen, knoppen, kopteksten enzovoort.
- Een voorbeeld van je inhoud: als je ontwerp door gebruikers gegenereerde inhoud of eigen inhoud bevat, moet je daar ook een voorbeeldversie van toevoegen. (Bijvoorbeeld het ontwerp van een reactie onder een bericht met de gebruikelijke lengte en inhoud van een reactie die je echte gebruikers zouden plaatsen.)
Naast het feit dat het de belangrijkste oplevering is voor je ontwikkelingsteam, dat je product op basis van het ontwerp zal bouwen, kan het wireframe met hoge getrouwheid ook dienen als een uitstekend hulpmiddel voor bruikbaarheidstests met je echte gebruikers.
Je kunt het wireframe met hoge getrouwheid zelf voor de test gebruiken of het naar een hoger niveau tillen door er interactieontwerp aan toe te voegen en het om te vormen tot een klikbaar prototype.
Het is heel gemakkelijk om de termen die ik hier heb besproken door elkaar te halen (draadmodellen met hoge getrouwheid, interactieve prototypes enzovoort). Daarom zal ik ze voor je verduidelijken en ook een paar voorbeelden laten zien.
Verschillende soorten draadmodellen onderscheiden: mock-ups versus draadmodellen met hoge getrouwheid versus klikbare prototypes
Deze drie concepten lijken behoorlijk veel op elkaar en helaas gebruiken mensen ze door elkaar, wat voor verwarring zorgt bij mensen die nog relatief nieuw zijn in productontwikkeling en ontwerp.
Dit is wat elke term betekent:
Draadmodel met hoge getrouwheid: We hebben dit hierboven al aangestipt. Laat me daarom in plaats daarvan laten zien hoe het eruitziet.
Dit overtuigende ontwerp is bedoeld voor een dienst waarmee je privékoks kunt inhuren om hoogwaardige gerechten voor je te bereiden. Zoals we kunnen zien, bevat dit ontwerp alles: van definitieve afbeeldingen tot kleuren en posities. Er staat ook wat “lorem ipsum”-tekst in om de testimonial van een professionele chef-kok op de pagina weer te geven.
Mock-up: In tegenstelling tot zijn tegenhanger bevat de mock-up niet alleen het definitieve ontwerp, maar laat deze ook de omgeving zien waarin dat ontwerp verschijnt. Generatoren voor productmock-ups kunnen helpen bij het maken van deze contextuele beelden. Als je bijvoorbeeld briefpapier ontwerpt, zou een mock-up een vel papier op een tafel tonen met jouw ontwerp erop.
In het geval van een mobiele app toont je mock-up het silhouet van een iPhone of Android-apparaat, waarbij jouw ontwerp op het scherm verschijnt.
Prototype: Het prototype ziet eruit als een draadmodel met hoge getrouwheid, maar naast het uiteindelijke uiterlijk probeert het ook de functionaliteit van het product na te bootsen.
Met klikbare prototypes of 3D-prototypingtools kun je basisinteracties toevoegen, zoals scrollen, animaties, klikken op knoppen, navigeren binnen de app enzovoort.
Door de interactiviteit van je product na te bootsen, stellen prototypes je in staat om te testen hoe je wilt dat je functies werken voordat je ze ontwikkelt.
Bovendien kun je gebruikerstests uitvoeren door je prototypes met hoge getrouwheid aan je gebruikers te geven en te observeren hoe ze met je product omgaan, hun problemen oplossen of hun weg proberen te vinden in je ontwerp.
Draadmodellen maken draait om testen en iteratie
Door het iteratieve karakter van draadmodellen bespaar je enorm veel moeite bij het herstellen van je fouten. Bovendien zorg je er door een draadmodelproces als dit te doorlopen voor dat je gebruikers een product krijgen dat zo goed mogelijk in hun behoeften voorziet.
Gebruik je binnen jouw bedrijf een ander proces voor het maken van draadmodellen? Ik ben benieuwd, dus laat hieronder een reactie achter en vertel ons hoe je het doet!
Ik hoop dat je deze gids nuttig vond en ervan hebt genoten. Bekijk ook zeker andere gidsen over productmanagement, geschreven door enkele van de beste professionals in het vakgebied, zoals:
- Het verschil tussen productvisie en productstrategie door Kerstin Exner.
- De 3 P’s van productontwikkeling door Benoit des Ligneris.
- Documenten met productvereisten door Sarah Tolle.
Tot slot kun je je abonneren op onze nieuwsbrief, en dan sturen we ook boeiende content naar je inbox.