Met een wireframe zoom je in op de gebruikerservaring op je website, in plaats van alleen naar het visuele aspect van je design te kijken. Je kunt het zien als de blueprint voor hoe je site eruit moet komen te zien.
Een huis bouw je immers ook niet zonder een duidelijk plan van waar de keuken, slaapkamers en verschillende aansluitingen moeten komen. Zoals een architect daarvoor een plan maakt helpt een wireframe maken je de algemene “flow” van je website te verbeteren. Nog niet helemaal zeker wat een wireframe nu precies is en hoe je er een maakt? Wij gaan je helpen.
Wat is een wireframe?
Wireframe is een overzicht van de lay-out van een website of webpagina. Het is een soort plattegrond waar de belangrijkste onderdelen van en de navigatie over de site op zijn aangegeven. Daarmee is een wireframe de eerste stap bij het maken van een site, nog voordat er over visuele elementen of design wordt nagedacht.
Bij het maken van een wireframe denk je dus na over de functionaliteit en gebruiksvriendelijkheid van de website. Om in de metafoor van het huis te blijven: je bedenkt waar de muren, deuren en aansluitingen voor elektriciteit en water moeten komen, voordat je gaat nadenken over de kleur verf en de soort wasbak.
Waarom is een wireframe belangrijk?
Met een wireframe zorg je dat de basis van je website klopt, voordat je verder gaat met de visuele aspecten en het invullen van de content.
Hoewel dat bij het voorbeeld van het huis misschien heel logisch klinkt, is een wireframe toch nog vaak een vergeten onderdeel. Zonde, want het ontneemt je de kans om een stevig fundament te leggen voor de juiste lay-out van je website.
Een wireframe geeft je de kans om na te denken over vragen als:
- Hoe wil je straks dat mensen over je site bewegen?
- Wat zijn de essentiële onderdelen – zoals formulieren, explainer video’s en CTA knoppen – die een prominente plek op je pagina’s verdienen?
- Moeten alle elementen op ieder type pagina terugkomen, of krijgt een productpagina een heel ander design dan een informatieve blog?
- Welke pagina’s verwijzen naar elkaar door en in welke volgorde, aansluitend op de customer journey van je doelgroep?
Wireframes op papier of in een tool
Je kunt een wireframe op papier maken door te schetsen hoe een pagina eruit moet komen te zien, waar de belangrijkste elementen moeten komen en hoe die pagina in verbinding staat met de andere pagina’s op je site.
Hoewel dit een prima eerste stap is, wordt het bij grotere websites al snel onoverzichtelijk. Bovendien wordt het moeilijker om tests op je gemaakte wireframes los te laten dan bij een digitale versie. Natuurlijk zijn er inmiddels verschillende wireframe tools in de markt:
- UsabilityHub
- Prott
- Mockplus
- UXPin
- InVision
- Wireframe.cc
Al deze tools hebben natuurlijk hun eigen voor- en nadelen en gebruikerservaring. De meeste kun je gratis proberen, dus we raden je aan om te ontdekken welke voor jou het prettigste werkt.
En vergeet vooral niet dat er niets mis is om met pen en papier te beginnen met wireframes maken. Vaak is zo’n vrije manier van schetsen en tekenen de beste optie om op gang te komen, waarna je de gemaakte designs kunt overzetten naar je gekozen tool.
6 tips bij het maken van je eerste wireframe
Beginnen je handen al te jeuken om zelf een wireframe te maken? Logisch, nu je weet wat de waarde van wireframes is voor de kwaliteit van je website. Of je nu start met pen en papier of direct in één van de hierboven genoemde tools aan de slag gaat, hier zijn een aantal praktische tips om rekening mee te houden.
1. Bepaal het doel van je website
Allereerst is het belangrijk om het belangrijkste doel dat je bezoekers van je website wilt laten vervullen, messcherp te hebben. Welke actie wil je ze laten ondernemen? Naar welk gedeelte van je site wil je ze bewegen, of wil je ze zo snel mogelijk aan de telefoon hebben? Door over dit soort dingen na te denken, krijg je een beter zicht op welke elementen een prominente plek in je wireframe verdienen.
2. Werk met verschillende afmetingen
Een belangrijk onderdeel van het optimaliseren van de conversie van je website, is rekening houden met de verschillende schermen waarop bezoekers je site kunnen zien. Niet voor niets is het inmiddels een belangrijke vereiste dat een website responsief is en zich aanpast aan de afmetingen van het scherm waarop de site bezocht wordt.
Dat vraagt ook om een wireframe voor de verschillende afmetingen waarop de site kan worden weergegeven.
3. Kijk ook naar de beweging over je site
Een goede wireframe is meer dan een losse, op zichzelf staande schets van één pagina. Het geeft je de kans om na te denken over hoe iemand idealiter over je website beweegt. Vanaf een blog klikt iemand op een CTA en komt op een landingspagina, waar deze bezoeker een offerte aanvraag start en daarvoor verschillende schermen doorloopt.
Bedenk via welke wegen je bezoekers binnen kunnen komen en hoe ze vervolgens over je site bewegen naar de plek waar jij ze hebben wilt. Welke pagina’s moeten ze daarvoor passeren en welke knoppen en CTA’s zijn er nodig om ze daarheen te krijgen?
Een onderdeel van je wireframe is dat je aangeeft hoe de verschillende pagina’s naar elkaar verwijzen en elkaar opvolgen, zodat een compleet beeld ontstaat van de flow van je bezoekers over je website.
4. Bepaal conversie punten
Wanneer je een beeld hebt van de route die je bezoekers idealiter afleggen over je website, is het zaak om te bepalen hoe je hen zo ver krijgt die route af te leggen. Dat wil zeggen: welke elementen (knoppen en andere CTA’s) zijn het belangrijkst om hen van de ene pagina naar de volgende stap te krijgen? Hoe zorg je ervoor dat ze voldoende informatie krijgen en vervolgens op een logische manier naar de volgende stap doorbewegen?
Dit is dus waar je nadenkt op welke plek knoppen, menu’s, links in de tekst en andere CTA’s over de wireframe van je pagina’s verdeeld worden. Houd hier rekening met het soort pagina waar je aan werkt: in een blog is het bijvoorbeeld veel logischer om te focussen op links in de tekst en een enkele CTA op een strategisch punt, terwijl je op review pagina’s waarschijnlijk directer je product of dienst onder de aandacht wilt brengen.
5. Schrap
Wees kritisch op overbodige stappen in je weergave en durf pagina’s die niet echt iets toevoegen te schrappen uit het geheel. Wanneer je ziet dat een flow van A via B naar C ook direct van A naar C kan, vraag je dan af of B er niet veel beter tussenuit kan. Hoe minder onnodige tussenstappen, hoe kleiner immers de kans dat een bezoeker ergens afhaakt of de weg kwijt raakt.
6. Vraag feedback
Misschien wel de belangrijkste tip van het werken met wireframes en UX design in zijn algemeenheid: vraag een second opinion van iemand die minder diep betrokken is bij je pagina. Zeker wanneer je langere tijd aan je wireframe hebt gewerkt, is de kans groot dat je dingen over het hoofd zult zien. Daarom is het belangrijk om de input van iemand te vragen die een frisse blik op de materie kan werpen, idealiter iemand van buiten je bedrijf die de rol van prospect op zich kan nemen. Je gemaakte wireframes kunnen daarmee een perfect startpunt zijn om diepte interviews op te baseren.
