Het functioneel ontwerp van je website

Als je met een programmeur spreekt over het maken van een website kan het zijn dat de termen functioneel ontwerp en technisch ontwerp vallen. Een functioneel ontwerp is een beschrijving van de werking van je website, de functionaliteiten. In dit artikel meer over het nut van een functioneel ontwerp, hoe je dit opstelt, en wat het verschil is met een technisch ontwerp.

Het nut van een functioneel ontwerp
Misschien denk je, waarom zou ik een functioneel ontwerp willen schrijven? Een eenvoudige website is toch niet zo ingewikkeld? Belangrijkste reden is: een functioneel ontwerp (FO) voorkomt problemen in interpretatie!

Een functioneel ontwerp helpt je dus om duidelijkheid te verschaffen in de afspraken die je maakt met een programmeur. Als je dit niet doet en ervan uitgaat dat het in de prijs is inbegrepen, kan het zijn dat je niet krijgt wat je verwachtte.

Hoe stel je een functioneel ontwerp op?
Ga alsvolgt te werk:
1) Op basis van je sitemap kan je bepalen welke pagina's je hebt in je website en welke soort pagina's er zijn. Begin hiermee. Per type pagina neem je in je functioneel ontwerp een beschrijving op. Heb je nog geen sitemap, maak die dan eerst.
2) Denk bij het beschrijven van een functionaliteit altijd vanuit de bezoeker! Hoe komt hij/zij op deze pagina? Hoe ervaart hij/zij de werking van deze pagina? Wat ziet hij? Wat moet hij doen om een functionaliteit in gang te zetten?
3) Bedenk vervolgens welke stappen de bezoeker binnen de pagina doorloopt en wat is het resultaat van elke stap.
Het helpt als je er een tekening bij maakt die de verschillende stappen aangeven. Dit kun doen met een programma als Microsoft Visio:

Een voorbeeld: de contactpagina
Ter illustratie werk ik een mogelijk functioneel ontwerp voor een contactpagina uit. De bijbehorende workflow is als hierboven aangegeven.

A. De weg naar de contactpagina
1) De bezoeker klikt op de link Contact in het hoofdmenu. Hiermee komt hij op de contactpagina.
2) De titel van de pagina is "Contact".

B. De inhoud van de contactpagina
1) De bezoeker ziet eerst een toelichtende tekst, daarna het adres, het telefoonnummer en e-mail adres van het bedrijf.
a) Als de bezoeker op het e-mail adres klikt opent zich het mailprogramma van de gebruiker en kan hij een mail versturen naar info@mijnbedrijf.nl.
2) Hieronder ziet de bezoeker een formulier.

C. De werking van het formulier
1) Het formulier heeft 5 velden met de volgende labels:
a) Naam – een invulveld met maximaal 250 tekens
b) E-mail adres – een invulveld met maximaal 100 tekens
c) Herhaal e-mail adres – een invulveld met maximaal 100 tekens
d) Opmerkingen – een groot invulveld met maximaal 1000 tekens
2) Alle velden zijn verplicht. Dit ziet de bezoeker doordat er een * staat achter elk label. Boven het formulier staat de tekst: alle velden zijn verplicht.
3) Onder het formulier staat een knop "Verstuur opmerking".
4) Als de bezoeker klikt op de knop "Verstuur opmerking" wordt het formulier gecontroleerd op alle velden.
a) Als de naam leeg is, minder dan 3 karakters of meer dan 250 karakters krijgt de bezoeker een foutmelding. Een gerichte suggestie voor verbetering wordt hierbij gegeven.
b) Als de velden E-mail adres of Herhaal e-mail adres leeg zijn, geen geldige e-mail adressen zijn, meer zijn dan 100 karakters of niet gelijk zijn aan elkaar krijgt de bezoeker een foutmelding. Een gerichte suggestie voor verbetering wordt hierbij gegeven.
c) Als het veld Opmerkingen leeg is of meer dan 1000 karakters krijgt de bezoeker een foutmelding. Een gerichte suggestie voor verbetering wordt hierbij gegeven.
Het formulier kan dus alleen worden verzonden als alle velden juist zijn ingevuld.

D. De verwerking van het formulier
1) Nadat de bezoeker het formulier heeft verzonden wordt de inhoud van het formulier verstuurd naar info@mijbedrijf.nl. De titel van het bericht is "Resultaten contactformulier – [inhoud van het veld naam].
2) Een kopie gaat naar het e-mail adres van de bezoeker. De titel van de e-mail aan de bezoeker is: Dank voor uw reactie op mijnbedrijf.nl. Bovenaan het bericht staat:
Beste [naam bezoeker],

Wij hebben uw reactie ontvangen en reageren binnen 48 uur. Mocht u tussentijds vragen hebben, neemt u dan contact met ons op op 0123-456789.

Vriendelijke groet,

[naam afzender en bedrijf]
3) Hieronder staat een weergave van de reactie.
4) Onderaan het bericht staat de vaste disclaimer van ons bedrijf over de inhoud van het bericht.

E. Een bedankpagina
1) Vervolgens komt de bezoeker op de bedankpagina met als titel: "Dank voor uw reactie!".
2) De verdere inhoud van de pagina is:
Beste [naam bezoeker],

Wij hebben uw reactie ontvangen en bevestiging verstuurd naar [e-mail bezoeker]. Wij zullen binnen 48 uur reageren op uw vraag.
Mocht u tussentijds vragen hebben, neemt u dan contact met ons op op 0123-456789.

Vriendelijke groet,

[naam afzender en bedrijf]
3) Hieronder staat een weergave van de reactie.
4) Hieronder staat een link naar de homepage.

Samenvattend
Zoals je ziet kan het schrijven van een functioneel ontwerp erg uitgebreid zijn. Toch zul je merken dat je hiermee ook je eigen ideeën ordent en – tijdens het schrijven – op betere oplossingen komt. Hoe meer bezoekers van je website moeten kunnen, des te meer een functioneel ontwerp loont.
Je kunt het schrijven van een FO ook uitbesteden. Neem het schrijven van een functioneel ontwerp dan op als een apart onderdeel van de opdracht voordat je een definitieve offerte aanvraagt voor het bouwen van je website.

Wat is het verschil met een technisch ontwerp
Op basis van een functioneel ontwerp kan een programmeur direct gaan bouwen of – bij een wat grotere website – eerst een technisch ontwerp maken. In het technisch ontwerp staat hoe de programmeur het functioneel ontwerp technisch gaat realiseren. Het uitgangspunt is dan niet meer de bezoeker, maar de techniek.