Functioneel ontwerp
  




Uitbesteden of zelf doen? Uiteraard kunt u het maken van een functioneel ontwerp uitbesteden.
Neem indien gewenst contact op om een afspraak te maken.

Wat is een functioneel ontwerp?

Een functioneel ontwerp is de vertaling van een concept naar functionaliteit. Het functioneel ontwerp wordt niet alleen gebruikt om duidelijke afspraken met een programmeur en/of designer te maken maar helpt u ook om uw ideeën duidelijker te ordenen en analyseren.

Zelfs bij een eenvoudige website is het aan te raden een functioneel ontwerp te schrijven, dit voorkomt problemen achteraf. Stel u wilt een contactformulier op uw website. Is dit dan een pagina met alleen uw contactgegevens? Misschien met een route-kaartje erbij? Een contactformulier? Welke velden moeten er dan in dit formulier opgenomen worden en welke velden zijn verplicht? Naar welk e-mail adres moet het verzonden worden? Hoe ziet deze mail er uit? Hoe ziet de bedankpagina er uit? etc.

Nogal wat vragen voor een simpele contactpagina. Een goed functioneel ontwerp zal deze vragen allemaal beantwoorden waardoor zaken als offertes, planning en technisch ontwerp veel doeltreffender ingeschat kunnen worden.

Hoe maakt u een functioneel ontwerp?
  1. Maak een flowchart ( stroomdiagram van de pagina's van uw site, zie figuur 2 ) indien u dit nog niet heeft.
  2. Bepaal welk type pagina's er zijn (b.v. informatief, productpagina, winkelwagen, contactformulier, catalogus-overzicht, etc.)
  3. Maak voor ieder type pagina een beschrijving in het functioneel ontwerp, bij voorkeur gecombineerd met een wireframe (zie figuur 1).
    Denk hierbij aan zaken als:
    Wat staat er op de pagina qua tekst, afbeelding(en), knoppen, formulieren, etc.?
    Hoe kom je op de pagina?
    Omschrijf foutafhandeling (van bijv. formulieren) zo duidelijk mogelijk.
  4. Laat uw ontwerp aan anderen zien om te controleren of u alles wel helder genoteerd heeft.
    Veel zaken kunnen voor u duidelijk lijken, terwijl dit voor een ander misschien niet zo is.

Een voorbeeld
Een voorbeeld van de beschrijving behorende bij de wireframe koffiewijzer:


  • Hoe komt een bezoeker op deze pagina terecht?
    1. Via het hoofdmenu bovenin de site
    2. Via de homepage
    3. Via de footerlinks
    4. Via de rechterbalk op de productpagina's
  • Wat staat er op de pagina?
    Deze pagina bevat een maatwerk online tool waarmee op een gebruiksvriendelijke
    manier een selectie in verschillende koffiebonen gemaakt kan worden.
    D.m.v. selecteren van verschillende criteria (sterkte/aroma/gebruik) zal er een
    selectie bonen getoond worden.
  • Hoe werkt de koffiewijzer?
    Bij het openen van de pagina staan rechts standaard alle koffiesoorten zichtbaar.
    Door in de selector links te filteren/kiezen blijven de koffiesoorten over die aan
    de gekozen criteria voldoen. Deze worden uitgelicht, de ander soorten worden
    weggegrijsd. Bij mouse-over koffiesoort verschijnt box met korte, puntsgewijze info.
    Klikken = link naar betreffende productpagina.



U kunt zich voorstellen dat de omschrijving van bijvoorbeeld een contactpagina nog uitgebreider kan zijn. Hierbij dient u ieder veld van het formulier te beschrijven (naam, aantal tekens, type vel, verplicht of niet, etc.).. Hoe moet op invoer gecontroleerd worden? Hoe ziet de te versturen mail er uit? Hoe ziet de bedanktpagina er uit? etc. etc.
Hoe completer uw omschrijving des te beter de werkzaamheden ingeschat kunnen worden.
U doet de mensen waarmee u samenwerkt een groot plezier door het schrijven van een duidelijk functioneel ontwerp.

Voor het maken van wireframes kunt u gebruik maken van het gratis programma "pencil".
U kunt dit hier downloaden: http://pencil.evolus.vn/







 
fig. 1 - wireframe koffiewijzer


fig. 2 - voorbeeld flowchart