Successfully reported this slideshow.

Paper Prototyping Basics (IxDworks.com)

502 views

Published on

Create simple paper prototypes with tools at hand.

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

Paper Prototyping Basics (IxDworks.com)

  1. 1. Paper Prototyping A cheap and quick lo-fi design approach IxDworks.com 2014
  2. 2. Recap
  3. 3. Goals http://static.ddmcdn.com/gif/relieve-toothache-1.jpg Life goals “Live long and prosper” Experience goals “Feel good” End goals “Get rid of this pain”
  4. 4. 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
  5. 5. Persona A design tool – Imaginative user archetype, which represents a group of people with similar behavior patterns and goals.
  6. 6. 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.
  7. 7. User stories / Use cases Design tools – Detailed descriptions of steps or actions of a process, which helps the user to achieve a specific goal.
  8. 8. Data Primary Persona Scenario Use Cases A-1 A1-a, AI-b Users Goals What will your product do? Low fidelity prototyping
  9. 9. Low-fidelity prototyping
  10. 10. Throwaway prototypes, which translate user stories and use cases into visual specifications.
  11. 11. • Cheap and quick way to communicate ideas • Lowers barrier for suggesting and making design changes • Disposable • Can be tested with users Purpose?
  12. 12. 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
  13. 13. Few examples... Be creative! :)
  14. 14. Simple drafts
  15. 15. Simple wireframe layout A “pop-up”
  16. 16. Using notebook as a frame with a grid
  17. 17. Use case visualization “As a first time user I want to make a visual note”
  18. 18. “Interactive map” http://buscityroute.wordpress.com/
  19. 19. Interaction storyboard as an animation (gif, PDF, photo gallery...)
  20. 20. Stencils Frames Post-it notes http://www.tripwiremagazine.com/2012/07/free-printable-sketching-wireframing-templates.html http://wireframes.linowski.ca/2009/11/paper-prototype-cutouts/
  21. 21. Today’s To Do Create paper wireframes that visualize the process of solving your persona’s main goal(s).
  22. 22. Reference • Cooper,A., Reinmann, R., Cronin, D. (2007). About Face 3:The Essentials of Interaction Design. England:Wiley • Goodwin, Kim. 2001.“PerfectingYour Personas.” Cooper Newsletter, July/August.

×