Of je nu een beginner of amateur bent, je zult deze zes eenvoudige stappen voor het maken van een wireframe zeker handig vinden!
Een wireframe maken in 6 stappen
Ook als je nog maar net bezig bent met UX-design (User Experience), heb je ongetwijfeld al eens van wireframes, of draadmodellen, gehoord. In een ideaal scenario voor webontwerp is het maken van een wireframe de eerste stap om te visualiseren hoe een webpagina er uiteindelijk komt uit te zien.
Maar als je nog niet echt bedreven bent in het ontwerpen van wireframes of als dit de eerste keer is dat je er een gaat maken, zou je wellicht tegen een paar problemen kunnen aanlopen. Je vraagt je misschien af hoe wireframing in het grotere ontwerpproces past en wat de stappen zijn voor het maken van een wireframe. Moet je een wireframe maken met pen en papier of heb je er een speciale tool voor nodig?
Of je nu een wireframe met pen en papier of met een wireframe tool gaat maken (al naargelang je behoeften en mogelijkheden), in dit artikel over het maken van wireframes wordt een antwoord gegeven op al deze vragen, en op andere vragen die je misschien hebt.
Maar voordat we zover zijn, wat is nu precies een wireframe?
Wat is een wireframe?
Een wireframe is een model of weergave van de brede structuur of lay-out van een web- of app-pagina. Het laat zien waar de verschillende onderdelen, zoals secties, tabbladen, producten, informatie en calls-to-action, komen te staan en hoe de ruimte wordt benut. Omdat het wireframe dient als allereerste lay-out van een webpagina, blijven kleuren, multimediacontent, lettertypen en andere stilistische elementen tot een minimum beperkt.
Laten we met die informatie nu eens kijken naar de stappen voor het maken van een wireframe.
1. Voer onderzoek uit om duidelijkheid en richting te krijgen
Het kan verleidelijk zijn meteen al je ideeën in een wireframe te spuien, maar denk dan eerst aan het grotere doel: het ontwerpen van een pakkende gebruikersinterface (UI). En daarvoor moet je de vereisten van je ontwerpproject en de verwachtingen van stakeholders en eindgebruikers in kaart brengen.
Je ontwerp moet niet alleen de producten of boodschap van je organisatie aan klanten of bezoekers overbrengen, maar deze vooral ook makkelijk vindbaar maken en ervoor zorgen dat klanten eenvoudig hun weg op de pagina vinden.
Deze stap kun je zo invullen:
- Vraag bij stakeholders na wat de voornaamste projectdoelen zijn. Die duidelijkheid is essentieel voor het ontwerp van het wireframe.
- Doe onderzoek naar de eindgebruikers, hun voorkeuren en koopgedrag zodat je die informatie in het wireframe kunt verwerken.
- Op basis van je onderzoek naar de eindgebruikers definieer je algemene use cases om de scenario’s waarvoor je een ontwerp maakt beter te begrijpen.
- Voer marktonderzoek en concurrentieanalyse uit om ontwerptrends en best practices vast te stellen.
2. Maak het makkelijk om de onderzoeksgegevens terug te vinden
Tijdens je onderzoek ga je heel wat gegevens verzamelen, zoals use cases, kopersprofielen, marktonderzoeksgegevens en projectvereisten. Op diverse punten in het ontwerpproces moet je terug kunnen vallen op dat onderzoek.
Voordat je verdergaat, moet je er daarom voor zorgen alle onderzoeksgegevens zodanig te documenteren en in te delen dat het niet veel tijd en moeite kost ze terug te vinden. Zo gaat al het werk dat je aan het onderzoek hebt besteed niet verloren en vindt het zijn plek in je wireframe.
Hier zijn een paar snelle manieren om dat voor elkaar te krijgen:
- Documenteer alle belangrijke stukken informatie die je tegenkomt.
- Deel het onderzoek in aan de hand van macro- en microcategorieën, met mappen en submappen.
- Maak spiekbriefjes voor het vastleggen van kernconcepten zoals use cases van kopers, koopgedrag of belangrijke feedback van gebruikers die je tijdens je onderzoek bent tegengekomen.
3. Breng gebruikersstromen in kaart om te weten wat de behoeften van gebruikers zijn
Gebruikersstromen hebben betrekking op het traject dat een gebruiker volgt tijdens een website- of app-sessie. Dit traject omvat het punt waar gebruikers je website/app binnenkomen, alle punten waar ze een actie uitvoeren op de website/app (zoals de pagina’s die ze bezoeken of de knoppen waarop ze klikken tot aan de laatste financiële handeling) en waar ze de website/app verlaten.
Een eenvoudig voorbeeld van een gebruikersstroom is: een gebruiker komt terecht op je e-commercewebsite na een klik op, laten we zeggen, een advertentie over wandelschoenen. Op de website kan de gebruiker de schoenen filteren op prijs, maat, merk, enzovoort, inzoomen op een of meer van de schoenen, de specificaties bekijken, een van de artikelen in de winkelmand plaatsen en uiteindelijk de betaling uitvoeren en de transactie voltooien.
Het zijn dit soort interacties binnen uw website/app die samen de gebruikersstroom vormen.
Dit traject moet in kaart worden gebracht in een gebruikersstroom zodat je geen cruciale ontwerpelementen vergeet zoals de winkelmand, het prijsfilter of de lijst met specificaties. Als zulke elementen ontbreken, kan dat bezoekers verwarren, zodat ze contact opnemen met de klantenservice voor hulp bij zelfs de meest elementaire navigatie.
Het onmiddellijke gevolg zou in zo’n geval ontevreden of gefrustreerde klanten kunnen zijn, met minder conversies en meer afhakende bezoekers als resultaat.
Gebruikersstromen vormen de basis van je wireframe, dus neem de tijd om die goed in beeld te krijgen. Je zou dat zo kunnen doen:
- Breng gebruikersbehoeften in kaart door jezelf het volgende af te vragen: Welk doel beogen bezoekers aan de website/app? Naar wat voor functies en kenmerken zijn ze op zoek? Wat zouden hun eerste vragen kunnen zijn? Wat voor informatie hebben ze nodig om soepel te kunnen navigeren?
- Stel een organisatieschema op dat het toegangspunt van een gebruiker naar de website/app omvat, samen met alle stappen die ze moeten zetten tot aan de uiteindelijke transactie.
- Houd de gebruikersstroom logisch en houd rekening met alle mogelijke behoeften en wensen van een gebruiker tijdens het navigeren.
4. Maak een minimalistische lay-out voor het wireframe
Pak nu pen en papier om je ideeën voor de lay-out uit te tekenen. In dit stadium ga je een basisstructuur maken die aangeeft welke elementen de pagina moet bevatten, welke UI-element waar komen te staan, welke tabbladen worden gebruikt, waar de tekstvakken verschijnen en welke plek de multimedia-elementen krijgen.
Het gaat erom een elementaire structuur van de webpagina te maken waarin alle behoeften van de gebruikers en het bedrijf zijn opgenomen.
Weersta bij het ontwerpen van de structuur de verleiding om te veel details op te nemen: meer is minder in dit stadium. Vergeet de lettertypen en de kleuren, hou je alleen maar bezig met een schets en nog niet met het uiteindelijke ontwerp.
Hier zijn enkele vragen die je kunt meenemen om deze stap goed uit te voeren:
- Hoe kan ik de UI-onderdelen het beste indelen met het oog op het einddoel van een bezoeker?
- Wat moet de gebruiker te zien krijgen zodra de pagina wordt geopend?
- Waar moet de voornaamste boodschap van de pagina komen te staan?
- Welke informatie moet het meest prominent worden weergegeven?
- Welke knoppen heeft de gebruiker nodig om door het website- of app-ontwerp te navigeren?
Als de basisstructuur er eenmaal staat, laat je deze voor een eerste feedback aan je collega’s of manager zien. Pas de lay-out zo nodig verder aan om de bruikbaarheid te verbeteren.
Alternatief op pen en papier – wireframe software
Een wireframe maken met pen en papier is prima omdat je geen software hoeft te installeren of te kopen, geen computer nodig hebt en het ook niet uitmaakt of je wel of geen internetverbinding hebt. Maar het gebruik van een wireframingtool heeft enkele onmiskenbare voordelen in vergelijking met het papieren werk.
Met een wireframingtool kun je de benodigde tijd voor het ontwerpen van een wireframe drastisch verkorten. Je kunt gebruikmaken van handige drag-and-drop placeholder-elementen en kant-en-klare wireframesjablonen. Met een tool kun je ook makkelijk samenwerken met teamleden of klanten en feedback in realtime ontvangen. Bovendien is integratie mogelijk met apps zoals Adobe Creative Cloud of Jira om wireframes van hoge kwaliteit te maken.
5. Bepaal de mate van getrouwheid en vul de details in
Nu er genoeg duidelijkheid is over de richting van het project, de gebruikersstroom, de basislay-out van het wireframe (ook wel de mockup genoemd) en eventuele verbeteringen, kun je bepaalde details gaan invullen.
Op dit punt moet je een beslissing nemen over het getrouwheidsniveau van je wireframe, ofwel de gedetailleerdheid ervan. Hier zie je een kort overzicht van de voornaamste verschillen tussen drie niveaus die vaak worden gebruikt.
Zodra je de mate van getrouwheid hebt bepaald, kun je de details voor het wireframe als volgt invullen:
- Voeg details progressief toe, van boven naar beneden en van links naar rechts.
- Voeg de basisdetails voor bruikbaarheid toe zoals de navigatiebalk en zoekbalk links- of rechtsboven.
- Voeg elementen toe waarvan je denkt dat deze handig zijn voor bezoekers tijdens het gebruik van de pagina en ga na waar die het beste kunnen staan.
Testen maar!
Met alle details op hun plaats is je wireframe klaar om op de proef gesteld te worden. Je moet het wireframe testen om de bruikbaarheid ervan te bepalen, met andere woorden, of alle ontwerpelementen die een gebruiker nodig kan hebben, ook aanwezig zijn.
Door te testen kan bovendien worden vastgesteld of er essentiële elementen ontbreken of dat er andere vereisten zijn waaraan voldaan moet worden. Een voorbeeld. In plaats van twee velden op de inlogpagina (een voor de gebruikersnaam en een voor het wachtwoord), heeft je wireframe er maar één. Of misschien ontbreekt er op de homepage een navigatiebalk, terwijl die er wel zou moeten zijn. Zulke missers moeten worden gecorrigeerd voordat het wireframe de volgende stappen van het ontwerpproces gaat doorlopen.
Roep de hulp van je collega’s in of laat echte gebruikers het uiteindelijke product testen. Heb je een grondiger analyse van het wireframe nodig, dan zou je ook relevante deskundigen kunnen raadplegen.
Je kunt je wireframe als volgt testen:
- Druk het wireframe af op papier of maak een digitale versie en geef die aan reviewers.
- Stel reviewers een reeks vragen om hun ervaringen te beschrijven en leg hun feedback vast. Sommige tools voor het testen van wireframes bieden meer interactieve testmogelijkheden en leggen feedback automatisch vast.
- Maak gebruik van tests door gebruikers: een service waarmee je een link kunt posten naar het wireframe dat gebruikers kunnen testen. Na het testen kunnen ze over het testverloop een video van hun scherm delen, maar dat kan ook in mondelinge of geschreven vorm.
Nadat alle tests zijn uitgevoerd en je de feedback hebt verzameld, breng je waar nodig verbeteringen aan.
