.png){kind=small}
Van wireframe naar een conversiegerichte website
Samenvatting
Met een wireframe bepaal je vooraf de structuur, inhoud en belangrijkste routes. Zo leg je een sterke basis voor een website die bezoekers ook helpt om de juiste volgende stap te zetten.
Een goede website begint bij de juiste strategie
Een nieuwe website bouwen is leuk. Je denkt na over kleuren, lettertypes, foto's, animaties en hoe de homepage eruit moet zien. Het is daarom verleidelijk om meteen te beginnen met ontwerpen.
Toch is dat niet de beste eerste stap.
Voordat je bepaalt hoe een website eruitziet, moet je eerst weten wat je gaat bouwen en waarom. Wie wil je bereiken? Welke informatie zoeken bezoekers? Welke pagina's heb je nodig? En vooral... wat wil je dat iemand doet nadat hij op je website terechtkomt?
Als je daar vooraf niet goed over nadenkt, ontstaat het ontwerp vaak terwijl de website al gebouwd wordt. Pagina's worden toegevoegd omdat er nog informatie ontbreekt, teksten moeten zich aanpassen aan het ontwerp en belangrijke onderdelen krijgen niet altijd de aandacht die ze verdienen.
Met een wireframe draai je dat proces om. Eerst bepaal je de structuur en inhoud. Daarna pas ga je ontwerpen.
Wat is een wireframe?
Een wireframe is een eenvoudige schematische weergave van een webpagina. Je ziet waar belangrijke onderdelen komen te staan, zonder dat kleuren, fotografie en vormgeving al de aandacht afleiden.
Je kunt een wireframe zien als de bouwtekening van een website.
Daarin bepaal je bijvoorbeeld:
-
welke boodschap bovenaan de pagina komt;
-
welke informatie daarna volgt;
-
waar afbeeldingen of video's worden gebruikt;
-
waar belangrijke voordelen worden uitgelegd;
-
waar je bewijs toont, zoals cases of reviews;
-
waar call-to-actions komen;
-
hoe bezoekers door de pagina worden geleid.
Een wireframe hoeft daarom helemaal niet mooi te zijn. Sterker nog... hoe eenvoudiger het is, hoe makkelijker je kunt beoordelen of de structuur klopt.
Het doel is niet om te laten zien hoe de website eruit gaat zien, maar om te bepalen hoe de website gaat werken.
Begin bij het doel van de website
Voordat je een wireframe maakt, moet duidelijk zijn wat de website moet opleveren.
Voor de ene organisatie is dat het aanvragen van offertes. Voor een andere organisatie zijn online afspraken belangrijk. Een webshop wil producten verkopen, terwijl een zakelijke dienstverlener misschien vooral kwalitatieve leads wil binnenhalen.
Dat verschil heeft direct invloed op de structuur van de website.
Als het belangrijkste doel bijvoorbeeld het aanvragen van een adviesgesprek is, moet die vervolgstap op logische momenten terugkomen. Wil je juist dat bezoekers eerst verschillende diensten vergelijken, dan moet de website hen daar makkelijk doorheen leiden.
Daarom beginnen we liever met vragen zoals:
-
Wie willen we bereiken?
-
Met welke vraag of behoefte komt iemand op de website?
-
Welke informatie heeft die persoon nodig?
-
Welke twijfels moeten we wegnemen?
-
Wat willen we dat de bezoeker uiteindelijk doet?
Pas wanneer deze vragen duidelijk zijn, kun je bepalen welke pagina's en onderdelen de website nodig heeft.
Denk vanuit de bezoeker, niet vanuit je eigen organisatie
Een veelgemaakte fout bij websites is dat de structuur wordt opgebouwd vanuit het bedrijf zelf.
Je krijgt dan pagina's die precies aansluiten op afdelingen, interne termen of de manier waarop een organisatie haar diensten heeft ingedeeld. Dat voelt intern logisch, maar voor een bezoeker hoeft dat helemaal niet zo te zijn.
Een potentiële klant denkt meestal niet vanuit jouw organisatiestructuur. Die heeft een vraag, probleem of doel.
Bij het maken van een wireframe dwing je jezelf daarom om vanuit de bezoeker te denken:
Wat wil iemand op dit moment weten?
Iemand die voor het eerst op je website komt, wil bijvoorbeeld eerst begrijpen wat je doet en of je voor hem relevant bent. Daarna wil diegene misschien weten hoe je werkt, wat je ervaring is en wat andere klanten van je vinden.
Pas daarna is iemand mogelijk klaar om contact op te nemen.
Door deze informatie in een logische volgorde te zetten, maak je het de bezoeker makkelijker om door de website te bewegen.
Bepaal eerst de inhoud, daarna de beschikbare ruimte
Wanneer een website direct wordt ontworpen, ontstaat regelmatig het omgekeerde proces. Er wordt een mooi blok ontworpen en vervolgens moet er tekst worden bedacht die precies in dat blok past.
Daardoor bepaalt het ontwerp hoeveel ruimte de boodschap krijgt.
Dat werkt niet altijd goed.
Soms heeft een onderwerp meer uitleg nodig. Soms kan iets juist veel korter. En soms ontdek je tijdens het schrijven dat een belangrijke boodschap helemaal nog geen plek heeft gekregen.
Bij een wireframe kijk je eerst welke inhoud nodig is.
Je bepaalt welke boodschap prioriteit heeft en welke informatie bezoekers nodig hebben om verder te gaan. Daarna kan het ontwerp die inhoud ondersteunen.
Dat betekent niet dat iedere pagina vol tekst moet staan. Juist door vooraf keuzes te maken kun je informatie compacter en duidelijker presenteren.
Geef iedere pagina één duidelijk doel
Niet iedere pagina hoeft hetzelfde te doen.
Een homepage heeft een andere functie dan een dienstenpagina. Een blogartikel heeft weer een ander doel dan een contactpagina.
Daarom bepalen we tijdens het wireframen per pagina wat de belangrijkste functie is.
Een dienstenpagina kan bijvoorbeeld als doel hebben om:
-
duidelijk te maken welk probleem je oplost;
-
uit te leggen wat je dienst inhoudt;
-
voordelen zichtbaar te maken;
-
vertrouwen op te bouwen;
-
bezoekers uiteindelijk naar een afspraak of aanvraag te sturen.
Als dat doel vooraf duidelijk is, kun je veel beter beoordelen welke onderdelen nodig zijn en in welke volgorde ze moeten komen.
Je voorkomt daarmee pagina's waarop van alles staat, maar waarbij niet duidelijk is wat de bezoeker vervolgens moet doen.
Bouw een logische conversieroute
Conversie betekent niet dat iedere bezoeker direct een formulier moet invullen.
Een goede conversieroute helpt iemand stap voor stap richting een passende vervolgstap.
Een bezoeker moet eerst begrijpen waar hij terecht is gekomen. Daarna wil hij weten of je zijn probleem begrijpt, welke oplossing je biedt en waarom hij jou zou kunnen vertrouwen.
Een pagina kan daarom bijvoorbeeld worden opgebouwd uit:
-
een duidelijke boodschap bovenaan;
-
herkenning van het probleem of de behoefte;
-
uitleg over de oplossing;
-
concrete voordelen;
-
je werkwijze;
-
bewijs in de vorm van cases of reviews;
-
een duidelijke call-to-action.
Dat is geen vaste formule die voor iedere website exact hetzelfde moet zijn. Het wireframe helpt juist om te bepalen welke volgorde in jouw situatie logisch is.
De vraag blijft steeds: wat heeft de bezoeker nodig om een volgende stap te kunnen zetten?
Een wireframe maakt ook SEO sterker
Een goede websitestructuur helpt niet alleen bezoekers, maar maakt het ook makkelijker om je website logisch op te bouwen voor zoekmachines.
Tijdens het wireframen denk je namelijk al na over:
-
welke onderwerpen een eigen pagina verdienen;
-
welke zoekvraag bij een pagina past;
-
wat de belangrijkste kop van de pagina wordt;
-
welke onderwerpen daaronder uitgelegd moeten worden;
-
hoe pagina's onderling met elkaar verbonden zijn.
Daardoor voorkom je dat verschillende pagina's ongeveer hetzelfde vertellen of dat belangrijke onderwerpen ergens verstopt staan.
SEO begint daarom niet pas nadat een website gebouwd is. De structuur die je vooraf kiest heeft invloed op hoe duidelijk zowel bezoekers als zoekmachines je website kunnen begrijpen.
Je ontdekt problemen voordat er gebouwd wordt
Een van de grootste voordelen van wireframes is dat fouten vroeg zichtbaar worden.
Misschien ontdek je dat een belangrijke dienst geen duidelijke plek heeft. Of dat twee pagina's eigenlijk hetzelfde vertellen. Misschien ontbreekt bewijs, is een conversiestap niet logisch of blijkt dat je veel meer content nodig hebt dan gedacht.
In een wireframe kun je dat relatief eenvoudig aanpassen.
Wanneer het ontwerp al gemaakt is of de website al gebouwd wordt, kost dezelfde wijziging vaak veel meer tijd.
Een blok verplaatsen in een wireframe is eenvoudig. Een volledig ontworpen en ontwikkelde pagina opnieuw indelen is een ander verhaal.
Goed nadenken aan het begin van een project zorgt daarom niet alleen voor een betere website, maar kan ook veel onnodig werk later in het proces voorkomen.
Van wireframe naar een sterk webdesign
Als de structuur staat, kan het daadwerkelijke ontwerp beginnen.
Dan weten we welke informatie belangrijk is, welke onderdelen aandacht moeten krijgen en welke acties we van bezoekers verwachten. Het webdesign hoeft daardoor niet meer te bepalen wat er op de pagina komt, maar kan zich volledig richten op hoe we die informatie zo duidelijk en aantrekkelijk mogelijk presenteren.
Kleur, typografie, fotografie, witruimte en interactieve elementen krijgen dan allemaal een functie.
Een belangrijke boodschap kan visueel meer aandacht krijgen. Verschillende onderdelen kunnen duidelijk van elkaar worden gescheiden. Een call-to-action kan precies op het juiste moment opvallen.
Een wireframe beperkt creativiteit niet
Soms klinkt een wireframe alsof alles vooraf wordt vastgezet en er tijdens het ontwerpen weinig ruimte meer overblijft.
In de praktijk werkt het juist andersom.
Doordat de inhoud en structuur al duidelijk zijn, hoeft een designer tijdens het ontwerpen niet tegelijkertijd allerlei inhoudelijke problemen op te lossen. Daardoor ontstaat meer ruimte om creatief na te denken over de visuele uitwerking.
Het wireframe bepaalt bijvoorbeeld dat er een sectie met klantcases nodig is. Het bepaalt niet dat die cases uit drie identieke blokjes moeten bestaan.
De designer kan vervolgens bepalen hoe die informatie op een aantrekkelijke en onderscheidende manier wordt gepresenteerd.
Van sitemap naar wireframe naar website
Een goede voorbereiding bestaat meestal uit meerdere stappen.
We beginnen met het doel van de website en de doelgroep. Daarna bepalen we in een sitemap welke pagina's nodig zijn en hoe die met elkaar samenhangen.
Vervolgens werken we de belangrijkste pagina's uit in wireframes.
Pas daarna starten we met het visuele ontwerp en uiteindelijk de ontwikkeling van de website.
Dat lijkt misschien alsof je aan de voorkant extra tijd kwijt bent. In werkelijkheid voorkom je hiermee juist veel keuzes en wijzigingen tijdens het ontwerp- en bouwproces.
Iedere fase beantwoordt namelijk een andere vraag:
Sitemap: welke pagina's hebben we nodig?
Wireframe: welke informatie komt op die pagina's en in welke volgorde?
Webdesign: hoe gaan we die informatie aantrekkelijk presenteren?
Websiteontwikkeling: hoe zorgen we dat alles technisch goed werkt?
Door die stappen niet door elkaar heen te laten lopen, wordt het proces overzichtelijker en het eindresultaat sterker.
Een nieuwe website nodig?
Ben je van plan om een nieuwe website te laten maken of is je huidige website toe aan vernieuwing? Begin dan niet meteen met ontwerpen.
Bij Interactive Monkey kijken we eerst naar je doelen, doelgroep en de rol die je website binnen je marketing moet spelen. Vanuit daar bepalen we de structuur en werken we de belangrijkste pagina's uit in wireframes.
Pas als die basis klopt, gaan we ontwerpen en bouwen.
Zo ontstaat een website die niet alleen past bij je merk, maar bezoekers ook helpt om de juiste volgende stap te zetten.
Dit zeggen onze klanten
Wij kunnen wel vertellen waarom klanten graag met ons samenwerken, maar onze klanten doen dat natuurlijk veel overtuigender. Daarom laten we ze graag zelf aan het woord.
Uitstekende samenwerking en slimme oplossingen
Interactive Monkey heeft ons uitstekend geholpen. Ze dachten actief mee, kwamen met slimme oplossingen en handelden razendsnel. Hun aanpak is efficiënt en klantgericht. Zeker een aanrader!
Yvonne Vermeulen
Stedelijk Dalton Lyceum Dordrecht
Fijn team dat altijd klaarstaat en actief meedenkt
Het team van Interactive Monkey staat altijd klaar om te helpen en denkt actief mee. Geen vraag is te veel en alles wordt duidelijk uitgelegd. Een topbedrijf om mee samen te werken, zeker een aanrader.
Dave Brandsen
De Springkussen Koning