Regelmatig ervaar ik dat collega programmeurs, webdesigners en andere webspecialisten weinig ervaring hebben met interactieontwerpen. Doodzonde. Het interactieontwerp is de sleutel tot een effectieve, gebruiksvriendelijke website. Hoe ‘simpel’ de site ook is. Als spil in het webproject zorgt de interactieontwerper voor vroegtijdig inzicht in de interactie en gebruiksvriendelijkheid. Structuren en draadmodellen scheppen de juiste verwachting bij klanten en voorkomen dat er onnodig tijd en geld wordt weggegooid.

Interactieontwerp?

Interactieontwerp of interaction design zal voor de meeste Frankwatching-lezers geen nieuwe term zijn. Toch start ik graag met een definitie. Op Wikipedia staat:

“Interaction design is een ontwerpdiscipline die zich bezighoudt met het gebied waarin mens en systeem elkaar tegenkomen; elkaar ontmoeten.”

Wat specifieker gericht op websites: het interactieontwerp beschrijft en laat vooral zien hoe de interactie tussen de bezoeker en de website zal zijn. Hoe werkt de navigatie? Hoe wordt de content gepresenteerd? Hoe worden (complexe) bezoekerstaken uitgevoerd? Hoe worden de doelen van de organisatie gerealiseerd? Kortom: wat staat waar, hoe werkt dat en waarom?

Elements of User Experience

Het interactieontwerp is de spil in het webproces, zoals te zien in het inmiddels oermodel voor webontwikkeling van Jesse James Garrett: ‘Elementen van User Experience’ uit 2003 (PDF).

Waarom dit betoog voor interactie ontwerp?

In mijn werk als interactieontwerper maak ik regelmatig mee dat collega programmeurs, webdesigners en mijn klanten nog weinig ervaring hebben met draadmodellen (‘wireframes’) en beschrijvingen van de interactie. ‘We hebben een sitestructuur en weten dus wat er op de site komt, da’s toch voldoende?’. Juist dit onderdeel in het ontwikkelproces zorgt ervoor dat alle gezichten één kant op staan. De programmeur kan vroegtijdig zijn functionele (technische) ideeën toetsen en bijstellen, de vormgever kan zich volledig storten op creativiteit. En de klant krijgt in de conceptfase al goed een beeld van de toekomstige site.

Deliverables van de interactieontwerper

Wat draagt de interactieontwerper concreet bij in het bouwproces? Hij of zij levert:

• Concrete bezoekerstaken
  In samenwerking met de marketing- en communicatiespecialisten in het team stelt de interactieontwerper de doelen van de bezoekers vast: de primaire taken van de doelgroep.
• Sitestructuur (sitemap)
  De inhoud van de website. Bij grotere webprojecten doet hij dit samen met de informatiearchitect. Het opstellen van de sitemap lijkt eenvoudig, maar kan om veel onderzoek, aandacht en expertise vragen. Zoals te lezen is in de diverse artikelen op Frankwatching. Uiteraard wordt in dit proces ook de webredactie betrokken.
• Wireframes (draadmodellen)
  Schematische tekeningen van de toekomstige website of webapplicatie. Naar mijn mening de belangrijkste bijdrage van de interactieontwerper.
• User scenarios
  Welke stappen moet de bezoeker doorlopen om zijn taak te voltooien? Met behulp van wireframes worden belangrijke taken van een bezoeker uitgewerkt in klikpaden.
• Flowcharts
  De ‘modelweergave’ van een user scenario: beschrijvingen en modellen van complexere taken, zoals de stappen in het boeken van een vakantiehuisje. De flowcharts beschrijven welke mogelijke routes de bezoeker kan nemen en geven zo inzicht in niet-lineaire processen.
• Paper prototypes
  Met behulp van geprinte wireframes (of goed getekende schetsen) kan in een vroeg stadium de usability getest worden met paper protypes. Meestal worden er diverse varianten van een scherm getest en tijdens het testen direct aanpassingen gedaan om het effect te bekijken.

De voordelen van interaction design in het ontwerpproces

‘Maar we kunnen toch gewoon lekker gaan bouwen en vormgeven?’ Waarom een interactieontwerper essentieel is in het projectteam:

• Effectiviteit en gebruiksvriendelijkheid gewaarborgd
  Als usability-expert in het webproject houdt de interactieontwerper zich puur en alleen bezig met de gebruikerservaring. In alle stappen van het bouwproces waarborgt hij of zij de gebruiksvriendelijkheid. Met zijn ervaring en gebruikerstests blijft de effectiviteit van de site overeind.
• Verwachtingen van klant managen
  Of je nu als marketing- of communicatieprofessional werkt aan de bureauzijde of klantzijde; iedereen heeft een (interne) klant waar hij of zij de voortgang van een webproject aan mag verantwoorden. Op papier is het webproject al door het team uitgedacht. De doelen, inhoud, functionaliteiten, navigatie: een prachtig document met tientallen pagina’s met tekst; alles is duidelijk. Mijn ervaring is dat deze documenten, die absoluut essentieel zijn, vluchtig worden gelezen en nog vrij abstract zijn voor diegene die zich niet met de inhoud bezighoudt. ‘Tja, lijkt me prima, jullie zullen het wel weten!?’, zegt de klant. Wireframes geven deze klant wel een beeld. Hij ziet hoe de content op de pagina staat, hoe de metanavigatie en hoofdnavigatie werkt (‘Oh, bedoelden jullie dat!’) en hoe je als bezoeker complexere taken, zoals een bestel- of zoekproces, doorloopt. Het schept de juiste verwachtingen en voorkomt vervelende discussies tijdens de bouwfase (‘maar zo had ik het niet voor me gezien…’).
• Nieuwe inzichten voor functioneel ontwerp
  Het functioneel ontwerp (FO) beschrijft de functionele – doorgaans technische – werking van de website.

  Een versimpeld voorbeeld:
  Op de pagina ziet de bezoeker de geavanceerde zoekfunctie met de velden <veld a>, <veld b>, <selectiebox a>, etc.

  Na bevestiging van de zoekopdracht krijgt de bezoeker een zoekresultaat met elementen <titel>, <samenvatting>, <afbeelding>, <toevoegen aan verlanglijst> en <lees verder>.

  Een prima beschrijving. Maar eenmaal uitgetekend door de interactieontwerper blijkt het proces niet helemaal logisch te zijn. Er ontbreken onderdelen in het gebruikersconcept waar nog niet over na is gedacht. Hoe volledig de beschrijving op papier ook lijkt; het blijft een beschrijving. Je kunt immers niet alles beschrijven wat er te zien en te doen valt. Dat moet je ervaren. En die ervaring benader je in de conceptfase het beste met wireframes. Het interactieontwerp helpt dus ook bij het aanscherpen en verbeteren van het functioneel ontwerp.

• Vormgever kan weer vormgeven
  Met goedgekeurde wireframes kan de vormgever vorm geven aan de inhoud. Hij of zij hoeft zich minder met de content en usability bezig te houden en kan zich volledig richten op dat waar hij goed in is: het leveren van een aansprekend design. Uiteraard draagt de webdesigner met bijvoorbeeld consistent kleurgebruik en goed leesbaarheid bij aan de usability.
• Alle aspecten van een website komen bij elkaar
  De interactieontwerper werkt nauw samen met alle specialisten in het webproject. Het is zijn rol om continu de ideeën en wensen van de klant, programmeurs en designers op elkaar af te stemmen. Hij is het aanspreekpunt voor zijn collega specialisten en het (interne) aanspreekpunt.
• Voorkomt verspilling van geld en tijd
  Eerder beschreef ik al dat het werk van de interactieontwerper vroegtijdig in het bouwproces inzicht geeft in de toekomstige site. De draadmodellen reduceren het aantal iteratieslagen van bijvoorbeeld het design. De kolomverdeling, soorten navigatie, et cetera staat al vast. Dus iedereen kan zich in deze fase richten op de uitstraling en esthetiek.

Ook voor kleine budgetten en websites essentieel

Bij de meeste grotere internetbureaus en organisaties is het belang van interactie ontwerp, voor zover ik weet, al enkele jaren goed ingedaald. Er is in vergelijking tot kleinere organisaties meer budget en dus tijd voor het webproject. Maar ook voor een kleiner budget zijn enkele dagen aan interactieontwerp geen verspilling van geld. Uiteraard wil je een goed design, goede techniek, content en wellicht een CMS. Maar de effectiviteit – en dus het rendement – van je website valt of staat bij de juiste interactie met de bezoeker. De content op de juiste plek, intuïtieve navigatie en goede gebruiksvriendelijkheid zorgt ervoor dat de website zijn doel behaald.

Wat is jullie ervaring?

Uiteraard ben ik erg benieuwd naar jullie ervaring met interactie ontwerp. Hoe is het om zonder of juist met deze specialist te werken? Wat moet de interactieontwerper absoluut niet doen? En vragen bijvoorbeeld nieuwe ontwikkelingen, zoals user generated content en web2.0-achtige sites om een nieuwe aanpak en expertise voor de interactie ontwerper? Ik lees het graag.

In het eerste artikel over online jaarverslagen zette mijn collega Boudewijn Bugter de voordelen van een online jaarverslag uiteen. Overtuigd? Dan is je volgende vraag vast hoe je de totstandkoming van het online (half)jaarverslag, kwartaalbericht of online jaarplan aanpakt. Als je al ervaringen hebt met het papieren jaarverslag, zul je veel stappen wel herkennen. Maar toch verschilt de realisatie van het online jaarverslag van het traditionele jaarverslag. Een nieuw middel, een nieuwe dimensie, een nieuwe aanpak.

Vorige week schreef ook Bart ter Steege van JungleMinds over het online jaarverslag. Hij beschreef met een definitie-, ontwerp- en realisatiefase in het kort de te nemen stappen en activiteiten. In dit artikel gaan we dieper op in op de aanpak van het online jaarverslag. We staan stil bij:

• Draagvlak creëren binnen je organisatie
  Het produceren van jaarverslagen is vaak een lastig en omvangrijk traject. Hoe zorg je ervoor dat iedereen binnen je organisatie meewerkt?
• Communicatiedoelen en –strategie vertalen naar boodschappen
  Wat zijn de communicatiedoelstellingen en –strategie dit jaar? Hoe wordt de organisatie gepositioneerd, welke kernwaarden (merkwaarden) wil je overbrengen en wat is het (daarbij behorende) thema?
• Inhoud en informatiebehoefte van je stakeholders
  Wat wil je, vanuit je strategie, vertellen? Welke emoties wil je overdragen? Omdat een website ontvangersgericht is, zul je de site moeten inrichten op de informatiebehoefte van de ontvanger. De lezer, of beter gezegd de bezoeker, staat aan het roer. Dit vraagt om een andere benadering dan je gewend bent. Wat willen je stakeholders weten, in plaats van wat jij wilt vertellen?
• Bepalen van de content online jaarverslag
  Is de strategie vertaald naar concrete boodschappen? En heb je onderzocht wat de informatiebehoeften van je stakholders zijn? Dan ligt er een goede basis om aan de slag te gaan met de inhoud. Je bepaalt de verschillende vormen van content. Webtekst zal, terecht, het grootste aandeel hebben. Maar wat ga je met video overbrengen? En wat met animaties, infographics en animaties? En hoe integreer je het geheel?
• Online en offline jaarverslag combineren
  Vaak is er toch behoefte aan een papieren versie van het jaarverslag. Wat zet je in het offline jaarverslag en wat komt online? We staan stil bij de afwegingen en de volgorde van het productieproces.
• Interactie
  Online betekent meer mogelijkheden voor interactie met je stakeholders. Voor veel organisaties spannend en zelfs een beetje eng, maar zeer kansrijk. Kom direct in contact met je stakeholders en verzamel waardevolle input voor je communicatiestrategie en volgende jaarverslag.

Intern draagvlak creëren voor online jaarverslag

Voor het jaarverslag moet de input uit alle hoeken en gaten van de organisatie komen. Dat maakt het produceren van jaarverslagen vaak een lastig en langdurig traject. Hoe zorg je ervoor dat iedereen meewerkt aan de online versie? Allereerst is het noodzakelijk om (top)bestuurders en management te overtuigen van het nut van een online versie. Meetbaarheid, interactiviteit en kostenbesparing zijn voordelen die hen vast en zeker aanspreken. Veel organisaties hebben daarnaast innovatie in hun strategie vastgelegd. Een online versie spreekt dan voor zich.

Stel een projectteam samen waarin alle afdelingen zijn vertegenwoordigd. Maak hen eindverantwoordelijk voor het aanleveren van input van hun afdeling en het maken van beslissingen. De samenwerking in het projectteam (en met externe partijen) is doorslaggevend voor een prettig en efficiënt realisatieproces. Maak afspraken, planningen en leg verantwoordelijkheden (op papier) vast.

Doelen en strategie vertalen naar boodschappen jaarverslag

Wat zijn de communicatiedoelstellingen en –strategie van je organisatie? Hoe wordt de organisatie gepositioneerd, welke kernwaarden (merkwaarden) wil je overbrengen en wat is het (daarbij behorende) thema? Vul de volgende vraagstukken in:

• Doelgroep vaststellen
  Voor wie ontwikkel je het online jaarverslag primair? Zijn dat je klanten, aandeelhouders, leveranciers of personeel? Maak keuzes en bepaal je primaire doelgroep. Beschrijf wie de lezer (bezoeker) is door persoonlijke kenmerken (bijvoorbeeld door een ijkpersoon of persona op te stellen) en interesses vast te stellen. Lees hierover onder meer in onze publicatie in C, Magazine voor Communicatie (PDF, juni 2008)
• Kernwaarden en thema
  Welke kernwaarden krijgen aandacht in het jaarverslag? Wat is het thema van het jaarverslag 2008? Innovatie, duurzaamheid, educatie, de fusie in 2008, etc. Vertaal het thema naar de belangrijkste boodschappen die je wilt overbrengen. Maak deze kernboodschappen niet te gedetailleerd en beperk je tot 5 tot 10 boodschappen. Met de juiste content(vorm) gaan we deze boodschappen vervolgens verder uitwerken.

Inhoud en informatiebehoefte van je stakeholders achterhalen

Naast de verplichte onderdelen, de ‘cijfertjes’ in de jaarrekening, ben je ieder jaar vrij om het jaarverslag te voorzien van gewenste informatie. Met verhalen en interviews neem je jouw stakeholders mee in de ontwikkelingen en visie van je organisatie.

Informatiebehoefte van je doelgroep leidend

Het jaarverslag is vaak een zeer zendergericht communicatiemiddel. Het verslag op internet zul je echter moeten inrichten op de informatiebehoefte van de ontvanger. Je kunt deze informatiebehoefte onder meer achterhalen met:

• Interviews: vraag je stakeholders simpelweg wat zij graag over je organisatie willen weten als het gaat om de ontwikkelingen in 2008. Wat interesseert hen het meest? Het verhaal achter de fusie? Hoe de medewerkers de ontslagronde hebben ervaren? Hoe het Raad van Bestuur naar 2009 uitkijkt? Hoe het bedrijf zijn marktaandeel heeft weten te verbeteren? Achterhaal en vraag door.
• Enquête: stel een (online) enquête op en laat je stakeholders zelf hun vragen en ideeën invullen. Of stel – aan de hand van de interviews – een lijst op met belangrijke onderwerpen en laat je stakeholders de lijst prioriteren. De onderwerpen met de meeste stemmen komen centraal te staan.
• Klankbord: betrek je belangrijkste stakeholders bij het redactieproces van het jaarverslag. Nodig ze uit voor de brainstorms en laat ze meebeslissen over de inhoud.

Bepalen van content online jaarverslag

Is de strategie vertaald naar de belangrijkste boodschappen voor je doelgroep? Dan kun je de verschillende contenttypen gaan bepalen. Webtekst zal, terecht, het grootste aandeel hebben. Maar nu je een online jaarverslag gaat ontwikkelen, is het een doodzonde om de andere vormen niet te benutten. Vorig jaar schreef ik met Boudewijn Bugter een artikel over contentstrategie. Onderaan het artikel zetten we de eigenschappen van fotografie, geluid en video uiteen. Bepaal de sitestructuur van het online jaarverslag en stel een contentplan op. Hierin beschrijf je gedetailleerd per pagina welke vorm van content erop komt en wat de inhoud daarvan is. Een beknopt overzicht:

• Webteksten: primaire vorm van content

  Webteksten vormen de basis voor het online jaarverslag. De aangeleverde input, vaak beleidsmatige teksten, zal flink geredigeerd moeten worden. Zorg voor bondige, scanbare webteksten (meer hierover onder meer op de website van mijn collega Christiaan Lustig). Om de woorden van je doelgroep te gebruiken en te zorgen voor een goede vindbaarheid in zoekmachines, kun je bijvoorbeeld gebruik maken van de Google-keywords suggestietool. Enkele aandachtspunten: vermijd merknamen en vakjargon in titels en koppen, zorg voor informatieve linkjes (dus niet: lees meer) en zorg voor beknopte alinea’s. Het herschrijven en goed laten keuren van webteksten door de inhoudelijke expert zal behoorlijk wat tijd in beslag nemen. Begin hier dus vroeg mee!

  Uitgelicht: facetnavigatie
  Een interessante manier van informatieontsluiting is facetnavigatie. Een bezoeker van een website met facetnavigatie kan klikken op een lijst met trefwoorden in het facetmenu. Daarmee verfijnt hij informatie. Als zoekresultaat blijven alleen documenten over die een relatie hebben met de gekozen trefwoorden.

  Het online jaarverslag van Oxfam Novib: een voorbeeld van facetnavigatie.

  Naar mijn mening is facetnavigatie de meest ‘extreme’ vorm van ontvangersgerichte informatieontsluiting. Weg met hoofdstukindelingen en sitestructuur: enkel kleine brokjes informatie die de bezoeker zelf bij elkaar sprokkelt. Ik kom hier in een ander artikel graag eens op terug.

• Video: uitleg en emotie overbrengen

  Ja, we willen filmpjes! Maar wat ga je met video overbrengen? Met video kun je complexe onderwerpen eenvoudiger uitleggen en toelichten. Producten en complexe processen worden – in tegenstelling tot een tekstuele beschrijving – ineens duidelijk.

  

  In de video van het online Jaaroverzicht van GBO.Overheid wordt de werking van de online patientenportaal uitgelegd (video kan helaas niet direct worden weergegeven).

Video is ook uitermate geschikt om een emotie, sfeer en een bepaald gevoel over te brengen. Je kunt het nog zo mooi opschrijven, met beeld en geluid neem je een bezoeker veel meer mee in je belevingswereld. Daarnaast: zien is geloven. Van alle vormen van content komt video het dichtst bij de werkelijkheid. De kijker kan beter beoordelen of hij de afzender van de boodschap gelooft en vertrouwt. Een bestuurder die op een krachtige en menselijke manier zijn visie overbrengt in een filmpje, komt krachtiger over dan een overtuigend geschreven tekst. Je ziet de persoon achter de organisatie. Meer over webvideo in mijn artikelenserie over dit onderwerp: het wanneer, waarom en hoe en produceren en publiceren van webvideo.

• Afbeeldingen, (interactieve) grafieken en infographics

  Met sterke fotografie kun je de boodschap op een pagina versterken. Zorg er wel voor dat de informatie de meeste aandacht krijg op een pagina. Met (interactieve) grafieken en infographics kun je uiteraard je jaarcijfers op een goede manier weergeven. Hierover schreef Bart ter Steege meer. De grafiekengenerator op het jaarverslag van de Rabobank Groep is hier een mooi voorbeeld van.

Productieproces: online en offline jaarverslag combineren

Vaak is er toch behoefte aan een papieren versie van het jaarverslag. Een belangrijke groep stakeholders ‘is niet zo online’ of je wilt toch iets kunnen uitdelen of ergens achterlaten. Ga niet voor of/of, maar kies voor een crossmediale jaarraportage en benut de kracht van elk kanaal optimaal. Maak bijvoorbeeld een papieren samenvatting van het jaarverslag inclusief jaarjaarrekening en verwijs daarin naar de online versie. Doordat de hoeveelheid (waarschijnlijk) omlaag gaat, kan de kwaliteit omhoog: mooi drukwerk, papier en sterke fotografie zorgt ervoor dat de offline versie niet in de kast belandt. De online versie bevat meer gedetailleerde informatie en wordt daarmee meer een kennisbank.

Stroomlijn de contentproductie en voorkom ongewenst versiebeheer

Wanneer er zowel een offline als online jaarverslag wordt gemaakt, is het verstandig om de content voor beide vormen in één keer te produceren. Of eerst intern alle content voor de offline versie te accorderen en dan online te verwerken. Dit voorkomt de eindeloze stroom aan versies en iteratieslagen.

Interactie: het online jaarverslag 2009?

Een online jaarverslag betekent meer mogelijkheden voor directe interactie met je stakeholders. Ik ben echter nog geen interactieve jaarverslagen tegengekomen. En ook met onze opdrachtgevers hebben we deze stap nog niet echt gezet. Toch zie ik hier wel de toekomst in, wellicht al in 2009. Zo zou je stakeholders onder pagina’s kunnen laten reageren, zoals hier op Frankwatching, polls kunnen aanbieden of zelfs een live chatsessie kunnen organiseren met bestuursleden van je organisatie. Het zijn slechts enkele ideeën…

Artikelenreeks online jaarverslagen

Dit artikel is een onderdeel van een artikelenreeks over online jaarverslagen. In een eerder artikel schreef mijn collega Boudewijn Bugter over de voordelen van het online jaarverslag. In artikel 3 schrijven we over de (crossmediale) lancering van het online jaarverslag, hoe je je stakeholders er op een leuke manier op attent kunt maken en wat je er gedurende de rest van het jaar mee kunt. Dit artikel verschijnt op 31 augustus 2009.