6 stappen voor een goede wireframe sessie

In deze blog leer je hoe je je kunt voorbereiden op een wireframe sessie en hoe je uiteindelijk een succesvolle wireframe sessie op kunt zetten. Als je je inmiddels al stuk hebt gebeten op of hulp zoekt bij een (b2b) website design, dan zul je vast al gehoord hebben van de term “wireframe sessie”. Maar niet iedereen zal automatisch zo bekend zijn met de inhoud van zo’n sessie.

Wat is een wireframe sessie?

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 call-to-actions komen te staan en hoe de ruimte wordt benut. Omdat het wireframe dient als allereerste lay-out van een webpagina, blijven kleuren, multimedia content, lettertypen en andere stilistische elementen tot een minimum beperkt.

Het doel van een wireframe is om alle elementen en functionaliteiten een logische en gebruiksvriendelijke plek te geven. Je moet het echt zien als de bouwtekening van jouw website of app waarbij de focus ligt op de inhoud en niet op het grafisch aspect.

De hamvraag is altijd: hoe maak je een sterk wireframe? We leggen het uit!

1. Voer onderzoek uit om richting en duidelijkheid te krijgen

Het kan verleidelijk zijn meteen al je ideeën in een wireframe te gooien, maar denk eerst aan het uiteindelijke doel: een solide basis creëren waar op voortgeborduurd kan worden in de daadwerkelijke ontwerpfase. Daarvoor moet je de vereisten van je ontwerp project en de verwachtingen van alle stakeholders in kaart brengen.

Je ontwerp moet niet alleen de producten, diensten of boodschap van je organisatie aan klanten en/of nieuwe bezoekers overbrengen, maar deze vooral ook makkelijk vindbaar maken en ervoor zorgen dat bezoekers snel en eenvoudig hun weg op de pagina vinden.

Om dit te tackelen kun je het volgende in kaart brengen:

• Voer marktonderzoek en concurrentieanalyses uit om ontwerp trends en best practices vast te stellen.
• Vraag bij stakeholders na wat de voornaamste projectdoelen zijn. Deze duidelijkheid is essentieel voor het ontwerp van het wireframe.
• Doe onderzoek naar de eindgebruikers, hun voorkeuren en koopgedrag zodat je deze informatie in het wireframe kunt verwerken.
• Op basis van je onderzoek naar de eindgebruikers definieer je use cases om de scenario’s waarvoor je een ontwerp maakt beter te begrijpen.

2. Maak het makkelijk om de onderzoeksgegevens terug te vinden

Tijdens je onderzoek ga je behoorlijk wat gegevens verzamelen, zoals use cases, buyer profiles, marktonderzoek gegevens en projectvereisten. Op verschillende punten in het ontwerpproces moet je terug kunnen vallen op deze gegevens.

Zorg er daarom allereerst voor dat alle onderzoeksgegevens zodanig gedocumenteerd en in te delen zijn dat het niet veel tijd en moeite kost om ze terug te vinden. Zo gaat al het werk dat je aan het onderzoek hebt besteed niet verloren en vindt het de juiste plek in je wireframe.

Hier zijn een aantal manieren om dat snel voor elkaar te krijgen:

• Documenteer alle belangrijke stukken informatie die je tegenkomt.
• Deel het onderzoek in aan de hand van macro- en micro categorieën, dit kun je doen met mappen en submappen.
• Maak briefjes 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

Gebruikersstromen hebben betrekking op het pad dat een gebruiker volgt tijdens een website- of app-sessie. Dit traject omvat het punt waar gebruikers je website of app binnenkomen, alle punten waar ze een actie uitvoeren, zoals de pagina’s die ze bezoeken, de knoppen waarop ze klikken of bijvoorbeeld een betaling doen) en waar ze de website of app verlaten.

Een simpel voorbeeld van een gebruikersstroom is bijvoorbeeld: een gebruiker komt terecht op je webshop na een klik op bijvoorbeeld een advertentie over herenschoenen. Op de website kan de gebruiker de schoenen filteren op prijs, merk, maat, kleur, inzoomen op een of meer van de schoenen, de specificaties bekijken, een van de artikelen in de winkelmand plaatsen en uiteindelijk de betaling uitvoeren. 

Het zijn dit soort interacties binnen je website of app die samen de gebruikersstroom vormen.

Dit proces moet in kaart worden gebracht in een gebruikersstroom zodat je geen cruciale ontwerpelementen vergeet zoals de winkelmand, de filter of de lijst met specificaties. Als dit soort elementen ontbreken kan dat bezoekers verwarren waardoor ze wellicht afhaken en er hierdoor minder conversies zijn. En dat is precies wat we niet willen!

Gebruikersstromen vormen de basis van je wireframe, dus neem de tijd om deze goed in beeld te krijgen. Je kunt dat op de volgende manier doen:

• Breng gebruikersbehoeften in kaart door jezelf het volgende af te vragen: welk doel hebben bezoekers op de website/app? Wat zouden hun eerste vragen kunnen zijn? Naar wat voor functies en kenmerken zijn ze op zoek? Welke informatie hebben ze nodig om soepel te kunnen navigeren?
• Stel een organisatieschema op die de route van een gebruiker naar de website/app omvat, samen met alle stappen die ze moeten zetten tot aan het uiteindelijke hoofddoel (offerte opvragen, transactie doen). 
• 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 design

Pak nu pen en papier om al 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 en waar de tekstvakken verschijnen. 

Het gaat erom een elementaire structuur van de webpagina te maken waarin alle behoeften van de gebruikers en het bedrijf zijn opgenomen.

Let op: het hoeft hier nog niet allemaal meteen in beton gegoten te zijn. Zorg ervoor dat je niet teveel in de details blijft hangen. Meer is minder in dit stadium. Maak je nog niet druk over de lettertypen en de kleuren, maar hou je alleen maar bezig met een schets en nog niet met het uiteindelijke ontwerp.

Onderstaand enkele vragen die je kunt gebruiken 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 geopend word?
• Welke informatie moet het meest prominent weergegeven worden?
• Waar moet de voornaamste boodschap van de pagina uiteindelijk komen te staan?
• Welke knoppen heeft de gebruiker nodig om goed en efficiënt door het website- of app-ontwerp te navigeren?

Als de basisstructuur er eenmaal staat, laat je deze voor een eerste feedbackronde aan bijvoorbeeld je collega’s of manager zien. Pas de lay-out zo nodig verder aan om de usability te verbeteren.

5. Bepaal de mate van getrouwheid en vul de details in

Nu er genoeg duidelijkheid is over de richting van het project, de gebruikersstroom en de basis lay-out van het wireframe, is het tijd voor het invullen van de details.

Op dit punt moet je een beslissing nemen over hoe gedetailleerd je wireframe wordt. Wanneer je dit hebt vastgesteld kun je de details voor je wireframe op de volgende manier invullen:

• Vul de details progressief in, dus van boven naar beneden en van links naar rechts.
• Voeg de basisdetails toe voor de bruikbaarheid van de website of webapp. 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.

6. Testen en optimaliseren

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. Zijn alle ontwerp elementen die een gebruiker nodig heeft aanwezig? En staan deze ook op de juiste plek?

Door te testen kan bovendien worden vastgesteld of er essentiële elementen ontbreken of dat er andere vereisten zijn waaraan voldaan moet worden. Roep de hulp van je collega’s in of laat echte gebruikers het uiteindelijke product testen. Eventuele missers moeten worden gecorrigeerd voordat met het definitieve wireframe de volgende stappen van het ontwerpproces doorlopen zullen worden.

Tip: Maak gebruik van wireframe software

Naast de traditionele pen en papier sessie om te wireframen kun je ook gebruik maken van wireframe software. Het gebruik hiervan heeft enkele belangrijke voordelen in vergelijking met het papieren werk.

Met een wireframingtool kun je de benodigde tijd voor het ontwerpen van een wireframe enorm verkorten. Je kunt bijvoorbeeld 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.

Heb jij nog vragen over het maken van een wireframe of kun je hier hulp bij gebruiken? Neem gerust contact met ons op en we helpen je graag verder!

Contact opnemen