Zonder interaction design geen effectieve website

Weblog No Comments

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?

elementen-van-user-experience-jesse-james-garrett-2003

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.
  • voorbeeld-wireframe-thumbWireframes (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
    amazedOf 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
    fo-documentenHet 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

geldBij 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.

Digitale dienstverlening Nederlandse gemeenten onder de loep

Weblog No Comments

Jaarlijkse onderzoekt Ernst & Young de status van de digitale dienstverlening van alle Nederlandse gemeenten. Dit jaar komt Den Haag als beste uit de bus met het meest volwassen digitale loket. Oftewel: in Den Haag kunnen burgers relatief de meeste zaken volledig online regelen. Maar hoe waardevol is dit onderzoek?

Nationaal Uitvoeringsprogramma Dienstverlening

logo_e_overheidGemeenten worden al jaren gestimuleerd om verder te digitaliseren. Eind vorig jaar maakten het Rijk, provincies, gemeenten en waterschappen afspraken over de realisatie van het Nationaal Uitvoeringsprogramma Dienstverlening en e-overheid (NUP). Dit programma moet ervoor zorgen dat de ‘e-overheid’ (wat is dat toch een schitterende term) betere dienstverlening biedt en minder administratieve lasten oplegt. Eén van de afspraken is de beroemde Webrichtlijn. Maar hoe heeft de digitale dienstverlening zich eigenlijk ontwikkeld, het afgelopen jaar?

Benchmark digitale dienstverlening

ernst--young-canada-2006-tax-tips-canadian-taxpayersErnst & Young onderzocht in hoeverre diensten en producten online kunnen worden geregeld, de betaalmogelijkheden, reactietijd op e-mails, kwaliteit van de zoekmachine en ondersteunende hulpmiddelen. Alle 441 gemeenten en de 15 stadsdelen van Amsterdam werden onder de loep genomen. In totaal dus 455 gemeenten.

Ernst & Young onderzocht:

  • Volwassenheid van de digitale producten en diensten
  • Online betaalmogelijkheden
  • Inlogmethoden
  • Kwaliteit van de zoekresultaten van zoekmachine
  • Reactietijd en response e-mails
  • Ondersteunende hulpmiddelen

Resultaten in vogelvlucht

De belangrijkste conclusies op een rij:

Digitale producten en diensten en de pubertijd

De mate waarin de burger en ondernemer interactief (volledig online) producten of diensten kunnen afnemen bij de gemeente. Ernst & Young onderscheidt 3 niveaus:

  1. Je kunt alleen informatie over een product lezen
  2. Je kunt formulieren downloaden om het product (offline) aan te vragen
  3. Je kunt het product online afnemen

Er werden 12 producten en diensten voor burgers onderzocht (waaronder aanvraag bouwvergunning, afspraak maken voor huishoudelijke hulp en wijzigen of stopzetten gehandicaptenparkeerplaats) en 6 producten voor ondernemers (waaronder aanvraag milieuvergunning en exploitatievergunning).

Opvallende resultaten

  • Burgers kunnen slechts in 41 % van de gevallen producten volledig online afnemen (volwassenheidsniveau 3). Bij ondernemers is dit slechts 6 %.
  • Het meest digitaal te verkrijgen product, het raadplegen van een WOZ-taxatieverslag, kan inmiddels bij 94 % van de gemeenten volledig interactief plaatsvinden.
  • Top 4 gemeenten met gemiddeld hoogste volwassenheidsniveau:
    1. Den Haag
    2. Leidschendam-Voorburg
    3. Dordrecht
    4. Arnhem

Interactiviteit geboden producten» Bekijk de grafiek in volledige grootte

Steeds meer betalen met iDEAL

Voor sommige producten moet je nou eenmaal betalen bij de gemeente. Zoals het uittreksel GBA. Een volledige online dienstverlening betekent ook dat de betaling online moet plaatsvinden.

Opvallende resultaten

  • 73 % van de gemeenten biedt iDEAL aan als betaalmiddel (stijging 18 % t.o.v. 2008)
  • 50 % biedt creditcard en 12 % biedt acceptgiro als betaalmiddel.
  • 18 % van de gemeenten heeft geen mogelijkheid om online te betalen.

Opmars inloggen met DigiD

digidHoe minder authenticatiemethoden (die ze natuurlijk eigenlijk, zoals mijn bureau eerder dit jaar aan DigiD adviseerde, ‘inlogmethoden’ zouden moeten noemen), hoe eenvoudiger de dienstverlening. Alle bestaande methoden voor burgers moeten volgens de NUP-afspraken uiterlijk 1 juni 2009 vervangen zijn voor DigiD. Ernst & Young vond op de gemeentesites nog ruim 200 andere authenticatiemethoden.

Zeer slechte kwaliteit zoekmachines

Een zoekmachine is essentieel voor het vinden van de juiste informatie. Zeker wanneer de informatie-architectuur niet (altijd) logisch is. In hoeverre leveren de gemeentesites goede zoekresultaten?

Opvallende resultaten

  • 73 % van de gemeenten heeft meer dan 1 zoekmachine, waarbij de zoekmachines verschillende resultaten laten zien.
  • Slechts 5 % (!) van de gemeenten heeft een slimme zoekmachine die goed omgaat met spelfouten, meervoudsvormen en andere formuleringen.

E-mailen met de gemeente verloopt niet volgens het boekje

bisdom-emailVoor het e-mailresponseonderzoek stuurde E&Y een e-mail met een algemene vraag om de reactiesnelheid van gemeenten vast te stellen. Ook is onderzocht of gemeenten een ontvangstbevestiging meesturen waarin een reactietermijn wordt genoemd (volgens Webrichtlijn R-pd.13.14).

Opvallende resultaten

  • 25 % van de gemeenten geeft een antwoordbevestiging zonder reactietijd. 71 % stuurt geen ontvangstbevestiging. En 4 % slechts stuurde een ontvangstbevestiging met een verwachte reactietijd.
  • 84 % van de gemeenten gaf wel een correct antwoord op de gestelde vraag.
  • 9 % van de gemeenten reageerde niet op de e-mail. Van deze gemeenten hadden 13 wel een ontvangstbevestiging gestuurd.
  • De reactietijd was vrij goed. 70 % van de gemeente reageerde de eerstvolgende werkdag. Slechts 10 gemeenten deden langer dan 6 werkdagen over een inhoudelijke reactie.

reactiesnelheid» Bekijk de grafiek in volledige grootte

reactietijd» Bekijk de grafiek in volledige grootte

Ondersteunende hulpmiddelen

Een nieuw onderdeel van het onderzoek is het gebruik van ondersteunende hulpmiddelen. Bijvoorbeeld voor ouderen of minder validen, maar ook de mogelijkheid om extra informatie over een bepaald product of dienst op te vragen.

Opvallende resultaten:

  • Op 42 % van de gemeentesites kun je de lettergrootte aanpassen.
  • Op 23 % van de gemeentesites kun je informatie laten voorlezen.
  • Op 45% van de gemeentesites is Engelstalige informatie beschikbaar.

Benchmark is leuk, maar het draait om gebruiksvriendelijkheid!

De benchmarkt levert ook dit jaar interessante resultaten op. Het geeft een indruk van de kwaliteit van de gemeentesites en stimuleert gemeenten hopelijk om ook de komende periode te investeren hun online communicatie en dienstverlening.

Taakmanagement: hoe eenvoudig en snel kun je een taak voltooien?

Maar wat ik toch jammer blijf vinden, is dat dit soort onderzoeken, net als de monitor WebrichtlijnenMonitor, toch erg algemeen blijven. Uiteraard is het belangrijk dat je steeds meer producten online kunt afnemen, maar voor de gebruikers is net zo belangrijk HOE je de producten en diensten kunt afnemen.

Wij noemen dit taakmanagement: in hoeverre kun je als bezoeker snel en eenvoudig het uitreksel GBA aanvragen? Want als de functionaliteit voor online afhandeling er is, wil het nog niet zeggen dat burgers en bedrijven hier volop met plezier gebruik van maken. Met deze benchmarks kun je vinkjes halen, maar de echte kwaliteit komt amper aan bod.

Dringend verzoek voor benchmark 2010: meet het succes van de belangrijkste taken

logo-customer-carewordsDaarom stel ik voor om volgend jaar een nieuw onderdeel op te nemen in de benchmark. Achterhaal de belangrijkste taken van gemeentesites, Customer Carewords is daar een perfecte methode voor, en toets in hoeverre burgers en ondernemers de taak kunnen voltooien (lees ook het artikel van Boudewijn Bugter over taakmanagement). Laat dit uiteraard door de inwoners zelf doen. Met dit onderzoeksonderdeel voeg je een nieuwe dimensie toe aan de benchmark. Je achterhaalt niet alleen of een functionaliteit aanwezig is, maar ook de kwaliteit van de content, de gebruiksvriendelijkheid van formulieren en pagina’s. Zodat usability eindelijk wat meer aandacht krijgt gemeenteland. Ik help er graag aan mee!

Lancering van het online jaarverslag: een crossmediale aanpak (3)

Weblog No Comments

In het vorige artikel over online jaarverslagen beschreef ik hoe je de ontwikkeling van het online jaarverslag aanpakt. Na weken of zelfs maanden van bloed, zweet en tranen is het online jaarverslag dan eindelijk af. Maar wat dan? Hoe zorg je ervoor dat het online jaarverslag goed bezocht wordt door je stakeholders? Zodat je straks met trots de webstatistieken kunt presenteren aan het management. Praktische tips en ideeën voor een crossmediale campagne rondom het online jaarverslag.

Online jaarverslag onder de aandacht brengen

Om ervoor te zorgen dat het online jaarverslag straks goed bezocht wordt, is het belangrijk om de informatiebehoeften van de diverse stakeholders in kaart te brengen. Welke verhalen en cijfers in het online jaarverslag zijn voor wie interessant? Als het goed is, doe je dit al aan het begin van het project: wanneer je met je team de inhoud van het jaarverslag bepaalt.

Persoonlijke triggers in het online jaarverslag

fw-thumb-grootToch zul je iets verder moeten gaan dan het in kaart brengen van de informatiebehoeften. Want een interessant jaarverslag betekent niet per definitie veel bezoekers. Zorg dus dat je triggert en inspireert. Kruip in de huid van de medewerkers, aandeelhouders, pers, leveranciers, klanten en overheden en bedenk wat zij interessant vinden. Denk verder dan alleen financiële cijfers, denk in verhalen. Net als bij het ontwikkelen van PR-strategieën, is het zaak om voor je online jaarverslag leuke invalshoeken, triggers en journalistieke haakjes te bedenken. Wellicht is het een idee om de bezoeker direct uit te nodigen tot interactie: vraag hem of haar om op je forum, prikbord of een ander interactief onderdeel van het online jaarverslag een mening of idee over je organisatie en het beleid te geven.,

Middelen rondom het online jaarverslag

Wanneer je na gaat denken over de creatieve invalshoeken, zul je al snel met ideeën komen voor de middelen. Ik denk graag met je mee. Middelen die je kunt inzetten om het jaarverslag te promoten:

  • handtekening_casioWebsite, handtekeningen en sjablonen
    De ‘quick wins’ om het jaarverslag onder de aandacht te brengen: vermeld de online jaarrapportage op je website(s) en voeg een prikkelende link toe aan de e-mailhandtekeningen van alle medewerkers, voetteksten van (digitale) correspondentie en andere standaarduitingen.
  • E-mailings
    envelop-c5-met-vensterDe meest eenvoudige manier om het online jaarverslag onder de aandacht te brengen is wellicht een bulkmailing naar alle relaties. Het voordeel is dat de ontvanger al achter zijn computer zit en met één klik op de link naar het jaarverslag gaat. Uiteraard kun je de mailing personaliseren en de inhoud afstemmen op de doelgroep. Spreek de ontvanger persoonlijk aan, vat enkele gebeurtenissen – die relevant zijn voor deze ontvanger – samen en verwijs uiteraard naar de online versie.
  • Evenement
    Organiseer een evenement waarin de resultaten worden gepresenteerd en je organisatie zijn visie geeft op de toekomst. Gebruik tijdens presentaties het online jaarverslag – denk aan interactieve infographics – als presentatiemiddel en laat de bezoekers er direct kennis mee maken.
  • Videoboodschap
    6-TapeVHSLaat de directeur of CEO in een persoonlijke videoboodschap de ontvanger vertellen wat er het afgelopen jaar allemaal gebeurd is. En nodig hem uiteraard uit om het jaarverslag te bekijken.
  • Offline jaarverslag
    Eerder schreef ik dat veel organisaties die (voor het eerst) een online jaarverslag uitbrengen, vaak hun papieren versie behouden. Logisch, want er is vaak een groep mensen die minder web-minded is en graag een papieren versie leest. De papieren versie kan bijvoorbeeld een samenvatting zijn van de online versie. Om ervoor dat zorgen de papieren versie niet ten koste gaat van de online versie, is het belangrijk om voldoende verwijzingen op te nemen naar de online versie. Houd interessante informatie achterwege, verwijs naar video’s, grafieken en interactieve elementen.

Doelgroepingangen: creëer persoonlijke landingspagina’s

Om voor een soepele gebruikerservaring te zorgen, is het wellicht een idee om landingspagina’s per doelgroep te creëren. Zodat je gepersonaliseerde uitingen aansluiten op de eerste pagina die bezocht wordt. Denk aan een overzichtspagina voor overheden waarin bijvoorbeeld de filmpjes en artikelen rondom het MVO-beleid en de omgeving van de organisatie centraal staan. Of een pagina voor medewerkers waarin alle informatie over het personeelsbeleid en andere organisatorische ontwikkelingen bij elkaar staan. Interactie op deze doelgroeppagina’s zal daarnaast succesvoller zijn dan op een algemeen forum of prikbord. Deze doelgroep hebben immers een gemeenschappelijke band.

De rest van het jaar: continu rapporteren

Een online jaarverslag hoeft in vergelijking tot de papieren versie geen eenmalige uitgave te zijn. Het online gedeelte – al dan niet opgenomen in de corporate website – kan een plek worden waarin je continu rapporteert over de voortgang van het bedrijf. Door nieuwe, relevante content te creëren, zorg je tevens voor terugkerende bezoekers.

Artikelenreeks online jaarverslagen

Dit artikel is (voorlopig) de laatste van een artikelenreeks over online jaarverslagen. In een eerder artikel schreef mijn collega Boudewijn Bugter over de voordelen van het online jaarverslag. In het artikel daarna beschreef ik hoe je de ontwikkeling van het online jaarverslag aan kunt pakken.

Feedback van je webbezoekers: meer inzicht in wensen en behoeften

Weblog No Comments

Statistieken zeggen niet alles over de effectiviteit van je webpagina, bestelproces of site. Het blijft vaak gokken waarom mensen zijn afgehaakt, waarom ze de website hebben verlaten of waarom x aantal bezoekers een specifieke pagina hebben bezocht. Actief feedback vragen van je bezoekers helpt je aannames te verifiëren en nieuwe inzichten te krijgen. Inzicht in de ‘waarom’-vraag. Een kwalitatieve verrijking van je webstatistieken met bezoekersfeedback.

Read the rest of this entry »