tws 2014 – paper prototyping
DESCRIPTION
Tallinn Winter School. Day 4: Paper prototyping. Experimental interaction workshop.TRANSCRIPT
![Page 1: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/1.jpg)
Paper PrototypingA cheap and quick lo-fi design approach
Tallinn Winter School / Experimental Interaction Design 2014
![Page 2: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/2.jpg)
Recap
![Page 3: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/3.jpg)
Goals
http://static.ddmcdn.com/gif/relieve-toothache-1.jpg
Life goals “Live long and
prosper”
Experience goals
“Feel good”
End goals“Get rid ofthis pain”
![Page 4: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/4.jpg)
Why should we care about user goals?
http://static.ddmcdn.com/gif/relieve-toothache-1.jpg
• Main source for the IxD (and hopefully the foundation for the whole business)
• A ”reality check”
• Ground for making useful and usable solutions
![Page 5: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/5.jpg)
Persona
A design tool –
Imaginative user archetype, which represents a group of people with similar behavior patterns and goals.
![Page 6: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/6.jpg)
Scenario
A design tool –
A quick way to illustrate user’s goals, actions, motivations and overall interaction with the product though imaginative (research based) stories.
![Page 7: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/7.jpg)
User stories / Use cases
Design tools –
Detailed descriptions of steps or actions of a process, which helps theuser to achieve a specific goal.
![Page 8: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/8.jpg)
Data
Primary
Persona Scenario Use Cases
A-1 A1-a, AI-bUsersGoals
What will your product do?
Low fidelity prototyping
![Page 9: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/9.jpg)
Low-fidelityprototyping
![Page 10: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/10.jpg)
Throwaway prototypes, which translate user stories and use cases into visual
specifications.
![Page 11: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/11.jpg)
• Cheap and quick way to communicate ideas
• Lowers barrier for suggesting and makingdesign changes
• Disposable
• Can be tested with users
Purpose?
![Page 12: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/12.jpg)
When to use?e.g.
• During brainstorming and discussion• To clear out misunderstandings• State transitions• Before making significant design efforts• Rapid prototyping and testing• Prior making changes based on usability tests
![Page 13: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/13.jpg)
Few examples...Be creative! :)
![Page 14: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/14.jpg)
Simple drafts
![Page 15: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/15.jpg)
Simple wireframe layout
A “pop-up”
![Page 16: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/16.jpg)
Using notebook as a frame with a grid
![Page 17: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/17.jpg)
Use case visualization
“As a first time user I want to make
a visual note”
![Page 18: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/18.jpg)
“Interactive map”
http://buscityroute.wordpress.com/
![Page 19: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/19.jpg)
Interaction storyboard as an animation (gif, PDF, photo gallery...)
![Page 20: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/20.jpg)
Stencils
Frames
Post-it notes
http://www.tripwiremagazine.com/2012/07/free-printable-sketching-wireframing-templates.htmlhttp://wireframes.linowski.ca/2009/11/paper-prototype-cutouts/
![Page 21: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/21.jpg)
Today’s To Do
Create paper wireframes that visualize the process of solving your persona’s main goal(s).
Document in your blog.
![Page 22: TWS 2014 – Paper Prototyping](https://reader033.vdocument.in/reader033/viewer/2022051515/54c71b7c4a795998438b4597/html5/thumbnails/22.jpg)
Reference
• Cooper, A., Reinmann, R., Cronin, D. (2007). About Face 3: The Essentials of Interaction Design. England: Wiley
• Goodwin, Kim. 2001. “Perfecting Your Personas.” Cooper Newsletter, July/August.