Prototyping met Post-its en Pritt

Storyboard van LocalFocusJe 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.

Verslag van de achtste masterclass van The Challenge op 12 februari. Dit stuk verscheen ook op persinnovatie.nl

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

Zelf aan de slag

Deelnemers druk aan het knutselen

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.

Foto’s: Rick van Dijk

About these ads

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s