prototyping intro for the shortcut weekend
TRANSCRIPT
Prototyping
What is prototypingA prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. (Wikipedia)
Why do we prototype?• have fun• save money• fail fast, learn fast• get approval from stakeholders• reduce risk• communicate• understand
TimePhoto: Nick Webb, Flickr
All kinds of prototyping• Wizard of Oz• Paper prototypes• Concept sheets• Photo mockups• Screen mockups• Interactive prototypes• Final product mockups
• Fake landing pages• Fake ads (online + offline)• Concierge service• Legos• Board-game-like toolkits• Existing products• Hacking
Which prototype for what purpose?
Are you trying to...• have fun with prototyping?• impress your teacher /
customer /investor?• see if something is usable?• see if something is useful?
• see if someone will pay for it?• communicate how something
should be built?• ...?
Today we will make...• Wizard of Oz• Paper prototypes• Concept sheets• Photo mockups• Screen mockups• Interactive prototypes• Final product mockups
• Fake landing pages• Fake ads (online + offline)• Concierge service• Legos• Board-game-like toolkits• Existing products• Hacking
EXAMPLES
Paper prototypes
Paper prototypes
Paper prototypingComptel proto 1
Paper prototypingComptel proto 2
Paper prototypingComptel Final
BUILDING THE PROTOTYPE
Big picture first, details second
What should you prototype first and why?
Prioritize
Choose your resolution:Finer lines, smaller paper
Choose your resolution:Thicker lines, bigger paper
Grids, Guides & Stencils
http://www.uistencils.com/
Be modular!Be modular
Be iterative
Drop-shadow
Be modular!Colours
InVision
TESTING THE PROTOTYPE
Let it hurt
Photo: erizof, Flickr
Listen
Photo: erizof, Flickr
Planning the user test
• Assign roles: interviewer, note-taker, photographer• What do you want to test? • Rough interview plan• Tasks / questions
• Could you tell me what you see in this screen and what you think it means?
• Could you try to do x?
Running the user test
• Make them feel welcomed• Tell who you are• Explain user testing: why, what• “We are not testing you, but our concept”• Ask for permission to take photos. Take photos!!• Do not lead the user. Look for problems, not
validation.
WHAT’S THE PLAN?
Prototyping Schedule10:30 Sketch the flow - 15min10:45 Sketch the (selected) screens – 1h 15min12:00 Lunch – 30min12:30 Make it click – 1h13:30 Plan user testing – 15min13:45 Test with users – 15 min14:00 Insights from interviews – 10min14:10 Update prototype – 40min14:50 Break – 10min
10:30 – 10:45
Sketch the flow• Draw a box or use a post-it for each screen you’ll need• Give the screen a title that describes what it does• Draw lines between the screens to show how the
navigation between them goes
10:45 – 12:00
Sketch the selected screens• First decide which screens are the most important to
sketch!• What UI elements + layout are needed on each screen for
performing the screen’s function?• Be modular; be iterative• Use guides & templates• Use drop-shadow & colours
12:30 – 11:30
Make it click• How do you take photos of your screens so that the layout doesn’t jump?• Take photos of all your screens• Upload to InVision (well, create account first)• Create navigation between the screens• Test the prototype inside your team• Fix if needed
13:30 – 13:45
Plan user testing• Assign roles in your team: interviewer, note-taker, photographer• What do you want to test? Overall experience & value proposition?
Usability? Both?• Draft your interview plan: one bullet for intro + one for each task you
will assign to the user or functionality you will inquire about• Plan how to test without leading your user. i.e. “Could you tell me what
you see in this screen and what you think it means?” “Could you try to do x?”
13:45 – 14:00
Test with users• Make your interviewee feel welcomed. Be friendly and smile• Assume / pretend they know nothing about you or your service• Always start with an intro: tell who you are, why you are doing a user test
and what will happen during the session• Ask for permission to take photos. Take photos!!• Do not lead the user. Look for problems, not validation.
14:00 – 14:10
Insights from interviews• Discuss in your team: what did you learn that was interesting?• What in your design didn’t work? What are some ideas for improvement?• Take notes of this discussion.• Prioritize: what will you improve in your design? (or should you through it
into the bin altogether?)
14:10 – 14:50
Update prototype• Fix those parts of your prototype that didn’t work• If nothing to fix, you may add essential functionality that you didn’t have
time to add before. Or record a video of how your prototype works• If nothing to add, work on other parts of your concept.
Sebi [email protected]+35840 774 0124