Paper prototyping for Agile Development Agile Eastern Europe 2011
Jan 28, 2015
Paper prototyping for Agile Development
Agile Eastern Europe 2011
Who am I?
Max GaponovCertified Scrum Product OwnerAgile coach, CIO at [email protected]
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 production
• Get an ability to change something before production
Prototype is documentation
• Far more compact than text
• Does not take much time to understand
• Simplifies development
• Reduces development time
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?
Strategy
Scope
Structure
Skeleton
Surface
Time and place for prototyping
Prot
otyp
ing
Strategy
Scope
Structure
Skeleton
Surface
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 technical skills
• There is no court for paper prototypes
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:
User types text into a search form, push a «Search» button and gets a page with search results.
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 fotos with my friends.
How to demo:
Gallery creation/edit; load a photo; sign a photo; access setup to gallery; show a gallery.
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
FacimanMr. Smith. He
solves problems ;)
CompumanManipulates a
prototype according to user
actions
WatchmanListens and writes down everything
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 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
Thanks!