Zo komt een gebruiksvriendelijke website tot stand.

17 juli 2019

Wireframing: weer een term in de lange lijst begrippen die niet tot de verbeelding spreekt. We gebruiken het woord vaak tijdens klantgesprekken en lichten je met dit artikel graag toe wat wireframing is en wat je er aan hebt. 

Wireframing staat voor het schetsen van een website, het maken van een soort bouwtekening voordat deze grafisch wordt vormgegeven. Deze schetsen worden gebruikt om de structuur en inrichting van de website te bepalen. In een wireframe wordt aangegeven welke inhoud en functionaliteiten, zoals een social media feed, op welke plek van de webpagina komen te staan. Een wireframe is dus handig om in kaart te brengen hoe een website in elkaar gaat steken.

Eerst duidelijkheid, esthetiek komt later

Het voordeel van wireframes is dat deze relatief snel te realiseren zijn. Ze worden dan ook vaak gebruikt in het conceptproces. Het is belangrijk dat een wireframe vooral duidelijk maakt welke inhoud op de website komt en wat voor structuur de website heeft. Een wireframe moet duidelijk zijn, de vormgeving en daarmee de esthetiek van de website komt pas later, in de grafische fase aan de beurt.

Usertesten na het wireframen

In een wireframe is goed te zien hoe een gebruiker door de website navigeert. Daarom kan een wireframe enorm nuttig zijn om te testen of de toekomstige website gebruiksvriendelijk is en de doelgroep begrijpt hoe deze op bepaalde pagina’s van de website terecht komt. Wanneer er van jouw website dus verschillende wireframes zijn gemaakt is het verstandig deze ook te testen.

Deze test, ook wel een userstest genoemd, kan op een gemakkelijke manier worden uitgevoerd. Door bijvoorbeeld de wireframes uit te printen en de gebruiker als het ware door de verschillende papieren te laten ‘klikken’ ontstaat er een goede indruk of de webstructuur gebruiksvriendelijk is. Het is verstandig om van te voren verschillende userstories uit te werken. Je bedenkt dus een aantal scenario’s die de gebruiker moet uitvoeren en waarmee jij kan testen of de gebruiker deze gemakkelijk kan voltooien en de website dus intuïtief goed in elkaar zit. Een scenario kan zich bijvoorbeeld richten op het zoeken van contact via de website of vinden van de prijsopgave op de website.

Voorbeeld van een (deel) van een wireframe.

Iteratie

Nadat er een aantal usertests gedaan zijn is het zaak conclusies te trekken uit het testproces en noodzakelijke aanpassingen te doen aan de wireframes. Een goed wireframe en usertestproces kenmerkt zich door iteratie, ook wel herhaling. Nadat de wireframes zijn aangepast, zullen er wederom usertests gedaan moeten worden. Uit die tests kan worden gehaald of de gedane aanpassingen voor verbetering hebben gezorgd of dat de wireframes wederom moeten worden aangepast.

Responsive wireframes

Wanneer wireframes worden gerealiseerd is het verstandig deze voor verschillende schermformaten te laten maken. De manier waarop content is opgebouwd en het menu wordt weergegeven dient op een mobiele telefoon bijvoorbeeld heel anders te zijn dan op een laptop. Een mobiele telefoon heeft nou eenmaal een kleiner scherm en hierdoor is er minder ruimte. Het is belangrijk dat de website voor ieder apparaat gebruiksvriendelijk wordt gemaakt. Om dit te garanderen is het belangrijk losse, mobiele wireframes te laten maken voor bijvoorbeeld laptop, tablet, mobiel en in sommige gevallen ook smartwatches. 

Waarom wireframes laten maken?

Internetbureau’s kunnen je helpen met het maken van een gebruiksvriendelijk webontwerp

Wireframing is een belangrijk onderdeel wanneer je een (uitgebreide) website ontwerpt. Zelf aan de slag kan met tools als Wireframe.CCBalsamiq of Adobe Photoshop. Uiteraard kan je dit ook laten doen door een professionele partner. Een internetbureau kan wireframes voor je ontwikkelen en je hierover adviseren. Daarnaast kunnen zij je helpen met het testen van de wireframes binnen je doelgroep.

Start die goede dag.