Prototyping met Post-its en Pritt

Verslag 8e masterclass: Prototyping & design

12 Feb 2013

Je leert het meeste over de werking van je digitale concept door het gewoon eens uit te tekenen en door iemand te laten testen. Yuri Westplat en Frank Kloos, ontwerpers en docenten aan de Hogeschool van Amsterdam, kwamen de deelnemers van The Challenge vertellen hoe je dat handig kan doen.

Door: Casper Wolfert

De teams van The Challenge zijn geen programmeurs of interaction designers. Toch is het goed om een paar beginselen van het ontwerpen van een site te leren.

Westplat: “Op een gegeven moment moet je je kind uit handen geven en gaan designers er hun ding mee doen. Dan is het toch fijn als je daar zelf wat vanaf weet.”

Bezoekers beïnvloeden door design

Het verhogen van de ‘conversie’ is waar het allemaal om draait bij het ontwerpen van een website. Je conversiedoel is datgene wat je wilt dat een bezoeker doet of bereikt. Bij online shops is het conversiedoel het maken van een aankoop. Het percentage van de bezoekers dat daadwerkelijk over gaat tot het kopen van een product noem je dan de conversie. Maar een conversiedoel hoeft niet per se een aankoop te zijn. Bij de projecten van The Challenge zou het ook kunnen gaan om het lezen van een artikel of het insturen van een foto. Met interaction design probeer je de keuzes van je bezoeker te beïnvloeden en zo de conversie te verhogen.

Het nadenken over het design van je app of website vraagt een heel andere insteek van de deelnemers van The Challenge. Westplat: “Laat even al je plannen en businessmodellen los en bedenk eens wie er eigenlijk je website gaat bezoeken, door je app gaat swipen of je product gaat kopen.” Met Post-its moesten de deelnemers een scenario maken: Welke stappen doorloopt een bezoeker op de site om bij het conversiedoel te komen? Van dat scenario moest vervolgens een storyboard worden gemaakt, met tekeningen van de verschillende pagina’s. Met A4'tjes, scharen en pritt-stiften werd van alle projecten een storyboard geknutseld.

Bekijk de presentatie van Westplat en Kloos

75 procent van je fouten eruit

Met zo’n storyboard kan je al vrij makkelijk je design gaan testen. Laat de tekening van je homepage aan een testpersoon zien en ga vragen stellen: Waar zou je op klikken om in te loggen? Wat verwacht je als je op deze knop drukt? Vraag niet om meningen, maar verwachtingen. Stel open vragen en stimuleer je testpersoon hardop te denken, zo vertelden Kloos en Westplat. Een goede test kan veel nuttige feedback opleveren. Kloos: “Het is statistisch bewezen dat je met drie testpersonen al 75 procent van je ontwerpfouten en knelpunten uit je concept kan halen.” Kloos adviseert verder de test met een camera op te nemen en om een collega aantekeningen te laten maken voor een verslag.

Naast het testen op basis van een papieren storyboard is het altijd leerzaam om een prototype te ontwikkelen. Kloos: “Je gaat anders naar je product kijken door ‘te doen’. Als je prototypt leer je beter begrijpen waar je product eigenlijk om gaat. Je komt er bijvoorbeeld achter dat een bepaalde knop helemaal verkeerd zit of dat je in je concept nog een stap mist.” Daarnaast is een prototype een sterke manier om geïnteresseerden of investeerders te laten zien waar je concept om gaat. Kloos haalde Confucius aan om de kracht van het prototype uit te leggen:

"Tell me, and I will forget. Show me, and I may remember. Involve me, and I will understand."

Deelnemers knutselen aan storyboard
Deelnemers knutselen aan storyboard

Zelf aan de slag

Er zijn ontzettend veel apps en websites die je kunnen helpen om in een paar stappen al een prototype te bouwen. Eén van de teams gebruikte de iPhone app Pop, waarmee je met je eigen tekeningen een app kan ontwerpen. In dit artikel van Memeburn vind je een overzicht van de 25 beste wireframe en prototyping tools.

Andere aanraders van Westplat en Kloos waren slideshares over mobile prototyping en trends in interactive design. Websites om bij te houden over het onderwerp zijn Patterntap en Smashing Magazine.

Tot slot de boekentips, voor wie zich nog meer wil verdiepen in interactive design:

  • Steve Krug - Don't Make Me Think (Usability)
  • Steve Krug - It's Not Rocket Surgery (Usability Testing)
  • Susan Weinschenk- 100 Things Every Designer Needs to Know About People (Cognitive Psychology)
  • Mark Boulton- A Practicle Guide to Designing for the Web (Visual Design)
  • Rachel Hinman - The Mobile Frontier (UX Design)

Foto’s: Rick van Dijk