User Experience Design (UXD) paper prototype

Inhoud
1
. Wat is een paper prototype?
2. Waarom maak je een
paper prototype?
3. Wanneer maak je een
paper prototype?
4. Opdracht
15: maak een paper prototype.
5. Voorbeeld.

Richard Slakhorst


1. Wat is een paper prototype?

Paper prototyping is een veelgebruikte, eenvoudige methode om op een laagdrempelige manier nieuwe interfaces, websites, apps of landingspagina’s te maken en te testen. Het is een manier die snel en met weinig middelen te doen is. Voor een paper prototype werk je op papier, wat natuurlijk erg makkelijk is. Het helpt om snelle, soms zelfs getekende, interfaces, website, app of landingspagina te bedenken en te testen.

Zonder te ontwerpen en te bouwen geven prototypes al in een vroeg stadium een goed beeld van de website of app. Het paper prototype kan al goed getest worden met vijf personen uit de doelgroep. Als blijkt dat de doelgroep er niet uitkomt, dan pas je het prototype aan. Daarna test je de aanpassingen die dan wel gaan werken. Na de paper prototype-sessie werk je het concept verder uit via Adobe XD.

We kennen 3 soorten prototypen:

1. Low-fidelity paper prototype
De basis is papier en stiften. Schetsmatige opzet voor een snelle test.

2.High-fidelity paper prototype
Onderdelen worden uitgeprint, vaak voorbereid in Illustrator met gedetailleerde lay-out Of er wordt een Full colour lay-out tekenen gemaakt met Fineliner stiften.

High-fidelity test station

3. Digitale klikbare prototype – een mockup
Deze wordt meestal met software uitgewerkt, meestal voorbereid in Illustrator en wordt dan bewerkt met prototype software. De software waar wij mee werken op school is Adobe XD.



2. Waarom maak je een paper prototype?

Waarom is low-fidelity paper prototyping zo belangrijk in het ontwerpproces? Jouw ontworpen interface, website of app kan nog zo mooi zijn en zelfs bovenaan in Google staan, maar dat maakt je website nog niet automatisch tot een succes. Stel je voor: duizenden bezoekers waarvan er niet één in actie komt door te bellen, mailen of bestellen. Dit kan je voorkomen door je website eerst te ontwikkelen als een paper prototype.

Met prototyping test je op een snelle manier ideeën, usability en interaction design. Deze kan je dan ook direct verbeteren zonder tijd en geld te verspillen.

Je leert wat echt belangrijk is
Deze methode helpt om erachter te komen wat je klanten echt belangrijk vinden. Zo voorkom je dat je veel tijd stopt in iets wat klanten niet gebruiken en wat geen omzet oplevert.
• Klanten worden heel laagdrempelig betrokken
Klanten uit de doelgroep worden in een vroeg stadium betrokken bij het ontwerpproces.
• Het is snel en effectief
Ook al ben je nog zo snel op een computer of kan je snel tekenen: door met een paar onderdelen te kunnen schuiven wordt direct zichtbaar of iets een goed idee is.
• Het is extreem praktisch en voegt direct waarde toe
Er komen praktische ideeën uit deze sessie die je direct kunt toepassen. Zo kom je erachter dat klanten iets niet begrijpen en kunnen zij ook direct vertellen wat ze prettig vinden.

Met dit soort feedback valt er snel en goedkoop winst te behalen met je website of app.

High-fidelity test met een proef persoon.
UXD Lab

3. Wanneer maak je een paper prototype?

Je begint zo vroeg mogelijk met paper prototypes te maken. Het samen ontwikkelen via een paper prototype is er om ervoor te zorgen dat de resultaten voldoen aan de behoeften van de doelgroep en dat zo ook de bedrijfsdoelen worden gehaald.

Iedereen houdt van prototypes: of je nu een prototype laat zien aan je klanten, de CEO of aan een mogelijke investeerder. De ogen van mensen gaan gelijk fonkelen en grijpgrage handjes willen jouw prototype direct vasthouden en testen. Hoe lelijk of ‘houtje-touwtje’ het prototype ook is. Wanneer je binnenkomt met een prototype van je idee onder je arm wordt er direct naar je geluisterd en nemen mensen je serieus.

Maar uiteindelijk wil je succes boeken met jouw ontwerp en dat betekent dat de klant in actie moet komen. Hoe ga jij dat bereiken? Dat begint met testen.

Richard Slakhorst. Low-fidelity test. Goed


4. Opdracht 15: low-fidelity paper prototype

 F2M4-VRMG  Opdracht 16: paper prototype 

Wat ga je doen in deze opdracht?

In deze opdracht leer je ontdekken wat een paper prototype voor jou als ontwerper kan betekenen. Je gaat onderzoeken hoe je met simpele middelen – papier, pen en een goed idee – snel inzichten kunt krijgen in de gebruiksvriendelijkheid van je ontwerp. Je kiest twee interessante interacties uit jouw concept en werkt deze uit in een paper prototype. Vervolgens laat je een gebruiker deze interacties testen. Tijdens de test film je het gedrag van de gebruiker, zodat je goed kunt analyseren wat er wel en niet werkt. Zo ervaar je de kracht van testen in een vroeg stadium van het ontwerptraject.

Je gaat nu low-high fidelity paper prototype maken.
Heb hebt bij Bethuel Heldt DIG-webdesign een Single Product site Prototype gemaakt in figma Zoals je weet, zitten in een website verschillende interactieve onderdelen zoals knoppen, uitklapbare, menu’s, slideshow etc. Om de opdrachtgever ervan te overtuigen dat jij de juiste persoon bent voor deze klus ga nu 2 unieke interessante interactieve onderdelen bedenken en uittesten met een testpersoon.

Stappenplan

1. Bedenk of kies 2 unieke interessante interactieve onderdelen die je wel zou willen gebruiken voor de toekomstige, nog te ontwerpen website.

2. Pak een blanco A4’tje en teken een eenvoudige lay-out van de website. Denk aan de wireframe die je hebt gemaakt in de vorige les.

3. Bedenk en maak daarin, zoals in het voorbeeldfilmpje, de door jou bedachte interactie werkzaam via een paper prototype. Zorg dat je op alles bent voorbereid: op alle mogelijke acties/stapjes dus die een testpersoon zou kunnen uitvoeren tijdens de test.

4. Als je klaar bent met de voorbereidingen, vraag dan aan een medestudent of een familielid of deze jouw testpersoon wil zijn en voer de test met deze persoon uit. Zorg ervoor dat de testpersoon nog van niks weet. Vraag aan de testpersoon intuïtief te drukken op een willekeurig onderdeel van jouw paper prototype. Maak daar een filmpje van met je mobiel.

5. Observeer en bespreek met de testpersoon wat deze ervan vond en waar de testpersoon eventueel vastliep test filmpje terug en analyseren wat beter kan.
Schrijf dat op in minimaal een alinea tekst (testrapportje).

6Met je testrapportje heb je nieuwe inzichten gekregen over wat beter zou kunnen. Breng die verbeteringen aan. Maak dus een verbeterde paper prototype en doe je test opnieuw. Film dit 2e filmpje ook.

Inleveren
De 2 filmpjes : 
1 Het 1e test filmpje. 
2 Het testrapportje (maximaal een alinea tekst) (Word document) met wat er beter kan

! Let op ! Beoordelingscriteria

  • 2 filmpje. De test 1e en het 2e  test filmpje (Zie het voorbeeldfilmpje)
  • Het testrapportje (maximaal een alinea tekst)
  • Film met je mobiel en exporteer er een mp4 of MOV van.
  • Een one-shot filmpje.
  • Duidelijke visuele acties/antwoorden van de testpersoon. 
INLEVERWIJZE
Inleveren via de inleverlink.

DEADLINE 
week 1: Het test filmpje 1 en 2 Einde van de dag/week + Het testrapportje (maximaal een alinea tekst) (Word document) met wat er beter kan

RESULTAAT
een duidelijk test one-shot filmpje met vingers die iedere keer duidelijk ergens op drukken en met een duidelijk visueel antwoord op elke actie die de test persoon uitvoert.


5.Voorbeelden.

2 Low-fidelity test goed
1 Low-fidelity test goed