Interactie ontwerp: wat is het en wat is de meerwaarde?

2 april 2009 om 09:42

Interactie ontwerp: wat is het en wat is de meerwaarde?Interactie ontwerp is een relatief nieuwe, en in Nederland nog niet heel bekende ontwerpdiscipline. In dit artikel licht ik toe wat een interactie ontwerper doet, en wat de voordelen zijn.


Wat doet een interactie ontwerper?

De korte en versimpelde versie (ofwel: de versie voor op verjaardagen): “Als interactie ontwerper ontwerp je websites en webapplicaties. Vergelijk het met een architect die je helpt bij het ontwerpen van een huis: een interactie ontwerper doet dit voor websites en applicaties”.

De langere versie: een interactie ontwerper ontwerpt gebruiksvriendelijke websites en webapplicaties. Hierbij zijn er twee uitgangspunten:

Eén van de vele (on)officiële definities luidt: “Definiëren van het concept, de functionaliteit, navigatie, interactie en informatie architectuur op basis van kennis over de eindgebruiker en de wensen van de klant.”

Bij het ontwerpen van websites of applicaties zijn de business doelstellingen belangrijk, maar minstens zo belangrijk zijn de gebruikersdoelen. Wanneer een site of applicatie de gebruiker niet voorziet in zijn behoeften en wensen is de kans groot dat de businessdoelstellingen ook niet behaald worden…


Usability

Daarnaast is usability ontzettend belangrijk. Usability kun je grofweg vertalen naar gebruikersvriendelijkheid. Een site met een slechte usability zal gebruikers niet alleen hinderen in het uitvoeren van hun taken maar ook nog eens voor irritatie zorgen. Grote kans dat je gebruiker je site verlaat en nooit meer terugkomt…

Om te borgen dat de site niet ‘in-side out’ wordt ontworpen maar met de eindgebruiker als uitgangspunt, fungeert een interactie ontwerper vaak als advocaat van de gebruiker. Zo wordt een gezond tegenwicht vanuit gebruikersoogpunt geboden aan de businesswensen van de opdrachtgever én wordt tegelijkertijd de usability geborgd.


Het ontwerpproces

Het ontwerpproces begint met het achterhalen van de échte klantvraag, en de businessdoelstellingen. Ik zeg expliciet ‘échte klantvraag’, want klanten formuleren vaak een vraag in de vorm van een oplossing voor een probleem. Vaak blijkt het  achterliggende probleem echter niet het daadwerkelijke probleem te zijn! Overigens kan de echte klantvraag ook eerder in het traject achterhaald worden, bijvoorbeeld door de business consultant.

Wanneer de klantvraag en de businessdoelstellingen helder zijn gaat de interactie ontwerper aan het werk. Op basis van input van de klant (sitestatistieken, requirements, gebruikersonderzoeken, profielen, gegevens van gebruikers, marktanalyses etc.) ontwerpt hij een concept op hoofdlijnen.

Indien de opdrachtgever niet over voldoende informatie beschikt of als dit wenselijk is voor de kwaliteit van het eindproduct kan een interactie ontwerper besluiten zelf aanvullend onderzoek te doen. Dit kan door gebruikers te observeren, interviews af te nemen, cardsortingsessies te houden, taakanalyses te doen etc.

Het liefst heb je als interactie ontwerper altijd direct contact met je eindgebruiker, maar in de praktijk blijkt dit helaas niet altijd haalbaar door gebrek aan budget, tijd of andere zaken…


De uitkomst: wireframes

De ideeën van een interactie ontwerper worden vaak, maar niet altijd, in een zogenaamd wireframes document vastgelegd. Wireframes zijn een visuele functionele weergave van een website of applicatie.

 

Een pagina uit een wireframe document

 

Een pagina uit een wireframe document


Wireframes zijn dus géén grafisch design, maar bedoelt als bespreekdocument. Dit is een voordeel, omdat de stakeholders niet worden afgeleid door vormgeving.

Daarnaast kunnen wireframes relatief eenvoudig omgezet worden naar werkende prototypes of een clickable demo. Dit is handig voor bijvoorbeeld gebruikerstests of om een applicatie te demonstreren aan stakeholders of projectleden.


Inhoud van wireframes

In een interactie ontwerp/wireframes worden vaak de volgende zaken opgenomen*:

Bij dit alles houdt de interactie ontwerper zoals gezegd de gebruiker en zijn behoeften in het achterhoofd, en is usability van de site erg belangrijk. Overigens worden wireframes, van concept tot uitwerking in unieke pagina’s, altijd tussentijds getoetst met de opdrachtgever. Zo kan deze een vinger aan de pols houden en komt vaak nog relevante informatie boven tafel.

* Afhankelijk van hoe bedrijven werken en welke disciplines meewerken aan een project kunnen dit meer of minder zaken zijn.

 


Voordelen interactie ontwerper

Je hebt net kunnen lezen wat een interactie ontwerper (in een notedop) doet. Maar wat zijn nu concreet de voordelen van het inzetten van een interactie ontwerper?

In een 2e artikel ga ik dieper in op de positie van de interactie ontwerper en zijn rol in het gehele proces ten opzichte van de disciplines business consultancy, grafische vormgeving en techniek.

Over de auteur

Ivo Bosma
Ivo werkt als interactie ontwerper en usability expert bij Concept7. http://www.ivobosma.nl/
http://www.concept7.nl
  • http://www.tappan.nl Frank de Wit

    Mooi artikel wat duidelijk weergeeft wat een interactieontwerper in de praktijk zou kunnen doen.

    Waar het vaak nog mis gaat (volgens mij) is dat veel mensen denken dat je als interactieontwerper ook het grafisch ontwerp maakt en ook alles nog eens programmeert.

  • http://twitter.com/robbedoes Robert

    Leuk artikel Ivo. Vraag: Wat is volgens jou de ideale achtergrond van een IA?
    Mss iets voor op te nemen in je volgend artikel.

    Zie de laatste tijd vaak mensen met een psychology background die zich hierin gespecialiseerd hebben deze jobs bekleden ipv designers of developers.

  • Ivo Bosma

    @Frank: bedoel je vóór dat je met je klant in gesprek gaat? Als het goed is zou je – als je één keer in gesprek bent (geweest) – deze onduidelijkheid weggenomen moeten hebben.

    Het is wel zo dat het in de praktijk voorkomt dat een interactie ontwerper alle front-end maakt (meestal tot html) of zelfs nog verder gaat. Hangt misschien ook af van je bedrijfsgrootte, procesinrichting, of je ZZP-er bent etc.

    @Robert: bedankt voor de tip, ik hou hem in gedachten voor een volgend artikel. Om het heel kort samen te vatten: in mijn beleving moet je als interactie ontwerper in elk geval verstand hebben van interactie, vormgeving en techniek. Het is een (grote!) plus als je daarnaast verstand hebt van bijvoorbeeld psychologie, (bedrijfs)economie, sociologie, ergonomie etc etc. Het liefst van allemaal wat ;)

  • http://www.thejutenjulway.nl Ingmar Hoogendoorn

    Probeert er ook iemand zijn eigen baan veilig te stellen ;-)

    Maar leuk artikel, benieuwd naar het vervolg!

  • Joeri

    Hey guys,

    leuke artikelen, maar ik mis diepgang. Wat is jullie publiek? Ik dacht dat het insiders waren, webdesigners. Elke webdesigner weet wel wat IxD-ers doen, ook al weten ze dit misschien maar tot op zekere hoogte. Juist daarom zou ik wat meer diepgang willen zien in zo’n artikel.
    Het lijkt alsof jullie het uitleggen aan iemand die niet in het wereldje zit, een soort lekenpraatje zeg maar. Een beetje voorzichtig misschien. Wellicht omdat het nieuw is?
    Desalniettemin blijf ik jullie posts volgen. Goed bezig!

  • Ivo Bosma

    @Ingmar: bedankt voor je compliment. En dat veiligstellen is niet het doel 8-)

    @Joeri: intern hebben we deze discussie ook gehad, maar ik ben het niet met je eens. In de praktijk kom ik nog regelmatig webdesigners tegen die niet weten wat een IxD-er doet, of op zijn best een vaag beeld hebben (wat dat betreft ben ik al blij als een webdesigner het ‘tot op zekere hoogte’ weet).

    Daarom heb ik er bewust voor gekozen om éérst de basis toe te lichten, om in een later stadium de diepte in te kunnen gaan.

  • http://www.fasterforward-interactive.nl Martijn

    Leuk artikel Ivo!

    Welke software gebruiken jullie meestal voor wireframes? Frontpage of Photoshop of iets dergelijks?

  • Ivo Bosma

    @Martijn: wij gebruiken voor wireframing geen van beiden. We gebruiken momenteel zowel Microsoft Visio (met custom templates, plugins en document stencils) als Axure (ook weer met custom templates).

    Beide paketten hebben voors- en tegens, evenals de alternatieven die we getest hebben in het verleden en die zijn afgevallen (oa Fireworks, Photoshop, Indesign, Omnigraffle etc etc).

    Er komen nog wat nieuwe alternatieven aan die wellicht de moeite van het overwegen waard zijn: Sketch Flow, nieuwe CS4 Fireworks en Flash Catalyst.

    En natuurlijk papier en potlood voor de allereerste schetsen 8-)

  • http://www.sebastix.nl Sebastian Hagens

    Mooi artikel!
    In mijn eigen beleving kan de definitie Interactie Ontwerper nog veel breder worden getrokken en hoeft niet per definitie in het hokje van het web te worden gestopt. Persoonlijk zou ik dan veel sneller spreken van een web ontwerper (webdesigner). Wat is precies het verschil tussen een webdesigner en een interaction designer in de context van het web?

    De term interactie is namelijk behoorlijk breed van opzet en beperkt zich bij lange na niet tot het web. Ik ben dan misschien iets teveel bevooroordeeld vanuit de context waar ik me in bevindt; dit is namelijk meer de interactieve (media)kunst. De context is alles bepalend voor een interactie ontwerper waar hij/zij een ontwerp voor kan gaan maken. Dit kan zelf ook helemaal niets met het web te maken hebben, een bepaald fysiek object kan ook om een interactie vragen. Hmm, dan komen we eigenlijk weer uit bij de definitie User Interface Design. :P

    In mijn ogen is een echte Interactie Ontwerper die zich buiten de bestaande conventies kan plaatsen, zeer interdisciplinair is opgesteld, de juiste balans kan vinden tussen idee – vorm – techniek en dit alles kan vertalen naar een goed werkbaar document waar elk betrokken partij een helder beeld kan vormen bij het project. Het klinkt heel breed, maar ik zie dit als dé specialiteit van een interactie ontwerper binnen een nader te bepalen context (deze is dus open).

    Ik trek het wellicht iets te breed, want de context hier is duidelijk op heeftstijl.nl; het web.

  • Ivo Bosma

    Sebastian, dank voor je reactie. Je gaat inderdaad de breedte in, maar je hebt gelijk dat interactie ontwerp zich niet hoeft te beperken tot het web. Voor dit artikel was het wel het uitgangspunt, maar een bredere context is mogelijk (software, applicaties voor andere platformen, tv, telefoon etc). Er zitten wel grenzen aan, omdat je anders op een ander vakgebied komt. Je voorbeeld neigt m.i. naar industrieel ontwerp.

    Als je meer wilt lezen over een bredere context dan raad ik je ‘The design of everyday things’ van Donald Norman aan om te lezen. Erg inspirerend :)

  • http://www.marnixbras.nl marnix

    Groot nadeel van de term Webdesigner is dat elke puistenpuber die html-tags schrijft zichzelf webdesigner noemde. Door het uitsplitsen van de term in front-end developer, PHP-programmeur, informatie-analist, Interactie ontwerper, grafisch ontwerper etc. etc. voorkom je misverstanden. Toch zal het meer dan eens voorkomen dat één persoon twee of meer functies bekleedt. Daar is niks mis mee natuurlijk.

    Ik ben sinds releatief kort in het interactiedesign me aan het specialiseren. Mijn achtergrond als internet-creatief is vooral grafisch en intermenselijk.

    Een artikel over de tooling (@martijn) zou zeker ook mijn grote interesse hebben. Ik gebruik graag photoshop / indesign, met als grote nadeel dat de verleiding groot is om wireframes (letterlijk) in te kleuren met detailering. Al “heb elk nadeel zijn voordeel”: de klant snapt vaak meer van een schematische weergave van de eindresultaten (dus met plaatjes, demo-tekst en écht logo) dan een zwart-wit draadmodel. De klant heeft namelijk vaak de internet-kennis van een eindgebruiker (=niet zo groot:-) )

    ik ben benieuwd wat collega’s vinden van
    - Balsamiq: http://www.balsamiq.com/ (uitproberen op http://www.balsamiq.com/demos/mockups/Mockups.htm… (is goedkoop)
    - Denim http://dub.washington.edu/projects/denim (is gratiz)
    - en Axure als meer officieel programma om vanuit mockups tot een FO te komen http://www.axure.com/ (kost wel wat).

  • http://www.wesoudshoorn.nl Wes

    Persoonlijk denk ik dat je als interaction designer zelf ook websites moet hebben ontworpen en gebouwd. Ikzelf ben grafisch desigenr, interaction designer en front-ender. Op die manier ben ik van A tot Z betrokken bij het project. Op het moment dat een wireframe gemaakt wordt door iemand die niet met zijn handen in de modder heeft gezeten, kom je onvermijdelijk problemen tegen en moet de front-ender en/of grafisch ontwerper zich alsnog gaan bemoeien met de wireframes. Vaak is het dan al te laat.

  • http://www.ivobosma.nl Ivo Bosma

    @Marnix: ik ben het met je eens dat de term ‘webdesigner’ te breed is. Afhankelijk van de opdracht/grootte van het bedrijf/manier van werken kan een persoon één of meerdere rollen vervullen.

    Als je photoshop/indesign gebruikt loop je, zoals je zelf ook aangeeft, het risico om tóch grafische vormgeving toe te passen. Het nadeel hiervan is dat je de discussie vertroebelt: het gaat niet over of element A daar moet staan en hoe met moet werken, maar dat de kleur oranje niet licht genoeg is.

    Het is waar dat klanten moeite kunnen hebben met het snappen van wireframes, maar daar zijn meerdere manieren voor om dat te voorkomen. Allereerst moet je bij voorkeur wireframes bespreken met je klant in een vergadering (ergo: fysiek om tafel zitten ;) ). Daarnaast moet je een duidelijke uitleg geven (wat is het doel, hoe werkt het, wat is het niet), en de klant begeleiden in dit soort sessies.

    Je kunt ook besluiten om de wireframes als clickable demo op te leveren om het ‘echter’ te maken voor de klant. Overigens: ik gebruik persoonlijk altijd het logo etc van de klant, juist om de link te leggen met het uiteindelijke resultaat. Foto’s gebruik ik vaak niet, omdat dit afleidt van wat je wilt bespreken: de functionaliteit.

    Wat betreft je vraag over Axure: een collega van mij zweert hierbij (echter niet om tot een FO te komen).

    @Wes: ik ben het niet met je eens dat je websites moet hebben gebouwd. Het is absoluut handig, maar niet per se een vereiste. Als je meerdere rollen invult in een project kan dat ook ten koste gaan van scherpte, objectiviteit etc. Voorbeeld: voor een klein project voor wehkamp enige tijd terug heb ik de wireframes gemaakt, en een collega van me deed het grafische werk. Omdat hij er fris inzat kwamen hij met enkele kleine maar nuttige verbeteringen, ondanks dat het een klein project was en het aantal pagina’s beperkt. Het design was ook goed, juist omdat hij er fris inkwam. Op die manier toets je niet alleen je eigen concept – het kan ook meerwaarde hebben omdat je verschillende invalshoeken van meerdere personen combineert.

    Wat betreft techniek: het is handig om bepaalde zaken tijdens of na het ontwerpen te checken bij developers of het mogelijk is. Echter laat je je niet op voorhand beperken omdat je weet dat iets niet kan (of niet lijkt te kunnen). Ook hier weer kan het juist verfrissend zijn om de invalshoeken van meerdere kanten te bekijken. Bij ons kunnen ook developers schieten op de wireframes, wat alleen maar goed is.

  • Raymond

    Leuk artiekel,

    Het is inderdaad relatief erg nieuw in Nederland, ik ben per 1 september begonnen met een studie als interactie ontwerper.

    Zelf werkzaam als webdesigner en vind dit een goede aanvulling om te doen.
    Zeker aangezien je als interactie ontwerper dieper op de materie in gaat, op deze wijze kun je beter in gaan op de wensen en behoeftes van de klant.

    Maar ook op tijd achter komen waar de knel punten zouden kunnen ontstaan.
    Ik moet wel zeggen dat het een zwaar leerstof is, maar zeker leuk is om te doen.

    Kan dit zeker aanraden voor andere webdesigners om ook, een cursus als interactie ontwerper te gaan volgen.

  • Raymond Bosch

    Ik ben dus begonnen per september met deze studie, en ik moet zeggen dat het behoorlijke droge stof is.
    Maar zeker wel zo interessant om te doen!!

    Ik ben nu bezig met mijn laatste inzend opgave, en deze staat voor eind opdracht met cijfer voor een officieel certificaat.

    Wat ik mij alleen afvraag is wat is een normale prijs om te berekenen is tegenover de klant.
    Dit aangezien er nog maar weinig mensen, als interactie ontwerpen aan de slag zijn.

    Wie o wie kan mij hierin adviseren?

    Groet,

    Raymond Bosch

    • http://www.ivobosma.nl Ivo Bosma

      Hallo Raymond,

      wellicht hangt het van je docent/opleiding af dat het 'droge' stof is, persoonlijk ervaar ik dat niet zo ;) Een prijs berekenen is lastig, en hangt van veel zaken af. Je ervaring, je manier van werken, werk je voor jezelf etc etc.

      Ik heb wel een tweetal mogelijk nuttige links voor je:
      http://www.smashingmagazine.com/2009/07/09/the-ro… (voornamelijk punt 5)

      http://www.smashingmagazine.com/2009/07/14/qualit

      Succes!

      PS: ik zag je mailtje en heb je teruggemaild

  • Pingback: Heeftstijl.nl - Nederlands webdesign magazine » Review wireframe pakketten (deel 1)

  • M van Diepen

    Beste Ivo,

    wat ik me afvraag is waar de scheidslijn ligt tussen een Interactie ontwerp en een Fuctioneel ontwerp. Ik ben benieuwd hoe jij dit ziet, vriendelijke groet, Matthieu van Diepen.

    • http://www.ivobosma.nl Ivo Bosma

      Hallo Matthieu,

      de precieze invulling hangt soms af van het project/bedrijf/de invulling die je aan een Functioneel ontwerp (FO) geeft, maar generiek gezien als volgt.

      De interactie ontwerper is grofweg verantwoordelijk voor een gebruiksvriendelijke user interface, en een logische flow door de website/applicatie. Zowel de IO-er als de FO-er kunnen het vergaren van requirements etc. doen.

      In de praktijk werk ik vaak nauw samen met een FO-er, omdat het FO een verdieping is op het Interactie ontwerp (IO). Op basis van een IO kún je wel gaan programmeren, maar dat is wel een risico: het laat erg veel ruimte voor interpretatieverschillen (en kan leiden tot discussie met de klant na oplevering omdat verwachtingen uiteen lopen). Mijn ervaring is dat een IO-er en een FO-er elkaar goed aanvullen, omdat een FO-er een diepgaandere technische toetsing doet en vaak met detailvragen terugkomt die het IO aanscherpen.

      Een voorbeeld om de verdieping van IO naar FO te illustreren: stel dat ik in de user interface rechtsboven een zoekoptie positioneer, en ook een zoekresultatenpagina opneem. Dan is nog niet duidelijk hoe de zoekfunctie precies werkt. Wordt de zoekfunctie op alle pagina's getoond? Welk systeem wordt aangeroepen? Hoeveel karakters kunnen er ingevoerd worden? Wat als er geen zoekresultaten zijn, of juist veel te veel? Worden zoekopdrachten ergens opgeslagen, en zo ja: waar dan? Wat als de zoekfunctie eruit ligt? Hoe werkt eventueel autosuggest, en zijn hier koppelingen voor nodig? Etc.

      De FO-er werkt wel gedetailleerd uit hoe de zoekfunctie moet gaan werken, welke koppelingen met systemen nodig zijn, wat de uitzonderingssituaties zijn, welke foutmeldingen etc. Het FO bevat hierbij vaak screenshots uit het IO, zodat de beschrijving gemakkelijker te begrijpen is voor lezers van het FO. Het FO is input voor de programmeurs, maar ook voor testers.

      Ik hoop dat het zo wat duidelijker voor je is, mocht dat niet het geval zijn laat het me dan weten!

  • Pingback: Wat is Interactie Design? | Yellowdolphin

  • Pingback: MijnReclame.com » Interactie ontwerp: wat is het en wat is de meerwaarde?

  • http://twitter.com/dyls @dyls

    Ik werk deels als interactie ontwerper en ik merk inderdaad dat er vaak wordt gedacht dat wij ook coderen en ontwerpen. Echter vind ik zelf dat ontwerpen een vak apart is, net als coderen. Natuurlijk kunnen wij een ontwerp leveren en de code schrijven, echter zal een ontwerper deze altijd veel mooier en cooler kunnen maken!

    Usability en interactie is altijd belangrijk op de website, maar ik geloof er heilig in dat een goed ontwerp dit moet ondersteunen!

  • Melanie

    Beste Ivo,

    Complimenten voor een helder artikel; goed te begrijpen, zelfs voor oma. In navolging van Sebastiaan Hagens, ben ik wel benieuwd hoe je kijkt naar het volgende. (Uiteraard realiseer ik me dat jij deze term niet verzonnen hebt, maar ook ik mis differentiatie.)

    Interactie ontwerper?
    Mercedes heeft een expert in huis die zich uitsluitend bezig houdt met het gevoel, geluid en geur dat het product moet hebben om aan te sluiten bij de ultieme Mercedes ervaring.

    Laten we daarom de term Interactie Ontwerp verrijken/uitbreiden/aanvullen/uitsplitsen zodat we ruimte kunnen bieden voor de verschillende scheppende beroepen.

    Wat dacht je van:
    Voor de Mercedes meneer: gebruikers interactie ontwerper?

    Suggesties?
    Groetjes
    Melanie

    • Ivo Bosma

      Hoi Melanie,

      leuk dat je reageert, en leuke vraag. Zelf zie ik
      een interactie ontwerper vanuit de context van het web, maar dat kan met persoonlijke achtergrond te maken hebben.

      Sowieso is een discussie over definities lastig omdat je altijd verschillende interpretaties kunt hebben. Wat de een als interactie ontwerper omschrijft ziet een ander als user experience designer. En waar persoon A verwacht dat een interactie ontwerper ook het grafisch design doet gaat persoon B ervanuit dat hij ook het strategiedeel voor zijn rekening neemt.

      Je Mercedes expert zie ik meer als een user experience
      designer, maar tegelijkertijd is dat verwarrend omdat die term ook
      on-line gebruikt wordt.

      Kortom: ik denk dat het definitieprobleem nog wel even blijft en je vraag daarom niet zo eenvoudig te beantwoorden is.

      Groeten Ivo