Paper prototypingfor Agile Development   Agile Eastern Europe 2011
Who am I?            Max Gaponov            Certified Scrum Product Owner            Agile coach, CIO at Banki.ru          ...
What are we going to talk about?
What is a Prototype?  Prototype is a  working model of  future system
What fields do use prototyping?•   Architecture•   Engineering•   Automobile industry•   Art•   Software
This talk was a prototype first ;)
What prototypes are made for?• Know more about a product• Get a feedback• Get information about possible problems during  ...
Prototype is documentation•   Far more compact than text•   Does not take much time to understand•   Simplifies development...
Prototype is communication    — So, it’s all clear?    — Sure!!!
What do we need for prototyping?    We need to understand process of use of a    product:
How product is born?                       Surface                       Skeleton                       Structure         ...
Time and place for prototyping                       Surface                                  Prototyping                 ...
Prototyping ways are many•   Paper Prototyping•   HTML/CSS/JS•   PowerPoint/Keynote•   Axure RP Pro/iRise•   Excel/Numbers
Why paper prototyping?
It’s simple!
Who can draw?
And when you were children? ;)
The only important thing is understanding
Paper prototypes have right fidelity
Paper prototypes can be done together!
Some more coins into the pig...•   Paper prototyping is the fastest way•   Help to force decisions•   Irrelevant to techni...
What tools do we need?•   Paper•   Transparent film•   Post-it notes•   Scissors•   Removable tape•   Pens, pencils, markers
Some more tools...
I’ve got my own...
Simple example: site search  What to do:  As a user I can search a site to find content that  interests me.  How to demo:  ...
Let’s build a prototype for search
Take a look and add some details
Little bit harder: photo gallery  What to do:  As a registered user I can create and edit galleries  so I can share my fot...
In animation and movies they use storyboards
We can use sketchboards
Galleries sketchboard
Let’s build a gallery edit prototype
We can add a photo
Photo added...
We can setup access to gallery
Access granted...
They often say paper prototypes lack interactivity
Let’s edit personal data
Let’s add a child
Is that interactive? Absolutely, yep...
Paper prototypes testing
What do we need for testing?• Target group• Testing tasks• Helpers
Our helpers    Faciman           Compuman             Watchman  Mr. Smith. He        Manipulates a     Listens and writess...
What are testing tasks?•   Goal•   Input data•   User steps•   Notes
How to analyze test results?• All tasks completed?• User remarks?• Watchman notes?
Let’s refinine search prototype a bit
Let’s refine galleries
Rename a gallery on edit page
Turn a photo
It’s better now!
Then test again... and refine again...                 Prototyping is a                    process
And one more thing          Paper prototyping is a                mindset
Home readingUser Experience:             Prototyping:• About Face, Alan           • Prototyping: A  Cooper                ...
Thanks!
Upcoming SlideShare
Loading in...5
×

Paper Prototyping for Agile Development

2,534

Published on

Published in: Technology

Paper Prototyping for Agile Development

  1. 1. Paper prototypingfor Agile Development Agile Eastern Europe 2011
  2. 2. Who am I? Max Gaponov Certified Scrum Product Owner Agile coach, CIO at Banki.ru mgaponov@gmail.com
  3. 3. What are we going to talk about?
  4. 4. What is a Prototype? Prototype is a working model of future system
  5. 5. What fields do use prototyping?• Architecture• Engineering• Automobile industry• Art• Software
  6. 6. This talk was a prototype first ;)
  7. 7. What prototypes are made for?• Know more about a product• Get a feedback• Get information about possible problems during production• Get an ability to change something before production
  8. 8. Prototype is documentation• Far more compact than text• Does not take much time to understand• Simplifies development• Reduces development time
  9. 9. Prototype is communication — So, it’s all clear? — Sure!!!
  10. 10. What do we need for prototyping? We need to understand process of use of a product:
  11. 11. How product is born? Surface Skeleton Structure Scope Strategy
  12. 12. Time and place for prototyping Surface Prototyping Skeleton Structure Scope Strategy
  13. 13. Prototyping ways are many• Paper Prototyping• HTML/CSS/JS• PowerPoint/Keynote• Axure RP Pro/iRise• Excel/Numbers
  14. 14. Why paper prototyping?
  15. 15. It’s simple!
  16. 16. Who can draw?
  17. 17. And when you were children? ;)
  18. 18. The only important thing is understanding
  19. 19. Paper prototypes have right fidelity
  20. 20. Paper prototypes can be done together!
  21. 21. Some more coins into the pig...• Paper prototyping is the fastest way• Help to force decisions• Irrelevant to technical skills• There is no court for paper prototypes
  22. 22. What tools do we need?• Paper• Transparent film• Post-it notes• Scissors• Removable tape• Pens, pencils, markers
  23. 23. Some more tools...
  24. 24. I’ve got my own...
  25. 25. Simple example: site search What to do: As a user I can search a site to find content that interests me. How to demo: User types text into a search form, push a «Search» button and gets a page with search results.
  26. 26. Let’s build a prototype for search
  27. 27. Take a look and add some details
  28. 28. Little bit harder: photo gallery What to do: As a registered user I can create and edit galleries so I can share my fotos with my friends. How to demo: Gallery creation/edit; load a photo; sign a photo; access setup to gallery; show a gallery.
  29. 29. In animation and movies they use storyboards
  30. 30. We can use sketchboards
  31. 31. Galleries sketchboard
  32. 32. Let’s build a gallery edit prototype
  33. 33. We can add a photo
  34. 34. Photo added...
  35. 35. We can setup access to gallery
  36. 36. Access granted...
  37. 37. They often say paper prototypes lack interactivity
  38. 38. Let’s edit personal data
  39. 39. Let’s add a child
  40. 40. Is that interactive? Absolutely, yep...
  41. 41. Paper prototypes testing
  42. 42. What do we need for testing?• Target group• Testing tasks• Helpers
  43. 43. Our helpers Faciman Compuman Watchman Mr. Smith. He Manipulates a Listens and writessolves problems ;) prototype down everything according to user actions
  44. 44. What are testing tasks?• Goal• Input data• User steps• Notes
  45. 45. How to analyze test results?• All tasks completed?• User remarks?• Watchman notes?
  46. 46. Let’s refinine search prototype a bit
  47. 47. Let’s refine galleries
  48. 48. Rename a gallery on edit page
  49. 49. Turn a photo
  50. 50. It’s better now!
  51. 51. Then test again... and refine again... Prototyping is a process
  52. 52. And one more thing Paper prototyping is a mindset
  53. 53. Home readingUser Experience: Prototyping:• About Face, Alan • Prototyping: A Cooper Practitioner’s Guide,• The Elements of User Todd Zaki Warfel Experience, Jesse James • Paper Prototyping: The Garrett Fast and Easy Way to• Jeff Patton articles and Design and Refine User talks Interfaces, Carolyn Snyder
  54. 54. Thanks!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×