Paper Prototyping for Agile Development
-
Upload
max-gaponov -
Category
Technology
-
view
116 -
download
1
description
Transcript of Paper Prototyping for Agile Development
![Page 1: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/1.jpg)
Paper prototyping for Agile Development
Agile Eastern Europe 2011
![Page 3: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/3.jpg)
What are we going to talk about?
![Page 4: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/4.jpg)
What is a Prototype?
Prototype is a working model of future system
![Page 5: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/5.jpg)
What fields do use prototyping?
• Architecture
• Engineering
• Automobile industry
• Art
• Software
![Page 6: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/6.jpg)
This talk was a prototype first ;)
![Page 7: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/7.jpg)
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
![Page 8: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/8.jpg)
Prototype is documentation
• Far more compact than text
• Does not take much time to understand
• Simplifies development
• Reduces development time
![Page 9: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/9.jpg)
Prototype is communication
— So, it’s all clear?
— Sure!!!
![Page 10: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/10.jpg)
What do we need for prototyping?
We need to understand process of use of a product:
![Page 11: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/11.jpg)
How product is born?
Strategy
Scope
Structure
Skeleton
Surface
![Page 12: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/12.jpg)
Time and place for prototyping
Prot
otyp
ing
Strategy
Scope
Structure
Skeleton
Surface
![Page 13: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/13.jpg)
Prototyping ways are many
• Paper Prototyping
• HTML/CSS/JS
• PowerPoint/Keynote
• Axure RP Pro/iRise
• Excel/Numbers
![Page 14: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/14.jpg)
Why paper prototyping?
![Page 15: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/15.jpg)
It’s simple!
![Page 16: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/16.jpg)
Who can draw?
![Page 17: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/17.jpg)
And when you were children? ;)
![Page 18: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/18.jpg)
The only important thing is understanding
![Page 19: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/19.jpg)
Paper prototypes have right fidelity
![Page 20: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/20.jpg)
Paper prototypes can be done together!
![Page 21: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/21.jpg)
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
![Page 22: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/22.jpg)
What tools do we need?
• Paper
• Transparent film
• Post-it notes
• Scissors
• Removable tape
• Pens, pencils, markers
![Page 23: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/23.jpg)
Some more tools...
![Page 24: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/24.jpg)
I’ve got my own...
![Page 25: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/25.jpg)
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.
![Page 26: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/26.jpg)
Let’s build a prototype for search
![Page 27: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/27.jpg)
Take a look and add some details
![Page 28: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/28.jpg)
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.
![Page 29: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/29.jpg)
In animation and movies they use storyboards
![Page 30: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/30.jpg)
We can use sketchboards
![Page 31: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/31.jpg)
Galleries sketchboard
![Page 32: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/32.jpg)
Let’s build a gallery edit prototype
![Page 33: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/33.jpg)
We can add a photo
![Page 34: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/34.jpg)
Photo added...
![Page 35: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/35.jpg)
We can setup access to gallery
![Page 36: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/36.jpg)
Access granted...
![Page 37: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/37.jpg)
They often say paper prototypes lack interactivity
![Page 38: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/38.jpg)
Let’s edit personal data
![Page 39: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/39.jpg)
Let’s add a child
![Page 40: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/40.jpg)
Is that interactive? Absolutely, yep...
![Page 41: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/41.jpg)
Paper prototypes testing
![Page 42: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/42.jpg)
What do we need for testing?
• Target group
• Testing tasks
• Helpers
![Page 43: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/43.jpg)
Our helpers
FacimanMr. Smith. He
solves problems ;)
CompumanManipulates a
prototype according to user
actions
WatchmanListens and writes down everything
![Page 44: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/44.jpg)
What are testing tasks?
• Goal
• Input data
• User steps
• Notes
![Page 45: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/45.jpg)
How to analyze test results?
• All tasks completed?
• User remarks?
• Watchman notes?
![Page 46: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/46.jpg)
Let’s refinine search prototype a bit
![Page 47: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/47.jpg)
Let’s refine galleries
![Page 48: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/48.jpg)
Rename a gallery on edit page
![Page 49: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/49.jpg)
Turn a photo
![Page 50: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/50.jpg)
It’s better now!
![Page 51: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/51.jpg)
Then test again... and refine again...
Prototyping is a process
![Page 52: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/52.jpg)
And one more thing
Paper prototyping is a mindset
![Page 53: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/53.jpg)
Home reading
User Experience:
• About Face, Alan Cooper
• The Elements of User Experience, Jesse James Garrett
• Jeff Patton articles and talks
Prototyping:
• Prototyping: A Practitioner’s Guide, Todd Zaki Warfel
• Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces, Carolyn Snyder
![Page 54: Paper Prototyping for Agile Development](https://reader036.fdocuments.net/reader036/viewer/2022081414/54c7f9bd4a7959b2448b4592/html5/thumbnails/54.jpg)
Thanks!