Een complete handleiding voor het maken van zeer natuurgetrouwe wireframes
Producten "wireframen" om feedback te verzamelen voordat je investeert in een volledige bouw, is een veel oudere praktijk dan de meesten van ons beseffen. Zelfs in de middeleeuwen maakten ingenieurs (als ze toen zo werden genoemd) prototypeversies van gereedschappen en voorwerpen en toonden die aan hun heren voordat ze met massaproductie begonnen.
De moderne softwarewereld heeft dit proces vanzelfsprekend ook overgenomen. In tegenstelling tot het bouwen van een prototypeversie van een product, stellen moderne tools voor wireframing en prototyping ons echter in staat om het prototype in een nog eerdere fase te testen—terwijl het nog wordt ontworpen.
De focus van vandaag ligt op het belangrijkste onderdeel van het bouwen van softwareprototypes: het wireframe met hoge getrouwheid dat interactiviteit mogelijk maakt en een concept tot leven brengt.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Wireframes met hoge getrouwheid begrijpen
Voordat ik uitleg wat wireframes met hoge getrouwheid zijn, wil ik eerst kort ingaan op het concept van de getrouwheid van wireframes zelf.
Getrouwheid verwijst naar het detailniveau dat je opneemt wanneer je het wireframe van je product bouwt. Dit kunnen visuele details zijn, zoals de kleuren van UI-componenten die je huisstijl vertegenwoordigen, of afbeeldingen die op dat scherm horen te staan (bijvoorbeeld productfoto's in de zoekresultaten van een e-commercesite).
Naast visuele aspecten is er ook inhoudelijke getrouwheid. Dit is wanneer je tijdelijke tekst/inhoud gebruikt (bijvoorbeeld lorem ipsum) of echte inhoud (productnamen en beschrijvingen).
Afhankelijk van de getrouwheid van je wireframe gebruik je visuele elementen in grijstinten met een generieke uitstraling en tijdelijke inhoud (lage getrouwheid), of een merkkleurenschema met elementen uit je ontwerpsysteem en echte inhoud (hoge getrouwheid).
Zo zien ze er naast elkaar uit.
Hoewel je misschien denkt dat wireframes met hoge getrouwheid de voor de hand liggende keuze zijn wanneer je deze twee vergelijkt, is dat niet altijd het geval. De kracht van mock-ups met lage getrouwheid zit in de snelheid waarmee je ze kunt ontwerpen, testen met gebruikers en itereren.
In de zeer vroege fasen van je ontwerp heb je daarom meestal een paar iteraties met een wireframe met lage getrouwheid voordat je verdergaat met het maken van een wireframe met hoge getrouwheid.
Voordelen van wireframes met hoge getrouwheid
Wireframes met hoge getrouwheid kosten weliswaar meer tijd om te maken, maar vormen een zeer waardevol onderdeel van je ontwerpproject omdat ze een breed scala aan voordelen bieden. Hier zijn er enkele:
- Betere communicatie: Mensen zijn visueel ingesteld en begrijpen het ontwerp beter als je de juiste kleuren, elementen en inhoud gebruikt. De kans is dus groot dat dezelfde persoon je wireframe met lage getrouwheid goedkeurt, maar problemen ontdekt en feedback geeft wanneer diegene het wireframe met hoge getrouwheid voor het eerst ziet.
- Beter gebruikersonderzoek: De kwaliteit van de feedback die je van je gebruikers krijgt, verbetert wanneer je de echte inhoud laat zien zoals die in het uiteindelijke ontwerp zal verschijnen. Een pagina met zoekresultaten ziet er in een wireframe met lage getrouwheid uit als een lijst met grijze vakken. Je kunt niet zeggen of de elementen op die pagina gemakkelijk te scannen zijn totdat je echte afbeeldingen en tekst ziet.
- Prototyping: Klikbare prototypes zijn vreselijk wanneer ze op wireframes met lage getrouwheid zijn gebaseerd. Prototypes met hoge getrouwheid zien er daarentegen vrijwel hetzelfde uit als het uiteindelijke ontwerp en zijn goed genoeg om met gebruikers in een vroeg stadium te delen.
- Communicatie tussen engineering- en ontwerpteam: Je kunt je wireframes met hoge getrouwheid delen met je ontwikkelingsteam om ook vroegtijdig feedback van hen te krijgen over implementatie-uitdagingen en aandachtspunten. Ze bevatten het benodigde detailniveau om ontwikkelaars te laten begrijpen hoe ze het zullen bouwen en met welke problemen ze mogelijk te maken krijgen.
Tot slot kunnen wireframes met hoge getrouwheid jou en je collega-ontwerpers de uiteindelijke uitstraling en werking van je product laten zien, zodat je inconsistenties in het ontwerp of andere visuele problemen kunt ontdekken die je moet oplossen voordat je je gebruikersinterface opnieuw laat testen.
Tools en software voor wireframing met hoge getrouwheid
Hoewel je wireframes met lage getrouwheid technisch gezien op een vel papier of een whiteboard kunt maken, heb je voor het maken van een wireframe met hoge getrouwheid geen andere keuze dan een gespecialiseerd ontwerpprogramma voor producten te kiezen.
Laten we daarom enkele populaire opties bekijken, zodat je er een kunt kiezen en hun mogelijkheden kunt begrijpen.
Figma
Figma is marktleider op het gebied van digitaal productontwerp: meer dan 40% van alle ontwerpers van gebruikerservaringen kiest het voor prototyping, gebruikersstromen en wireframeontwerpen.
Platform: web, desktopcomputer (MacOS, Windows)
Waar het in uitblinkt: samenwerking in realtime tussen ontwerpers, managers en ontwikkelaars, evenals ondersteuning voor meerdere platforms.
Wat functies betreft, wil ik het volgende over Figma benadrukken:
Samenwerking: Met Figma kunnen meerdere teamleden tegelijkertijd aan hetzelfde bestand werken. Je kunt de cursors zien van iedereen die het ontwerpbestand bekijkt of bewerkt, opmerkingen achterlaten en in realtime chatten met een klein berichtenvenster dat naast je cursor wordt geopend.
Ondersteuning voor ontwerpsystemen en componenten: Je kunt herbruikbare componenten maken in Figma (waaronder meerdere toestanden daarvoor) en een volledig ontwerpsysteem definiëren met behulp van je richtlijnen en componenten.
Prototyping: Je kunt je ontwerpen omzetten in klikbare prototypes die gebruikers kunnen doorlopen om te begrijpen hoe het zou zijn om je product te gebruiken. Hoewel het niet het meest geavanceerde prototypesysteem is dat er bestaat, biedt het nog steeds behoorlijk veel mogelijkheden.
Sketch
Sketch was vóór de opkomst van Figma dé ontwerptool bij uitstek en is een populair alternatief voor Framer en andere populaire ontwerptools. Sommigen speculeren dat de exclusiviteit voor Mac een van de redenen was waarom deze verder uitstekende tool zijn kroon verloor.
Platforms: macOS
Waar het in uitblinkt: Sketch is dankzij de uitgebreide ondersteuning voor plug-ins zeer aanpasbaar, waardoor het een uitstekende keuze is voor gespecialiseerde ontwerpbehoeften.
Laten we nu kijken naar de meest opvallende functies van Sketch.
Bewerken van vectoren: In vergelijking met de rest heeft Sketch naar alle waarschijnlijkheid de krachtigste tool voor het bewerken van vectoren op de markt, inclusief ondersteuning voor booleaanse en overeenkomstoperatoren voor het definiëren van je vormen.
Webvoorbeeld: Hoewel Sketch geen volledige editor is, beschikt het wel over een webapp voor het bekijken van ontwerpen, het overdragen van middelen aan ontwikkelaars en het testen van prototypes.
Prototyping: De prototypingmogelijkheden van Sketch zijn vergelijkbaar met die van Figma. Ook hier kun je je tekenvlakken via een stroom met elkaar verbinden, elementen klikbaar maken en meer.
Adobe XD
Dit is het antwoord van softwaregigant Adobe op de felle concurrentie op de markt voor wireframes en UI/UX-ontwerp.
Platforms: macOS, Windows
Waar het in uitblinkt: Adobe XD is volledig geïntegreerd in hun Creative Cloud, waardoor je ontwerpen en middelen uit andere Adobe-tools en meer naadloos kunt importeren.
Nadat ik met de mogelijkheden van deze tool had geëxperimenteerd, zijn dit nog enkele punten die het vermelden waard zijn:
Prototyping: Adobe XD onderscheidt zich door zijn mogelijkheid om micro-interacties te prototypen, naast de standaardmogelijkheden voor prototyping.
Animaties: Omdat Adobe deel uitmaakt van het bedrijf dat After Effects heeft gemaakt, is het niet verrassend dat Adobe XD geavanceerdere mogelijkheden biedt voor het animeren van UI-elementen.
Samenwerking: Hoewel Adobe XD niet zo geavanceerd is als Figma, kunnen meerdere mensen het ontwerp tegelijkertijd bewerken.
Axure RP
Terwijl de andere tools algemene UI/UX-ontwerptools waren die ook wireframes en prototypes maakten, is deze tool specifiek gericht op dat laatste.
Platforms: macOS, Windows
Waar het in uitblinkt: Als gespecialiseerde tool kan Axure RP prototyping uitbreiden met complexe interacties en gebruikersreizen.
Laten we nu eens kijken naar de functionaliteit die deze tool biedt:
Geavanceerde logica: In plaats van simpelweg “klik om het volgende tekengebied te openen”, kan Axure RP complexe logica aan prototypes toevoegen. Dat betekent dat je menu’s kunt openen en items kunt selecteren, waarna het ontwerp en de inhoud dynamisch veranderen op basis van je selectie of andere vergelijkbare acties.
Documentatie voor overdracht: Hoewel vrijwel alle hier genoemde producten een overdrachtsfunctie voor ontwikkelaars hebben, is Axure RP de enige optie waarmee je zeer gedetailleerde documentatie kunt maken waarin je ontwerp en logica worden beschreven.
Stroomdiagrammen: Naast het ontwerpen van het hogegetrouwe wireframe kun je Axure RP ook gebruiken om stroomdiagrammen te maken die de gebruikersreis en de bedrijfslogica achter je ontwerp beschrijven.
Kortom, er is geen duidelijke winnaar onder de “beste tool voor hogegetrouwe wireframes”. De tools die hier worden genoemd, evenals de tools in ons zorgvuldig samengestelde overzicht van UX-ontwerptools, hebben zowel sterke als zwakke punten. Het is dus vooral een kwestie van voorkeur, afhankelijk van welke aspecten voor jou en je team het belangrijkst zijn.
Beste werkwijzen voor het maken van hogegetrouwe wireframes
Wanneer je eindelijk het punt in je ontwerpproces hebt bereikt waarop het tijd is om dit type wireframe te ontwikkelen, zorg er dan voor dat je deze tips volgt om zoveel mogelijk waarde uit je hi-fi-mock-up te halen.
Beste werkwijzen voor het wireframeproces
- Zorg ervoor dat je gebruikerspersona actueel is. Je hebt al een versie van een persona die je hebt gebruikt om je eerste lo-fi-ontwerp te maken. Deze persona is echter waarschijnlijk verouderd, omdat je al enkele testrondes met deze persoon hebt uitgevoerd en veel nieuwe aspecten van diens persoonlijkheid en behoeften hebt ontdekt.
- Bekijk alle eerdere feedback van gebruikers voordat je aan het hogegetrouwe wireframe begint. De kans is groot dat er feedback was die je van gebruikers kreeg bij het beoordelen van de lo-fi-versie en die je op dat moment niet relevant vond, maar die nu zeer relevant wordt.
- Een wireframe kent niet zoiets als een “definitieve versie”. Maak je niet te druk om de kleine details. Werk in plaats van wekenlang aan het gedetailleerde wireframe aan een paar wijzigingen en probeer het uit. Hoe korter de cyclus waarin je team ontwerpideeën toevoegt en gebruikers deze testen, hoe sneller je het punt bereikt waarop je wireframe klaar is om een definitief ontwerp te worden.
- Maak gebruik van de componenten en sjablonen van je ontwerpsysteem. Er is geen prijs voor helemaal opnieuw beginnen! Door deze sjablonen te gebruiken bespaar je veel tijd en zal het resultaat er zo veel mogelijk uitzien als het definitieve ontwerp.
Ontwerptips voor wireframes
Naast het bovenstaande advies over het effectief uitvoeren van het ontwerpproces, volgen hier enkele tips met betrekking tot het ontwerp zelf.
- Houd je ontwerp consistent. Hoewel het nog steeds een wireframe is en niet het definitieve ontwerp, raad ik je aan alles consistent te houden, inclusief kleuren, typografie en witruimte. Zo zorg je ervoor dat de mensen die je ontwerp testen geen onnodige gebruiksproblemen ervaren en je geen vertekende inzichten geven.
- Behoud de visuele hiërarchie. Technisch gezien zou deze ook al in de lo-fi-versie aanwezig moeten zijn. Maar als dat niet het geval is, voeg deze dan hier toe. Je kunt je hogegetrouwe wireframes vervolgens gebruiken om de effectiviteit van je visuele hiërarchie te testen.
- Voeg toegankelijkheidselementen toe aan je ontwerp. Hi-fi-wireframes zijn ook een uitstekend hulpmiddel om de toegankelijkheid van je ontwerp te testen. Zorg er dus voor dat je de juiste contrastverhoudingen instelt voor verschillende elementen die elkaar overlappen en houd ook rekening met andere aspecten van toegankelijkheid.
Vergeet ten slotte niet om gebruikers die het ontwerp testen visuele hulpmiddelen te geven. Dit is vooral relevant wanneer je slechts een deel van het ontwerp van je product test en er schermen of stappen ontbreken. Om te voorkomen dat je gebruikers in de war raken, moet je notities tonen die uitleggen waar in de gebruikersreis ze zich op dat moment bevinden en wat ze moeten doen.
Geavanceerde technieken voor hogegetrouwe wireframes
Met de hierboven beschreven beste werkwijzen kun je een “goed genoeg”-versie van je hi-fi-wireframe maken. Maar als je iets geweldigs wilt maken, overweeg dan deze geavanceerde technieken te gebruiken.
Interactieve wireframes
Sommige populaire wireframingtools worden geleverd met ingebouwde functies voor prototyping. Dus waarom zou je daar geen gebruik van maken en je wireframe tot leven brengen? Je kunt je UI-elementen klikbaar maken en gebruikers van het ene scherm naar het andere laten navigeren, waarbij de reis wordt nagebootst die ze in de echte app zullen maken. Ik raad je aan geanimeerde overgangen toe te voegen, zodat de verandering op de pagina of het scherm duidelijker wordt voor je gebruikers.
Je kunt ook animaties en overgangen toevoegen aan verschillende elementen in je mobiele app of webontwerp en nagaan of dit je gebruikers helpt een bepaald element op het scherm op te merken of ermee te interageren zoals je bedoeld hebt.
Visuele ontwerpelementen
Om ervoor te zorgen dat je hi-fi-draadmodel je product en merk goed vertegenwoordigt, kun je ook overwegen het volgende op te nemen:
- Typografie: De lettertypen, tussenruimtes en tekstkleuren in je ontwerprichtlijnen.
- Merkidentiteit: Je logo, merkkleuren en visuele middelen die je merk vertegenwoordigen.
- Reële inhoud: Schrijf in plaats van lorem ipsum te gebruiken waar in je e-commerce-appontwerp een productbeschrijving hoort te staan, een echte productbeschrijving.
- Reële visuele middelen: Als je illustraties of afbeeldingen op je schermen wilt plaatsen, voeg die dan ook toe.
- Verlopen en schaduwen: Deze zorgen ervoor dat je draadmodel realistischer oogt en helpen je een laag visuele hiërarchie of interacties toe te voegen.
Opmerking: Wat betreft het benadrukken van interacties met schaduwen is het material design van Google het beste. Het gebruikt schaduwen om diepte weer te geven en de gebruiker te laten zien of er met de muis over een element wordt bewogen, erop wordt geklikt of het inactief is.
Tips voor samenwerking binnen het team
Zowel prototyping als wireframing zijn nooit taken voor één persoon. Je bouwt het samen met je ontwerpteam, brainstormt met je productmanager of bespreekt het met je belanghebbenden.
Daarom raad ik je aan het volgende te doen om het samenwerkings- en ontwikkelingsproces rond je ontwerpen te vergemakkelijken:
- Plan regelmatig brainstormsessies. Nodig je productmanager en medeontwerpers uit. Misschien ook een technisch specialist, want die kan je helpen het technisch meest haalbare ontwerp te kiezen. Het sleutelwoord hier is regelmatig: dat kan één keer per week, om de twee weken of minder vaak zijn. Het is echter belangrijk om deze bijeenkomsten altijd te organiseren, omdat ze je helpen interessante oplossingen voor je ontwerpproblemen te bedenken.
- Houd regelmatig ontwerprecensies. Als je in een team werkt, stuur je ontwerp dan op voor een kruiselingse beoordeling en laat verschillende frisse paar ogen ernaar kijken om problemen te vinden die je mogelijk over het hoofd hebt gezien. Dit proces verhoogt de kwaliteit van je ontwerp aanzienlijk en helpt je het consistent te maken.
- Documenteer je gedachten en opmerkingen. Voeg annotaties en opmerkingen aan het ontwerp toe die bepaalde ontwerpbeslissingen van jou uitleggen of je collega's context bieden.
Zorg er ten slotte voor dat alles wat je bouwt aansluit bij de strategie en productvisie van het bedrijf. Raadpleeg hierover dus je productteam en het management.
Test je ontwerp alsof het de echte versie is.
Waarschijnlijk is het belangrijkste voordeel van het gebruik van high-fidelity-draadmodellen dat ze het product zo dicht mogelijk bij de uiteindelijke versie kunnen presenteren. Zo kunnen je gebruikers de visuele weergave van je product testen zonder dat je het echte product hoeft te bouwen.
Daarom raad ik je sterk aan het wireframingproces toe te passen en te gebruiken om je ontwerp en hypothesen binnen je ontwerpworkflow te testen. Ik hoop dat ik voldoende context en nuttige tips heb gegeven om er het meeste uit te halen.
Als je echter dieper op dit onderwerp wilt ingaan, raad ik je aan de complete gids voor wireframing te lezen. Daarnaast kun je je ook abonneren op onze nieuwsbrief voor meer bronnen en handleidingen over productmanagement.
