Draadmodelleerproces in 5 stappen voor betere producten
Ik weet zeker dat je hebt gehoord over de voordelen van wireframing, tijdens je productmanagementopleiding of van collega's of vakgenoten. Ik neem ook aan dat je hebt geprobeerd een bepaalde vorm van een wireframingproces in je product te introduceren.
Maar werkt je proces goed? Kun je met de manier waarop je het nu doet het maximale uit je wireframes halen? Dat hangt eigenlijk volledig 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 vind dat er is.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
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 verfijnen voordat je je engineers vraagt om aan de slag te gaan en het ontwikkelproces te starten. 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 laat zien dat wireframing je oplevert.
Snelle en kosteneffectieve techniek om belangrijke bruikbaarheidsproblemen vroegtijdig te identificeren met schetsen en papier. Perfect geschikt voor Agile- en Lean-processen.
Welke wireframingmethode je ook kiest (tekenen op papier is prima!) en 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 dit proces gevonden nadat ik vrijwel elk wireframingproces dat er bestaat had geprobeerd.
Stap 1: Zorg ervoor dat je je gebruikers goed genoeg kent
Goed ontwerp begint met een team dat zijn gebruikers goed kent. Want wie heeft er iets aan je ontwerp en het product dat het visualiseert als het niet in staat is om goed in de behoeften van de beoogde mensen te voorzien? Daarom is de belangrijkste stap die je moet zetten voordat je met wireframing begint: gebruikersonderzoek.
In werkelijkheid moet gebruikersonderzoek gedurende de volledige levenscyclus van je wireframingproces doorgaan (en ook daarna), maar laten we ons richten op de beginfase waarin je probeert de behoeften en de dagelijkse realiteit van je toekomstige klanten te begrijpen.
Hier 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 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 ze zelfs ontmoeten op vakbeurzen.
Tot slot voer je het interview uit met een opnameapparaat (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 ontdekken, leveren enquêtes een mix van kwalitatieve en kwantitatieve gegevens op. Daarmee kun je bevindingen valideren met statistische significantie.
Ik zal hier niet al 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 diens kanaal uploadt.
Hoewel veldonderzoek relatief moeilijk te organiseren is (niet alle gebruikers zullen zich prettig voelen bij het feit dat je hun dagelijkse activiteiten observeert), biedt het je de rijkste context en de meeste inzichten in je gebruikers.
Ontdekkingsworkshops met belanghebbenden: Ja, een geweldige gebruikerservaring wordt opgebouwd rond de behoeften van gebruikers, maar laten we je belangrijkste belanghebbenden niet vergeten. Hoewel je gebruikers ook belanghebbenden zijn, gebruik ik deze term voor je oprichters en directie, je investeerders, juridische of regelgevende instanties waarmee je moet samenwerken, enzovoort.
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 het!)
- Je juridische omgeving: Een enorme selectie cookieopties is niet de meest gebruiksvriendelijke interface, maar het is iets wat je wettelijk verplicht kunt zijn om te tonen.
Er valt ook iets te zeggen 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 met een voorbeeld illustreren hoe dit er in de praktijk uitziet.
Voorbeeld 1: Een wireframe-tool maken voor een UI-ontwerper
Stel je voor dat je verantwoordelijk bent voor het maken van een wireframe-tool (iets vergelijkbaars met Balsamiq) en wilt weten hoe je doelgebruikers (in dit geval ontwerpteams) deze precies zullen gebruiken en welke problemen ze ermee hopen op te lossen.
Om dit te achterhalen, kunnen we een vragenlijst opstellen die we tijdens een interview aan onze gebruikers willen voorleggen. Dit kunnen we erin opnemen:
Stel je nu voor dat we ontdekken dat de terugkoppeling voornamelijk de vorm heeft van een opmerking over een specifiek onderdeel van het productwireframe en dat de productmanager zijn goedkeuring moet geven voor het wireframed ontwerp. Dit zijn twee bevindingen die rechtstreeks van invloed zijn op ons ontwerp, omdat we een werkproces en gebruikersinterface moeten ontwerpen voor het plaatsen van opmerkingen bij en goedkeuren van het wireframe.
Kortom, het uitvoeren van verkennend onderzoek is het belangrijkste onderdeel van je wireframeproces en ik raad je niet aan dit over te slaan. Nu je alle inzichten tot je beschikking hebt, gaan we door naar de volgende stap in ons wireframeproces.
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 die je verwacht dat je gebruikers zullen nemen.
Deze reeksen staan ook bekend als gebruikersflows en vertegenwoordigen alle mogelijke paden die je gebruikers kunnen volgen om hun doelen te bereiken. Deze doelen kunnen iets gewoons en “administratiefs” zijn, zoals 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 in elk ervan nodig hebt.
Om de flows beter te begrijpen, laat ik je er een zien met 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 zij 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 de nadruk in een gebruikersflow meer op de acties die de gebruiker uitvoert en de volgorde/causaliteit daartussen dan op de pagina's en het ontwerp ervan.
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 waarop de afbeeldingsgalerij als pop-up wordt weergegeven.
Daarom zijn er 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 eenvoudig wireframe
Ja, het maken van een wireframe is de derde stap in dit wireframeproces. Geloof me echter: als je de vorige twee stappen uitvoert, til 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 te beginnen met een eenvoudig wireframe. Een eenvoudig wireframe bevat geen specifieke details zoals de juiste kleuren/afmetingen en andere ontwerpeigenschappen van je pagina's en schermen. Het bevat ook geen echte afbeeldingen en tekst. In plaats daarvan gebruik je voor beide plaatshouders.
En daar is een goede reden voor waarom een eenvoudig wireframe er zo uitziet en waarom je ermee zou moeten beginnen: eenvoudige wireframes zijn snel te maken en te bewerken.
De kans is groot dat je iets belangrijks in je ontwerp over het hoofd hebt gezien. Wanneer je er feedback op verzamelt (we bespreken dit in detail in de volgende stap), kom je er misschien achter dat er veel onderdelen en gebruikersstromen moeten worden aangepast.
Als je een volledig uitgewerkt ontwerp had gehad, zouden deze wijzigingen je dagen hebben gekost. Maar met een eenvoudig wireframe kun je je wijzigingen doorvoeren en je ontwerp binnen een paar uur of minder opnieuw voor feedback voorleggen.
Nu we eenvoudige wireframes zo uitgebreid hebben geprezen, kijken we eens hoe ze eruitzien met een populaire tool voor het maken van wireframes: Balsamiq.
Voorbeeld 3: Een wireframe voor een website maken
Het mooie van ontwerptools die gespecialiseerd zijn in het maken van wireframes, vooral eenvoudige wireframes, is dat je niet elk element vanaf nul hoeft te tekenen.
In plaats daarvan bevatten ze meestal allerlei vooraf gemaakte basisinterface-elementen (zoals afbeeldingen, menu’s, broodkruimelnavigatie, knoppen, enzovoort), samen met bedieningselementen voor slepen en neerzetten, zodat je bijzonder snel kunt ontwerpen. Hier is een voorbeeld dat ik met Balsamiq heb gemaakt.
Gezien de aard van eenvoudige wireframes zijn ze meestal uitgevoerd in grijstinten of bevatten ze slechts weinig kleur en visueel ontwerp. In plaats daarvan zie je alleen het algemene uiterlijk van de interface-elementen in je ontwerp, evenals hun plaatsing en informatiestructuur.
Als je eenvoudige wireframe nu klaar is, is het tijd om het voor je eerste beoordelingsronde voor te leggen.
Stap 4: Verbeter je eenvoudige ontwerp intern
Voordat we tijd en moeite investeren in het maken van het uiteindelijke productontwerp, kunnen we er redelijkerwijs van uitgaan dat we veel dingen verkeerd hebben gedaan of in het ontwerp zijn vergeten mee te nemen. Daarom beginnen we ons eenvoudige wireframe aan onze collega’s en belanghebbenden te laten zien.
Natuurlijk kun je dit ontwerp ook aan je gebruikers 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 meer gedetailleerde ontwerpen en die niet te verspillen aan het aanwijzen van problemen die je collega’s gemakkelijk hadden kunnen vinden.
Ik raad echter wel aan om je belanghebbenden bij deze fase te betrekken. Twee belangrijke redenen hiervoor zijn:
- De “afstand” verkleinen tussen hen en de teamleden die het product bouwen door hen vanaf de beginfase te betrekken.
- Ontwerpproblemen met betrekking tot strategische afstemming in een vroeg stadium oplossen, zodat je later tijd bespaart.
Zodra je feedback van je collega’s en belanghebbenden hebt verzameld, kun je je eenvoudige wireframe op basis daarvan aanpassen, de wijzigingen met hen valideren en verdergaan met het maken van het daadwerkelijke visuele ontwerp voor je product.
Stap 5: Bereid een gedetailleerd wireframe en een klikbaar prototype voor
Nu je goed begrijpt hoe je ontwerp er op hoofdlijnen uit zal zien, kun je veilig investeren in het maken van de visuele onderdelen van je ontwerp en het naar een staat brengen waarin het zoveel mogelijk lijkt op wat je van plan bent te bouwen.
In deze ontwerpfase bevat je digitale wireframe het volgende:
- Je interfaceontwerp: met 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 interface-elementen, knoppen, koppen 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 omvang en inhoud van een reactie die je echte gebruikers zouden plaatsen.)
Naast het belangrijkste opleveringsonderdeel voor je engineeringteam, dat op basis van het ontwerp je product zal bouwen, kan het gedetailleerde wireframe ook dienen als een uitstekend hulpmiddel voor bruikbaarheidstests met je daadwerkelijke gebruikers.
Je kunt het gedetailleerde wireframe 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 (gedetailleerde wireframes, interactieve prototypes enzovoort). Daarom zal ik ze voor je verduidelijken en ook een paar voorbeelden laten zien.
Verschillende typen wireframes onderscheiden: mock-ups versus gedetailleerde wireframes versus klikbare prototypes
Deze drie concepten lijken behoorlijk veel op elkaar en helaas gebruiken mensen ze door elkaar, wat verwarring veroorzaakt bij mensen die relatief nieuw zijn op het gebied van productontwikkeling en design.
Dit is wat elke term betekent:
Draadmodel met hoge getrouwheid: Deze hebben we hierboven al behandeld. Laat me daarom in plaats daarvan laten zien hoe het eruitziet.
Dit aansprekende ontwerp is voor een dienst waarmee je privékoks kunt inhuren om exclusieve gerechten voor je te bereiden. Zoals we kunnen zien, bevat dit ontwerp alles: van de uiteindelijke afbeeldingen tot de kleuren en posities. Er staat ook een beetje tekst met “lorem ipsum” in om de getuigenis van een professionele chef-kok op de pagina weer te geven.
Proefmodel: In tegenstelling tot zijn tegenhanger bevat het proefmodel niet alleen het uiteindelijke ontwerp, maar laat het ook de omgeving zien waarin dat ontwerp verschijnt. Als je bijvoorbeeld briefpapier ontwerpt, zou een proefmodel een vel papier op een tafel laten zien met jouw ontwerp erop.
In het geval van een mobiele app laat je proefmodel het silhouet van een iPhone of Android-apparaat zien, met jouw ontwerp op het scherm.
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-prototypetools kun je basisinteractie 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 bekijken hoe ze met je product omgaan, hun problemen oplossen of proberen hun weg door je ontwerp te vinden.
Draadmodelleren is een proces van testen en itereren
Door het iteratieve karakter van draadmodellen hoef je enorm veel minder moeite te besteden aan het herstellen van je fouten. Bovendien zorg je er door een proces van draadmodelleren als dit te doorlopen voor dat je gebruikers een product krijgen dat zo goed mogelijk in hun behoeften voorziet.
Gebruik je in 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 interessant en nuttig vond. 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 aansprekende content naar je inbox.
