Transcript Een website zonder plan, daar komt geen einde an

f rankwat ching.co m
http://www.frankwatching.co m/archive/2014/04/29/een-website-zo nder-plan-daar-ko mt-geen-einde-an/
Een website zonder plan, daar komt geen einde an
dinsdag 29 april 2014 | 08:00 uur
179
inShare
Save
8
Email
Komt het voor dat een klant een nieuw pand laat neerzetten zonder
bouwtekening van het te bouwen gebouw? Dat de aannemer, omdat er
haast is, maar meteen begint met bouwen? Geen tijd voor tekeningen: hij
heef t een idee van hoe het gebouw er ongeveer uit moet zien, dus hup, aan de slag! Bij het bouwen van
websites gebeurt dit helaas heel vaak.
Vorige week sprak ik een projectleider van een nieuwe website van een grote non-prof itorganisatie. Ik vroeg
hem of er al een interaction design was voor de nieuwe website. “Nee” zei hij. “Daar is geen tijd voor. We
willen in de herf st live.”
Mijn prof essionele hart brak. De meeste collega-webbouwers worden op zo’n moment ongetwijf eld net zo
verdrietig als ik. Veel communicatiemensen bij opdrachtgevers zijn nog niet overtuigd van het nut van
bouwtekeningen. Voor hen schrijf ik dit artikel: bezint eer ge aan een website begint en maak een
f unctioneel ontwerp.
Weerstand tegen voorwerk
Z o lang ik in het internetvak zit, ken ik de weerstand die er is tegen voorbereidend werk. Eerst had ik er ook
last van: ik vond het nadenken over precieze f unctionele eisen of het schetsen van wiref rames ingewikkeld
en tijdrovend. Ik was geneigd om te beginnen met een graf isch ontwerp, dat spreekt veel meer tot de
verbeelding; met een lekker design kun je pas echt scoren bij opdrachtgever en stakeholders.
Inmiddels ben ik honderden websites verder. Ik weet hoeveel gezeur een bouwtraject kan opleveren. Ik weet
inmiddels dat je verwachtingen helder moet krijgen. En dat het veel meer kost om dingen achteraf recht te
zetten, dan om er van tevoren goed over na te denken. Bij ons internetbureau maken we dan ook geen
zetten, dan om er van tevoren goed over na te denken. Bij ons internetbureau maken we dan ook geen
website meer zonder voorwerk. Z elf s de kleinste vijf -pagina-contentwebsite krijgt een klikmodel.
Voordelen
Het f ijne van goed voorwerk is dat iedereen weet wat er gemaakt gaat worden. De opdrachtgever weet of
het bureau gaat maken wat hij wil en verwacht. Het bureau heef t helderheid over wat er moet gebeuren.
Problemen tackle je in een vroeg stadium en je loopt niet tegen verrassingen aan. Bovendien kun je, als je
eenmaal aan het werk gaat, ook lekker doorwerken.
Aan het werk, maar hoe dan?
Goed, stel dat je ervan overtuigd bent dat enig voorwerk een goed idee is. Wat ga je dan doen? Hoe
uitgebreid ga je te werk? En als je het voorwerk aan een bureau wilt overdragen, waar vraag je dan om?
In de praktijk gebruiken we verschillende termen door elkaar heen. We zijn niet heel precies in het
onderscheid tussen interaction design, f unctioneel ontwerp, prototyping, wiref rames, klikmodel, f lowchart
en zo verder. Vanuit de dagelijkse praktijk zet ik de begrippen op een rijtje.
Begrip 1: Funct ioneel ont werp
Functioneel ontwerp of interaction design is een overkoepelende term. Het kan meerdere dingen omvatten.
Onderdeel is in elk geval een omschrijving van de f unctionele specif icaties: wat moet de website doen? Een
omschrijving van de beoogde doelgroepen hoort daar logischerwijs bij.
Met het over één kam scheren van f unctioneel en interaction ontwerp zal niet iedereen het eens zijn. Er is
inderdaad een verschil: bij interaction design staat de mens-computer interactie centraal en gaat het vooral
over user-interface. In de praktijk lopen de termen behoorlijk door elkaar heen.
Begrip 2: Userst ories
Als je heel gedegen te werk gaat, werk je de doelgroepen verder uit als persona’s en f ormuleer je
f unctionaliteiten als userstories. Een ‘persona’ is een grondig vormgegeven representant van een doelgroep.
Een userstory beschrijf t in lekentaal wat de gebruiker moet kunnen doen, bijvoorbeeld: “De gebruiker wil
zich kunnen aanmelden voor de nieuwsbrief .”
Illus tratie s me t d ank aan And re van Ite rs o n
Begrip 3: Navigat iest ruct uur
De inf ormatieordening krijgt vorm in een sitemap-achtige boomstructuur (meer over het maken van een
navigatiestructuur.) Processen kun je beschrijven met een f lowchart of stroomdiagram. En natuurlijk komt er
een overzicht van koppelingen met andere sof tware.
Begrip 4: Wiref rames en klikmodellen
Dit alles krijgt zijn beslag in wiref rames. Wiref rames zijn schetsen, blauwdrukken, van pagina’s. Tenslotte
maak je van de wiref rames een klikmodel (ook wel html prototype). Dit is als het ware een maquette van de
website. Je kunt er doorheen klikken, er is nog geen graf isch design en nog niet alle f unctionaliteiten
werken. Met zo’n klikmodel krijg je een heel goede indruk van de te bouwen website.
De wire frame s vo o r d e o ntwikke ling van d e Frankwatc hing -ap p .
Voorbeeld van een klikmodel
Om een idee te krijgen: hier vind je het klikmodel van mijn persoonlijke website. Er is nog niks moois aan,
maar je vindt wel alle pagina’s terug. Formuliertjes en twitterstream werken nog niet, maar je kunt je
voorstellen dat er niet veel misverstanden waren over wat er gebouwd moest worden.
Het technische en graf ische ontwerp volgen op het f unctionele ontwerp. Het technisch ontwerp beschrijf t in
detail hoe de website gaat doen wat hij moet doen en het graf isch ontwerp geef t het uiterlijk aan de
website.
Tools
Er zijn verschillende tools om klikmodellen te maken, hieronder link ik naar drie voorbeeld-tools. Met een
beetje oef ening is zo’n tooltje ook prima te gebruiken door niet-techneuten. Er zijn dan ook opdrachtgevers
die zelf aan de slag gaan.
Axure
OmniGraf f le
Easel
Verwachtingen, daar draait het om
Hoe groter en hoe complexer de website, hoe uitgebreider een voortraject doorgaans is. Maar ook met
kleine websites doe je er goed aan om op zijn minst goed na te denken over doel en doelgroepen en de
f unctionele eisen uit te werken in een klikmodel. Daarmee voorkom je namelijk incidenten als: “Oh, ik dacht
dat er een archief bij nieuws zat.” of “Een contactf ormulier bij contact is toch heel normaal?”
Second opinion
Enige tijd geleden was ik als second opinion betrokken bij een webbouwproject dat uit de hand aan het
lopen was. De opdrachtgever had me gevraagd een oordeel te geven over de website die was opgeleverd
door een collegabureau. Allerlei f unctionaliteiten waarvan de opdrachtgever had aangenomen dat ze
vanzelf sprekend waren – bijvoorbeeld omdat ze in de vorige website ook aanwezig waren – ontbraken op
de nieuwe site. Het bleek dat er in de voorf ase wel wiref rames van de belangrijkste pagina’s geschetst
waren, maar dat het geheel niet uitgewerkt was in een klikmodel.
Klikmodel brengt overeenst emming
Er was nergens documentatie over wat er in detail zou komen; opdrachtgever en bouwer leef den met hun
eigen verwachtingen. Met een goed klikmodel was het gebrek aan overeenstemming voor de bouw aan het
licht gekomen en hadden ze er op dat moment een beslissing over kunnen nemen. En ja, het is vervelend als
dan blijkt dat de opdrachtgever meer hoopt te krijgen, dan waar de bouwer op gerekend heef t bij het
bepalen van de prijs. Maar reken maar dat dit soort dingen rechtzetten bij oplevering, veel vervelender en
duurder is.
Sc he matis c he we e rg ave van he t re s p o ns ive d e s ig n van Frankwatc hing .c o m (2012)
Functioneel ontwerp als pre-of f erte traject
Ik heb een paar keer meegemaakt dat er eerst een f unctioneel ontwerp gemaakt werd, vóór er een
of f erteaanvraag voor een nieuwe website werd uitgezet. Bij grotere opdrachten kan dat een heel goede
manier van handelen zijn.
Inhoudelijke discussie vooraf
Een opdrachtgever laat een f unctioneel ontwerp maken door een bureau, waarin het alle specif icaties
uitwerkt. Verwachtingen krijgen op deze manier vorm in een klikmodel. Bureau en opdrachtgever voeren zo
inhoudelijk discussie over wat de site wel en niet moet doen.
Bet ere of f ert es
Als het f unctioneel ontwerp er is, vraagt de opdrachtgever op basis daarvan of f ertes aan bij bureaus.
Aanbieders kunnen goed inschatten wat het werk behelst, leveren betere of f ertes af , die ook nog eens
beter te vergelijken zijn. En omdat zo’n f unctioneel ontwerp toch gemaakt moet worden, kost het niks extra.
Wie de schoen past
Het mag duidelijk zijn: het bouwen van een website zonder gedegen voorwerk lijkt mij heel onverstandig.
Bouwen met een f unctioneel ontwerp geef t helderheid, scheelt gezeur en is uiteindelijk veel goedkoper. Ik
hoop maar dat de projectmanager van die non-prof itorganisatie dit artikel leest.
Foto intro met dank aan Fotolia.
Uit gelicht : Nieuw! Boek ‘Webdesign: van concept t ot realisat ie’
Meer weten over alle f acetten van webdesign, van concept tot realisatie? Dit
boek leert je een website te ontwikkelen, realiseren en onderhouden aan de hand
van het unieke Internet Project Plan leer je. De vele voorbeelden, praktijktips en
bijdragen van diverse experts op het gebied van design en usability maken dit een
compleet en onmisbaar boek voor webdesigners.
Meer weten?
Copyrights Frankwatching 2014 - Creative Commons licentie van toepassing.