Inhoudsopgave
Wat is een functioneel ontwerp website?
Een functioneel ontwerp (FO) voor een website is een gedetailleerde beschrijving van de functionaliteiten en gebruikersinteracties die nodig zijn om de gemaakte doelen van een website te bereiken. Het kan worden gezien als een visueel hulpmiddel om het technisch ontwerp van de website duidelijk in kaart te brengen.
Een belangrijk onderdeel van een functioneel ontwerp is navigatie. Deze wordt vaak vooraf gemaakt met hulp van een wireframe. Hierin wordt de structuur van de website duidelijk in kaart gebracht en worden knoppen en andere klikbare elementen aan elkaar gelinkt.
Het ontwerp is een belangrijk visueel hulpmiddel om de ontwikkeling van de website te begeleiden. Aan de hand van een strakke planning wordt de complete uitwerking van de website ingedeeld.
Dit hulpmiddel heeft met name een grote meerwaarde in grote teams. Het is absoluut verstandig om een functioneel ontwerp te maken wanneer front end, back end en marketeers samen aan de website gaan werken
Hoe maak ik een functioneel ontwerp website?
1. Identificeer de doelgroep
Als eerst is het belangrijk om na te gaan waarvoor je het functioneel ontwerp maakt. Dit heeft veel invloed op het uiteindelijke eindresultaat van de website. Wat voor soort website wordt het en welke gebruikers gaat deze website krijgen.
Maak je bijvoorbeeld een website waarop je een API verkoopt, dan mag het functioneel ontwerp wel iets complexer worden dan wanneer de website wordt gemaakt voor de oudere doelgroep.
2. Maak de structuur en inhoud inzichtelijk
Maak vervolgens de structuur en de inhoud van de website inzichtelijk. Dit kun je doen aan de hand van een wireframe. Dit is een schets van hoe de website ingedeeld wordt en hoe de pagina’s aan elkaar gelinkt worden.
Daarnaast kan er alvast een opzet worden gemaakt van de inhoud. Door deze alvast in een standaard formaat van een apparaat te stoppen krijg je een goed idee van het functioneel ontwerp. Deze opzetjes worden ook wel een mockups genoemd.
Er zijn verschillende ontwerp programma’s voor het maken van een gedegen functioneel ontwerp. Een bekende applicatie hiervoor zijn de designsystemen van Figma.
3. Ontwerp de gebruikersnavigatie
Wanneer de indeling inzichtelijk is kan ook bepaald worden hoe de gebruiker over de website gaat navigeren. Het doel hierbij is om dit zo makkelijk mogelijk te maken.
De gebruikersnavigatie moet in bijna alle gevallen gemaakt worden op basis van het krijgen van conversies. Je wilt natuurlijk zoveel mogelijk leads of omzet uit een website halen. In sommige gevallen kan het doel ook zijn om gebruikers zo lang mogelijk op de website te houden.
Bij het maken van de navigatie voor de gebruikers is het ook belangrijk om rekening te houden met responsive webdesign. Zorg ervoor dat het ontwerp geschikt is voor alle apparaten.
4. Breng de functionaliteiten in kaart
Een goed functioneel ontwerp bevat ook een duidelijk overzicht van de functionaliteiten van de website. Dit kunnen bijvoorbeeld lead formulieren van een website zijn.
Het is belangrijk om goed na te denken over deze fucties, omdat het vaak onduidelijk is voor de gebruiker hoe deze gebruikt moeten worden. Voor de ontwikkelaar is dit vaak logisch, maar voor een nieuwe gebruiker niet.
Probeer de functies zo makkelijk mogelijk te maken. Focus hierbij op zo weinig mogelijk opties en stappen om deze te voltooien. Voeg uitleg toe waar nodig.
5. Maak een technisch ontwerp
Bij het technische ontwerp wordt bepaald welke software gebruikt gaat worden voor de website. Denk hierbij aan het management systeem en de daarbij behorende plug ins.
Het technische ontwerp geeft de programmeur houvast en vermeldt welke keuzes hij moet maken wanneer hij gaat starten met het maken van de daadwerkelijk website.
6. Test de functionaliteiten
Voordat de functies worden gemaakt moeten ze eerst nog getest worden. Het testen van verschillende onderdelen kan nieuwe inzichten geven. Dit zorgt er ook voor dat de daadwerkelijke website goed aansluit bij de behoeften van de gebruiker.
7. Documenteer en maak een visueel hulpmiddel
Vat alle bovenstaande richtlijnen samen in één duidelijk document. Dit vormt het centrale uitgangspunt van het ontwerpproces. Zorgt dat er weinig ruimte is voor eigen invulling om misverstanden te voorkomen.
Waarom een functioneel ontwerp?
FO biedt duidelijke richtlijnen
Een functioneel ontwerp voor een website biedt duidelijke richtlijnen voor alle ontwikkelaars die meerwerken aan de opdracht. Het document vormt de blauwdruk van de website waaruit iedere betrokken persoon werkt.
Het functioneel ontwerp website is niet alleen de bouwtekening voor het website bureau, maar kan ook gecommuniceerd worden met een online marketing bureau. Hierdoor kunnen derden ook gericht werken.
Zorgt dat het binnen het budget blijft
Een functioneel ontwerp zorgt ervoor dat er meer inzicht wordt gegeven in de kosten van de website. Het zorgt ervoor dat de begroting uitkomt en dat een opdrachtgever niet ineens wordt verrast met een dure factuur.
Voorkomt miscommunicatie
Verder is een functioneel ontwerp voor een website ook een waardevol communicatiemiddel. Het kan vormen als duidelijke briefing en zorgen voor goede onderlinge communicatie tussen verschillende afdelingen.
Een duidelijk FO is zo gemaakt dan alle aspecten aan bod komen. Dit zorgt ervoor dat er geen ruimte voor eigen invulling komt. Hierdoor hoeven er geen aanpassingen meer worden gemaakt.
Verschil tussen functioneel ontwerp en grafisch ontwerp
Het grootste verschil tussen een functioneel ontwerp en een grafisch ontwerp is dat een functioneel ontwerp zich meer focust op de functies van de website en het grafisch ontwerp op de visuele aspecten.
Een functionele ontwerper is meer bezig met de gebruikerservaring en de nieuwe functionaliteiten van de website. Op basis hiervan maakt hij een functioneel ontwerp.
Een functioneel ontwerper en een grafische ontwerper werken wel veel samen. Samen zorgen ze voor zowel een visueel aantrekkelijke website als een website die goede te gebruiken is.
Waar moet je op letten bij het maken van een functioneel ontwerp?
Wees duidelijk en specifiek
Bij het maken van een functioneel ontwerp voor een website is het belangrijk dat alles zo concreet mogelijk beschreven staat. In een duidelijke FO staat goed beschreven waar ontwikkelaars rekening mee moeten houden.
Schrijf gericht voor de ontwikkelaars
Een functioneel ontwerp is bedoeld voor de ontwikkelaars van de website of applicatie. Daarom moet een functioneel ontwerp hiervoor ook geschreven worden. Een compleet FO is de perfecte bouwtekening voor het ontwikkelen van het eindproduct. Met name voor een maatwerk website kan dit een groot voordeel opleveren.
Werk een functionaliteit duidelijk uit
In aanvulling op het vorige punt is het met name belangrijk om optionele functionaliteiten goed uit te werken voor de verdere ontwikkeling. Benoem de opbouw de functies en geef alvast een visueel ontwerp van de functionaliteiten.