Stel: je wint de loterij. Dertig miljoen. Geweldig! Eindelijk kan je een droomhuis laten bouwen! Je ziet het al voor je: een binnenzwembad, een prachtige tuin, eindelijk die garage met plek genoeg voor een Lamborghini.
Hoe begin je dan? Waarschijnlijk: bij een architect.
Want je weet welke sfeer je in je huis wilt, welke uitstraling het moet hebben, maar je weet misschien niet welke bouwmaterialen je het beste kunt gebruiken of welke nieuwe technologieën er beschikbaar zijn.
Een webdesigner is ook een architect
Hij bepaalt de structuur van je website.
Het is belangrijk voor je gebruikers: de informatie staat op de juiste plek, het navigatiemenu is overzichtelijk, de website werkt zoals ze verwachten.
Het uitwerken van die structuur begint vaak bij een Flowchart. Dit is een schema van de reis die de gebruiker maakt bij het bezoeken van je website.
Flowchart
Voorbeeld: Flowchart
Een hulpmiddel is de flowchart. Daarin maak je een overzicht van de stappen die een gebruiker op je website maakt. Je gaat daarbij uit van een probleem of vraag: de gebruiker zoekt informatie, een product of een contactmogelijkheid. Hoe gaan ze vervolgens te werk?
Het dwingt je goed na te denken over hoe de website gebruikt zal worden, welke informatie het belangrijkst is en hoeveel moeite de gebruiker moet doen om te vinden wat hij zoekt.
Een groot voordeel van een flowchart is dat het voor iedereen inzichtelijk wordt welke stappen de (verschillende) users zullen maken binnen je website. Daarnaast weet de developer hoe hij de stappen in de back-end van de website moet verwerken.
Wireframe
Voorbeeld: Wireframe
Een tweede hulpmiddel is een wireframe. Het is als het ware de bouwtekening van een website.
Een wireframe maakt het ontwerpproces overzichtelijk. Je ziet bijvoorbeeld snel of een pagina te chaotisch wordt. Een wireframe kan ook actief ingezet worden als prototype. Hiermee kun je snel testen of een webpagina een logische structuur heeft en eenvoudig te gebruiken is.
Wat zijn daar de voordelen van?
Er zijn drie belangrijke voordelen van werken met een flowchart en een wireframe.
1. Het bespaart tijd
Een wireframe maken gaat sneller dan een website ontwerpen. Het is voor de developer dus makkelijker om meerdere layouts te tonen aan de klant, samen de meest geschikte uit te kiezen en dan pas de site te gaan ontwikkelen. Dat voorkomt latere miscommunicatie en vertragingen in het proces.
Bovendien ligt bij een flowchart en wireframe de nadruk vooral op de structuur. Hoe werkt de website straks? Het is veel lastiger om hierop te letten als je ook moet kijken naar lettertype, kleuren, afbeeldingen en animaties, zoals bij een voltooide site.
2. Het is belangrijk voor SEO
De architectuur van je website is heel belangrijk voor SEO. Zoekmachines moeten je site correct indexeren. Dat kan alleen als die op de juiste manier is opgebouwd. Verkeerd gebruik van bijvoorbeeld JavaScript kan ervoor zorgen dat links verborgen blijven. Hierdoor kan een deel van je site totaal overgeslagen worden door de zoekmachinerobot als bijvoorbeeld je homepagina een doorklikpagina is (denk aan een animatie met aan call-to-action).
Eén van de factoren die meewegen bij de ranking is interne links (verwijzingen naar andere pagina’s binnen je site). Met interne links maak je het gebruikers immers makkelijker om te vinden wat ze zoeken en usability is weer gunstig voor je SEO. In een wireframe kan je dit overzichtelijk uitwerken, waardoor je niet per ongeluk een pagina vergeet.
Een andere (niet al te zwaarwegende, geef ik toe) rankingfactor is URL’s. Een URL als ‘media-eng.nl/blog-over-webdesign’ is beter dan ‘media-eng/posts/15465?18xgh.’
Veel belangrijker is het dat je site snel en responsive is – beide zijn wél belangrijke rankingfactoren. Ook dat heeft alles te maken met hoe de website is opgebouwd.
3. Het is belangrijk voor de user
Goede usability is essentieel. En dat zit ‘m in talloze kleine dingen:
-
Duidelijk herkenbare links
-
Overzichtelijk navigatiemenu
-
Geen onvindbare pagina’s
-
Geen storende animaties
-
Geen verspringend(e) menu of zijbalk
-
Informatie goed gestructureerd
-
En ga zo maar door…
Het is een stuk lastiger om dit goed te doen als je niet vooraf hebt nagedacht over de architectuur van je website.
Investeer in de structuur van je website
Ben je bezig met het (laten) ontwerpen van een nieuwe site? Werk dan eens een aantal wireframes en een flowchart uit. Zo krijg je meer inzicht in de werking en effectiviteit en kun je beter beoordelen of de door jou bedachte structuur goed zal werken.
Ben je benieuwd hoe dit zit met je huidige website? Test het dan uit! Geef jezelf, een werknemer, een familielid of klant enkele opdrachten op de site, zoals contactmogelijkheden zoeken, bepaalde informatie achterhalen of meerdere pagina’s bezoeken zonder gebruik van het navigatiemenu. Dat kan je al veel inzicht geven in de huidige structuur en mogelijke verbeterpunten.
