Webproject management in vijf fasen - deel 2

Dit is deel 2 van een artikel over webproject management. Hier worden fasen 3 tot en met vijf behandeld van een methode door Jesse James Garrett.
Wilt u eerst deel 1 lezen ga dan naar deel 1 van dit artikel

Fase 3: de structuur van de site


Nu is een lijst beschikbaar van gewenste functionaliteit en van gewenste inhoud. Daarbij is ook het belang van de verschillende wensen bekend vanuit verschillende perspectieven en enig idee wat de verschillende wensen kosten in termen van geld, tijd, moeite.

Er is nog niets gezegd over de samenhang tussen de verschillende elementen en de logica van het geheel. In de structuur fase gaat het juist over samenhang en logica.

Om de structuur erin te brengen maken we gebruik van:

  • Interaction design
  • Information architecture

In deze fase ligt het initiatief meestal bij de bouwers van de site. Het navolgende is vooral voor opdrachtgevers met veel interesse voor de vele afwegingen bij het bouwen en ontwerpen.

 

Interaction design

Interaction design betekent niets meer en niets minder dan dat je het (te verwachten) gedrag beschrijft van de bezoeker van de site en vervolgens bedenkt hoe de site daar mee omgaat.

Bij interaction design maak je gebruik van wat Jesse James Garrett noemt: conceptual models. Als je een deel van de site beschrijft waar een bezoeker een aankoop moet kunnen doen kun je bijvoorbeeld gebruik maken van model: met je winkelwagen door een winkel lopen of van het model: een bestelformulier invullen aan de hand van een catalogus.

Bij het denken in termen van conceptuele modellen is het belangrijk om rekening te houden met 'conventies'. Als de doelgroep op andere site regelmatig te maken heeft met shopping carts is het vaak verstandig om hierbij aan te sluiten. Het is niet altijd belangrijk om het model dat je kiest ook expliciet te communiceren aan de gebruiker. Wel is het heel belangrijk dat je dingen consistent doorvoert op de site. Soms zullen conceptuele modellen gekozen worden uit de 'echte wereld'. Dat heeft zeker voordelen maar het kan ook in de weg zitten als je probeert een metafoor te letterlijk te gebruiken.

Een ander belangrijk element van interaction design is het omgaan met menselijke fouten. Een goed interaction design voorkomt in de eerste plaats veel fouten en verder moeten er altijd mogelijkheden zijn om fouten in de communicatie tussen site en gebruiker weer recht te zetten.

 

Informatie architectuur

Informatie architectuur heeft betrekking op de inhoud van de site. Het is een proces van zoeken naar een structuur waar alle inhoud inpast. Je kunt daarbij 'top down' werken door de behoeftes van de gebruiker en doelstellingen van de site te analyseren en dan aan het indelen te slaan. Je ook 'bottom-up' werken door een stapel inhoud (of fictieve inhoud) te nemen en te proberen deze in een aantal hokjes, vakjes, categorieen of volgorde te persen. In de praktijk zul je alletwee de benaderingen gebruiken en steeds heen en weer gaan tot je iets hebt dat logisch is.

 

Om een structuur te kiezen kun je gebruiken maken van bestaande manieren om dingen te categoriseren als:

  • Een boomstructuur
  • Een matrixstructuur
  • Een organische structuur (verschillende soorten relaties tussen verschillende onderdelen)
  • Een lineaire structuur of volgorde

Het allerbelangrijkste bij dit onderdeel is om vooral te denken vanuit de toekomstige gebruiker. Een afzender heeft vaak zo zijn eigen manier om dingen in te delen maar de logica voor de gebruiker hoeft hier niet bij aan te sluiten.

Om een goede webiste te maken is het belangrijk dat behalve een structuur in iedere geval de terminologie of het taalgebruik op een eenduidige manier wordt vastgelegd. Voor makers van de site is het fijn om een woorden- of begrippenlijst te hebben die past bij de inhoud van de site.

 

Metadata

Ook is het goed om aandacht te besteden aan wat men metadata noemt. Metadata zijn gegevens over gegevens. Vaak zijn er bepaalde eigenschappen van een product, artikel of gegeven die voor een bezoeker verschil maken. Dingen waarop hij zal willen zoeken, selecteren of rangschikken. Metadata zijn op een website heel belangrijk om te zorgen dat een gebruiker straks zijn weg vindt. Ook voor de kwaliteit van de geboden inhoud is het belangrijk.

 

Wat kan een opdrachtgever vooral bijdragen in de structuurfase?

Als eerder gezegd ligt in deze fase het initiatief vaak bij de bouwers. Er zijn wel een paar dingen die de bouwers niet kunnen weten en die een opdrachtgever in de regel ter sprake moet brengen. Dan gaat het om deze vragen:

  • Zijn er bepaalde 'conventies' in de omgeving waarin de afzender werkt als het gaat om communicatie tussen afzender en doelgroep, dingen die je in de branche veel ziet, die concurrenten al op een bepaalde manier aanpakken?
  • Welke terminologie en begrippen, indelingen van markten, vakgebieden, productsoorten etc. zijn belangrijk voor de (inhoud van) de website?
  • Is er bepaalde informatie die veel met de doelgroep wordt gedeeld of zijn er gewoontes op dat terrein die van belang zijn voor de website?

Een tekening zegt meer dan…

Ingewikkelde websites zijn gebaat bij diagrammen of tekeningen die de gewenste structuur uitleggen. Voor veel sites zijn een paar eenvoudige schetsjes voldoende. Als het ingewikkeld wordt is er veel meer over te zeggen. Jesse James Garrett heeft een heel interessant (doch niet voor iedereen relevant) verhaal online staan op www.jjg.net/ia/visvocab


 

Fase 4: Het skelet


In de structuurfase is gesproken over conceptuele modellen en indelingen. In de skeletfase gaan we dit concretiseren. Dan gaat het om:

  • Interface design
  • Navigation design
  • Information design

Interface design

Interface design gaat over de softwarekant van de website. Dan gaat het over knoppen, velden en andere vaste onderdelen van een interface. Het gaat over wat de gebruiker kan doen op de site. Dit zijn de aandachtspunten op het gebied van interface design:

  • Een goed design maakt duidelijk wat het belangrijkst is en wat minder belangrijk
  • De meest waarschijnlijke handelingen zijn ook heel gemakkelijk en voor de hand liggend
  • Er is nagedacht over de standaardinstellingen, aan de andere kant kan het heel verschrikkelijk (en dwingend) voelen voor een gebruiker als iemand meent alles voor jou te kunnen bedenken
  • Denk erover na waar je dingen moet voorzien van duidelijke instructies
  • Foutmeldingen zijn erg belangrijk en worden vaak vergeten

Navigatie

Navigation design is het specialistische onderdeel van interface design dat gaat over hoe de gebruiker door de site heen gaat. Het gaat over waar een gebruiker heen kan.

Information design gaat over hoe je informatie effectief overbrengt. Dit zijn aandachtspunten op het gebied van navigatie:

  • Idealiter is van een webpagina op een site meteen duidelijk waarom hij er staat en datzelfde geldt voor de verschillende onderdelen van een pagina
  • Global navigation is de navigatie die op iedere pagina aanwezig is en die altijd toegang geeft tot de belangrijkste delen van de site
  • Local navigation geeft toegang tot 'nabijgelegen' informatie (de moederpagina en kinderpagina's in een boomstructuur)
  • Supplementary navigation geeft direct toegang tot specifieke info elders op de site die met de standaardnavigatie niet toegankelijk is maar juist voor deze pagina wel
  • Contextual navigation zijn navigatiemogelijkheden binnen de inhoud zelf, dus bijvoorbeeld een linkje in een tekstregel
  • Courtesy navigation geeft toegang tot informatie die de bezoeker niet regelmatig nodig heeft maar die voor zijn gemak worden aangeboden, zoals bijvoorbeeld contactgegevens, een formulier waarop je je commentaar kwijtkunt en standaardvoorwaarden.
  • Er zijn standaardvormen op het gebied van navigatie die van pas kunnen komen zoals een 'site map' en een 'alfabetische index' (zoals je die ook vindt achter in een boek).

Information design

Dit gaat over de vraag hoe de informatie zo te presenteren dat de bezoeker het gemakkelijk begrijpt. Belangrijke vragen op het gebied van information design zijn:

  • Welke informatie is gebaat bij visuele ondersteuning
  • Hoe groepeer je informatie zodat het logisch is voor de gebruiker
  • Information design en navigatie komen samen in wat in het Engels wel 'wayfinding' wordt genoemd. Dit begrip wordt bijvoorbeeld gebruikt bij het ontwerpen van vliegvelden. Het gaat erom dat een gebruiker geholpen wordt om te zien waar hij is en waar hij heen kan gaan.

Wireframe of stramien

Het is nuttig om eens een stramien (wireframe) van een (type) pagina op de website te maken of deze te bekijken. Door goed te kijken naar sites met een vergelijkbaar doel kom je al een heel eind. In het maken van een stramien komen de voorgaande onderdelen uit de skeletfase bij elkaar.

 

Fase 5: het uiterlijk

In deze fase worden met name de volgende afwegingen gemaakt:

  • Hoe gaat een normale oogbeweging van een gebruiker en in hoeverre sluit je daar bij aan
  • Waar maak je gebruik van contrasten en waar juist van afstemming van bepaalde elementen op elkaar?
  • Vaste indeling (grid, stramien) versus verrassingen
  • Hoe brengen we consistentie in het uiterlijk van de site. Consistentie is belangrijk òp de site maar ook met andere uitingen van dezelfde afzender.
  • Kleurpaletten en typografie. Hierbij heb je vaak te maken met een bestaande huisstijl maar moet aan de andere kant goed worden gekeken welke elementen van de huisstijl specifiek voor dit medium goed werken en welke niet.

 

Wat betreft de typografie wordt wel onderscheid gemaakt tussen drie soorten typografie op een webpagina:

  • Impressietypografie. Dit is typografie die je aandacht trekt, de prioriteiten aangeeft, zoals bijvoorbeeld koppen en titels.
  • Informatietypografie. Dan hebben we het over leestekst en ook over referentietypografie. Dat laatste zijn de verduidelijkende tekstjes, bijvoorbeeld samenvattingen, inlezers, toelichtingen.
  • Navigatietypografie.

Het is belangrijk dat deze verschillende soorten typografie duidelijk te onderscheiden zijn. Dat geeft de bezoeker het meeste houvast.


Webproject management inspiratiebronnen:

Mijlpalen Ehio Media

Scroll terug in de tijd met het balkje onderin.
2012 Q1
2011 Q2
2011 Q1
2010 Q4
2010 Q3
2012 Q1
2011 Q4
2011 Q3
2011 Q2
2011 Q1
2010 Q4
2010 Q3