Interaction designer of interactieontwerper, wat doet zo iemand nu eigenlijk en waarom zouden een projectmanager en vormgever zijn werkzaamheden niet kunnen doen? Waarom blinken projectmanagers, vormgevers en programmeurs meer uit in hun expertise wanneer een interaction designers is ingeschakeld? Dit artikel zal hierover meer duidelijkheid verschaffen.
Spil binnen elk project
Maar weinig webbouwers maken gebruik van interaction design. Met de oude vertrouwde werkwijze worden toch mooie sites gebouwd, waarom moeilijk doen? De projectmanager flanst samen met de opdrachtgever een functioneel ontwerp in elkaar, de klant weet immers wel wat zijn eindgebruiker denkt? Een backend-developer ontwerpt op basis van het functioneel ontwerp een technisch ontwerp; einde voorfase.
De bouw kan beginnen, een vormgever neemt het functioneel ontwerp nog eens door en gaat met al zijn creativiteit aan de slag. Een prachtig plaatje ontworpen, de klant is enthousiast en de vaart zit er in. De website wordt in XHTML en CSS netjes uitgewerkt. Alle pagina’s omschreven in het functioneel ontwerp zijn klaar. De programmeur hangt de XHTML aan het CMS en de site kan worden getest.
Testpunten komen terug bij de developer. Bedanktpagina ontbreekt na het verzenden van het contactformulier. Het bedrijfslogo is niet klikbaar op contentpagina’s. Alle punten zijn van eenzelfde strekking en ze gaan een paar keer over en weer tussen vormgever en programmeur. De website wordt drie weken na deadline bugvrij opgeleverd. Een maand later heeft de klant content geplaatst en de website is live.
Alles gedaan zoals het hoort maar conversie is lager dan op de oude website. Waar ging het mis…? De spil ontbreekt.
Wat is interaction design en wat kun je er mee?
Hoe reageert een website bezoeker op een blauw onderstreept stukje tekst en wat gebeurd er als hij daarop klikt? Hoe reageert de bezoeker vervolgens op de onderliggende pagina? Dit zijn allemaal zaken waar een interaction designer van websites mee bezig is. Zijn vakgebied is de ontmoeting tussen mens en machine (interface en alles wat daar bij komt kijken).
Allereerst moet een interaction designer de doelstellingen van de organisatie en de te bouwen website kennen. Deze doelen stemt hij af op doelen van de bezoeker. Vervolgens wordt een pakket aan tools samengesteld waarmee de bezoeker zijn doelen kan bereiken op de website. De interaction designer richt deze tools in zodat de bezoeker er probleemloos mee uit de voeten kan.
Om reacties van bezoekers op alle functionaliteiten in kaart te kunnen brengen moet de interaction designer met de eindgebruiker om tafel. Situaties voorleggen en bespreken. Uitzoeken wat de behoeften zijn van die personen. Bij grotere projecten werkt de interaction designer samen met de usabilityexpert aan zogeheten persona’s om de bezoeker levendiger te maken en te houden tijdens het project.
Een interaction designer levert een aantal producten af binnen elk project:
- persona’s of gespreksverslagen (in samenwerking met een usabilityexpert);
- flowcharts;
- sitemap;
- wireframes of een functioneel ontwerp;
- paper prototypes (in samenwerking met een usabilityexpert)
Elk van deze producten wordt door de klant goedgekeurd.
Flowcharts
Op basis van de persona’s en de gesprekken met websitebezoekers kan de interaction designer flowcharts ontwerpen van de belangrijkste processen binnen de website. Flowcharts zijn modellen waarin alle mogelijkheden zijn omschreven.
Elke flowchart heeft een begin en een eindpunt. Wil je meer opties in kaart brengen dan kan een flowchart ook drie verschillende eindpunten hebben, of twee beginpunten. Pijlen verbinden verschillende fases binnen een proces. Elke fase wordt weergegeven door een rechthoek met daarbinnen een omschrijving van die fase. Beslissingsmomenten worden door een ruitvorm weergegeven.
Na het ontwerpen van zo’n flowchart stelt de interaction designer zichzelf constant de volgende vraag: Biedt deze functionaliteit de bezoeker genoeg mogelijkheden om haar doelen te behalen op een manier zoals zij dat wil of verwacht?.
Sitemap
Wanneer alle benodigde tools zijn uitgewerkt is het tijd om de website in kaart te brengen. Dit kan met een sitemap. Een sitemap is niks meer dan een boomstructuur van alle mogelijke pagina’s binnen een website. Veel websites bevatten hun eigen sitemap als menuitem. Hier fungeert een sitemap als alternatieve manier van vinden, wanneer de navigatie en zoekfunctie geen hulp bieden.
Waar plaatsen we welke functionaliteit en hoe zorgen we dat de navigatie straks simpel en intuïtief in te richten is? Dat zijn de vragen die een interaction designer zichzelf stelt bij het maken van een sitemap. Input voor een sitemap zijn de flowcharts en gesprekken met de klant (of nog liever eindgebruiker). Expertise van de usabilityexpert kan hier ook prima ingezet worden. Voorheen werden inhoudelijke gesprekken gevoerd tussen projectmanager en klant. Nu tussen interaction designer en websitebezoeker.
Wireframes
Parallel aan het uitwerken van een sitemap wordt er gewerkt aan wireframes. Alle tools uit de flowcharts worden hierin uitgewerkt in een bruikbaar interface (zonder design). In de wireframes worden alle pagina’s uit de sitemap één voor één uitgewerkt. Hiermee voorkom je dat vormgevers en programmeurs onderdelen vergeten in een latere fase. Elk detail is uitgewerkt voordat het wireframe richting de werkvloer gaat. Onderaan of aan de zijkant van elke pagina is ruimte voor opmerkingen. Al deze opmerkingen samen vormen eigenlijk al het functioneel ontwerp die met deze methode overbodig is geworden als losstaand document.
Binnen het wireframe kan wel al gewerkt worden met verschillende kleuren. Plaatsen waar input verwacht wordt van de eindgebruiker kunnen worden aangegeven met een blauwe kleur. Positieve feedback van het systeem met groen. Negatieve feedback rood en call to actions (bijvoorbeeld buttons) met oranje.
Deze manier van het omschrijven van functionaliteiten geeft de usabilityexpert mogelijkheden al vroeg te beginnen met usertests. Een wireframe is namelijk een uitstekende basis voor paper prototyping (low fidelity).
Paper prototypes
Gedurende de testmethode paper prototyping wordt de website getest op haar functionaliteiten. Respondenten voeren opdrachten uit zonder verder uitleg van het systeem. Ze krijgen een opdracht op papier toegeschoven waarin het doel staat omschreven.
Een usabilityexpert of medewerker fungeert als computer. De respondent krijgt feedback op elke actie zoals het systeem (de website) dat ook zou doen. Een notulist omschrijft nauwkeurig de reacties van de respondent.
Na deze vroege usertest hoort de interaction designer of zijn ontwerp succesvol was of niet. Op basis hiervan kunnen in een vroeg stadium wijzigingen in het wireframe worden doorgevoerd zonder vormgevers en programmeurs hiermee te belasten. Pas daarna wordt een vormgever ingeschakeld om de contouren van de website vorm te geven.
Verlichting voor projectmanagers
Door een interaction designer in te schakelen wordt het werk van een projectmanager op een aantal fronten verlicht.
- Inhoudelijk hoeft een projectmanager niets meer met een project te doen. Planning en projectbewaking blijven zijn kerntaken.
- Interaction designer wordt direct aanspreekpunt voor vormgevers en programmeurs.
- Aantal discussies over interpretatie van functioneel ontwerp met klant nemen af of blijven uit.
- Er wordt een kwalitatief beter product afgeleverd doordat er eerder usertests kunnen plaatsvinden.
Verlichting voor de werkvloer
Door het inschakelen van een interaction designer wordt het werk van vormgevers en programmeurs op een aantal fronten verlicht.
- Het project is visueler in plaats van vanuit een geschreven document, hierdoor is het gemakkelijker een functioneel ontwerp te interpreteren.
- Vormgevers kunnen zich bezighouden met vormgeving en gebruiksvriendelijkheid.
- Programmeurs en vormgevers worden niet belast met fouten in functionaliteit zoals gebeurt waneer er pas na de bouw getest wordt.
- Programmeurs hoeven niet te wachten op ontbrekende designs en templates. Wanneer een interaction designer op de juiste manier ingezet wordt binnen een project, zullen alle overige partijen hiermee tijd winnen. Het eindproduct zal kwalitatief beter zijn.
Bronnen
- Wikipedia
- Helen Sharp, Yvonne Rogers and Jenny Preece Interaction Design: Beyond Human- Computer Interaction
10 reacties op "Verlichting voor projectmanager en werkvloer: Interaction design"
Mooi artikel. Geeft mij een totaal andere kijk op usability. Ik had namelijk nog nooit gehoord wat een interaction designer deed of dat deze bestond.
Goed stuk Henk, ik kan ieder verkooppraatje voor mijn mooie vak alleen maar aanmoedigen. In je bronnen lees ik dat je Alexandra’s site als input hebt gebruikt. Ik ben nieuwsgierig — waarvoor precies? Daarnaast moet ik zeggen dat een aantal van de door jou beschreven voordelen niet altijd als zodanig worden ervaren: Zo blijven sommige projectmanagers graag inhoudelijk betrokken, storen vormgevers zich soms aan de ‘vormgeving’ die al in een wireframe gebakken zit en wil een programmeur graag naast de interface alle zaken die onder water gebeuren gedocumenteerd zien… De toegevoegde waarde van een IxD zit hem wat mij betreft in de synthese van alle dimensies van de gebruikerservaring die hij/zij kan bieden.
Beste Henk,
Alweer heel wat weken geleden las ik je prettige artikel over interaction design. Een goede samenvatting van het werk, met bruikbare argumenten voor een (toekomstige) samenwerking met collega’s en opdrachtgevers.
Heb je ook het wikipedia artikel gebruikt voor dit artikel? Ik lijk het enigzins te herkennen doordat je het hebt over ‘de ontmoeting’, daar waar mens en systeem elkaar tegenkomen. Lijkt me leuk, want aan het wikipedia artikel schrijf ik mee. Het zou goed zijn om dat artikel weer eens te herformuleren.
Zelf ben ik net begonnen als freelance interaction designer (http://www.druifdesign.nl), na enige tijd in loondienst te hebben gewerkt vanaf mijn afstuderen in 2006.
@Kars – Alexandra had een variant van de gebruikte flowchart op haar server staan welke ik vond middels Google. Nu hoorde ik van haarzelf dat ze hem niet zelf heeft gemaakt. Dus die bronvermelding moet ik even aanpassen.
Ik snap wat je bedoelt met het verloren gaan van zeggenschap voor projectmanagers en designers bij het toepassen van IxD op de manier zoals ik omschrijf.
In principe staat het ontwerp natuurlijk altijd ter discussie. Het gehele ‘dreamteam’ heeft op van te voren afgesproken momenten tijdens het project de kans om zijn of haar input te leveren. Het vergt een zeker omslag, zeker voor visual designers. Een goed interactie ontwerp laat voldoende ruimte voor creativiteit.
Verder is een wireframe een ontzettend goede input voor een evt. los technich ontwerp. Wie dat schrijft verschilt per bedrijf, maar mijn ervaring zegt dat een programmeur dit het beste zelf kan doen. Wat is jouw ervaring daarmee?
@Nico – Ik mail je zo even. Klopt van Wiki, zal de bronvermelding toevoegen.
@Henk – Ik ben het met je eens wat betreft de samenwerking met andere disciplines. Ik wilde alleen aanstippen dat niet alles rozengeur en maneschijn is…
Voor wat betreft het schrijven van verdere specs op basis van een interactie-ontwerp: Ik heb de beste ervaringen met trajecten waarbij dit parallel aan het IxD plaatsvindt. Dat vereist dan wel nauwe samenwerking met een ‘programmeur’ (eerder een software- of systeemarchitect).
Ik ben licht verward: bijten de taken van een functioneel ontwerper en een interaction designer elkaar? Ik zie dat de interaction designer een functioneel ontwerp oplevert. Wat is dan nog de taak van een functioneel ontwerper?
Een mooi artikel. Er staat handige informatie in dat ik graag verwerk in mijn afstudeerproject, net als veel andere informatie op deze website.
Ik heb nog wel een vraag die bij mij bovenborrelt: Vanaf welk budget van een website is het rendabel om een losse interaction designer in te zetten?
Ik richt hiermee dan op (kleine tot middelgrote) reclamebureaus die veel kleinschalige websites bouwen. Met mijn afstudeerproject wil ik kijken wat reclamebureaus kunnen doen om in deze kleinschalige trajecten toch elementen van usability op te kunnen nemen.
Het verbaast me dat dit stukje tekst al ruim 2 jaar oud is en de term interactie ontwerper nog altijd relatief onbekend is! En ook wat zijn/haar functies en verantwoordelijkheden zijn.
Ik vind dit een prima artikel die een interactie ontwerper definieert binnen een online media omgeving.
Geachte heer Wijnholds,
Ik ben onlangs begonnen als freelance webdesigner. Ik richt mij op de kleine (beginnende) ondernemingen en particulieren.
In de korte periode dat ik nu werkzaam ben op dit gebied ben ik op veel vragen over dingen als ratingsonline adverteren en aanverwante zaken gestuit. Om veel van deze vragen te beantwoorden wil ik een soort E-pocket opstellen dat ik gratis vanaf mijn site aanbied. In deze kleine downloadbare ‘uitgave’ komt handige achtergrondinformatie over SEOAdwordsinteractieontwerp en andere veelvoorkomende begrippen waarvan het voor mijn doelgroep handig is kennis te nemen.
Om invulling aan dit boek te geven zou ik graag gebruik willen maken van de volgende tekst die op uw site staat:
https://www.usabilityweb.nl/2007/08/verlichting-voor-projectmanager-en-werkvloer-interaction-design/
De daar aangeboden uitleg is zeer duidelijk en makkelijk te begrijpendus zeer geschikt voor mijn doelgroep. Uiteraard zal ik uw bedrijf in het boekje bedanken voor deelname. Kunt u mij toestemming verlenen de bewuste tekst te gebruiken?
Met vriendelijke groet,
Raymond Bosch
WebFrontiers
Plaats je reactie
Velden met een * zijn verplicht in te vullen